import{a as ct}from"./chunk-JN2ZUHXX.js";import{a as de}from"./chunk-NLCRYDJ4.js";import{a as lt}from"./chunk-RB5TOXJE.js";import{a as ce}from"./chunk-G7OJYPNY.js";import{a as dt,b as Pt}from"./chunk-3GSDFESG.js";import{a as pt}from"./chunk-7QEXVS2A.js";import{e as mt}from"./chunk-5KCUTXXV.js";import{b as ft}from"./chunk-LAJI7RPC.js";import{a as at}from"./chunk-WFZJP5WR.js";import{C as Y,D as h,E as R,F as se,I as _,k as B,nb as st,s as tt,v as it,y as nt,z as Fe,zb as le}from"./chunk-YSQLW2JA.js";import{od as Te}from"./chunk-NVJ2ZZFT.js";import{$e as Je,Aa as a,Ba as m,Cb as Qe,Da as T,Dc as d,De as Q,Ea as ke,Fg as ot,He as u,Id as qe,Ie as Ee,Ig as ae,Jg as y,Ka as Re,Lb as P,Ma as _e,Mb as x,Na as De,Nc as E,Pa as Ie,Pd as oe,Qf as k,Ra as Ne,Rd as Ye,S as M,Sa as Ae,Sd as Ke,Se as Ze,Te as v,Ue as G,Va as w,Ve as U,W as we,Wb as ne,Xb as Ge,Yb as Ue,Ye as j,Yg as rt,_a as D,_e as We,ab as C,af as Xe,bb as g,bg as et,ca as Ce,cb as O,cd as z,db as S,dc as Le,dd as p,eb as Ve,fc as je,g as Mt,ga as L,gc as Be,ha as c,hb as Me,hc as $e,ib as Pe,jb as ze,ma as Oe,mg as re,pa as ee,rb as ie,va as Se,wa as b,xa as F,ya as f,za as te,zc as He}from"./chunk-SKPDQO4E.js";var N;(function(o){o[o.NotExists=0]="NotExists",o[o.Member=1]="Member",o[o.Visitor=2]="Visitor",o[o.NotPermitted=3]="NotPermitted"})(N||(N={}));var me={NEW_CREDENTIAL:"TempCredential-"};var ut=`<div class="px-2">
  <form class="compact dynamicForm" [formGroup]="formGroup">
    <section class="form-block">

      <div class="header-container mt-2 mb-3" *ngIf="header">
        <span *ngIf="header" class="text-md text-bold">{{header | translate}}</span>
        <div *ngIf="showEditButton && formGroup.disabled" class="icon-button" (click)="onEditFormClicked($event)" title="{{'BUTTON.EDIT'
      | translate}}">
          <cds-icon shape="note" style="width: 22px; height: 22px;"></cds-icon>
        </div>
        <div *ngIf="showQRButton && !formGroup.disabled" class="icon-button" (click)="onQRCodeReadClicked($event)"
          title="{{'CREDENTIALTYPE.QR_CODE_READ'
      | translate}}">
          <cds-icon shape="credential_qrcode" style="width: 22px; height: 22px;"></cds-icon>
        </div>
      </div>

      <div class="text-md text-bold" *ngIf="currentSuggestionList.length > 0">{{'COMMON.SUGGESTIONS' | translate}}</div>
      <div class="alert alert-warning" role="alert"
        *ngIf="currentSuggestionList.length > 0 && suggestionListTotal && suggestionListTotal>suggestionListTake">
        {{"COMMON.SUGGESTIONS_TOTAL_INFO"|translate:getSuggestionTranslationData()}}
      </div>
      <div *ngIf="currentSuggestionList.length > 0" class="suggestion-container">
        <div *ngFor="let item of currentSuggestionList" (click)="onSuggestionSelected(item)" class="suggestion"
          [attr.unique]="item.isUniqueMatch" [attr.suggestion-type]="item.suggestionType">
          <div class="icon-container d-flex flex-column align-items-center justify-content-between">
            <cds-icon shape="user" class="cds-icon-18" solid></cds-icon>
            <ng-container *ngIf="item.suggestionType==suggestionType.MERNIS">
              <cds-icon shape="credential_tcidentity" class="cds-icon-18"></cds-icon>
            </ng-container>
          </div>
          <div class="data-container">
            <armon-visitor-profile-state [data]="item"></armon-visitor-profile-state>
            <ng-container *ngIf="item.captionLines && item.captionLines.length>0">
              <span *ngFor="let captionLine of item.captionLines; let first=first;" class="caption-line"
                [attr.first]="first">
                {{captionLine}}
              </span>
            </ng-container>
            <span class="search-fields" *ngIf="item.searchFieldsText">{{item.searchFieldsText}}</span>
            <ng-container *ngIf="item.autoFillFields && item.autoFillFields.length>0">
              <span *ngFor="let autoFillField of item.autoFillFields; let first=first;" class="auto-fill-line"
                [attr.first]="first">
                {{autoFillField.value}}
              </span>
            </ng-container>
          </div>
        </div>
        <div *ngIf="currentSuggestionList.length > 0 && suggestionListTotal && suggestionListTotal>suggestionListTake"
          class="suggestion-total">
          <div>+{{suggestionListTotal-suggestionListTake}}</div>
        </div>
      </div>

      <!-- MULTI COLUMN -->
      <div *ngIf="formFieldsLayout.length > 1" class="row">

        <div class="col-md-6 col-sm-12" *ngFor="let formLayoutItems of formFieldsLayout">
          <div class="form-group" *ngFor="let formLayout of formLayoutItems; let row = index">
            <dynamic-form-item [formGroupDefinition]="formGroup" [formFieldDefinition]="formLayout.items[0]"
              [fieldEndpoint]="fieldEndpoint" [formEndpoint]="formEndpoint" [hasNeighbor]="false"
              [atFirstRow]="row === 0" [suggestions]="currentSuggestionList" [ignoreRequiredInfo]="ignoreRequiredInfo"
              [isEmptyForm]="isEmptyForm" #formItem (fieldOnFocus)="onFieldFocus($event)"
              (fieldOnBlur)="onFieldBlur($event)" (suggestionFieldChanged)="onSuggestionFieldChanged($event)"
              (selectOptionAdded)="onSelectOptionAdded($event)" (selectOptionRemoved)="onSelectOptionRemoved($event)">
            </dynamic-form-item>
          </div>
        </div>
      </div>

      <!-- ONE COLUMN -->
      <div *ngIf="formFieldsLayout.length == 1">
        <div *ngFor="let formLayout of formFieldsLayout[0]; let row = index">

          <div class="row" *ngIf="formLayout.items.length === 1">
            <div class="col-xl-12">
              <div class="form-group">
                <dynamic-form-item [formGroupDefinition]="formGroup" [formFieldDefinition]="formLayout.items[0]"
                  [fieldEndpoint]="fieldEndpoint" [formEndpoint]="formEndpoint" [hasNeighbor]="false"
                  [atFirstRow]="row === 0" [suggestions]="currentSuggestionList"
                  [ignoreRequiredInfo]="ignoreRequiredInfo" [isEmptyForm]="isEmptyForm" #formItem
                  (fieldOnFocus)="onFieldFocus($event)" (fieldOnBlur)="onFieldBlur($event)"
                  (suggestionFieldChanged)="onSuggestionFieldChanged($event)"
                  (selectOptionAdded)="onSelectOptionAdded($event)"
                  (selectOptionRemoved)="onSelectOptionRemoved($event)">
                </dynamic-form-item>
              </div>
            </div>
          </div>

          <div class="row" *ngIf="formLayout.items.length > 1">
            <div class="col-md-6 col-sm-12" *ngFor="let item of formLayout.items">
              <div class="form-group">
                <dynamic-form-item [formGroupDefinition]="formGroup" [formFieldDefinition]="item"
                  [fieldEndpoint]="fieldEndpoint" [formEndpoint]="formEndpoint" [hasNeighbor]="true"
                  [atFirstRow]="row === 0" (fieldOnFocus)="onFieldFocus($event)" [suggestions]="currentSuggestionList"
                  [ignoreRequiredInfo]="ignoreRequiredInfo" [isEmptyForm]="isEmptyForm"
                  (fieldOnBlur)="onFieldBlur($event)" (suggestionFieldChanged)="onSuggestionFieldChanged($event)"
                  #formItem (selectOptionAdded)="onSelectOptionAdded($event)"
                  (selectOptionRemoved)="onSelectOptionRemoved($event)">
                </dynamic-form-item>
              </div>
            </div>
          </div>

        </div>
      </div>

    </section>
  </form>
</div>

<!-- <pre>{{formGroup.value|json}}</pre> -->
<!-- <pre>{{formFieldsLayout|json}}</pre> -->`;var ht=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}.header-container{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center}.suggestion-container{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;flex-wrap:wrap;padding:4px 0 12px;margin:4px 0}.suggestion-container .suggestion{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;-moz-align-items:stretch;align-items:stretch;margin:.1rem;cursor:pointer}.suggestion-container .suggestion .icon-container{-webkit-border-top-left-radius:.375rem;-moz-border-radius-topleft:.375rem;border-top-left-radius:.375rem;-webkit-border-v-left-radius:.375rem;-moz-border-radius-bottomleft:.375rem;border-bottom-left-radius:.375rem;padding:.2rem;color:#fff;background-color:#bbb}.suggestion-container .suggestion .data-container{padding:.2rem;-webkit-flex-grow:1;-webkit-box-flex:1;-moz-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-border-top-right-radius:.375rem;-moz-border-radius-topv:.375rem;border-top-right-radius:.375rem;-webkit-border-v-right-radius:.375rem;-moz-border-radius-bottomright:.375rem;border-bottom-right-radius:.375rem;border:1px solid #bbb;background-color:#fff;max-width:8rem}.suggestion-container .suggestion .data-container .caption-line{font-size:.588rem}.suggestion-container .suggestion .data-container .caption-line[first=true]{font-size:.756rem;margin:.1rem 0}.suggestion-container .suggestion .data-container .search-fields{margin-top:.2rem;font-size:.756rem}.suggestion-container .suggestion:hover .data-container{background-color:#fff}.suggestion-container .suggestion[unique=true] .icon-container{background-color:#62a325}.suggestion-container .suggestion[unique=true] .data-container{border:1px solid #62a325;background-color:#f0fae7}.suggestion-container .suggestion[unique=true]:hover .data-container{background-color:#c9eba9}.suggestion-container .suggestion[suggestion-type="2"] .icon-container{background-color:#c82602}.suggestion-container .suggestion[suggestion-type="2"] .data-container{border:1px solid #c82602;background-color:#ffe9e4}.suggestion-container .suggestion[suggestion-type="2"]:hover .data-container{background-color:#fed4cb}.suggestion-container .suggestion-total{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;padding:.3rem;font-size:1.092rem;margin:.1rem;-webkit-border-radius:.375rem;-moz-border-radius:.375rem;border-radius:.375rem;color:#3f3300;border:1px solid #ffdb3f;background-color:#ffebb8}
`;var K=class{items=[]};var Z;(function(o){o[o.Narrow=1]="Narrow",o[o.Wide=2]="Wide"})(Z||(Z={}));var gt=`<div [formGroup]="formGroupDefinition" [hidden]="hidden" class="row">
  <div class="col-sm-12 d-flex align-items-center" [ngClass]="{'col-md-2': !hasNeighbor, 'col-md-4': hasNeighbor}"
    *ngIf="hasLabel">
    <label [attr.for]="getElementId(formFieldDefinition)" *ngIf="hasLabel"
      [ngClass]="{'required': formFieldDefinition.required && !ignoreRequiredInfo && formFieldDefinition.type!=5}">{{formFieldDefinition.caption|translate}}</label>
  </div>

  <div class="col-sm-12"
    [ngClass]="{'col-md-10': hasLabel && !hasNeighbor, 'col-md-8': hasLabel && hasNeighbor, 'col-md-12': !hasLabel}">
    <ng-container [ngSwitch]="formFieldDefinition.type">

      <!-- Custom -->
      <ng-container *ngSwitchCase="0"></ng-container>

      <!-- Text -->
      <ng-container *ngSwitchCase="1">

        <ng-container [ngSwitch]="formFieldDefinition.options.type">

          <!-- Text -->
          <ng-container *ngSwitchCase="0">
            <div class="input-group">
              <input [id]="getElementId(formFieldDefinition)" type="text" [formControlName]="formFieldDefinition.name"
                placeholder="{{formFieldDefinition.placeholder}}" [readonly]="formFieldDefinition.readOnly"
                (focus)="onFieldFocus($event)" (blur)="onFieldBlur($event)" #formItem (input)="onTextTypeInput($event)"
                maskInput="{{formFieldDefinition.options?.textMask}}"
                regexSubstr="{{formFieldDefinition.options?.regexSubstr}}" class="form-control form-control-sm"
                [ngClass]="{'is-invalid': isFormFieldInvalid(formFieldDefinition.name)}"
                onlyNumber="{{formFieldDefinition.options?.onlyNumber}}">
              <div class="invalid-feedback"
                *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.required">
                {{'VALIDATION.REQUIRED' | translate}}
              </div>
              <div class="invalid-feedback"
                *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.minlength">
                <span [translate]="'VALIDATION.MIN_LENGTH'"
                  [translateParams]="{min: formFieldDefinition.options.minLength}"></span>
              </div>
              <div class="invalid-feedback"
                *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.maxlength">
                <span [translate]="'VALIDATION.MAX_LENGTH'"
                  [translateParams]="{max: formFieldDefinition.options.maxLength}"></span>
              </div>
              <div class="invalid-feedback"
                *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.min">
                <span [translate]="'VALIDATION.MIN_VALUE'"
                  [translateParams]="{min: formFieldDefinition.options.min}"></span>
              </div>
              <div class="invalid-feedback"
                *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.max">
                <span [translate]="'VALIDATION.MAX_VALUE'"
                  [translateParams]="{max: formFieldDefinition.options.max}"></span>
              </div>
              <div class="invalid-feedback"
                *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.pattern">
                <span>{{formFieldDefinition.regexErrorText}}</span>
              </div>
            </div>
            <!-- <pre>{{formGroupDefinition.get(formFieldDefinition.name).errors|json}}</pre> -->
            <!-- </label> -->


          </ng-container>

          <!-- Typeahead Field -->
          <ng-container *ngSwitchCase="1">

            <dynamic-text-field #dynamicTextField [fieldOptions]="formFieldDefinition.options"
              [control]="formFieldDefinition" [group]="formGroupDefinition" [fieldEndpoint]="fieldEndpoint"
              [formEndpoint]="formEndpoint" [isEmptyForm]="isEmptyForm"></dynamic-text-field>

          </ng-container>

          <!-- Typeahead Form -->
          <ng-container *ngSwitchCase="2">

            <dynamic-text-field #dynamicTextField [fieldOptions]="formFieldDefinition.options"
              [control]="formFieldDefinition" [group]="formGroupDefinition" [fieldEndpoint]="fieldEndpoint"
              [formEndpoint]="formEndpoint" [suggestions]="suggestions" [isEmptyForm]="isEmptyForm"
              (suggestionFieldChanged)="onFieldForSuggestionChanged($event)"></dynamic-text-field>

          </ng-container>

        </ng-container>

      </ng-container>

      <!-- Date -->
      <ng-container *ngSwitchCase="2">

        <div class="input-group input-group-sm">
          <input placeholder="{{'PLACEHOLDER.DATE_SELECT' | translate}}" [formControlName]="formFieldDefinition.name"
            type="text" class="form-control bg-white" readonly owlinput [owlDateTime]="dt1"
            (focus)="onFieldFocus($event)" (blur)="onFieldBlur($event)" [owlDateTimeTrigger]="dt1"
            [ngClass]="{'is-invalid': isFormFieldInvalid(formFieldDefinition.name)}">
          <span class="input-group-text cursor-pointer" title="{{'BUTTON.REMOVE'|translate}}"
            (click)="formGroupDefinition.get(formFieldDefinition.name).setValue(null)">
            <cds-icon shape="times-circle" solid class="text-primary"></cds-icon>
          </span>
          <owl-date-time [firstDayOfWeek]="1" #dt1 [pickerType]="'calendar'"></owl-date-time>
          <div class="invalid-feedback" *ngIf="isFormFieldInvalid(formFieldDefinition.name)">
            {{'VALIDATION.REQUIRED' | translate}}
          </div>
        </div>
        <ng-container *ngIf="formFieldDefinition?.options?.infoType">
          <ng-container [ngSwitch]="formFieldDefinition.options.infoType">
            <span class="text-xs color-gray-darkest">{{(formFieldDefinition?.options?.infoLabel ||
              "PACS.PPERMISSION_TYPE_UNIT_DURATION") |
              translate}}:&nbsp;
              <ng-container *ngSwitchCase="'toTodayDays'">
                {{getDaysDurationToNow(formGroupDefinition.get(formFieldDefinition.name).value)|dayFormatter}}
              </ng-container>
              <ng-container *ngSwitchCase="'age'">
                {{getAge(formGroupDefinition.get(formFieldDefinition.name).value)}}&nbsp;
                ({{getDaysDurationToNow(formGroupDefinition.get(formFieldDefinition.name).value)|dayFormatter}})
              </ng-container>
            </span>
          </ng-container>
        </ng-container>
      </ng-container>

      <!-- Time -->
      <ng-container *ngSwitchCase="3">

        <div class="input-group input-group-sm">
          <input placeholder="{{'PLACEHOLDER.DATE_TIMER_SELECT' | translate}}"
            [formControlName]="formFieldDefinition.name" type="text" class="form-control bg-white" readonly owlinput
            [owlDateTime]="dt2" (focus)="onFieldFocus($event)" (blur)="onFieldBlur($event)" [owlDateTimeTrigger]="dt2"
            [ngClass]="{'is-invalid': isFormFieldInvalid(formFieldDefinition.name)}">
          <span class="input-group-text cursor-pointer" title="{{'BUTTON.REMOVE'|translate}}"
            (click)="formGroupDefinition.get(formFieldDefinition.name).setValue(null)">
            <cds-icon shape="times-circle" solid class="text-primary"></cds-icon>
          </span>
          <owl-date-time [firstDayOfWeek]="1" #dt2 [pickerType]="'timer'" [showSecondsTimer]="true"></owl-date-time>
          <div class="invalid-feedback" *ngIf="isFormFieldInvalid(formFieldDefinition.name)">
            {{'VALIDATION.REQUIRED' | translate}}
          </div>
        </div>

      </ng-container>

      <!-- DateTime -->
      <ng-container *ngSwitchCase="4">

        <div class="input-group input-group-sm">
          <input placeholder="{{'PLACEHOLDER.DATE_SELECT' | translate}}" [formControlName]="formFieldDefinition.name"
            type="text" class="form-control bg-white" readonly owlinput [owlDateTime]="dt3"
            (focus)="onFieldFocus($event)" (blur)="onFieldBlur($event)" [owlDateTimeTrigger]="dt3"
            [ngClass]="{'is-invalid': isFormFieldInvalid(formFieldDefinition.name)}">
          <span class="input-group-text cursor-pointer" title="{{'BUTTON.REMOVE'|translate}}"
            (click)="formGroupDefinition.get(formFieldDefinition.name).setValue(null)">
            <cds-icon shape="times-circle" solid class="text-primary"></cds-icon>
          </span>
          <owl-date-time [firstDayOfWeek]="1" #dt3 [showSecondsTimer]="true"></owl-date-time>
          <div class="invalid-feedback" *ngIf="isFormFieldInvalid(formFieldDefinition.name)">
            {{'VALIDATION.REQUIRED' | translate}}
          </div>
        </div>

      </ng-container>

      <!-- Checkbox -->
      <ng-container *ngSwitchCase="5">

        <ng-container [ngSwitch]="formFieldDefinition.options.type">

          <!-- Check -->
          <ng-container *ngSwitchCase="1">

            <!-- <clr-checkbox [formControlName]="formFieldDefinition.name" [clrDisabled]="formGroupDefinition.disabled"
              (focus)="onFieldFocus($event)" (blur)="onFieldBlur($event)">{{formFieldDefinition.caption|translate}}
            </clr-checkbox> -->
            <div class="form-check">
              <input type="checkbox" class="form-check-input" [formControlName]="formFieldDefinition.name"
                [id]="getElementId(formFieldDefinition)" [disabled]="formGroupDefinition.disabled"
                (focus)="onFieldFocus($event)" (blur)="onFieldBlur($event)" />
              <label [for]="getElementId(formFieldDefinition)"
                class="form-check-label">{{formFieldDefinition.caption|translate}}</label>
            </div>
            <!-- <pre>{{formGroupDefinition.get(formFieldDefinition.name).value|json}}</pre> -->
          </ng-container>

          <!-- Toggle -->
          <ng-container *ngSwitchCase="2">

            <div class="form-check form-switch">
              <input type="checkbox" [id]="getElementId(formFieldDefinition)" class="form-check-input"
                [formControlName]="formFieldDefinition.name" (focus)="onFieldFocus($event)"
                (blur)="onFieldBlur($event)">
              <label class="form-check-label" [for]="getElementId(formFieldDefinition)"></label>
            </div>

          </ng-container>

          <!-- Tristate -->
          <ng-container *ngSwitchCase="3">

            <!-- <clr-checkbox [clrIndeterminate]="true" [clrDisabled]="formGroupDefinition.disabled"
              [formControlName]="formFieldDefinition.name" (focus)="onFieldFocus($event)" (blur)="onFieldBlur($event)">
              {{formFieldDefinition.caption|translate}}</clr-checkbox> -->

          </ng-container>

        </ng-container>

      </ng-container>

      <ng-container *ngSwitchCase="6">Radiogroup</ng-container>

      <!-- Select -->
      <ng-container *ngSwitchCase="7">

        <ng-container [ngSwitch]="formFieldDefinition.options.type">

          <!-- Combobox -->
          <ng-container *ngSwitchCase="0">

            <div class="input-group input-group-sm">
              <select [id]="getElementId(formFieldDefinition)" [formControlName]="formFieldDefinition.name"
                class="form-select form-select-sm" (focus)="onFieldFocus($event)" (blur)="onFieldBlur($event)"
                [ngClass]="{'is-invalid': isFormFieldInvalid(formFieldDefinition.name)}">
                <option *ngFor="let option of formFieldDefinition.options.options" [ngValue]="option.value"
                  title="{{option.tooltip|translate}}" [disabled]="option.disabled"
                  [ngClass]="{'color-gray': option.disabled}">{{option.captionLines[0]
                  | translate}}</option>
              </select>
              <span class="input-group-text cursor-pointer" title="{{'BUTTON.REMOVE'|translate}}"
                *ngIf="!formFieldDefinition.required"
                (click)="formGroupDefinition.get(formFieldDefinition.name).setValue(null)">
                <cds-icon shape="times-circle" solid class="text-primary"></cds-icon>
              </span>
              <div class="invalid-feedback" *ngIf="isFormFieldInvalid(formFieldDefinition.name)">
                {{'VALIDATION.REQUIRED' | translate}}
              </div>
            </div>

          </ng-container>

          <!-- Typeahead Local -->
          <ng-container *ngSwitchCase="1">

            <dynamic-select-field [fieldOptions]="formFieldDefinition.options" [control]="formFieldDefinition"
              [group]="formGroupDefinition" [isEmptyForm]="isEmptyForm" (itemSelected)="onSelectItemSelected($event)"
              (itemRemoved)="onSelectItemRemoved($event)"></dynamic-select-field>

          </ng-container>

          <!-- Typeahead Server -->
          <ng-container *ngSwitchCase="2">

            <dynamic-select-field [fieldOptions]="formFieldDefinition.options" [control]="formFieldDefinition"
              [group]="formGroupDefinition" [isEmptyForm]="isEmptyForm" (itemSelected)="onSelectItemSelected($event)"
              (itemRemoved)="onSelectItemRemoved($event)"></dynamic-select-field>

          </ng-container>

        </ng-container>

      </ng-container>

      <!-- Textarea -->
      <ng-container *ngSwitchCase="8">

        <div class="input-group">
          <textarea [id]="getElementId(formFieldDefinition)" rows="2"
            [ngClass]="{'is-invalid': isFormFieldInvalid(formFieldDefinition.name)}"
            [maxlength]="formFieldDefinition.options.maxLength" [formControlName]="formFieldDefinition.name"
            (focus)="onFieldFocus($event)" class="form-control form-control-sm" (blur)="onFieldBlur($event)"></textarea>
          <div class="invalid-feedback" *ngIf="isFormFieldInvalid(formFieldDefinition.name)">
            <span
              *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.required">
              {{'VALIDATION.REQUIRED' | translate}}
            </span>
            <span
              *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.minlength">
              <span [translate]="'VALIDATION.MIN_LENGTH'"
                [translateParams]="{min: formFieldDefinition.options.minLength}"></span>
            </span>
            <span
              *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.maxlength">
              <span [translate]="'VALIDATION.MAX_LENGTH'"
                [translateParams]="{max: formFieldDefinition.options.maxLength}"></span>
            </span>
          </div>
        </div>

      </ng-container>

      <!-- Number -->
      <ng-container *ngSwitchCase="9">

        <div class="input-group">
          <input [id]="getElementId(formFieldDefinition)" type="number" [formControlName]="formFieldDefinition.name"
            (focus)="onFieldFocus($event)" (blur)="onFieldBlur($event)" #formItem class="form-control form-control-sm"
            [ngClass]="{'is-invalid': isFormFieldInvalid(formFieldDefinition.name)}">
          <div class="invalid-feedback"
            *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.required">
            {{'VALIDATION.REQUIRED' | translate}}
          </div>
          <div class="invalid-feedback"
            *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.minlength">
            <span [translate]="'VALIDATION.MIN_LENGTH'"
              [translateParams]="{min: formFieldDefinition.options.minLength}"></span>
          </div>
          <div class="invalid-feedback"
            *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.maxlength">
            <span [translate]="'VALIDATION.MAX_LENGTH'"
              [translateParams]="{max: formFieldDefinition.options.maxLength}"></span>
          </div>
          <div class="invalid-feedback"
            *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.min">
            <span [translate]="'VALIDATION.MIN_VALUE'"
              [translateParams]="{min: formFieldDefinition.options.min}"></span>
          </div>
          <div class="invalid-feedback"
            *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.max">
            <span [translate]="'VALIDATION.MAX_VALUE'"
              [translateParams]="{max: formFieldDefinition.options.max}"></span>
          </div>
          <div class="invalid-feedback"
            *ngIf="formGroupDefinition.get(formFieldDefinition.name).errors && formGroupDefinition.get(formFieldDefinition.name).errors.max">
            <span>{{formFieldDefinition.regexErrorText}}</span>
          </div>
        </div>

      </ng-container>

      <!-- DateRange -->
      <ng-container *ngSwitchCase="10">
        <armon-dynamic-date-range [id]="getElementId(formFieldDefinition)" [fieldOptions]="formFieldDefinition.options"
          [formFieldDefinition]="formFieldDefinition" [formGroupDefinition]="formGroupDefinition"
          [formControlName]="formFieldDefinition.name" (focus)="onFieldFocus($event)" (blur)="onFieldBlur($event)">
        </armon-dynamic-date-range>
      </ng-container>

      <!-- ImageCapture -->
      <ng-container *ngSwitchCase="11">
        <armon-dynamic-image-capture [id]="getElementId(formFieldDefinition)"
          [fieldOptions]="formFieldDefinition.options" [formFieldDefinition]="formFieldDefinition"
          #dynamicImageCaptureField [formControlName]="formFieldDefinition.name" (focus)="onFieldFocus($event)"
          (blur)="onFieldBlur($event)"></armon-dynamic-image-capture>
      </ng-container>

    </ng-container>
  </div>
  <span *ngIf="formFieldDefinition.infoText" class="text-sm mt-1 ms-3">
    * {{formFieldDefinition.infoText|translate:formFieldDefinition.infoData}}
  </span>
</div>`;var bt=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}
`;var vt=`<div class="control-container" [hidden] ="hiddenComponent">
    <div class="image-container" #imageContainer>
        <img *ngIf="!visibleImageFailed && !isInitialData" #streamImage [src]="imageSource | secure:userName:password | async"
            (load)="imageLoaded($event)" (error)="imageLoadFailed($event)" class="capture-image" crossorigin="anonymous"/>
        <img *ngIf="isInitialData && base64Data" [src]="base64Data" class="capture-image" #captureImage />
        <div class="stream-spinner" *ngIf="visiblePreloader">
            <span class="spinner-border spinner-border-sm"></span>
        </div>
        <div class="stream-failed" *ngIf="visibleImageFailed">
            <span>{{'FILE.ERROR_LOAD_IMAGE' | translate}}</span>
            <cds-icon shape="warning-standard" solid size="md"></cds-icon>
        </div>
        <div class="button-container" *ngIf="visibleButtons">
            <button type="button" class="btn btn-primary" (click)="onRefreshClicked($event)" [disabled]="disableRefreshButton">
                <cds-icon shape="refresh"></cds-icon>
            </button>
        </div>
    </div>
</div>`;var xt=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}:host .control-container{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;padding:6px}:host .control-container .image-container{position:relative;min-width:242px;width:auto;height:182px;background-color:#0a2a5a;border:1px solid #0a2a5a}:host .control-container .image-container .capture-image{min-width:240px;height:180px}:host .control-container .image-container .base-overlay,:host .control-container .image-container .stream-failed,:host .control-container .image-container .stream-spinner{background-color:#0003;position:absolute;margin:auto;inset:0}:host .control-container .image-container .stream-spinner{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center}:host .control-container .image-container .stream-failed{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;color:#c82602}:host .control-container .image-container .button-container{position:absolute;top:.2rem;right:-1rem;padding:0 6px}:host .control-container .image-container .button-container button{margin:auto 0 0;border:1px solid #CCC}
`;var $;(function(o){o[o.Refresh=1]="Refresh"})($||($={}));var $t=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},Ht={provide:Q,useExisting:M(()=>W),multi:!0},W=class{httpClient;cdRef;interactionService;utilityInitializerService;renderer;onChange;fieldOptions;formFieldDefinition;imageContainer;streamImage;captureImage;imageSource;hiddenComponent=!0;visibleImageFailed;visiblePreloader=!0;visibleButtons=!0;disableRefreshButton=!0;userName=null;password=null;isInitialData=!1;base64Data=null;DEFAULT_HEIGHT=180;DEFAULT_SAVE_HEIGHT=180;constructor(e,t,i,r,n){this.httpClient=e,this.cdRef=t,this.interactionService=i,this.utilityInitializerService=r,this.renderer=n}writeValue(e){typeof e>"u"?(this.isInitialData=!1,this.setSource()):e==null?this.formFieldDefinition.immutable?this.visibleButtons=!1:(this.isInitialData=!1,this.setSource()):e&&e!=""?e.data?(this.isInitialData=!0,this.visiblePreloader=!1,this.visibleButtons=!1,this.base64Data=e.data):(this.isInitialData=!1,this.setSource()):(this.isInitialData=!1,this.setSource())}registerOnChange(e){this.onChange=e}change(e){this.setSnapToCanvas().then(t=>{this.base64Data=t,this.onChange({data:this.base64Data})})}registerOnTouched(e){}setDisabledState(e){}ngOnInit(){this.visibleButtons=this.fieldOptions.hideRefreshButton?!this.fieldOptions.hideRefreshButton:!0,this.setDefaultValues(),this.checkHidden()}ngAfterViewInit(){this.setImageStyles()}ngOnDestroy(){this.cdRef.detach()}setSnapToCanvas(){return new Promise(e=>{let t=this.streamImage.nativeElement;setTimeout(()=>{if(this.fieldOptions.disablePixelPerfect&&this.fieldOptions.disablePixelPerfect==!0)this.utilityInitializerService.downScaleImagePixelPerfect(t,this.DEFAULT_SAVE_HEIGHT/t.height,!0).then(i=>{e(i.toDataURL(this.fieldOptions.imageFormat,this.fieldOptions.imageJpegQuality))});else{let i=this.streamImage.nativeElement.cloneNode(!0);i.width=t.naturalWidth,i.height=t.naturalHeight,this.utilityInitializerService.downScaleImagePixelPerfect(i,this.DEFAULT_SAVE_HEIGHT/i.height).then(r=>{e(r.toDataURL(this.fieldOptions.imageFormat,this.fieldOptions.imageJpegQuality))})}},50)})}setDefaultValues(){(!this.fieldOptions.imageFormat||this.fieldOptions.imageFormat=="")&&(this.fieldOptions.imageFormat="image/jpeg"),(!this.fieldOptions.imageJpegQuality||this.fieldOptions.imageJpegQuality<0||this.fieldOptions.imageJpegQuality>1)&&(this.fieldOptions.imageJpegQuality=.8),this.fieldOptions.imageHeight||(this.fieldOptions.imageHeight=this.DEFAULT_HEIGHT)}setImageStyles(){let e=window.innerWidth<544?Math.floor(this.fieldOptions.imageHeight/2):this.fieldOptions.imageHeight;this.imageContainer&&this.imageContainer.nativeElement&&(this.renderer.setStyle(this.imageContainer.nativeElement,"min-width",e*1.33+2+"px"),this.renderer.setStyle(this.imageContainer.nativeElement,"height",e+2+"px")),this.streamImage&&this.streamImage.nativeElement&&(this.renderer.setStyle(this.streamImage.nativeElement,"min-width",e*1.33+"px"),this.renderer.setStyle(this.streamImage.nativeElement,"height",e+"px")),this.captureImage&&this.captureImage.nativeElement&&(this.renderer.setStyle(this.captureImage.nativeElement,"min-width",e*1.33+"px"),this.renderer.setStyle(this.captureImage.nativeElement,"height",e+"px"))}checkHidden(){let e;typeof this.fieldOptions.source=="string"?e=this.fieldOptions.source:e=h.getCustomKeyValue(this.fieldOptions.source,this.formFieldDefinition.customKeys),e?this.hiddenComponent=!1:this.hiddenComponent=!0}setSource(){let e="";this.fieldOptions.username&&(this.userName=this.fieldOptions.username,this.password=this.fieldOptions.password);let t;typeof this.fieldOptions.source=="string"?t=this.fieldOptions.source:t=h.getCustomKeyValue(this.fieldOptions.source,this.formFieldDefinition.customKeys),t&&(e=t.indexOf("?")>-1?t+"&ctime="+new Date().getTime():t+"?ctime="+new Date().getTime()),this.imageSource=this.fieldOptions.proxy&&this.fieldOptions.proxy!=""?this.fieldOptions.proxy+e:e,this.visibleImageFailed=!1}refreshImage(){this.visiblePreloader=!0,this.visibleImageFailed=!1,this.disableRefreshButton=!0,setTimeout(()=>{this.setSource()},500)}onRefreshClicked(e){this.isInitialData==!1&&this.visibleButtons==!0&&this.disableRefreshButton==!1&&this.refreshImage()}imageLoaded(e){this.visiblePreloader=!1,this.disableRefreshButton=!1,this.setImageStyles(),this.change()}imageLoadFailed(e){this.visiblePreloader=!1,this.visibleImageFailed=!0,this.disableRefreshButton=!1}triggerRefresh(){this.formFieldDefinition.triggers&&this.formFieldDefinition.triggers.findIndex(e=>e==$.Refresh)>-1&&this.isInitialData==!1&&this.refreshImage()}static ctorParameters=()=>[{type:ie},{type:Re},{type:k},{type:lt},{type:ee}];static propDecorators={fieldOptions:[{type:a}],formFieldDefinition:[{type:a}],imageContainer:[{type:b,args:["imageContainer",{static:!0}]}],streamImage:[{type:b,args:["streamImage"]}],captureImage:[{type:b,args:["captureImage"]}]}};W=$t([f({selector:"armon-dynamic-image-capture",providers:[Ht],template:vt,standalone:!0,imports:[g,Me,p,dt],styles:[xt]})],W);var qt=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},fe=class{languageService;constructor(e){this.languageService=e}transform(e,t="-"){if(!e)return t;let i=new We;return new Je(i).humanize(e,{units:["y","mo","d"],round:!0,language:this.languageService.selectedLanguageCode})}static ctorParameters=()=>[{type:Xe}]};fe=qt([te({name:"dayFormatter",standalone:!0})],fe);var yt=`<div class="pt-2">
    <div class="row">
        <div class="col-lg-6 col-12 mb-1 date-select-container" [owlDateTimeTrigger]="dt1"
            [hidden]="fieldOptions.isStartVisible==false">
            <cds-icon shape="calendar" size="md"></cds-icon>
            <span class="caption">{{fieldOptions.startCaption || 'PLACEHOLDER.DATE_FROM' | translate}}</span>
            <input [(ngModel)]="startDate" type="text" class="form-control form-control-sm bg-white" readonly owlinput
                [owlDateTime]="dt1" placeholder="{{formFieldDefinition.placeholder}}"
                [disabled]="formGroupDefinition.disabled" (ngModelChange)="changeStart($event)" [min]="minStartDate"
                [max]="maxStartDate">
            <owl-date-time [firstDayOfWeek]="1" #dt1 [pickerType]="fieldOptions.showTimer?'both':'calendar'">
            </owl-date-time>
        </div>
        <div class="col-lg-6 col-12 mb-1 date-select-container" [owlDateTimeTrigger]="dt2"
            [hidden]="fieldOptions.isEndVisible==false">
            <cds-icon shape="calendar" size="md"></cds-icon>
            <span class="caption">{{fieldOptions.endCaption || 'PLACEHOLDER.DATE_TO' | translate}}</span>
            <input [(ngModel)]="endDate" type="text" class="form-control form-control-sm bg-white" readonly owlinput
                [owlDateTime]="dt2" placeholder="{{formFieldDefinition.placeholder}}"
                [disabled]="formGroupDefinition.disabled || (!formGroupDefinition.disabled && startDate==null)"
                (ngModelChange)="changeEnd($event)" [min]="startDate">
            <owl-date-time [firstDayOfWeek]="1" #dt2 [pickerType]="fieldOptions.showTimer?'both':'calendar'">
            </owl-date-time>
        </div>
    </div>
</div>`;var Ct=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}.date-select-container{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;cursor:pointer;opacity:1!important}.date-select-container .caption{margin-left:.2rem;margin-right:.4rem}.date-select-container input{margin:0}.date-select-container input[type=text]:disabled{background:#e9ecef!important;opacity:1!important}
`;var I;(function(o){o[o.Now=1]="Now",o[o.StartOfHour=2]="StartOfHour",o[o.StartOfDay=3]="StartOfDay",o[o.EndOfHour=4]="EndOfHour",o[o.EndOfDay=5]="EndOfDay",o[o.EndOfDayAfterSevenDays=6]="EndOfDayAfterSevenDays",o[o.EndOfDayAfterFiveDays=7]="EndOfDayAfterFiveDays"})(I||(I={}));var Zt=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},Wt={provide:Q,useExisting:M(()=>J),multi:!0},J=class{interactionService;onChange;fieldOptions;formFieldDefinition;formGroupDefinition;startDate;endDate;minStartDate;maxStartDate;constructor(e){this.interactionService=e}getDynamicDate(e,t=new Date){switch(e){case I.Now:return d.fromJSDate(t).toJSDate();case I.StartOfHour:return d.fromJSDate(t).startOf("hour").toJSDate();case I.StartOfDay:return d.fromJSDate(t).startOf("day").toJSDate();case I.EndOfHour:return d.fromJSDate(t).endOf("hour").toJSDate();case I.EndOfDay:return d.fromJSDate(t).endOf("day").toJSDate();case I.EndOfDayAfterSevenDays:return d.fromJSDate(t).plus({day:7}).endOf("day").toJSDate();case I.EndOfDayAfterFiveDays:return d.fromJSDate(t).plus({day:5}).endOf("day").toJSDate()}}setInitialDateSelection(){this.fieldOptions.maxDayInterval?(this.startDate=d.local().startOf("hour").toJSDate(),this.endDate=d.fromJSDate(this.startDate).plus({days:this.fieldOptions.maxDayInterval}).toJSDate()):(this.startDate=this.fieldOptions.startDynamicDate?this.getDynamicDate(this.fieldOptions.startDynamicDate):null,this.endDate=this.fieldOptions.endDynamicDate?this.getDynamicDate(this.fieldOptions.endDynamicDate):null),this.updateFormValue()}updateFormValue(){this.formGroupDefinition&&this.formFieldDefinition&&this.formGroupDefinition.get(this.formFieldDefinition.name).setValue({startDate:this.startDate,endDate:this.endDate})}checkMaxDayInterval(e){if(this.fieldOptions.maxDayInterval){let t=this.fieldOptions.maxDayInterval*24,i=d.fromJSDate(this.endDate).diff(d.fromJSDate(this.startDate),["hours"]).toObject().hours;i>t&&(e?this.endDate=d.fromJSDate(this.endDate).plus({hours:t-i}).toJSDate():this.startDate=d.fromJSDate(this.startDate).plus({hours:i-t}).toJSDate())}}writeValue(e){e?e.startDate?(this.startDate=d.fromJSDate(e.startDate).toJSDate(),e.endDate&&(this.endDate=d.fromJSDate(e.endDate).toJSDate())):this.setInitialDateSelection():this.setInitialDateSelection()}registerOnChange(e){this.onChange=e}changeStart(e){this.fieldOptions.endDynamicDate!==void 0&&(this.endDate=this.getDynamicDate(this.fieldOptions.endDynamicDate,this.startDate)),this.fieldOptions.isEndVisible&&this.checkMaxDayInterval(!0),this.onChange({startDate:this.startDate,endDate:this.endDate})}changeEnd(e){this.checkMaxDayInterval(!1),this.onChange({startDate:this.startDate,endDate:this.endDate})}registerOnTouched(e){}setDisabledState(e){}ngOnInit(){this.minStartDate=this.fieldOptions.minStartDynamicDate?this.getDynamicDate(this.fieldOptions.minStartDynamicDate):null,this.maxStartDate=this.fieldOptions.maxStartDynamicDate?this.getDynamicDate(this.fieldOptions.maxStartDynamicDate):null,this.fieldOptions.isStartVisible==null&&(this.fieldOptions.isStartVisible=!0),this.fieldOptions.isEndVisible==null&&(this.fieldOptions.isEndVisible=!0),this.fieldOptions.showTimer==null&&(this.fieldOptions.showTimer=!0)}static ctorParameters=()=>[{type:k}];static propDecorators={fieldOptions:[{type:a}],formFieldDefinition:[{type:a}],formGroupDefinition:[{type:a}]}};J=Zt([f({selector:"armon-dynamic-date-range",providers:[Wt,{provide:U,useClass:B}],template:yt,schemas:[Oe],standalone:!0,imports:[j,v,p],styles:[Ct]})],J);var Dt=`<div class="selectContainer" [ngClass]="{'selectContainerAtFront': showOptions}" (mouseover)="focusOnComponent = true"
  (mouseout)="focusOnComponent = false">

  <!-- Selected items -->
  <div class="selectChip" [attr.multiselect]="fieldOptions.multiSelect">
    <ng-container *ngFor="let item of selectedItems">
      <ng-container *ngIf="item.userCaptions">
        <div class="chip custom-chip">
          <armon-captionlines [captionlines]="item.userCaptions" [showBorder]="false"></armon-captionlines>
          <cds-icon class="chip-icon mt-1" solid shape="times-circle" (click)="removeItem(item, true)"
            *ngIf="!group.disabled"></cds-icon>
        </div>
      </ng-container>
      <ng-container *ngIf="!item.userCaptions">
        <div class="chip">
          <span class="chip-title">{{item.mainInfo?item.mainInfo:item.captionLines[0]}}</span>
          <cds-icon class="chip-icon" solid shape="times-circle" (click)="removeItem(item, true)"
            *ngIf="!group.disabled"></cds-icon>
        </div>
      </ng-container>
    </ng-container>
  </div>

  <!-- Filter input area -->
  <!-- <label for="filter" aria-haspopup="true" role="tooltip"
    class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left"
    *ngIf="selectedItems.length === 0 || fieldOptions.multiSelect" [class.invalid]="group.get(control.name).errors"> -->
  <ng-container *ngIf="group && group.get(control.name)">
    <ng-container *ngIf="selectedItems.length === 0 || fieldOptions.multiSelect">
      <div class="d-flex column-gap-2 align-items-stretch">
        <input #filterInput type="text" [(ngModel)]="inputText" [disabled]="group.disabled"
          class="form-control form-control-sm flex-grow-1" placeholder="{{control.placeholder | translate}}"
          (keyup)="onSearchKeyup($event)" [ngClass]="{'is-invalid': group.get(control.name).errors}"
          (keydown)="onSearchKeydown($event)" (focus)="onSearchInputFocus($event)" (input)="onTextTypeInput($event)">
        <div *ngIf="showLoadDefaultValueButton" nz-tooltip (click)="loadDefaultValues()"
          nzTooltipTitle="{{'COMMON.LOAD_DEFAULT_VALUES'|translate}}"
          class="d-flex justify-content-center align-items-center bg-primary rounded-1 mx-1 px-2 hover-primary cursor-pointer">
          <cds-icon shape="import" class="cds-icon-16 text-white"></cds-icon>
        </div>
      </div>
    </ng-container>
  </ng-container>
  <!-- </label> -->
  <span *ngIf="fieldOptions.warningSearchFilterText && inputText!='' && selectedItems.length==0"
    class="warning-search-info">
    <cds-icon shape="warning-standard" class="me-1" solid></cds-icon>{{fieldOptions.warningSearchFilterText}}
  </span>

  <!-- Result of searching -->
  <div class="optionContainer" *ngIf="showOptions" [outsideClick]="clickedOutsideOfSearchResult">
    <div class="optionList" #resultList>
      <!-- Result items -->
      <div *ngFor="let item of options; let i = index" class="optionItem"
        [ngClass]="{'optionFocused': i === focusIndex, 'optionSelected': isItemSelected(item)}"
        (click)="selectItem(item)">
        <ng-container *ngIf="!item.userCaptions">
          <div>{{item.mainInfo}}</div>
          <div *ngFor="let info of item.moreInfo" class="optionItemInfo">{{info}}</div>
        </ng-container>
        <ng-container *ngIf="item.userCaptions">
          <!-- User Caption Lines -->
          <armon-captionlines [captionlines]="item.userCaptions"></armon-captionlines>
        </ng-container>
      </div>
    </div>

    <!-- Waiting spinner -->
    <div *ngIf="waitingResult" class="centered infoMessage">
      <span class="spinner-border d-inline"></span>
      <span>{{'COMMON.SEARCHING' | translate}}</span>
    </div>

    <!-- Empty result info -->
    <div *ngIf="!waitingResult && options.length === 0" class="centered infoMessage">
      {{'COMMON.EMPTY_RESULT' | translate}}
    </div>

    <div class="button-contaier">
      <button class="btn btn-sm btn-link close-button" (click)="onCloseClicked($event)">{{'BUTTON.CLOSE'
        | translate}}</button>
    </div>
  </div>

</div>`;var It=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}.selectContainer{position:relative;width:100%!important}.selectContainer>label{width:100%!important}.selectContainer input{width:100%!important}.selectContainerAtFront{z-index:100}.custom-chip{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;-moz-align-items:flex-start;align-items:flex-start}.optionContainer{border:1px solid #dddddd;position:absolute;width:100%;background:#fff;box-shadow:0 4px 10px #ddd;padding:8px 0;max-height:170px;overflow:hidden}.optionContainer .optionList{overflow:auto;width:100%;max-height:130px}.optionContainer .button-contaier{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.optionContainer .close-button{margin:0}.optionItem{padding:1px 4px;cursor:pointer}.optionItem:hover{background-color:#ceedfe}.optionFocused{background:#e1f1f6}.optionSelected{color:#006a91;font-weight:500}.optionItemInfo{font-size:.588rem;line-height:.5rem;padding-bottom:.1rem}.infoMessage{padding:8px}.infoMessage>span{margin:4px}.warning-search-info{color:red;font-size:.672rem;line-height:.6rem;margin:0}
`;var H=class{delayTimeout;createDelay=(e,t)=>{this.delayTimeout!=null&&clearTimeout(this.delayTimeout),this.delayTimeout=setTimeout(e.bind(this),t||He.DELAY_INTERVAL)}};var ei=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},pe=class extends H{dynamicFormService;translate;fieldOptions;control;group;isEmptyForm;itemSelected=new c;itemRemoved=new c;resultItems;filterInput;KEYCODE_ARROW_UP=38;KEYCODE_ARROW_DOWN=40;KEYCODE_ENTER=13;KEYCODE_ESCAPE=27;KEYCODE_TAB=9;inputText="";options=[];selectedItems=[];showOptions;focusIndex;focusOnComponent;waitingResult;lastFilterText;changeSubscription;showLoadDefaultValueButton=!1;constructor(e,t){super(),this.dynamicFormService=e,this.translate=t,this.clickedOutsideOfSearchResult=this.clickedOutsideOfSearchResult.bind(this)}ngOnInit(){this.control.placeholder=this.control.placeholder||"COMMON.SEARCH",this.group&&(this.changeSubscription=this.group.get(this.control.name).valueChanges.subscribe(e=>{this.checkNewValue(e)})),this.showLoadDefaultValueButton=!ne(this.fieldOptions.defaultValue)&&this.fieldOptions?.UI_showLoadDefaultValueButton==!0,this.isEmptyForm||this.fieldOptions.UI_forceToLoadDefaultValue?this.selectDefaultValues():this.group&&this.control&&this.group.get(this.control.name)&&this.checkNewValue(this.group.get(this.control.name).value),this.fieldOptions.type===R.TypeaheadLocal&&this.setOptions(this.fieldOptions.options)}ngOnDestroy(){this.changeSubscription&&this.changeSubscription.unsubscribe()}clickedOutsideOfSearchResult(){this.focusOnComponent||this.setShowOptionsState(!1)}selectItem(e){e!=null&&(this.isItemSelected(e)?this.removeItem(e,!0):(this.fieldOptions.multiSelect||this.selectedItems.forEach(t=>this.removeItem(t,!0)),this.selectedItems.push(e),this.itemSelected.emit(e),(this.options.length===1||!this.fieldOptions.multiSelect)&&this.setShowOptionsState(!1)),this.updateFormValue())}removeItem(e,t){this.isItemSelected(e)&&(this.selectedItems.splice(this.getSelectionIndex(e),1),t&&this.itemRemoved.emit(e)),this.updateFormValue()}isItemSelected(e){return this.getSelectionIndex(e)>=0}getSelectionIndex(e){return this.selectedItems.findIndex(t=>t.value===e.value)}onSearchKeydown(e){if(e.keyCode===this.KEYCODE_ARROW_UP)return this.focusIndex-=1,this.focusIndex<0&&(this.focusIndex=this.options.length-1),this.checkFocus(),!1;if(e.keyCode===this.KEYCODE_ARROW_DOWN)return this.focusIndex+=1,this.focusIndex===this.options.length&&(this.focusIndex=0),this.checkFocus(),!1;if(e.keyCode===this.KEYCODE_ENTER)return this.selectItem(this.options[this.focusIndex]),this.filterInput&&this.filterInput.nativeElement&&!this.fieldOptions.multiSelect&&this.filterInput.nativeElement.blur(),!1;if(e.keyCode===this.KEYCODE_ESCAPE)return this.inputText="",this.lastFilterText="",!1;e.keyCode===this.KEYCODE_TAB?(this.focusOnComponent=!1,this.setShowOptionsState(!1)):this.focusIndex=0}onTextTypeInput(e){let t=this.fieldOptions;if(t.textTransform){let i=h.getCaretPosition(e.target);e.target.value=h.getTransformedText(e.target.value,t.textTransform,this.translate.currentLang),this.inputText=e.target.value,h.setCaretPosition(e.target,i)}}onSearchKeyup(e){this.createDelay(this.callRequest)}onSearchInputFocus(e){!this.inputText&&this.fieldOptions.type===R.TypeaheadLocal?this.setShowOptionsState(!0):this.inputText&&this.lastFilterText===this.inputText?this.setShowOptionsState(!0):this.callRequest()}onCloseClicked(){this.setShowOptionsState(!1)}selectDefaultValues(e=!1){if(this.fieldOptions.defaultValue){if(Array.isArray(this.fieldOptions.defaultValue))e&&(this.selectedItems=[]),this.selectedItems.push(...this.fieldOptions.defaultValue),this.fieldOptions.defaultValue.forEach(t=>{this.itemSelected.emit(t)});else if(this.control.customKeys&&h.getCustomKeyValue(this.fieldOptions.defaultValue,this.control.customKeys)){let t=h.getCustomKeyValue(this.fieldOptions.defaultValue,this.control.customKeys)||void 0;e&&(this.selectedItems=[]),this.selectedItems.push(...t),t.forEach(i=>{this.itemSelected.emit(i)})}else this.selectedItems.push(this.fieldOptions.defaultValue),this.itemSelected.emit(this.fieldOptions.defaultValue);this.updateFormValue()}}checkNewValue(e){if(e!=null)if(Array.isArray(e))e.forEach(t=>{this.checkNewValue(t)});else{let t;this.fieldOptions.type===R.TypeaheadLocal?this.selectedItems.findIndex(i=>i.value===e)<0&&(t=this.fieldOptions.options.find(i=>i.value===e)):this.fieldOptions.type===R.TypeaheadServerField&&e instanceof se&&this.selectedItems.findIndex(i=>i.value===e.value)<0&&(t=e),!Ge(t)&&!Ue(t)&&(Array.isArray(t)?(this.selectedItems.push(...t),t.forEach(i=>{this.itemSelected.emit(i)})):(this.fieldOptions.multiSelect?this.selectedItems.push(t):this.selectedItems[0]=t,this.itemSelected.emit(t)),this.updateFormValue())}}checkFocus(){this.resultItems&&this.resultItems.nativeElement&&this.resultItems.nativeElement.children&&this.resultItems.nativeElement.children[this.focusIndex]&&(this.resultItems.nativeElement.scrollTop=this.resultItems.nativeElement.children[this.focusIndex].offsetHeight*this.focusIndex)}callRequest(){!this.fieldOptions.minSearchLength||this.inputText?this.lastFilterText===this.inputText?this.setShowOptionsState(!0):(this.lastFilterText=this.inputText,this.waitingResult=!1,this.fieldOptions.type===R.TypeaheadLocal?(this.setOptions(this.fieldOptions.options?this.fieldOptions.options.filter(e=>e.captionLines[0].match(new RegExp(this.inputText.replace(new RegExp("i","g"),"\u0130"),"i"))):[]),this.setShowOptionsState(!0,!0)):this.fieldOptions.type===R.TypeaheadServerField&&(!this.fieldOptions.minSearchLength||this.fieldOptions.minSearchLength&&this.inputText.length>=this.fieldOptions.minSearchLength)&&(this.waitingResult=!0,this.dynamicFormService.requestForGenericSearch(this.fieldOptions.formFieldSearchEndPoint,this.inputText).subscribe(e=>{this.waitingResult=!1,this.options=(e.items||[]).map(t=>{let i=new se;return t.userCaptions&&(i.userCaptions=t.userCaptions),i.captionLines=t.captionLines,i.value=t.id,i}),this.setShowOptionsState(!0,!0)},e=>{this.clearSearchData()}))):this.fieldOptions.type===R.TypeaheadLocal?(this.setOptions(this.fieldOptions.options),this.setShowOptionsState(!0,!0)):this.clearSearchData()}clearSearchData(){this.options=[],this.waitingResult=!1,this.lastFilterText="",this.setShowOptionsState(!1)}setOptions(e){this.options=(e||[]).map(t=>{let i=new se;return i.captionLines=t.captionLines,i.value=t.value,i})}setShowOptionsState(e,t=!1){this.showOptions=e,e&&t&&this.options.length==1&&this.selectItem(this.options[0]),this.createDelay(this.appendMouseEvents)}appendMouseEvents(){if(this.showOptions&&this.resultItems&&this.resultItems.nativeElement&&this.resultItems.nativeElement.children)for(let e=0;e<this.resultItems.nativeElement.children.length;e++)this.resultItems.nativeElement.children[e].onmouseover=t=>{this.focusIndex=e}}updateFormValue(){this.group&&this.control&&(this.fieldOptions.multiSelect?this.group.get(this.control.name).setValue(this.selectedItems.map(e=>e.value)):this.group.get(this.control.name).setValue(this.selectedItems.length>0?this.selectedItems[0].value:""))}loadDefaultValues(e){this.showLoadDefaultValueButton!=!1&&this.selectDefaultValues(!0)}static ctorParameters=()=>[{type:_},{type:z}];static propDecorators={fieldOptions:[{type:a}],control:[{type:a}],group:[{type:a}],isEmptyForm:[{type:a}],itemSelected:[{type:m}],itemRemoved:[{type:m}],resultItems:[{type:b,args:["resultList"]}],filterInput:[{type:b,args:["filterInput"]}]}};pe=ei([f({selector:"dynamic-select-field",template:Dt,standalone:!0,imports:[D,C,g,at,v,le,p,rt],styles:[It]})],pe);var Lt=`<div class="selectContainer" [ngClass]="{'selectContainerAtFront': showOptions}" (mouseover)="focusOnComponent = true"
  (mouseout)="focusOnComponent = false">

  <!-- Filter input area -->
  <div class="input-group" *ngIf="group && group.get(control.name)">
    <input [attr.id]="'filter'+control.name" #filterInput type="text" [(ngModel)]="inputText" *ngIf="!showTextArea"
      placeholder="{{control.placeholder | translate}}" [disabled]="group.disabled" class="form-control form-control-sm"
      onlyNumber="{{fieldOptions.onlyNumber}}" maskInput="{{fieldOptions.textMask}}"
      [ngClass]="{'is-invalid': group.get(control.name).errors}" blockKeys="{{fieldOptions.blockKeys}}"
      (keyup)="onSearchKeyup($event)" (keydown)="onSearchKeydown($event)" (focus)="onSearchInputFocus($event)"
      (blur)="onSearchInputBlur($event)" (ngModelChange)="onInputChanged($event)" (input)="onTextTypeInput($event)"
      pattern="{{control.regex}}">
    <!-- TEXTAREA -->
    <textarea rows="2" cols="20" style="resize:none; margin-top: 0;" [attr.id]="'filter'+control.name" #filterInput
      *ngIf="showTextArea" [(ngModel)]="inputText" placeholder="{{control.placeholder | translate}}"
      [ngClass]="{'is-invalid': group.get(control.name).errors}" class="form-control form-control-sm"
      [disabled]="group.disabled" onlyNumber="{{fieldOptions.onlyNumber}}" maskInput="{{fieldOptions.textMask}}"
      blockKeys="{{fieldOptions.blockKeys}}" (keyup)="onSearchKeyup($event)" (keydown)="onSearchKeydown($event)"
      (focus)="onSearchInputFocus($event)" (blur)="onSearchInputBlur($event)" (ngModelChange)="onInputChanged($event)"
      (input)="onTextTypeInput($event)" pattern="{{control.regex}}"></textarea>
    <!-- TEXTAREA -->
    <div class="invalid-feedback" *ngIf="group.get(control.name).errors && group.get(control.name).errors.required">
      {{'VALIDATION.REQUIRED' | translate}}
    </div>
    <div class="invalid-feedback" *ngIf="group.get(control.name).errors && group.get(control.name).errors.minlength">
      <span [translate]="'VALIDATION.MIN_LENGTH'" [translateParams]="{min: control.options.minLength}"></span>
    </div>
    <div class="invalid-feedback" *ngIf="group.get(control.name).errors && group.get(control.name).errors.maxlength">
      <span [translate]="'VALIDATION.MAX_LENGTH'" [translateParams]="{max: control.options.maxLength}"></span>
    </div>
    <div class="invalid-feedback" *ngIf="group.get(control.name).errors && group.get(control.name).errors.min">
      <span [translate]="'VALIDATION.MIN_VALUE'" [translateParams]="{min: control.options.min}"></span>
    </div>
    <div class="invalid-feedback" *ngIf="group.get(control.name).errors && group.get(control.name).errors.max">
      <span [translate]="'VALIDATION.MAX_VALUE'" [translateParams]="{max: control.options.max}"></span>
    </div>
    <div class="invalid-feedback" *ngIf="group.get(control.name).errors && group.get(control.name).errors.pattern">
      <span>{{control.regexErrorText}}</span>
    </div>
    <!-- <pre>{{group.get(control.name).errors|json}}</pre> -->
  </div>

  <!-- Result of searching -->
  <div #resultList class="optionContainer" *ngIf="showOptions" [outsideClick]="clickedOutsideOfSearchResult">

    <!-- Result items -->
    <div *ngFor="let item of options; let i = index" class="optionItem" [ngClass]="{'optionFocused': i === focusIndex}"
      (click)="selectItem(item)">{{item.captionLines[0]}}</div>

    <!-- Waiting spinner -->
    <div *ngIf="waitingResult" class="centered infoMessage">
      <span class="spinner-border d-inline"></span>
      <span>{{'COMMON.SEARCHING' | translate}}</span>
    </div>

  </div>

</div>`;var Et=`.selectContainer{position:relative;width:100%!important}.selectContainer>label{width:100%!important}.selectContainer input{width:100%!important}.selectContainerAtFront{z-index:100}.optionContainer{border:1px solid #DDDDDD;position:absolute;width:100%;background:#fff;box-shadow:0 4px 10px #ddd;padding:8px 0;max-height:150px;overflow:auto}.optionItem{padding:1px 4px;cursor:pointer}.optionFocused{background:#e1f1f6}.optionSelected{color:#006a91;font-weight:700}.infoMessage{padding:8px}.infoMessage>span{margin:4px}
`;var ni=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},ue=class{el;constructor(e){this.el=e}blockKeys;onKeyDown(e){let t=e;if(this.blockKeys&&this.blockKeys!=""){let i=[];this.blockKeys.split(",").forEach(r=>{i.push(+r)}),i&&i.length>0&&i.findIndex(r=>r==t.keyCode)>-1&&t.preventDefault()}else return}static ctorParameters=()=>[{type:L}];static propDecorators={blockKeys:[{type:a}],onKeyDown:[{type:T,args:["keydown",["$event"]]}]}};ue=ni([F({selector:"[blockKeys]",standalone:!0})],ue);var Ft=Mt(Pt()),oi=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},q=class{el;constructor(e){this.el=e}set defineMask(e){e&&e!=""&&(0,Ft.default)({mask:e,autoUnmask:!0,removeMaskOnSubmit:!0,onBeforePaste:(t,i)=>{this.triggerInputEvent()},oncomplete:()=>{},definitions:{"*":{validator:"[0-9A-Za-z!#$%&';*+/=?^_`{|}~-]"}}}).mask(this.el.nativeElement)}triggerInputEvent(){setTimeout(()=>{this.el.nativeElement.dispatchEvent(new Event("input"))},100)}static ctorParameters=()=>[{type:L}];static propDecorators={defineMask:[{type:a,args:["maskInput"]}]}};q=oi([F({selector:"[maskInput]",standalone:!0})],q);var ri=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},he=class extends H{dynamicFormService;translate;http;fieldOptions;control;group;isEmptyForm;fieldEndpoint;formEndpoint;suggestions=[];suggestionFieldChanged=new c;resultItems;filterInput;KEYCODE_ARROW_UP=38;KEYCODE_ARROW_DOWN=40;KEYCODE_ENTER=13;KEYCODE_ESCAPE=27;KEYCODE_TAB=9;inputText="";options=[];showOptions;focusIndex;focusOnComponent;waitingResult;showTextArea=!1;lastFilterText="";changeSubscription;constructor(e,t,i){super(),this.dynamicFormService=e,this.translate=t,this.http=i,this.clickedOutsideOfSearchResult=this.clickedOutsideOfSearchResult.bind(this)}ngOnInit(){}ngAfterViewInit(){this.control.placeholder=this.control.placeholder||"COMMON.SEARCH",this.group&&(this.changeSubscription=this.group.get(this.control.name).valueChanges.subscribe(t=>{this.checkNewValue(t)})),this.isEmptyForm?this.selectDefaultValues():this.group&&this.control&&this.group.get(this.control.name)&&this.checkNewValue(this.group.get(this.control.name).value),this.control.regex&&(this.group.get(this.control.name).setValidators(u.compose([this.group.get(this.control.name).validator,u.pattern(this.control.regex)])),this.group.get(this.control.name).updateValueAndValidity()),this.isEmptyForm?this.fetchValue():this.updateFormValue(),this.fieldOptions.showTextArea&&(this.showTextArea=!0)}ngOnDestroy(){this.changeSubscription&&this.changeSubscription.unsubscribe()}clickedOutsideOfSearchResult(){this.focusOnComponent||this.setShowOptionsState(!1)}selectItem(e){e!=null&&(this.inputText=e.captionLines[0],this.setShowOptionsState(!1),this.updateFormValue())}onSearchKeydown(e){if(e.keyCode===this.KEYCODE_ARROW_UP)return this.focusIndex-=1,this.focusIndex<0&&(this.focusIndex=this.options.length-1),this.checkFocus(),!1;if(e.keyCode===this.KEYCODE_ARROW_DOWN)return this.focusIndex+=1,this.focusIndex===this.options.length&&(this.focusIndex=0),this.checkFocus(),!1;if(e.keyCode===this.KEYCODE_ENTER)return this.selectItem(this.options[this.focusIndex]),this.filterInput&&this.filterInput.nativeElement&&this.filterInput.nativeElement.blur(),!1;if(e.keyCode===this.KEYCODE_ESCAPE)return this.inputText="",this.lastFilterText="",!1;e.keyCode===this.KEYCODE_TAB?(this.focusOnComponent=!1,this.setShowOptionsState(!1)):this.focusIndex=0}onSearchKeyup(e){this.createDelay(this.callRequest)}onSearchInputFocus(e){this.inputText&&this.lastFilterText===this.inputText?this.setShowOptionsState(!0):this.callRequest()}lastBlurInfoInputText="";onSearchInputBlur(e){if(this.fieldOptions.type===Y.TypeaheadForm&&this.fieldOptions.unique)if(this.lastFilterText!==this.inputText||this.waitingResult)this.filterInput.nativeElement.focus();else{let t=this.suggestions.findIndex(i=>i.searchFields.findIndex(r=>r.name===this.control.name)>=0);if(t>=0){let i=this.suggestions[t].searchFields.findIndex(r=>r.name===this.control.name);i>=0&&this.suggestions[t].searchFields[i].value&&this.lastBlurInfoInputText!==this.inputText&&this.suggestions[t].searchFields[i].value===this.inputText&&(this.dynamicFormService.showErrorMessage("COMMON.UNIQUE_VALUE_SELECT_SUGGESTION",E.Info),this.lastBlurInfoInputText=this.inputText,this.filterInput.nativeElement.focus())}}}onInputChanged(e){this.updateFormValue()}selectDefaultValues(){this.setInputText(this.fieldOptions.defaultValue||"")}checkNewValue(e){this.setInputText(e||"")}setInputText(e){this.inputText!==e&&(this.inputText=e,this.updateFormValue())}checkFocus(){this.resultItems&&this.resultItems.nativeElement&&this.resultItems.nativeElement.children&&this.resultItems.nativeElement.children[this.focusIndex]&&(this.resultItems.nativeElement.scrollTop=this.resultItems.nativeElement.children[this.focusIndex].offsetHeight*this.focusIndex)}callRequest(){this.fieldOptions.type===Y.TypeaheadForm?this.lastFilterText!==this.inputText&&(this.lastFilterText=this.inputText,(!this.fieldOptions.suggestionTriggerLength||this.fieldOptions.suggestionTriggerLength&&this.inputText.length>=this.fieldOptions.suggestionTriggerLength)&&this.suggestionFieldChanged.emit({field:this.control.name,value:this.inputText})):this.inputText?this.lastFilterText===this.inputText?this.setShowOptionsState(!0):(this.lastFilterText=this.inputText,this.waitingResult=!1,this.fieldOptions.type===Y.TypeaheadField&&(this.waitingResult=!0,this.dynamicFormService.requestForField(this.fieldEndpoint,this.control.name,this.inputText).subscribe(e=>{this.waitingResult=!1,this.options=e.items||[],this.setShowOptionsState(!0)},e=>{this.clearSearchData()}))):this.clearSearchData()}clearSearchData(){this.options=[],this.waitingResult=!1,this.lastFilterText="",this.setShowOptionsState(!1)}setShowOptionsState(e){this.showOptions=e&&this.fieldOptions.type!==Y.TypeaheadForm&&this.options.length>0,this.createDelay(this.appendMouseEvents)}appendMouseEvents(){if(this.showOptions&&this.resultItems&&this.resultItems.nativeElement&&this.resultItems.nativeElement.children)for(let e=0;e<this.resultItems.nativeElement.children.length;e++)this.resultItems.nativeElement.children[e].onmouseover=t=>{this.focusIndex=e}}fetchValue(e=!1){if(this.fieldOptions.fetchValueEndPoint){let t;if(typeof this.fieldOptions.fetchValueEndPoint=="string")if(this.fieldOptions.fetchValueEndPoint!="")t=this.fieldOptions.fetchValueEndPoint;else return;else t=h.getCustomKeyValue(this.fieldOptions.fetchValueEndPoint,this.control.customKeys);t&&this.http.get(t).subscribe(i=>{i.value&&(this.inputText=i.value),this.updateFormValue(),e&&this.callRequest()},i=>{this.updateFormValue()})}else this.updateFormValue()}updateFormValue(){this.group&&this.control&&this.group.get(this.control.name).setValue(this.inputText||"")}setFocus(){this.filterInput.nativeElement.focus()}onTextTypeInput(e){let t=this.fieldOptions;if(t.textTransform){let i=h.getCaretPosition(e.target);e.target.value=h.getTransformedText(e.target.value,t.textTransform,this.translate.currentLang),this.setInputText(e.target.value),h.setCaretPosition(e.target,i)}}triggerRefresh(){this.control.triggers&&this.control.triggers.findIndex(e=>e==$.Refresh)>-1&&this.fetchValue(!0)}static ctorParameters=()=>[{type:_},{type:z},{type:ie}];static propDecorators={fieldOptions:[{type:a}],control:[{type:a}],group:[{type:a}],isEmptyForm:[{type:a}],fieldEndpoint:[{type:a}],formEndpoint:[{type:a}],suggestions:[{type:a}],suggestionFieldChanged:[{type:m}],resultItems:[{type:b,args:["resultList"]}],filterInput:[{type:b,args:["filterInput"]}]}};he=ri([f({selector:"dynamic-text-field",template:Lt,standalone:!0,imports:[D,g,v,ce,q,ue,p,le,C],styles:[Et]})],he);var si=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},ge=class{el;renderer;regexSubstr;regexMatch;constructor(e,t){this.el=e,this.renderer=t}ngOnInit(){this.regexSubstr&&(this.regexMatch=new RegExp(this.regexSubstr,"gm"),this.format(this.el.nativeElement.value))}onInput(e){this.regexMatch&&this.format(e)}onPaste(e){this.regexMatch&&(e.preventDefault(),this.format(e.clipboardData.getData("text/plain")))}format(e){this.renderer.setProperty(this.el.nativeElement,"value",e.match(this.regexMatch)[0])}static ctorParameters=()=>[{type:L},{type:ee}];static propDecorators={regexSubstr:[{type:a}],onInput:[{type:T,args:["input",["$event.target.value"]]}],onPaste:[{type:T,args:["paste",["$event"]]}]}};ge=si([F({selector:"[regexSubstr]",standalone:!0})],ge);var ai=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},be=class{translate;formGroupDefinition;formFieldDefinition;fieldEndpoint;formEndpoint;hasNeighbor;atFirstRow;isEmptyForm;isFirstItem=!1;ignoreRequiredInfo;suggestions=[];fieldOnFocus=new c;fieldOnBlur=new c;suggestionFieldChanged=new c;selectOptionAdded=new c;selectOptionRemoved=new c;formItem;dynamicTextField;dynamicImageCaptureField;now=new Date;hidden=!1;valueChangedSubscription;constructor(e){this.translate=e}get hasLabel(){switch(this.formFieldDefinition.type){case P.ImageCapture:case P.Checkbox:return!1;default:return!0}}ngOnInit(){}ngAfterViewInit(){this.formFieldDefinition.regex&&(this.formGroupDefinition.get(this.formFieldDefinition.name).setValidators(u.compose([this.formGroupDefinition.get(this.formFieldDefinition.name).validator,u.pattern(this.formFieldDefinition.regex)])),this.formGroupDefinition.get(this.formFieldDefinition.name).updateValueAndValidity()),setTimeout(()=>{this.formFieldDefinition.order==1&&(this.formFieldDefinition.type==P.Text&&this.formFieldDefinition.options.type!=0?this.dynamicTextField.setFocus():this.formItem&&this.formItem.nativeElement&&this.formItem.nativeElement.focus())},200),this.valueChangedSubscription=this.formGroupDefinition.valueChanges.subscribe(e=>{this.checkHidden()}),this.checkHidden()}ngOnDestroy(){this.valueChangedSubscription&&this.valueChangedSubscription.unsubscribe()}checkHidden(e){let t=this.formGroupDefinition.get(this.formFieldDefinition.name);if(e)this.hidden=e;else if(this.formFieldDefinition.readOnly)this.hidden=!t.value||t.value=="";else if(this.formFieldDefinition.dependentField){let i=this.formGroupDefinition.get(this.formFieldDefinition.dependentField.name);i?(this.hidden=this.formFieldDefinition.dependentField.visibleForValues?.findIndex(r=>r==i.value)==-1,this.formFieldDefinition.dependentField.requiredForValues&&(this.formFieldDefinition.dependentField.requiredForValues?.findIndex(r=>r==i.value)>-1?this.formGroupDefinition.get(this.formFieldDefinition.name).addValidators([u.required]):this.formGroupDefinition.get(this.formFieldDefinition.name).removeValidators([u.required]),this.formGroupDefinition.get(this.formFieldDefinition.name).updateValueAndValidity({onlySelf:!0}))):this.hidden=!1}this.hidden&&t.value!=""&&t.setValue("")}getElementId(e){return"dynamicForm"+e.name}isFormFieldInvalid(e){return this.formGroupDefinition&&this.formGroupDefinition.get(e).invalid}onFieldFocus(e){this.fieldOnFocus.emit(this.formFieldDefinition.name)}onFieldBlur(e){this.fieldOnBlur.emit(this.formFieldDefinition.name)}onSelectItemSelected(e){this.selectOptionAdded.emit({item:e,fieldName:this.formFieldDefinition.name})}onSelectItemRemoved(e){this.selectOptionRemoved.emit({item:e,fieldName:this.formFieldDefinition.name})}onFieldForSuggestionChanged(e){this.suggestionFieldChanged.emit(e)}onTextTypeInput(e){let t=this.formFieldDefinition.options;if(t.textTransform){let i=h.getCaretPosition(e.target);e.target.value=h.getTransformedText(e.target.value,t.textTransform,this.translate.currentLang),h.setCaretPosition(e.target,i)}}triggerRefresh(){this.hidden||(this.dynamicImageCaptureField&&this.dynamicImageCaptureField.triggerRefresh(),this.dynamicTextField&&this.dynamicTextField.triggerRefresh())}getDaysDurationToNow(e){return d.fromJSDate(this.now).diff(d.fromJSDate(e)).toMillis()}getAge(e){return ne(e)?"-":(d.fromJSDate(this.now).year-d.fromJSDate(e).year).toString()}static ctorParameters=()=>[{type:z}];static propDecorators={formGroupDefinition:[{type:a}],formFieldDefinition:[{type:a}],fieldEndpoint:[{type:a}],formEndpoint:[{type:a}],hasNeighbor:[{type:a}],atFirstRow:[{type:a}],isEmptyForm:[{type:a}],isFirstItem:[{type:a}],ignoreRequiredInfo:[{type:a}],suggestions:[{type:a}],fieldOnFocus:[{type:m}],fieldOnBlur:[{type:m}],suggestionFieldChanged:[{type:m}],selectOptionAdded:[{type:m}],selectOptionRemoved:[{type:m}],formItem:[{type:b,args:["formItem"]}],dynamicTextField:[{type:b,args:["dynamicTextField"]}],dynamicImageCaptureField:[{type:b,args:["dynamicImageCaptureField"]}]}};be=ai([f({selector:"dynamic-form-item",template:gt,standalone:!0,providers:[{provide:U,useClass:B}],imports:[v,G,g,D,O,S,q,ge,ce,p,he,j,C,pe,J,W,fe],styles:[bt]})],be);var Tt=`<ng-container *ngIf="activeState">
  <ng-container [ngSwitch]="activeState.state">
    <div *ngSwitchCase="2" class="state-container color-success">
      <cds-icon shape="home" solid></cds-icon>
      <span class="state-label">{{'VISITOR.ACTIVE_USER'|translate}}</span>
    </div>
    <div *ngSwitchCase="3" class="state-container color-selection">
      <cds-icon shape="calendar" solid></cds-icon>
      <span class="state-label">{{'VISITOR.PREREGISTERED_USER'|translate}}</span>
    </div>
    <div *ngSwitchCase="4" class="state-container color-dark-blue-color" [attr.detail]="true" (click)="$event.stopPropagation(); onDetailClicked(activeState)">
      <cds-icon shape="success-standard" solid></cds-icon>
      <span class="state-label">{{'VISITOR.TEMPORARY_PERMITTED_USER'|translate}}</span>
    </div>
    <div *ngSwitchCase="5" class="state-container color-error" [attr.detail]="true" (click)="$event.stopPropagation(); onDetailClicked(activeState)">
      <cds-icon shape="no-access" solid></cds-icon>
      <span class="state-label">{{'VISITOR.BLACK_LIST_USER'|translate}}</span>
    </div>
  </ng-container>
</ng-container>`;var wt=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}:host{position:relative}:host .state-container{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;padding:.1rem .2rem;margin-bottom:.1rem}:host .state-container .state-label{font-size:.672rem;line-height:.6rem;font-weight:500;margin-left:.1rem}:host .state-container[detail=true]{-webkit-border-radius:.375rem;-moz-border-radius:.375rem;border-radius:.375rem;border:1px solid #0369a1;background-color:#0369a10d}:host .state-container[detail=true]:hover{background-color:#0369a133}
`;var ci=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},ve=class{modalService;data;visitorProfile;activeState=null;constructor(e){this.modalService=e}ngOnInit(){this.visitorProfile=new Te,this.visitorProfile.createInstance({states:this.data.states},Te,this.visitorProfile),this.visitorProfile.states?.length>0&&(this.activeState=this.visitorProfile.states[0])}onDetailClicked(e){this.modalService.open(ct,{settings:{size:"md"},props:{profile:this.visitorProfile,visitorState:e.state,isReadOnly:!0}}).result.then(t=>{}).catch(t=>{})}static ctorParameters=()=>[{type:Ye}];static propDecorators={data:[{type:a}]}};ve=ci([f({selector:"armon-visitor-profile-state",template:Tt,standalone:!0,imports:[g,O,S,p],styles:[wt]})],ve);var mi=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},xe=class{dynamicFormService;formGroup;formFields=[];fieldEndpoint;formEndpoint;header;ignoreRequiredInfo;showEditButton=!0;showQRButton=!1;isEmptyForm=!0;showStartupSuggestion=!1;formItems;_enabledForm;get isEnabledForm(){return this._enabledForm}set isEnabledForm(e){this._enabledForm=e,this.checkEnableState()}fieldOnFocus=new c;fieldOnBlur=new c;suggestionLoaded=new c;suggestionSelected=new c;selectOptionAdded=new c;selectOptionRemoved=new c;readQRCodeClicked=new c;formFieldsLayout=[];currentSuggestionRequest=[];currentSuggestionList=[];suggestionListTake=5;suggestionListTotal;suggestionType=et;constructor(e){this.dynamicFormService=e}ngOnInit(){this.initializeLayout()}ngAfterViewInit(){this.showStartupSuggestion&&this.createSuggestionRequest()}onFieldFocus(e){this.fieldOnFocus.emit(e)}onFieldBlur(e){this.fieldOnBlur.emit(e)}onSelectOptionAdded(e){e&&this.selectOptionAdded.emit(e)}onSelectOptionRemoved(e){e&&this.selectOptionRemoved.emit(e)}createSuggestionRequest(){this.formFields.forEach(e=>{if(e.type==P.Text&&e.options.type==2){let t=this.formGroup.get(e.name);if(t.value&&t.value!=""){let i=new Fe;i.fieldName=e.name,i.filter=t.value,this.currentSuggestionRequest.push(i)}}}),this.requestSuggestionList(!0)}onSuggestionFieldChanged(e){let t=this.currentSuggestionRequest.findIndex(i=>i.fieldName===e.field);if(t>=0)e.value?this.currentSuggestionRequest[t].filter=e.value:this.currentSuggestionRequest.splice(t,1);else{let i=new Fe;i.fieldName=e.field,i.filter=e.value,this.currentSuggestionRequest.push(i)}this.requestSuggestionList(this.isEmptyForm)}requestSuggestionList(e){this.currentSuggestionRequest.length>0&&e?this.dynamicFormService.requestForForm(this.formEndpoint,this.currentSuggestionRequest,this.suggestionListTake).subscribe(t=>{t&&t.items&&(this.suggestionListTotal=t.total,t.items.forEach(i=>{let r=[];i.searchFields.forEach(n=>{n.value&&n.value!=""&&i.captionLines.findIndex(s=>s==n.value)==-1&&r.push(n)}),i.searchFieldsText=r.map(n=>n.value).join(", ")})),this.currentSuggestionList=t.items||[],this.suggestionLoaded.emit()}):(this.currentSuggestionList=[],this.suggestionListTotal=null)}getSuggestionTranslationData(){return{total:this.suggestionListTotal,take:this.suggestionListTake}}onSuggestionSelected(e){this.suggestionSelected.emit(e),this.currentSuggestionList=[],this.currentSuggestionRequest=[]}onEditFormClicked(e){this.formGroup.enable()}onQRCodeReadClicked(e){this.readQRCodeClicked.emit()}initializeLayout(){if(this.formFields.filter(t=>t.columnNumber===2).length>0){let t=[],i=[];for(let r=0;r<this.formFields.length;r++){let n=new K;n.items=[this.formFields[r]],this.formFields[r].columnNumber===2?i.push(n):t.push(n)}this.formFieldsLayout.push(t),this.formFieldsLayout.push(i)}else{let t=[];for(let i=0;i<this.formFields.length;i++){let r=new K;r.items=[this.formFields[i]],i<this.formFields.length-1&&this.formFields[i].widthLevel===Z.Narrow&&this.formFields[i+1].widthLevel===Z.Narrow&&(r.items.push(this.formFields[i+1]),i++),t.push(r)}this.formFieldsLayout.push(t)}this.checkEnableState()}checkEnableState(){this.isEnabledForm?this.formGroup.enable():this.formGroup.valid&&this.formGroup.disable()}triggerRefresh(){this.formItems.forEach(e=>{e.triggerRefresh()})}static ctorParameters=()=>[{type:_}];static propDecorators={formGroup:[{type:a}],formFields:[{type:a}],fieldEndpoint:[{type:a}],formEndpoint:[{type:a}],header:[{type:a}],ignoreRequiredInfo:[{type:a}],showEditButton:[{type:a}],showQRButton:[{type:a}],isEmptyForm:[{type:a}],showStartupSuggestion:[{type:a}],formItems:[{type:Se,args:["formItem"]}],isEnabledForm:[{type:a}],fieldOnFocus:[{type:m}],fieldOnBlur:[{type:m}],suggestionLoaded:[{type:m}],suggestionSelected:[{type:m}],selectOptionAdded:[{type:m}],selectOptionRemoved:[{type:m}],readQRCodeClicked:[{type:m}]}};xe=mi([f({selector:"dynamic-form",template:ut,standalone:!0,imports:[v,G,g,C,ve,be,p],styles:[ht]})],xe);var Ot=`<div class="modal-header">
  <span class="text-lg">{{(editMode ? 'CREDENTIAL.TITLE_EDIT':'CREDENTIAL.TITLE_NEW') | translate }}</span>
</div>

<div class="modal-body">
  <div class="my-3" *ngIf="editMode">
    <div class="alert alert-warning" role="alert">
      {{'CREDENTIAL.INFO_EDIT' | translate}}
    </div>
  </div>
  <div class="base-form">
    <form [formGroup]="form">
      <div class="form-group">
        <label for="type-input">{{'CREDENTIAL.TITLE_TYPE' | translate}}</label>
        <select id="type-input" formControlName="type" class="form-select form-select-sm">
          <option [ngValue]="typeOption.value" *ngFor="let typeOption of typeOptions">
            {{typeOption.name|translate}}
          </option>
        </select>
        <div class="alert alert-warning mt-2 text-sm" role="alert" *ngIf="visibleOneTimeAssignable">
          <div class="d-flex">
            <cds-icon shape="warning-standard" class="mr-2" size="md"></cds-icon>
            <span>{{'CREDENTIALTYPE.ONE_TIME_ASSIGNABLE'|translate}}</span>
          </div>
        </div>
      </div>
      <div class="form-group" [ngClass]="{'mb-0': selectedType==16}">
        <label for="data-input">{{'CREDENTIAL.TITLE_DATA' | translate}}</label>
        <div class="d-flex flex-column" [hidden]="!visibleCredentialData">
          <div class="input-group input-group-sm">
            <input type="text" name="data" id="data-input" formControlName="data" maxlength="255" class="form-control"
              trim [ngClass]="{'is-invalid': form.get('data').errors}">
            <div class="invalid-feedback" *ngIf="form.get('data').errors && form.get('data').errors.required">
              {{'VALIDATION.REQUIRED'|translate}}
            </div>
          </div>
          <span class="text-sm text-bold text-muted"
            *ngIf="(currentData && !editMode) && currentData != form.get('data').value">{{'CREDENTIAL.TITLE_CONVERTED_DATA'
            | translate}} :
            {{currentData}}</span>
          <div class="w-100" *ngIf="!visibleCredentialData">
            <!-- QR CODE -->
            <ng-container *ngIf="selectedType==12">
              <qr-code [value]="form.get('data').value" size="96" errorCorrectionLevel="M"></qr-code>
            </ng-container>
          </div>
        </div>
      </div>
      @switch (selectedType) {
      @case (16) {
      <div class="row mb-3">
        <div class="col-12">
          <cds-icon shape="info-standard" solid class="me-1" size="cds-icon-20"></cds-icon><span
            class="text-sm line-height-sm text-italic">{{'CREDENTIALTYPE.MRZ_CARD_INFO'|translate}}</span>
        </div>
        <div class="col-12 mt-1 d-flex column-gap-2">
          <span class="badge text-bg-primary cursor-pointer" nz-popover [nzPopoverContent]="identitySerialHelpTemplate"
            nzPopoverPlacement="bottomLeft">{{'CREDENTIALTYPE.MRZ_CARD_TC_IDENTITY'|translate}}</span>
          <span class="badge text-bg-primary cursor-pointer" nz-popover [nzPopoverContent]="passportNoHelpTemplate"
            nzPopoverPlacement="bottomLeft">{{'CREDENTIALTYPE.MRZ_CARD_PASSPORT'|translate}}</span>
          <span class="badge text-bg-primary cursor-pointer" nz-popover [nzPopoverContent]="identityNoHelpTemplate"
            nzPopoverPlacement="bottomLeft">{{'CREDENTIALTYPE.MRZ_CARD_TC_IDENTITY'|translate}}</span>
        </div>
      </div>
      }
      @default {
      <!-- empty -->
      }
      }
      <div class="form-group" *ngIf="visibleCredentialNumber">
        <label for="credentialNumber-input">{{credentialNumberLabel | translate}}</label>
        <div class="input-group input-group-sm">
          <input type="text" id="credentialNumber-input" formControlName="credentialNumber" maxlength="31"
            [ngClass]="{'is-invalid': form.get('credentialNumber').errors}" class="form-control">
          <div class="invalid-feedback"
            *ngIf="form.get('credentialNumber').errors && form.get('credentialNumber').errors.required">
            {{'VALIDATION.REQUIRED'|translate}}
          </div>
        </div>
      </div>
      <div class="form-group" [ngClass]="{'mb-0': selectedType==16}" *ngIf="visibleExpirationDate">
        <label for="expirationUtc-datepicker">{{'CREDENTIAL.TITLE_EXPIRATION' | translate}}</label>
        <div class="input-group input-group-sm">
          <input type="text" readonly owlinput [min]="nowDate" formControlName="expirationUtc"
            [ngClass]="{'is-invalid': form.get('expirationUtc').errors}" class="form-control bg-white"
            [owlDateTimeTrigger]="dtRange1" id="expirationUtc-datepicker" [owlDateTime]="dtRange1">
          <owl-date-time [firstDayOfWeek]="1" [pickerType]="'both'" [startAt]="tommorowEndofDay" #dtRange1>
          </owl-date-time>
          <button class="btn btn-sm btn-danger" (click)="onResetExpirationDate($event)"
            [disabled]="!(form.get('expirationUtc').value || editCredential?.isExpired)">
            <cds-icon shape="times"></cds-icon>
          </button>
          <div class="invalid-feedback"
            *ngIf="form.get('expirationUtc').errors && form.get('expirationUtc').errors.required">
            {{'VALIDATION.REQUIRED'|translate}}
          </div>
        </div>
      </div>
      @switch (selectedType) {
      @case (16) {
      <div class="row mb-3">
        <div class="col-12">
          <cds-icon shape="info-standard" solid class="me-1" size="cds-icon-20"></cds-icon><span
            class="text-sm text-italic line-height-sm">{{'CREDENTIALTYPE.MRZ_CARD_EXPIRATION_DATE'|translate}}</span>
        </div>
      </div>
      }
      @default {
      <!-- empty -->
      }
      }
      <div class="form-group">
        <label for="type-input">{{'CREDENTIAL.TITLE_GROUP' | translate}}</label>
        <select id="type-input" formControlName="groupNumber" class="form-select form-select-sm">
          <option [ngValue]="groupOption" *ngFor="let groupOption of groupOptions">
            <ng-container *ngIf="groupOption==0">{{'CREDENTIAL.NO_GROUP'|translate}}</ng-container>
            <ng-container *ngIf="groupOption!=0">{{'CREDENTIAL.GROUP'|translate}} {{groupOption}}</ng-container>
          </option>
        </select>
      </div>
      <div class="form-group">
        <label for="note-textarea">{{'CREDENTIAL.TITLE_NOTE' | translate}}</label>
        <textarea name="note" id="note-textarea" formControlName="note" rows="2" cols="20" maxlength="1023"
          class="form-control form-control-sm" style="resize:none"></textarea>
      </div>
    </form>
  </div>

  <div class="extension-forms">
    <div class="extension-form-title" *ngIf="visibleVehiclePlateExtensionForm || vehicleUHFRfidExtensionForm">
      {{'CREDENTIAL.TITLE_VEHICLE_INFO' |
      translate}}</div>
    <!-- FINGER PRINT EXTENSION FIELDS -->
    <form [formGroup]="fingerPrintExtensionForm" *ngIf="visibleFingerPrintExtensionForm">
      <label>{{'CREDENTIAL.TITLE_FINGER_PRINT_SELECTION'|translate}}</label>
      <armon-finger-selection-input id="finger-input" formControlName="finger">
      </armon-finger-selection-input>
    </form>
    <!-- FINGER PRINT EXTENSION FIELDS -->

    <!-- CAR UHFRfid -->
    <form [formGroup]="vehicleUHFRfidExtensionForm" *ngIf="visibleVehicleUHFRfidExtensionForm">
      <div class="form-group">
        <!-- CAR OWNER -->
        <label for="licencePlate-input">{{'CREDENTIAL.TITLE_VEHICLE_PLATE' | translate}}</label>
        <input type="text" name="licencePlate" id="licencePlate-input" formControlName="licencePlate" maxlength="60"
          class="form-control form-control-sm">
      </div>
    </form>
    <!-- CAR UHFRfid -->

    <!-- CAR EXTENSION FIELDS -->
    <form [formGroup]="vehiclePlateExtensionForm" *ngIf="visibleVehiclePlateExtensionForm">
      <div class="form-group">
        <!-- CAR OWNER -->
        <label for="owner-input">{{'CREDENTIAL.TITLE_VEHICLE_OWNER' | translate}}</label>
        <input type="text" name="owner" id="owner-input" formControlName="owner" maxlength="255"
          class="form-control form-control-sm">
      </div>
      <div class="form-group">
        <!-- CAR TYPE -->
        <label for="vehicle-type-input">{{'CREDENTIAL.TITLE_VEHICLE_TYPE' | translate}}</label>
        <armon-user-defined-list-input [type]="4" id="vehicle-type-input" class="custom-item" formControlName="type">
        </armon-user-defined-list-input>
      </div>
      <div class="form-group">
        <!-- CAR COLOR -->
        <label for="vehicle-color-input">{{'CREDENTIAL.TITLE_VEHICLE_COLOR' | translate}}</label>
        <armon-user-defined-list-input [type]="3" id="vehicle-color-input" class="custom-item" formControlName="color">
        </armon-user-defined-list-input>
      </div>
      <div class="form-group">
        <!-- CAR YEAR -->
        <label for="vehicle-year-input">{{'CREDENTIAL.TITLE_VEHICLE_YEAR' | translate}}</label>
        <select id="vehicle-year-input" formControlName="year" class="form-select form-select-sm">
          <option [ngValue]="vehicleYear" *ngFor="let vehicleYear of vehicleYears">
            {{vehicleYear.value}}
          </option>
        </select>
      </div>
      <div class="form-group">
        <!-- CAR BRAND -->
        <label for="vehicle-brand-input">{{'CREDENTIAL.TITLE_VEHICLE_BRAND' | translate}}</label>
        <armon-user-defined-list-input [type]="1" id="vehicle-brand-input" class="custom-item" formControlName="brand">
        </armon-user-defined-list-input>
      </div>
      <div class="form-group">
        <!-- CAR MODEL -->
        <label for="vehicle-model-input">{{'CREDENTIAL.TITLE_VEHICLE_MODEL' | translate}}</label>
        <armon-user-defined-list-input [type]="2" [relatedType]="1"
          [relatedValueId]="vehiclePlateExtensionForm.get('brand').value?vehiclePlateExtensionForm.get('brand').value.id:null"
          id="vehicle-model-input" class="custom-item" formControlName="model"></armon-user-defined-list-input>
      </div>
    </form>
    <!-- CAR EXTENSION FIELDS -->

  </div>
  <div class="dynamic-form" *ngIf="visibleDynamicForm">
    <div class="title">{{'CREDENTIAL.TITLE_ORGANIZATION_CUSTOM_INFO' |
      translate}}</div>
    <dynamic-form *ngIf="credentialFormInfo.formGroup" [formGroup]="credentialFormInfo.formGroup"
      [formFields]="credentialFormInfo.formFields" [isEnabledForm]="true"></dynamic-form>
  </div>
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-outline-primary mr-2" (click)="onCancelClicked($event)">{{'BUTTON.CLOSE' |
    translate}}</button>
  <button class="btn btn-success" (click)="onAddClicked($event)"
    [disabled]="form.invalid || (credentialFormInfo && credentialFormInfo.formGroup.invalid)"
    *ngIf="!editMode">{{'BUTTON.ADD'
    | translate}}</button>
  <button class="btn btn-success" (click)="onEditClicked($event)"
    [disabled]="form.invalid || (credentialFormInfo && credentialFormInfo.formGroup.invalid)"
    *ngIf="editMode">{{'BUTTON.SAVE'
    | translate}}</button>
</div>

<!-- HELP POPOVER IMAGES -->
<ng-template #identitySerialHelpTemplate>
  <img src="./assets/images/popover/credential/tc_card_serial.jpg">
</ng-template>

<ng-template #passportNoHelpTemplate>
  <img src="./assets/images/popover/credential/passport_no.jpg">
</ng-template>

<ng-template #identityNoHelpTemplate>
  <img src="./assets/images/popover/credential/tc_card_no.jpg">
</ng-template>`;var St=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}.extension-forms{margin-top:20px}.extension-form-title,.dynamic-form .title{width:100%;padding:6px;border-bottom:solid 1px rgba(102,102,102,.2);color:#666}
`;var kt=`<div class="finger-selection-input">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate"
        viewBox="0 0 1024 600" [attr.width]="small?170:300">
        <defs>
            <clipPath>
                <rect width="1024" height="600" />
            </clipPath>
        </defs>
        <g>
            <g>
                <g>
                    <g>
                        <g>
                            <path
                                d=" M 744.96 313.4 C 749.679 313.4 753.493 309.577 753.493 304.867 L 753.493 117.133 C 753.493 107.721 761.071 100.066 770.38 100.066 C 779.895 100.066 787.626 107.72 787.626 117.133 L 787.626 298.646 C 787.626 303.356 791.449 307.179 796.159 307.179 C 800.878 307.179 804.692 303.356 804.692 298.646 L 804.692 117.133 C 804.693 98.309 789.308 83 770.381 83 C 751.667 83 736.427 98.309 736.427 117.133 L 736.427 304.866 C 736.427 309.577 740.25 313.4 744.96 313.4 Z "
                                fill="rgb(153,153,153)" />
                            <path
                                d=" M 820.966 306.241 C 825.608 307.035 830.028 303.954 830.848 299.32 L 855.97 156.839 C 857.625 147.572 866.526 141.377 875.75 142.998 C 885.017 144.636 891.221 153.503 889.6 162.77 L 864.324 306.07 C 863.496 310.712 866.594 315.141 871.236 315.96 C 871.739 316.045 872.243 316.088 872.729 316.088 C 876.799 316.088 880.4 313.178 881.126 309.039 L 906.393 165.73 C 909.661 147.196 897.245 129.463 878.702 126.187 C 860.185 122.936 842.444 135.352 839.176 153.878 L 814.046 296.35 C 813.227 300.993 816.324 305.413 820.966 306.241 Z "
                                fill="rgb(153,153,153)" />
                            <path
                                d=" M 804.514 321.933 C 745.941 321.933 702.114 340.928 682.726 351.168 L 651.187 179.836 C 650.393 175.347 651.4 170.816 654.012 167.087 C 656.623 163.349 660.54 160.858 665.029 160.064 C 674.296 158.443 683.162 164.646 684.792 173.905 L 708.839 310.259 C 709.658 314.893 714.036 317.999 718.729 317.18 C 723.371 316.361 726.469 311.932 725.649 307.29 L 701.602 170.945 C 698.334 152.411 680.567 139.986 662.067 143.254 C 653.081 144.841 645.256 149.825 640.034 157.291 C 634.795 164.766 632.789 173.82 634.385 182.865 L 668.126 366.144 C 668.126 366.153 668.135 366.161 668.135 366.17 C 668.161 366.298 668.246 366.409 668.28 366.545 C 668.502 367.484 668.852 368.371 669.347 369.156 C 669.381 369.216 669.381 369.276 669.415 369.335 C 669.577 369.565 669.808 369.685 669.987 369.898 C 670.448 370.47 670.934 370.999 671.523 371.425 C 671.864 371.681 672.231 371.852 672.598 372.048 C 673.144 372.33 673.69 372.577 674.296 372.739 C 674.723 372.859 675.141 372.918 675.593 372.969 C 675.9 373.003 676.19 373.131 676.515 373.131 C 677.027 373.131 677.539 373.088 678.068 372.986 C 678.077 372.986 678.077 372.986 678.085 372.977 C 678.606 372.883 679.083 372.576 679.578 372.38 C 680.141 372.158 680.747 372.03 681.234 371.706 C 681.242 371.706 681.251 371.706 681.251 371.697 C 681.746 371.373 731.154 338.997 804.515 338.997 C 864.59 338.997 899.986 369.743 909.415 379.163 C 915.269 385.025 917.368 397.484 915.636 405.48 C 915.38 406.666 890.036 524.767 881.759 549.634 C 872.97 575.959 865.75 577.931 855.715 577.931 L 710.648 577.931 C 701.27 577.931 688.385 563.237 683.759 556.342 L 553.31 347.388 C 547.183 337.336 547.891 336.627 551.288 333.231 C 556.143 328.376 562.031 326.003 568.602 326.2 C 579.38 326.507 591.821 333.411 601.873 344.675 L 670.14 421.475 C 673.272 424.991 678.656 425.298 682.189 422.183 C 685.713 419.043 686.029 413.658 682.897 410.125 L 614.613 333.316 C 601.284 318.391 584.687 309.576 569.079 309.141 C 557.721 308.774 547.404 312.972 539.221 321.164 C 525.619 334.758 533.521 347.711 538.786 356.355 L 669.414 565.601 C 671.42 568.606 689.63 595 710.648 595 L 855.715 595 C 879.779 595 889.712 579.708 897.938 555.03 C 906.531 529.276 931.269 413.948 932.327 409.067 C 935.075 396.344 932.233 377.844 921.481 367.1 C 910.891 356.502 871.151 321.933 804.514 321.933 Z "
                                fill="rgb(153,153,153)" />
                            <path
                                d=" M 990.157 220.071 C 987.384 213.995 982.153 209.532 974.635 206.785 C 957.961 200.735 942.055 207.553 936.158 222.87 L 893.21 315.277 C 891.222 319.552 893.082 324.621 897.349 326.609 C 901.641 328.597 906.702 326.746 908.69 322.47 L 951.86 229.542 C 954.591 222.485 960.914 219.959 968.799 222.826 C 973.416 224.507 974.32 226.504 974.627 227.161 C 975.83 229.798 975.301 234.252 972.997 240.243 L 934.734 348.565 C 933.164 353.002 935.502 357.875 939.939 359.445 C 940.878 359.786 941.842 359.94 942.781 359.94 C 946.297 359.94 949.591 357.747 950.828 354.248 L 989.015 246.139 C 993.016 235.695 993.391 227.171 990.157 220.071 Z "
                                fill="rgb(153,153,153)" />
                            <!-- <path d=" M 881.314 424.333 C 886.033 424.333 889.847 420.51 889.847 415.8 C 889.847 411.09 886.033 407.267 881.314 407.267 C 827.042 407.267 794.854 360.334 794.539 359.856 C 791.902 355.939 786.612 354.898 782.703 357.518 C 778.795 360.138 777.737 365.42 780.348 369.337 C 781.85 371.58 817.749 424.333 881.314 424.333 Z "
                                fill="rgb(153,153,153)" /> -->
                            <!-- <path d=" M 719.283 431.689 C 718.634 436.348 721.886 440.649 726.536 441.315 C 728.891 441.656 784.383 450.394 804.855 520.59 C 805.939 524.319 809.344 526.734 813.047 526.734 C 813.832 526.734 814.643 526.623 815.436 526.393 C 819.967 525.07 822.553 520.334 821.239 515.812 C 797.559 434.626 731.656 424.787 728.866 424.411 C 724.198 423.787 719.932 427.038 719.283 431.689 Z "
                                fill="rgb(153,153,153)" /> -->
                        </g>
                    </g>
                </g>
                <g>
                    <g>
                        <g>
                            <path
                                d=" M 279.04 313.4 C 274.321 313.4 270.507 309.577 270.507 304.867 L 270.507 117.133 C 270.507 107.721 262.929 100.066 253.62 100.066 C 244.105 100.066 236.374 107.72 236.374 117.133 L 236.374 298.646 C 236.374 303.356 232.551 307.179 227.841 307.179 C 223.122 307.179 219.308 303.356 219.308 298.646 L 219.308 117.133 C 219.307 98.309 234.692 83 253.619 83 C 272.333 83 287.573 98.309 287.573 117.133 L 287.573 304.866 C 287.573 309.577 283.75 313.4 279.04 313.4 Z "
                                fill="rgb(153,153,153)" />
                            <path
                                d=" M 203.034 306.241 C 198.392 307.035 193.972 303.954 193.152 299.32 L 168.03 156.839 C 166.375 147.572 157.474 141.377 148.25 142.998 C 138.983 144.636 132.779 153.503 134.4 162.77 L 159.676 306.07 C 160.504 310.712 157.406 315.141 152.764 315.96 C 152.261 316.045 151.757 316.088 151.271 316.088 C 147.201 316.088 143.6 313.178 142.874 309.039 L 117.607 165.73 C 114.339 147.196 126.755 129.463 145.298 126.187 C 163.815 122.936 181.556 135.352 184.824 153.878 L 209.954 296.35 C 210.773 300.993 207.676 305.413 203.034 306.241 Z "
                                fill="rgb(153,153,153)" />
                            <path
                                d=" M 219.486 321.933 C 278.059 321.933 321.886 340.928 341.274 351.168 L 372.813 179.836 C 373.607 175.347 372.6 170.816 369.988 167.087 C 367.377 163.349 363.46 160.858 358.971 160.064 C 349.704 158.443 340.838 164.646 339.208 173.905 L 315.161 310.259 C 314.342 314.893 309.964 317.999 305.271 317.18 C 300.629 316.361 297.531 311.932 298.351 307.29 L 322.398 170.945 C 325.666 152.411 343.433 139.986 361.933 143.254 C 370.919 144.841 378.744 149.825 383.966 157.291 C 389.205 164.766 391.211 173.82 389.615 182.865 L 355.874 366.144 C 355.874 366.153 355.865 366.161 355.865 366.17 C 355.839 366.298 355.754 366.409 355.72 366.545 C 355.498 367.484 355.148 368.371 354.653 369.156 C 354.619 369.216 354.619 369.276 354.585 369.335 C 354.423 369.565 354.192 369.685 354.013 369.898 C 353.552 370.47 353.066 370.999 352.477 371.425 C 352.136 371.681 351.769 371.852 351.402 372.048 C 350.856 372.33 350.31 372.577 349.704 372.739 C 349.277 372.859 348.859 372.918 348.407 372.969 C 348.1 373.003 347.81 373.131 347.485 373.131 C 346.973 373.131 346.461 373.088 345.932 372.986 C 345.923 372.986 345.923 372.986 345.915 372.977 C 345.394 372.883 344.917 372.576 344.422 372.38 C 343.859 372.158 343.253 372.03 342.766 371.706 C 342.758 371.706 342.749 371.706 342.749 371.697 C 342.254 371.373 292.846 338.997 219.485 338.997 C 159.41 338.997 124.014 369.743 114.585 379.163 C 108.731 385.025 106.632 397.484 108.364 405.48 C 108.62 406.666 133.964 524.767 142.241 549.634 C 151.03 575.959 158.25 577.931 168.285 577.931 L 313.352 577.931 C 322.73 577.931 335.615 563.237 340.241 556.342 L 470.69 347.388 C 476.817 337.336 476.109 336.627 472.712 333.231 C 467.857 328.376 461.969 326.003 455.398 326.2 C 444.62 326.507 432.179 333.411 422.127 344.675 L 353.86 421.475 C 350.728 424.991 345.344 425.298 341.811 422.183 C 338.287 419.043 337.971 413.658 341.103 410.125 L 409.387 333.316 C 422.716 318.391 439.313 309.576 454.921 309.141 C 466.279 308.774 476.596 312.972 484.779 321.164 C 498.381 334.758 490.479 347.711 485.214 356.355 L 354.586 565.601 C 352.58 568.606 334.37 595 313.352 595 L 168.285 595 C 144.221 595 134.288 579.708 126.062 555.03 C 117.469 529.276 92.731 413.948 91.673 409.067 C 88.925 396.344 91.767 377.844 102.519 367.1 C 113.109 356.502 152.849 321.933 219.486 321.933 Z "
                                fill="rgb(153,153,153)" />
                            <path
                                d=" M 33.843 220.071 C 36.616 213.995 41.847 209.532 49.365 206.785 C 66.039 200.735 81.945 207.553 87.842 222.87 L 130.79 315.277 C 132.778 319.552 130.918 324.621 126.651 326.609 C 122.359 328.597 117.298 326.746 115.31 322.47 L 72.14 229.542 C 69.409 222.485 63.086 219.959 55.201 222.826 C 50.584 224.507 49.68 226.504 49.373 227.161 C 48.17 229.798 48.699 234.252 51.003 240.243 L 89.266 348.565 C 90.836 353.002 88.498 357.875 84.061 359.445 C 83.122 359.786 82.158 359.94 81.219 359.94 C 77.703 359.94 74.409 357.747 73.172 354.248 L 34.985 246.139 C 30.984 235.695 30.609 227.171 33.843 220.071 Z "
                                fill="rgb(153,153,153)" />
                            <!-- <path d=" M 142.686 424.333 C 137.967 424.333 134.153 420.51 134.153 415.8 C 134.153 411.09 137.967 407.267 142.686 407.267 C 196.958 407.267 229.146 360.334 229.461 359.856 C 232.098 355.939 237.388 354.898 241.297 357.518 C 245.205 360.138 246.263 365.42 243.652 369.337 C 242.15 371.58 206.251 424.333 142.686 424.333 Z "
                                fill="rgb(153,153,153)" />
                            <path d=" M 304.717 431.689 C 305.366 436.348 302.114 440.649 297.464 441.315 C 295.109 441.656 239.617 450.394 219.145 520.59 C 218.061 524.319 214.656 526.734 210.953 526.734 C 210.168 526.734 209.357 526.623 208.564 526.393 C 204.033 525.07 201.447 520.334 202.761 515.812 C 226.441 434.626 292.344 424.787 295.134 424.411 C 299.802 423.787 304.068 427.038 304.717 431.689 Z "
                                fill="rgb(153,153,153)" /> -->
                        </g>
                    </g>
                </g>
            </g>
            <g (click)="onFingerChanged(1);" [attr.clickable]="!isDisabled">
                <path
                    d="M 24 126 L 75 126 C 80.519 126 85 130.481 85 136 L 85 187 C 85 192.519 80.519 197 75 197 L 24 197 C 18.481 197 14 192.519 14 187 L 14 136 C 14 130.481 18.481 126 24 126 Z"
                    style="stroke:none;fill:#2680A1;stroke-miterlimit:10;" [attr.selected]="selectedValue==1"
                    [attr.active]="fingers[0].active">

                </path>
                <path
                    d=" M 56.672 140.641 L 56.672 186.328 L 47.016 186.328 L 47.016 159.891 L 47.109 155.547 L 47.266 150.797 L 47.266 150.797 Q 44.859 153.203 43.922 153.953 L 43.922 153.953 L 38.672 158.172 L 34.016 152.359 L 48.734 140.641 L 56.672 140.641 L 56.672 140.641 Z "
                    fill="rgb(255,255,255)" />
                <title>{{fingers[0].label|translate}}</title>
            </g>
            <g (click)="onFingerChanged(2);" [attr.clickable]="!isDisabled">
                <path
                    d="M 104 46 L 155 46 C 160.519 46 165 50.481 165 56 L 165 107 C 165 112.519 160.519 117 155 117 L 104 117 C 98.481 117 94 112.519 94 107 L 94 56 C 94 50.481 98.481 46 104 46 Z"
                    style="stroke:none;fill:#2680A1;stroke-miterlimit:10;" [attr.selected]="selectedValue==2"
                    [attr.active]="fingers[1].active">

                </path>
                <path
                    d=" M 144.734 98.203 L 144.734 106.328 L 112.797 106.328 L 112.797 99.609 L 124.266 88.016 L 124.266 88.016 Q 129.359 82.797 130.922 80.781 L 130.922 80.781 L 130.922 80.781 Q 132.484 78.766 133.172 77.047 L 133.172 77.047 L 133.172 77.047 Q 133.859 75.328 133.859 73.484 L 133.859 73.484 L 133.859 73.484 Q 133.859 70.734 132.344 69.391 L 132.344 69.391 L 132.344 69.391 Q 130.828 68.047 128.297 68.047 L 128.297 68.047 L 128.297 68.047 Q 125.641 68.047 123.141 69.266 L 123.141 69.266 L 123.141 69.266 Q 120.641 70.484 117.922 72.734 L 117.922 72.734 L 112.672 66.516 L 112.672 66.516 Q 116.047 63.641 118.266 62.453 L 118.266 62.453 L 118.266 62.453 Q 120.484 61.266 123.109 60.625 L 123.109 60.625 L 123.109 60.625 Q 125.734 59.984 128.984 59.984 L 128.984 59.984 L 128.984 59.984 Q 133.266 59.984 136.547 61.547 L 136.547 61.547 L 136.547 61.547 Q 139.828 63.109 141.641 65.922 L 141.641 65.922 L 141.641 65.922 Q 143.453 68.734 143.453 72.359 L 143.453 72.359 L 143.453 72.359 Q 143.453 75.516 142.344 78.281 L 142.344 78.281 L 142.344 78.281 Q 141.234 81.047 138.906 83.953 L 138.906 83.953 L 138.906 83.953 Q 136.578 86.859 130.703 92.234 L 130.703 92.234 L 124.828 97.766 L 124.828 98.203 L 144.734 98.203 L 144.734 98.203 Z "
                    fill="rgb(255,255,255)" />
                <title>{{fingers[1].label|translate}}</title>
            </g>
            <g (click)="onFingerChanged(3);" [attr.clickable]="!isDisabled">
                <path
                    d="M 232 8.078 L 283 8.078 C 288.519 8.078 293 12.559 293 18.078 L 293 69.078 C 293 74.597 288.519 79.078 283 79.078 L 232 79.078 C 226.481 79.078 222 74.597 222 69.078 L 222 18.078 C 222 12.559 226.481 8.078 232 8.078 Z"
                    style="stroke:none;fill:#2680A1;stroke-miterlimit:10;" [attr.selected]="selectedValue==3"
                    [attr.active]="fingers[2].active">

                </path>
                <path
                    d=" M 270.953 32.938 L 270.953 32.938 L 270.953 32.938 Q 270.953 37.219 268.359 40.219 L 268.359 40.219 L 268.359 40.219 Q 265.766 43.219 261.078 44.344 L 261.078 44.344 L 261.078 44.531 L 261.078 44.531 Q 266.609 45.219 269.453 47.891 L 269.453 47.891 L 269.453 47.891 Q 272.297 50.563 272.297 55.094 L 272.297 55.094 L 272.297 55.094 Q 272.297 61.688 267.516 65.359 L 267.516 65.359 L 267.516 65.359 Q 262.734 69.031 253.859 69.031 L 253.859 69.031 L 253.859 69.031 Q 246.422 69.031 240.672 66.563 L 240.672 66.563 L 240.672 58.344 L 240.672 58.344 Q 243.328 59.688 246.516 60.531 L 246.516 60.531 L 246.516 60.531 Q 249.703 61.375 252.828 61.375 L 252.828 61.375 L 252.828 61.375 Q 257.609 61.375 259.891 59.75 L 259.891 59.75 L 259.891 59.75 Q 262.172 58.125 262.172 54.531 L 262.172 54.531 L 262.172 54.531 Q 262.172 51.313 259.547 49.969 L 259.547 49.969 L 259.547 49.969 Q 256.922 48.625 251.172 48.625 L 251.172 48.625 L 247.703 48.625 L 247.703 41.219 L 251.234 41.219 L 251.234 41.219 Q 256.547 41.219 259 39.828 L 259 39.828 L 259 39.828 Q 261.453 38.438 261.453 35.063 L 261.453 35.063 L 261.453 35.063 Q 261.453 29.875 254.953 29.875 L 254.953 29.875 L 254.953 29.875 Q 252.703 29.875 250.375 30.625 L 250.375 30.625 L 250.375 30.625 Q 248.047 31.375 245.203 33.219 L 245.203 33.219 L 240.734 26.563 L 240.734 26.563 Q 246.984 22.063 255.641 22.063 L 255.641 22.063 L 255.641 22.063 Q 262.734 22.063 266.844 24.938 L 266.844 24.938 L 266.844 24.938 Q 270.953 27.813 270.953 32.938 Z "
                    fill="rgb(255,255,255)" />
                <title>{{fingers[2].label|translate}}</title>
            </g>
            <g (click)="onFingerChanged(4);" [attr.clickable]="!isDisabled">
                <path
                    d="M 346 57.078 L 397 57.078 C 402.519 57.078 407 61.559 407 67.078 L 407 118.078 C 407 123.597 402.519 128.078 397 128.078 L 346 128.078 C 340.481 128.078 336 123.597 336 118.078 L 336 67.078 C 336 61.559 340.481 57.078 346 57.078 Z"
                    style="stroke:none;fill:#2680A1;stroke-miterlimit:10;" [attr.selected]="selectedValue==4"
                    [attr.active]="fingers[3].active">

                </path>
                <path
                    d=" M 387.766 100.438 L 387.766 107.938 L 382.266 107.938 L 382.266 117.406 L 372.828 117.406 L 372.828 107.938 L 353.328 107.938 L 353.328 101.219 L 373.359 71.719 L 382.266 71.719 L 382.266 100.438 L 387.766 100.438 L 387.766 100.438 Z  M 361.828 100.438 L 372.828 100.438 L 372.828 92.688 L 372.828 92.688 Q 372.828 90.75 372.984 87.063 L 372.984 87.063 L 372.984 87.063 Q 373.141 83.375 373.234 82.781 L 373.234 82.781 L 372.984 82.781 L 372.984 82.781 Q 371.828 85.344 370.203 87.781 L 370.203 87.781 L 361.828 100.438 L 361.828 100.438 Z "
                    fill="rgb(255,255,255)" />
                <title>{{fingers[3].label|translate}}</title>
            </g>
            <g (click)="onFingerChanged(5);" [attr.clickable]="!isDisabled">
                <path
                    d="M 441 220.922 L 492 220.922 C 497.519 220.922 502 225.403 502 230.922 L 502 281.922 C 502 287.441 497.519 291.922 492 291.922 L 441 291.922 C 435.481 291.922 431 287.441 431 281.922 L 431 230.922 C 431 225.403 435.481 220.922 441 220.922 Z"
                    style="stroke:none;fill:#2680A1;stroke-miterlimit:10;" [attr.selected]="selectedValue==5"
                    [attr.active]="fingers[4].active">

                </path>
                <path
                    d=" M 466.422 252.063 L 466.422 252.063 L 466.422 252.063 Q 473.047 252.063 476.969 255.781 L 476.969 255.781 L 476.969 255.781 Q 480.891 259.5 480.891 265.969 L 480.891 265.969 L 480.891 265.969 Q 480.891 273.625 476.172 277.75 L 476.172 277.75 L 476.172 277.75 Q 471.453 281.875 462.672 281.875 L 462.672 281.875 L 462.672 281.875 Q 455.047 281.875 450.359 279.406 L 450.359 279.406 L 450.359 271.063 L 450.359 271.063 Q 452.828 272.375 456.109 273.203 L 456.109 273.203 L 456.109 273.203 Q 459.391 274.031 462.328 274.031 L 462.328 274.031 L 462.328 274.031 Q 471.172 274.031 471.172 266.781 L 471.172 266.781 L 471.172 266.781 Q 471.172 259.875 462.016 259.875 L 462.016 259.875 L 462.016 259.875 Q 460.359 259.875 458.359 260.203 L 458.359 260.203 L 458.359 260.203 Q 456.359 260.531 455.109 260.906 L 455.109 260.906 L 451.266 258.844 L 452.984 235.563 L 477.766 235.563 L 477.766 243.75 L 461.453 243.75 L 460.609 252.719 L 461.703 252.5 L 461.703 252.5 Q 463.609 252.063 466.422 252.063 Z "
                    fill="rgb(255,255,255)" />
                <title>{{fingers[4].label|translate}}</title>
            </g>
            <g (click)="onFingerChanged(6);" [attr.clickable]="!isDisabled">
                <path
                    d="M 541 220.922 L 592 220.922 C 597.519 220.922 602 225.403 602 230.922 L 602 281.922 C 602 287.441 597.519 291.922 592 291.922 L 541 291.922 C 535.481 291.922 531 287.441 531 281.922 L 531 230.922 C 531 225.403 535.481 220.922 541 220.922 Z"
                    style="stroke:none;fill:#2680A1;stroke-miterlimit:10;" [attr.selected]="selectedValue==6"
                    [attr.active]="fingers[5].active">

                </path>
                <path
                    d=" M 549.484 261.844 L 549.484 261.844 L 549.484 261.844 Q 549.484 248.281 555.219 241.656 L 555.219 241.656 L 555.219 241.656 Q 560.953 235.031 572.391 235.031 L 572.391 235.031 L 572.391 235.031 Q 576.297 235.031 578.516 235.5 L 578.516 235.5 L 578.516 243.219 L 578.516 243.219 Q 575.734 242.594 573.016 242.594 L 573.016 242.594 L 573.016 242.594 Q 568.047 242.594 564.906 244.094 L 564.906 244.094 L 564.906 244.094 Q 561.766 245.594 560.203 248.531 L 560.203 248.531 L 560.203 248.531 Q 558.641 251.469 558.359 256.875 L 558.359 256.875 L 558.766 256.875 L 558.766 256.875 Q 561.859 251.563 568.672 251.563 L 568.672 251.563 L 568.672 251.563 Q 574.797 251.563 578.266 255.406 L 578.266 255.406 L 578.266 255.406 Q 581.734 259.25 581.734 266.031 L 581.734 266.031 L 581.734 266.031 Q 581.734 273.344 577.609 277.609 L 577.609 277.609 L 577.609 277.609 Q 573.484 281.875 566.172 281.875 L 566.172 281.875 L 566.172 281.875 Q 561.109 281.875 557.344 279.531 L 557.344 279.531 L 557.344 279.531 Q 553.578 277.188 551.531 272.688 L 551.531 272.688 L 551.531 272.688 Q 549.484 268.188 549.484 261.844 Z  M 565.984 274.156 L 565.984 274.156 L 565.984 274.156 Q 569.078 274.156 570.734 272.078 L 570.734 272.078 L 570.734 272.078 Q 572.391 270 572.391 266.156 L 572.391 266.156 L 572.391 266.156 Q 572.391 262.813 570.844 260.891 L 570.844 260.891 L 570.844 260.891 Q 569.297 258.969 566.172 258.969 L 566.172 258.969 L 566.172 258.969 Q 563.234 258.969 561.156 260.875 L 561.156 260.875 L 561.156 260.875 Q 559.078 262.781 559.078 265.313 L 559.078 265.313 L 559.078 265.313 Q 559.078 269.031 561.031 271.594 L 561.031 271.594 L 561.031 271.594 Q 562.984 274.156 565.984 274.156 Z "
                    fill="rgb(255,255,255)" />
                <title>{{fingers[5].label|translate}}</title>
            </g>
            <g (click)="onFingerChanged(7);" [attr.clickable]="!isDisabled">
                <path
                    d="M 623 57.078 L 674 57.078 C 679.519 57.078 684 61.559 684 67.078 L 684 118.078 C 684 123.597 679.519 128.078 674 128.078 L 623 128.078 C 617.481 128.078 613 123.597 613 118.078 L 613 67.078 C 613 61.559 617.481 57.078 623 57.078 Z"
                    style="stroke:none;fill:#2680A1;stroke-miterlimit:10;" [attr.selected]="selectedValue==7"
                    [attr.active]="fingers[6].active">

                </path>
                <path
                    d=" M 646.453 117.406 L 636.328 117.406 L 653.484 79.906 L 630.953 79.906 L 630.953 71.781 L 663.734 71.781 L 663.734 77.844 L 646.453 117.406 L 646.453 117.406 Z "
                    fill="rgb(255,255,255)" />
                <title>{{fingers[6].label|translate}}</title>
            </g>
            <g (click)="onFingerChanged(8);" [attr.clickable]="!isDisabled">
                <path
                    d="M 744 8.078 L 795 8.078 C 800.519 8.078 805 12.559 805 18.078 L 805 69.078 C 805 74.597 800.519 79.078 795 79.078 L 744 79.078 C 738.481 79.078 734 74.597 734 69.078 L 734 18.078 C 734 12.559 738.481 8.078 744 8.078 Z"
                    style="stroke:none;fill:#2680A1;stroke-miterlimit:10;" [attr.selected]="selectedValue==8"
                    [attr.active]="fingers[7].active">

                </path>
                <path
                    d=" M 768.547 22.125 L 768.547 22.125 L 768.547 22.125 Q 775.109 22.125 779.125 25.109 L 779.125 25.109 L 779.125 25.109 Q 783.141 28.094 783.141 33.156 L 783.141 33.156 L 783.141 33.156 Q 783.141 36.656 781.203 39.391 L 781.203 39.391 L 781.203 39.391 Q 779.266 42.125 774.953 44.281 L 774.953 44.281 L 774.953 44.281 Q 780.078 47.031 782.313 50.016 L 782.313 50.016 L 782.313 50.016 Q 784.547 53 784.547 56.563 L 784.547 56.563 L 784.547 56.563 Q 784.547 62.188 780.141 65.609 L 780.141 65.609 L 780.141 65.609 Q 775.734 69.031 768.547 69.031 L 768.547 69.031 L 768.547 69.031 Q 761.047 69.031 756.766 65.844 L 756.766 65.844 L 756.766 65.844 Q 752.484 62.656 752.484 56.813 L 752.484 56.813 L 752.484 56.813 Q 752.484 52.906 754.563 49.875 L 754.563 49.875 L 754.563 49.875 Q 756.641 46.844 761.234 44.531 L 761.234 44.531 L 761.234 44.531 Q 757.328 42.063 755.609 39.25 L 755.609 39.25 L 755.609 39.25 Q 753.891 36.438 753.891 33.094 L 753.891 33.094 L 753.891 33.094 Q 753.891 28.188 757.953 25.156 L 757.953 25.156 L 757.953 25.156 Q 762.016 22.125 768.547 22.125 Z  M 761.422 56.25 L 761.422 56.25 L 761.422 56.25 Q 761.422 58.938 763.297 60.438 L 763.297 60.438 L 763.297 60.438 Q 765.172 61.938 768.422 61.938 L 768.422 61.938 L 768.422 61.938 Q 772.016 61.938 773.797 60.391 L 773.797 60.391 L 773.797 60.391 Q 775.578 58.844 775.578 56.313 L 775.578 56.313 L 775.578 56.313 Q 775.578 54.219 773.813 52.391 L 773.813 52.391 L 773.813 52.391 Q 772.047 50.563 768.078 48.5 L 768.078 48.5 L 768.078 48.5 Q 761.422 51.563 761.422 56.25 Z  M 768.484 29.188 L 768.484 29.188 L 768.484 29.188 Q 766.016 29.188 764.5 30.453 L 764.5 30.453 L 764.5 30.453 Q 762.984 31.719 762.984 33.844 L 762.984 33.844 L 762.984 33.844 Q 762.984 35.719 764.188 37.203 L 764.188 37.203 L 764.188 37.203 Q 765.391 38.688 768.547 40.25 L 768.547 40.25 L 768.547 40.25 Q 771.609 38.813 772.828 37.313 L 772.828 37.313 L 772.828 37.313 Q 774.047 35.813 774.047 33.844 L 774.047 33.844 L 774.047 33.844 Q 774.047 31.688 772.484 30.438 L 772.484 30.438 L 772.484 30.438 Q 770.922 29.188 768.484 29.188 Z "
                    fill="rgb(255,255,255)" />
                <title>{{fingers[7].label|translate}}</title>
            </g>
            <g (click)="onFingerChanged(9);" [attr.clickable]="!isDisabled">
                <path
                    d="M 856 46 L 907 46 C 912.519 46 917 50.481 917 56 L 917 107 C 917 112.519 912.519 117 907 117 L 856 117 C 850.481 117 846 112.519 846 107 L 846 56 C 846 50.481 850.481 46 856 46 Z"
                    style="stroke:none;fill:#2680A1;stroke-miterlimit:10;" [attr.selected]="selectedValue==9"
                    [attr.active]="fingers[8].active">

                </path>
                <path
                    d=" M 896.547 80.141 L 896.547 80.141 L 896.547 80.141 Q 896.547 93.641 890.859 100.297 L 890.859 100.297 L 890.859 100.297 Q 885.172 106.953 873.641 106.953 L 873.641 106.953 L 873.641 106.953 Q 869.578 106.953 867.484 106.516 L 867.484 106.516 L 867.484 98.766 L 867.484 98.766 Q 870.109 99.422 872.984 99.422 L 872.984 99.422 L 872.984 99.422 Q 877.828 99.422 880.953 98 L 880.953 98 L 880.953 98 Q 884.078 96.578 885.734 93.531 L 885.734 93.531 L 885.734 93.531 Q 887.391 90.484 887.641 85.141 L 887.641 85.141 L 887.266 85.141 L 887.266 85.141 Q 885.453 88.078 883.078 89.266 L 883.078 89.266 L 883.078 89.266 Q 880.703 90.453 877.141 90.453 L 877.141 90.453 L 877.141 90.453 Q 871.172 90.453 867.734 86.625 L 867.734 86.625 L 867.734 86.625 Q 864.297 82.797 864.297 75.984 L 864.297 75.984 L 864.297 75.984 Q 864.297 68.641 868.469 64.375 L 868.469 64.375 L 868.469 64.375 Q 872.641 60.109 879.828 60.109 L 879.828 60.109 L 879.828 60.109 Q 884.891 60.109 888.688 62.484 L 888.688 62.484 L 888.688 62.484 Q 892.484 64.859 894.516 69.375 L 894.516 69.375 L 894.516 69.375 Q 896.547 73.891 896.547 80.141 Z  M 880.016 67.859 L 880.016 67.859 L 880.016 67.859 Q 877.016 67.859 875.328 69.922 L 875.328 69.922 L 875.328 69.922 Q 873.641 71.984 873.641 75.859 L 873.641 75.859 L 873.641 75.859 Q 873.641 79.172 875.172 81.109 L 875.172 81.109 L 875.172 81.109 Q 876.703 83.047 879.828 83.047 L 879.828 83.047 L 879.828 83.047 Q 882.766 83.047 884.859 81.125 L 884.859 81.125 L 884.859 81.125 Q 886.953 79.203 886.953 76.703 L 886.953 76.703 L 886.953 76.703 Q 886.953 72.984 885 70.422 L 885 70.422 L 885 70.422 Q 883.047 67.859 880.016 67.859 Z "
                    fill="rgb(255,255,255)" />
                <title>{{fingers[8].label|translate}}</title>
            </g>
            <g (click)="onFingerChanged(10);" [attr.clickable]="!isDisabled">
                <path
                    d="M 957 126 L 1008 126 C 1013.519 126 1018 130.481 1018 136 L 1018 187 C 1018 192.519 1013.519 197 1008 197 L 957 197 C 951.481 197 947 192.519 947 187 L 947 136 C 947 130.481 951.481 126 957 126 Z"
                    style="stroke:none;fill:#2680A1;stroke-miterlimit:10;" [attr.selected]="selectedValue==10"
                    [attr.active]="fingers[9].active">

                </path>
                <path
                    d=" M 975.938 140.641 L 975.938 186.328 L 966.281 186.328 L 966.281 159.891 L 966.375 155.547 L 966.531 150.797 L 966.531 150.797 Q 964.125 153.203 963.188 153.953 L 963.188 153.953 L 957.938 158.172 L 953.281 152.359 L 968 140.641 L 975.938 140.641 L 975.938 140.641 Z  M 1010.281 163.484 L 1010.281 163.484 L 1010.281 163.484 Q 1010.281 175.453 1006.359 181.203 L 1006.359 181.203 L 1006.359 181.203 Q 1002.438 186.953 994.281 186.953 L 994.281 186.953 L 994.281 186.953 Q 986.375 186.953 982.359 181.016 L 982.359 181.016 L 982.359 181.016 Q 978.344 175.078 978.344 163.484 L 978.344 163.484 L 978.344 163.484 Q 978.344 151.391 982.25 145.656 L 982.25 145.656 L 982.25 145.656 Q 986.156 139.922 994.281 139.922 L 994.281 139.922 L 994.281 139.922 Q 1002.188 139.922 1006.234 145.922 L 1006.234 145.922 L 1006.234 145.922 Q 1010.281 151.922 1010.281 163.484 Z  M 987.938 163.484 L 987.938 163.484 L 987.938 163.484 Q 987.938 171.891 989.391 175.531 L 989.391 175.531 L 989.391 175.531 Q 990.844 179.172 994.281 179.172 L 994.281 179.172 L 994.281 179.172 Q 997.656 179.172 999.156 175.484 L 999.156 175.484 L 999.156 175.484 Q 1000.656 171.797 1000.656 163.484 L 1000.656 163.484 L 1000.656 163.484 Q 1000.656 155.078 999.141 151.406 L 999.141 151.406 L 999.141 151.406 Q 997.625 147.734 994.281 147.734 L 994.281 147.734 L 994.281 147.734 Q 990.875 147.734 989.406 151.406 L 989.406 151.406 L 989.406 151.406 Q 987.938 155.078 987.938 163.484 Z "
                    fill="rgb(255,255,255)" />
                <title>{{fingers[9].label|translate}}</title>
            </g>
        </g>
    </svg>
</div>`;var Rt=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}.finger-selection-input{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center}g[clickable=true]{cursor:pointer!important}path[active=true]{fill:#62a325!important}path[selected=true]{fill:#eb8d00!important}
`;var gi=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},bi={provide:Q,useExisting:M(()=>A),multi:!0},A=class{onChange;small=!1;activeFingers=[];fingers;selectedValue=0;isDisabled=!1;constructor(){}writeValue(e){e&&(this.selectedValue=e)}registerOnChange(e){this.onChange=e}registerOnTouched(e){}setDisabledState(e){this.isDisabled=e}ngOnInit(){this.createFingerList()}createFingerList(){this.fingers=[];for(let e=1;e<=10;e++)this.fingers.push({label:y.getDataText(e.toString(),x.FingerPrintISO19794),data:e,active:this.activeFingers?this.activeFingers.findIndex(t=>t==e)>-1:!1})}ngOnChanges(e){e.activeFingers&&(this.fingers||this.createFingerList(),this.fingers.forEach(t=>{t.active=this.activeFingers?this.activeFingers.findIndex(i=>i==t.data)>-1:!1}))}onFingerChanged(e){this.isDisabled==!1&&(this.selectedValue=e,this.onChange(this.selectedValue))}static ctorParameters=()=>[];static propDecorators={small:[{type:a}],activeFingers:[{type:a}]}};A=gi([f({selector:"armon-finger-selection-input",providers:[bi],template:kt,standalone:!0,imports:[p],styles:[Rt]})],A);var V=class o{set trim(e){if(e!==""&&e!=="blur"&&e!==!1){console.warn(`Note: The value ${JSON.stringify(e)} is not assignable to the trim attribute.
        Only blank string (""), "blur" or false is allowed.`),this._trim=!1;return}this._trim=e,setTimeout(()=>{let t=this.elementRef.nativeElement,i=t.value;e!==!1&&i!==i.trim()&&o.dispatchEvent(t,"blur")})}get trim(){return this._trim}constructor(e,t){this.elementRef=e,this.ngControl=t,this._trim="",this.trimOnWriteValue=!0,this._valueAccessor=null,this._writeValue=null}static getCaret(e){return{start:e.selectionStart,end:e.selectionEnd}}static setCaret(e,t,i){e.selectionStart=t,e.selectionEnd=i,e.focus()}static dispatchEvent(e,t){let i=new Event(t);e.dispatchEvent(i)}static TrimOption(e,t){e.value=t.trim(),o.dispatchEvent(e,"input")}ngOnInit(){if(!this.ngControl){console.warn("Note: The trim directive should be used with one of ngModel, formControl or formControlName directives.");return}this._valueAccessor=this.ngControl.valueAccessor,this._valueAccessor&&(this._writeValue=this._valueAccessor.writeValue,this._valueAccessor.writeValue=e=>{let t=this.trim===!1||!e||typeof e.trim!="function"||!this.trimOnWriteValue?e:e.trim();this._writeValue&&this._writeValue.call(this._valueAccessor,t),e!==t&&(this._valueAccessor.onChange&&this._valueAccessor.onChange(t),this._valueAccessor.onTouched&&this._valueAccessor.onTouched())})}ngOnDestroy(){this._valueAccessor&&this._writeValue&&(this._valueAccessor.writeValue=this._writeValue)}onBlur(e,t){this.trim!==!1&&(this.trim===""||this.trim==="blur")&&typeof t.trim=="function"&&t.trim()!==t&&(o.TrimOption(e,t),o.dispatchEvent(e,"blur"))}onInput(e,t){if(this.trim!==!1&&this.trim===""&&typeof t.trim=="function"&&t.trim()!==t){let{start:i,end:r}=o.getCaret(e);t[0]===" "&&i===1&&r===1&&(i=0,r=0),o.TrimOption(e,t),o.setCaret(e,i,r)}}static{this.\u0275fac=Ie({minVersion:"12.0.0",version:"16.1.2",ngImport:w,type:o,deps:[{token:L},{token:Ee,optional:!0}],target:Ce.Directive})}static{this.\u0275dir=_e({minVersion:"14.0.0",version:"16.1.2",type:o,selector:"input[trim],textarea[trim]",inputs:{trim:"trim",trimOnWriteValue:"trimOnWriteValue"},host:{listeners:{blur:"onBlur($event.target,$event.target.value)",input:"onInput($event.target,$event.target.value)"}},ngImport:w})}};De({minVersion:"12.0.0",version:"16.1.2",ngImport:w,type:V,decorators:[{type:F,args:[{selector:"input[trim],textarea[trim]"}]}],ctorParameters:function(){return[{type:L},{type:Ee,decorators:[{type:we}]}]},propDecorators:{trim:[{type:a,args:["trim"]}],trimOnWriteValue:[{type:a}],onBlur:[{type:T,args:["blur",["$event.target","$event.target.value"]]}],onInput:[{type:T,args:["input",["$event.target","$event.target.value"]]}]}});var X=class o{static{this.\u0275fac=Ie({minVersion:"12.0.0",version:"16.1.2",ngImport:w,type:o,deps:[],target:Ce.NgModule})}static{this.\u0275mod=Ae({minVersion:"14.0.0",version:"16.1.2",ngImport:w,type:o,declarations:[V],exports:[V]})}static{this.\u0275inj=Ne({minVersion:"12.0.0",version:"16.1.2",ngImport:w,type:o})}};De({minVersion:"12.0.0",version:"16.1.2",ngImport:w,type:X,decorators:[{type:ke,args:[{declarations:[V],imports:[],exports:[V]}]}]});var vi=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},_t=class extends Ke{dynamicFormService;interactionService;sessionService;formBuilder;identityService;credential;type;editMode=!1;types=void 0;currentData;selectedType;form;typeOptions;nowDate=new Date;editCredential;groupOptions;fingerPrintExtensionForm;visibleFingerPrintExtensionForm=!1;vehiclePlateExtensionForm;vehicleYears;visibleVehiclePlateExtensionForm=!1;vehicleUHFRfidExtensionForm;visibleVehicleUHFRfidExtensionForm=!1;visibleCredentialNumber=!1;credentialNumberLabel="CREDENTIAL.TITLE_NUMBER";visibleExpirationDate=!1;visibleCredentialData=!0;visibleOneTimeAssignable=!1;visibleDynamicForm=!1;credentialFormInfo;subscriptionTypeValueChanges;subscriptionDataValueChanges;subscriptionLoginStatus;tommorowEndofDay=d.local().minus({days:1}).endOf("day").toJSDate();constructor(e,t,i,r,n){super(),this.dynamicFormService=e,this.interactionService=t,this.sessionService=i,this.formBuilder=r,this.identityService=n}onModalInitialized(){super.onModalInitialized(),this.groupOptions=[];for(let e=0;e<=50;e++)this.groupOptions.push(e);this.initializeForms(),this.processModalData()}onModalDestroyed(){super.onModalDestroyed(),this.subscriptionTypeValueChanges&&this.subscriptionTypeValueChanges.unsubscribe(),this.subscriptionDataValueChanges&&this.subscriptionDataValueChanges.unsubscribe(),this.subscriptionLoginStatus&&this.subscriptionLoginStatus.unsubscribe()}createYearOptions(){if(!this.vehicleYears){let t=[];for(var e=new Date().getFullYear()+1;e>1900;e--)t.push({id:e,value:e});this.vehicleYears=t}}createTypeList(e=void 0){this.typeOptions||(this.typeOptions=[],this.sessionService.currentOrganizationCredentialTypes.forEach(t=>{let i=ae.find(r=>r.type===t);if(i&&(this.editMode||y.getIsAddable(i.type))&&(!e||e.indexOf(i.type)>-1)){let r=new ot;r.name=i.description,r.value=i.type,this.typeOptions.push(r)}}))}processModalData(){this.editMode&&(this.editCredential=Le(this.credential)),this.createYearOptions(),this.createTypeList(this.types?this.types:void 0),this.type||(this.type=this.typeOptions[0].value),this.setFormData(this.credential,this.type),this.setExtensionForms(this.type,this.editMode&&this.credential.extensionFields?this.credential.extensionFields:null),this.setVisibilityExtensionForms(this.type),this.setVisibilityDynamicForm(this.type,this.editMode&&this.credential.customFields?this.credential.customFields:{})}setExtensionForms(e,t){switch(e){case x.FingerPrintISO19794:this.fingerPrintExtensionForm?this.fingerPrintExtensionForm.reset():this.fingerPrintExtensionForm=this.formBuilder.group({finger:[null]}),this.editMode&&t&&this.fingerPrintExtensionForm.patchValue(t);break;case x.VehiclePlate:this.vehiclePlateExtensionForm?this.vehiclePlateExtensionForm.reset():this.vehiclePlateExtensionForm=this.formBuilder.group({owner:[null,u.required],type:[null,u.required],color:[null,u.required],year:[null,u.required],brand:[null,u.required],model:[null,u.required]}),this.editMode&&t&&(this.vehiclePlateExtensionForm.patchValue(t),t.year&&this.vehiclePlateExtensionForm.controls.year.setValue(this.vehicleYears.find(i=>i.value==t.year.value)));break;case x.UHFRfid:this.vehicleUHFRfidExtensionForm?this.vehicleUHFRfidExtensionForm.reset():this.vehicleUHFRfidExtensionForm=this.formBuilder.group({licencePlate:[null,u.required]}),this.editMode&&t&&this.vehicleUHFRfidExtensionForm.patchValue(t)}}setVisibilityExtensionForms(e){switch(this.visibleCredentialNumber=y.getCredentialNumberVisibility(e),this.visibleExpirationDate=y.getCredentialExpirationDateVisibility(e),this.visibleFingerPrintExtensionForm=!1,this.visibleVehiclePlateExtensionForm=!1,this.visibleVehicleUHFRfidExtensionForm=!1,e){case x.FingerPrintISO19794:this.visibleFingerPrintExtensionForm=!0;break;case x.VehiclePlate:this.visibleVehiclePlateExtensionForm=!0;break;case x.UHFRfid:this.visibleVehicleUHFRfidExtensionForm=!0;break}}setVisibilityDynamicForm(e,t){this.visibleDynamicForm=!1;let i=this.sessionService.currentOrganization.credentialTypes.find(r=>r.type==e);i&&i.customFields&&i.customFields.length>0&&(i.customFields[0].extension=!1,this.credentialFormInfo=this.dynamicFormService.getFormInfoFromFields(i.customFields),je(this.credentialFormInfo,t),this.credentialFormInfo.formGroup.updateValueAndValidity(),this.visibleDynamicForm=!0)}onAddClicked(e){let t=new y;t.id=me.NEW_CREDENTIAL+$e(),t=Object.assign(t,this.form.value),this.addExtensionFields(t),this.addDynamicFormFields(t),this.identityService.findIdentityByCredential(t.data,t.type).subscribe(i=>{switch(i.existance){case N.NotExists:t.dataText=y.getDataText(t.data,t.type),this.closeModal(t);break;case N.Visitor:i.visitorInfo?this.interactionService.showMessage("IDENTITY.CREDENTIAL_IN_USE_BY_VISITOR_NAME",null,E.Warning,{name:i.visitorInfo}):this.interactionService.showMessage("IDENTITY.CREDENTIAL_IN_USE_BY_VISITOR",null,E.Warning);break;case N.Member:i.member?this.interactionService.showMessage("IDENTITY.CREDENTIAL_IN_USE_EDITABLE_NAME",null,E.Warning,{fullname:i.member.fullname}):this.interactionService.showMessage("IDENTITY.CREDENTIAL_IN_USE_EDITABLE",null,E.Warning);break;case N.NotPermitted:this.interactionService.showMessage("IDENTITY.CREDENTIAL_IN_USE_NOT_EDITABLE",null,E.Warning);break;default:this.interactionService.showMessage("VISITOR.VISITOR_CREDENTIAL_NOT_FOUND",null,E.Warning);break}})}onEditClicked(e){this.editCredential=Object.assign(this.editCredential,this.form.value),this.addExtensionFields(this.editCredential),this.addDynamicFormFields(this.editCredential),this.editCredential.edited=!0,this.closeModal(Le(this.editCredential))}addExtensionFields(e){this.visibleFingerPrintExtensionForm&&(e.extensionFields=this.fingerPrintExtensionForm.value),this.visibleVehiclePlateExtensionForm&&(e.extensionFields=this.vehiclePlateExtensionForm.value),this.visibleVehicleUHFRfidExtensionForm&&(e.extensionFields=this.vehicleUHFRfidExtensionForm.value)}addDynamicFormFields(e){if(this.visibleDynamicForm){let t={};Be(this.credentialFormInfo.formGroup,this.credentialFormInfo.formFields,t),e.customFields=t}}setSelectedType(e,t=!1){switch(e){case x.QRCode:this.editMode||this.form.controls.data.setValue(qe()),this.visibleCredentialData=!1;break;case x.MRZCard:this.currentData=null,this.visibleCredentialData=!1;break;default:this.selectedType&&this.selectedType==x.QRCode&&this.form.controls.data.setValue(null),this.credentialNumberLabel="CREDENTIAL.TITLE_NUMBER",this.visibleCredentialData=!0;break}this.visibleOneTimeAssignable=this.sessionService.currentOrganization.credentialTypes.findIndex(i=>i.type==e)>-1?this.sessionService.currentOrganization.credentialTypes.find(i=>i.type==e).oneTimeAssignable:!1,this.selectedType=e}initializeForms(){this.form||(this.form=this.formBuilder.group({type:[null,u.required],data:[null,u.required],note:[null],credentialNumber:[null],expirationUtc:[null],groupNumber:[null]}),this.subscriptionTypeValueChanges=this.form.controls.type.valueChanges.subscribe(e=>{this.setSelectedType(e),this.setExtensionForms(e),this.setVisibilityExtensionForms(e),this.setVisibilityDynamicForm(e)}),this.subscriptionDataValueChanges=this.form.controls.data.valueChanges.subscribe(e=>{let t=this.form.controls.type.value;switch(t){case x.MRZCard:this.currentData=null;break;default:this.currentData=t!=null&&t!==""?this.sessionService.getConvertedCredentialData(e,t):null;break}}))}setFormData(e,t){this.form.reset(),t||t==0?this.form.controls.type.setValue(t):this.typeOptions.length===1&&this.form.controls.type.setValue(this.typeOptions[0].value),e&&(e.data&&this.form.controls.data.setValue(e.data),e.note&&this.form.controls.note.setValue(e.note),e.credentialNumber&&this.form.controls.credentialNumber.setValue(e.credentialNumber),e.groupNumber&&this.form.controls.groupNumber.setValue(e.groupNumber),e.expirationUtc&&this.form.controls.expirationUtc.setValue(e.expirationUtc)),this.editMode?this.form.controls.type.disable():this.form.controls.type.enable(),this.editMode?this.form.controls.data.disable():this.form.controls.data.enable(),this.form.updateValueAndValidity(),this.setSelectedType(t,!0)}onResetExpirationDate(e){this.form.controls.expirationUtc.setValue(null)}static ctorParameters=()=>[{type:_},{type:k},{type:oe},{type:Ze},{type:st}];static propDecorators={credential:[{type:a}],type:[{type:a}],editMode:[{type:a}],types:[{type:a}]}};_t=vi([f({selector:"armon-credential-modal",template:Ot,standalone:!0,providers:[{provide:U,useClass:B}],imports:[g,v,G,re,C,nt,it,tt,X,D,ft,de,j,A,mt,xe,O,S,p],styles:[St]})],_t);var Nt=`<div class="card mb-3">
  <div class="card-body-custom mhs-12">
    <div class="type-container" [attr.expired]="isExpired">
      <cds-icon [attr.shape]="credentialType.icon" style="width: 42px; height: 42px;"
        *ngIf="credentialType.type!=6"></cds-icon>
      <span *ngIf="credentialType.type==6"><strong>{{credential.data|uppercase}}</strong></span>
      <span class="description">{{credentialType.description | translate}}</span>
    </div>
    <div class="detail-container">
      <!-- Type -->
      <armon-card-badge [added]="isNewCredential" [updated]="credential.edited"></armon-card-badge>
      <!-- Data -->
      <div class="credentialData" *ngIf="credential.data">
        <div><strong>{{credentialDataTitle | translate}}</strong></div>
        <div>{{credential.dataText|translate}}<span *ngIf="decodedData"> ({{decodedData}})</span></div>
      </div>

      <div class="row">

        <!-- Credential Number -->
        <div class="col-md-6 col-sm-12 credentialData" *ngIf="visibleCredentialNumber">
          <div><strong>{{'CREDENTIAL.TITLE_NUMBER' | translate}}</strong></div>
          <div>{{credential.credentialNumber || '-'}}</div>
        </div>

        <!-- Expiration Date -->
        <div class="col-xl-12 credentialData" *ngIf="credential.expirationUtc && visibleExpirationDate"
          [ngClass]="{'color-error': isExpired}">
          <div><strong>{{'CREDENTIAL.TITLE_EXPIRATION' | translate}}</strong></div>
          <div>{{credential.expirationUtc ? (credential.expirationUtc | date:'medium') : '-'}} <span *ngIf="isExpired">
              ({{'CREDENTIAL.EXPIRED' | translate}})
            </span></div>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-12 credentialData">
          <span *ngIf="credentialType.type==6"><strong>{{'CREDENTIAL.TITLE_VEHICLE_INFO' |
              translate}}</strong></span>
          <!-- QR CODE -->
          <div *ngIf="credentialType.type==12" class="mt-2">
            <qr-code value="{{credential.data}}" size="72" errorCorrectionLevel="M"></qr-code>
          </div>
        </div>
        <div class="col-xl-12 extension-field-container"
          *ngIf="credential.extensionFields && (credentialType.type!=7 && credentialType.type!=9 && credentialType.type!=10 && credentialType.type!=11 && credentialType.type!=15)">
          <ng-container *ngFor="let field of credential.extensionFields|keys">
            <ng-container [ngSwitch]="field.key">
              <ng-container *ngSwitchCase="'subType'">
                <span class="text-sm">{{(field.value==1 ? 'CREDENTIALTYPE.SUB_TYPE_MRZ_TC_IDENTITY_TYPE' :
                  'CREDENTIALTYPE.SUB_TYPE_MRZ_PASSPORT_TYPE' ) | translate}}</span>
              </ng-container>
              <ng-container *ngSwitchCase="'birthDate'">
                <span class="text-sm">{{'IDENTITY.BIRTH_DATE' | translate}}:
                  {{field.value | date:'mediumDate'}}</span>
              </ng-container>
              <ng-container *ngSwitchDefault>
                <span class="extension-field" *ngIf="field.value">{{(field.value.value ||
                  field.value.value=='')?field.value.value:field.value}}</span>
              </ng-container>
            </ng-container>
          </ng-container>
        </div>
        <div class="col-xl-12"
          *ngIf="credentialType.type==7 || credentialType.type==9 || credentialType.type==10 || credentialType.type==11 || credentialType.type==15">
          <armon-finger-selection-input [small]="true" [(ngModel)]="credential.extensionFields.finger"
            *ngIf="credential.extensionFields && credential.extensionFields.finger" [disabled]="true">
          </armon-finger-selection-input>
        </div>
        <div class="col-xl-12" *ngIf="specialDataSecondarySource" class="face-recognition">
          <span class="title">{{'CREDENTIALTYPE.FACE_RECOGNITION_PHOTO'|translate}}</span>
          <img [src]="specialDataSecondarySource">
        </div>
      </div>
    </div>
  </div>

  <div class="card-footer rounded-bottom" *ngIf="!disabled">
    <!-- Edit button -->
    <button class="btn btn-sm btn-link" (click)="onEditClicked($event)" *ngIf="editEnabled">{{'BUTTON.EDIT' |
      translate}}</button>
    <!-- Remove button -->
    <button class="btn btn-sm btn-link" (click)="onRemoveClicked($event)">{{'BUTTON.REMOVE' | translate}}</button>
  </div>
  <div *ngIf="credential.groupNumber && credential.groupNumber!=0" class="credential-group"
    title="{{'CREDENTIAL.GROUP'|translate}} {{credential.groupNumber}}">
    <span>{{credential.groupNumber}}</span>
  </div>
</div>`;var At=`.justify-content-center{-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center}.justify-content-flex-end{-webkit-box-pack:end;-moz-box-pack:end;-webkit-flex-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end}.card-footer{padding:.28rem .7rem}.alert{font-size:.756rem}@media screen and (min-width: 992px){.modal-xxl{max-width:1640px}}@media screen and (min-width: 1200px){.modal-xxxl{max-width:1860px}}.modal-fs{max-width:none;position:absolute;margin:auto;inset:16px;height:100vh;display:flex}.btn-link{text-decoration:none}.btn-link:hover{text-decoration:underline}.invalid-feedback{margin-top:0!important;font-size:.672rem!important}.card-body-custom{padding:0!important;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;-moz-align-items:stretch;align-items:stretch;-webkit-border-top-left-radius:.375rem;-moz-border-radius-topleft:.375rem;border-top-left-radius:.375rem;-webkit-border-top-right-radius:.375rem;-moz-border-radius-topv:.375rem;border-top-right-radius:.375rem}.card-body-custom .type-container{padding:8px 12px!important;font-size:.672rem;background-color:#0369a1;color:#fff;-webkit-border-top-left-radius:.375rem;-moz-border-radius-topleft:.375rem;border-top-left-radius:.375rem;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;width:5.6rem;min-height:5.6rem}.card-body-custom .type-container .description{text-align:center;margin-top:.6rem}.card-body-custom .type-container[expired=true]{background-color:#c82602}.card-body-custom .detail-container{-webkit-flex-grow:1;-webkit-box-flex:1;-moz-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:8px}.textWithoutMargin,.credentialType{margin-top:2px}.credentialType{color:#0a2a5a}.credentialData{font-size:.672rem}.extension-field-container{display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.extension-field-container .extension-field{font-size:.588rem}.face-recognition{padding:0 12px;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.face-recognition .title{font-size:.672rem;margin-bottom:6px}.face-recognition img{border:2px solid #0a2a5a;width:48px;height:48px}.credential-group{position:absolute;top:-6px;left:-6px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-moz-box-pack:center;-webkit-flex-pack:center;-ms-flex-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;background-color:#c70000;color:#fff;font-size:.756rem;border:2px solid #FFF;width:28px;height:28px}
`;var Ci=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},ye=class{transform(e,t){let i=[];for(let r in e)i.push({key:r,value:e[r]});return i}};ye=Ci([te({name:"keys",standalone:!0})],ye);var Di=function(o,e,t,i){var r=arguments.length,n=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(o,e,t,i);else for(var l=o.length-1;l>=0;l--)(s=o[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},Vt=class{sessionService;sanitizer;interactionService;credential;disabled;editEnabled=!1;credentialRemoved=new c;credentialEdit=new c;decodedData;credentialType;isExpired;isNewCredential;credentialDataTitle;visibleCredentialNumber=!1;visibleExpirationDate=!1;visibleCredentialData=!1;specialDataSecondarySource;constructor(e,t,i){this.sessionService=e,this.sanitizer=t,this.interactionService=i}ngOnInit(){this.render()}ngOnChanges(e){e.credential&&this.render()}render(){this.credentialType=ae.find(e=>e.type===this.credential.type),this.isExpired=this.credential&&this.credential.expirationUtc&&d.fromJSDate(this.credential.expirationUtc)<=d.local(),this.isNewCredential=this.credential&&this.credential.id.startsWith(me.NEW_CREDENTIAL),this.credentialDataTitle=y.getDataLabel(this.credential.type),this.visibleCredentialNumber=y.getCredentialNumberVisibility(this.credential.type),this.visibleCredentialData=y.getCredentialDataVisibility(this.credential.type),this.visibleExpirationDate=y.getCredentialExpirationDateVisibility(this.credential.type),this.credential.specialDataSecondary?this.specialDataSecondarySource=this.sanitizer.bypassSecurityTrustResourceUrl(this.credential.specialDataSecondary):this.specialDataSecondarySource=null,this.getDecodedData()}onRemoveClicked(e){this.sessionService.currentOrganization.credentialTypes.findIndex(t=>t.type==this.credential.type)>-1&&this.sessionService.currentOrganization.credentialTypes.find(t=>t.type==this.credential.type).oneTimeAssignable?this.interactionService.showDialog("","CREDENTIALTYPE.ONE_TIME_ASSIGNABLE_DELETE",null,null,!0,"BUTTON.REMOVE","BUTTON.CANCEL",!0,()=>{this.credentialRemoved.emit(this.credential.id)},()=>{}):this.credentialRemoved.emit(this.credential.id)}onEditClicked(e){this.credentialEdit.emit(this.credential.id)}getDecodedData(){this.decodedData=this.credential&&!this.isNewCredential?this.sessionService.getDecodedCredentialData(this.credential.data,this.credential.type):""}static ctorParameters=()=>[{type:oe},{type:Qe},{type:k}];static propDecorators={credential:[{type:a}],disabled:[{type:a}],editEnabled:[{type:a}],credentialRemoved:[{type:m}],credentialEdit:[{type:m}]}};Vt=Di([f({selector:"armon-credential",template:Nt,standalone:!0,imports:[g,pt,D,de,C,O,S,Ve,A,v,re,Pe,ze,ye,p],styles:[At]})],Vt);export{N as a,me as b,xe as c,A as d,_t as e,Vt as f};
