import{Rb as S}from"./chunk-YSQLW2JA.js";import{H as p}from"./chunk-NVJ2ZZFT.js";import{Aa as l,Ba as u,Nc as E,Qf as R,_a as v,bb as h,dd as C,ha as b,pa as k,te as w,ue as d,ve as n,wa as x,we as y,ya as f,ye as m}from"./chunk-SKPDQO4E.js";var N=[w("basicFade",[y("in",n({opacity:"1"})),y("out",n({opacity:"0"})),m("* <=> *",[d(200)])])],_=[w("enterLeaveFade",[m(":enter",[n({opacity:0}),d("200ms",n({opacity:1}))]),m(":leave",[n({opacity:1}),d("200ms",n({opacity:0}))])])],U=[w("enterLeaveFadeSlow",[m(":enter",[n({opacity:0}),d("400ms",n({opacity:1}))]),m(":leave",[n({opacity:1}),d("400ms",n({opacity:0}))])])];var O=`<ng-container *ngIf="isTouchScreen; then swipeButtons else clickButtons"></ng-container>
<ng-template #clickButtons>
  <div>
    <div class="button-area" [ngClass]="{'small-buttons': smallButtons}">

      <!-- <span *ngIf="smallButtons" class="title-text">{{'REPORT.ACP_SUMMARY_REMOTE_ACCESS'|translate}} </span> -->
      <!-- Button for open access control point in all direction -->
      <button class="btn btn-primary px-5 me-3 animatedIcon centered" *ngIf="showOpenAll" [disabled]="visibleSpinner"
        [ngClass]="{'btn-sm': smallButtons}" title="{{'REPORT.ACP_SUMMARY_REMOTE_ACCESS_ENTER'|translate}}"
        (click)="onOpenDirectionAllClicked($event)">

        <!-- Icon for all direction button -->
        <svg version="1.1" [attr.width]="smallButtons?16:24" [attr.height]="smallButtons?16:24" viewBox="0 0 36 36"
          fill="white" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="animated-all-left">
            <path d="M5.71,14H20.92V12H5.71L9.42,8.27A1,1,0,1,0,8,6.86L1.89,13,8,19.14a1,1,0,1,0,1.42-1.4Z"
              class="clr-i-outline clr-i-outline-path-1"></path>
            <rect x="23" y="12" width="3" height="2" class="clr-i-outline clr-i-outline-path-2"></rect>
            <rect x="28" y="12" width="2" height="2" class="clr-i-outline clr-i-outline-path-3"></rect>
          </g>
          <g id="animated-all-right">
            <path d="M27.92,17.86a1,1,0,0,0-1.42,1.41L30.21,23H15v2H30.21L26.5,28.74a1,1,0,1,0,1.42,1.4L34,24Z"
              class="clr-i-outline clr-i-outline-path-4"></path>
            <rect x="10" y="23" width="3" height="2" class="clr-i-outline clr-i-outline-path-5"></rect>
            <rect x="6" y="23" width="2" height="2" class="clr-i-outline clr-i-outline-path-6"></rect>
          </g>
          <rect x="0" y="0" width="24" height="24" fill-opacity="0" />
        </svg>

      </button>

      <!-- Button for open access control point in entrance direction -->
      <button class="btn btn-success me-3 animatedIcon centered" *ngIf="showOpenEntrance" [disabled]="visibleSpinner"
        [ngClass]="{'btn-sm': smallButtons}" title="{{'REPORT.ACP_SUMMARY_REMOTE_ACCESS_ENTER'|translate}}"
        (click)="onOpenDirectionEntranceClicked($event)">

        <!-- Icon for entrance direction button -->
        <svg version="1.1" [attr.width]="smallButtons?16:24" [attr.height]="smallButtons?16:24" viewBox="0 0 36 36"
          fill="white" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
          <path id="animated-entrance-door"
            d="M28,4H12a2,2,0,0,0-2,2H28V30H12V20.2H10V30a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V6A2,2,0,0,0,28,4Z"
            class="clr-i-outline clr-i-outline-path-1"></path>
          <path id="animated-entrance-arrow"
            d="M15.12,18.46a1,1,0,1,0,1.41,1.41l5.79-5.79L16.54,8.29a1,1,0,0,0-1.41,1.41L18.5,13H4a1,1,0,0,0-1,1,1,1,0,0,0,1,1H18.5Z"
            class="clr-i-outline clr-i-outline-path-2">
          </path>
          <rect x="0" y="0" width="24" height="24" fill-opacity="0" />
        </svg>

      </button>

      <!-- Button for open access control point in exit direction -->
      <button class="btn btn-danger me-3 animatedIcon centered" *ngIf="showOpenExit" [disabled]="visibleSpinner"
        [ngClass]="{'btn-sm': smallButtons}" title="{{'REPORT.ACP_SUMMARY_REMOTE_ACCESS_EXIT'|translate}}"
        (click)="onOpenDirectionExitClicked($event)">

        <!-- Icon for exit direction button -->
        <svg version="1.1" [attr.width]="smallButtons?16:24" [attr.height]="smallButtons?16:24" viewBox="0 0 36 36"
          fill="white" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
          <path id="animated-exit-door"
            d="M7,6H23v9.8h2V6a2,2,0,0,0-2-2H7A2,2,0,0,0,5,6V30a2,2,0,0,0,2,2H23a2,2,0,0,0,2-2H7Z"
            class="clr-i-outline clr-i-outline-path-1"></path>
          <path id="animated-exit-arrow"
            d="M28.16,17.28a1,1,0,0,0-1.41,1.41L30.13,22H15.63a1,1,0,0,0-1,1,1,1,0,0,0,1,1h14.5l-3.38,3.46a1,1,0,1,0,1.41,1.41L34,23.07Z"
            class="clr-i-outline clr-i-outline-path-2"></path>
          <rect x="0" y="0" width="24" height="24" fill-opacity="0" />
        </svg>

      </button>
      <div class="spinner-border spinner-border-sm ms-3" role="status" [hidden]="!visibleSpinner">
      </div>
    </div>
  </div>
</ng-template>
<ng-template #swipeButtons>
  <span class="direction">{{'REPORT.ACP_SUMMARY_REMOTE_ACCESS_SWIPE'|translate}}</span>
  <div class="swipe-buttons-container">
    <armon-swipe-button class="swipe-button" *ngIf="showOpenEntrance" (confirm)="onOpenDirectionEntranceClicked($event)"
      [disabled]="visibleSpinner" [icon]="'login'" [label]="'REPORT.ACP_SUMMARY_REMOTE_ACCESS_ENTER'|translate"
      [colorType]="'success'">
    </armon-swipe-button>
    <armon-swipe-button class="swipe-button" *ngIf="showOpenExit" (confirm)="onOpenDirectionExitClicked($event)"
      [disabled]="visibleSpinner" [icon]="'logout'" [label]="'REPORT.ACP_SUMMARY_REMOTE_ACCESS_EXIT'|translate"
      [colorType]="'danger'">
    </armon-swipe-button>
    <armon-swipe-button class="swipe-button" *ngIf="showOpenAll" (confirm)="onOpenDirectionAllClicked($event)"
      [disabled]="visibleSpinner" [icon]="'two-way-arrows'" [label]="'REPORT.ACP_SUMMARY_REMOTE_ACCESS'|translate">
    </armon-swipe-button>
    <div class="spinner-border spinner-border-sm ms-3" role="status" [hidden]="!visibleSpinner">
    </div>
  </div>
</ng-template>`;var A=`.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 .button-area{padding:0 6px;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-direction:row;-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center}:host .button-area.small-buttons{padding:.2rem 0 0!important;margin:.1rem 0;border-top:1px solid #EEE;-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;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center}:host .button-area.small-buttons .btn{height:32px;padding-left:24px;padding-right:24px;margin:0;width:initial}:host .button-area .animatedIcon{min-width:36px}:host .button-area .animatedIcon:last-child{margin-right:0}:host .button-area .animatedIcon:hover #animated-entrance-arrow{animation-name:entrance;animation-duration:.75s;animation-iteration-count:infinite;animation-timing-function:ease-in}:host .button-area .animatedIcon:hover #animated-exit-arrow{animation-name:exit;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-out}:host .button-area .animatedIcon:hover #animated-all-left{animation-name:left;animation-duration:.75s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}:host .button-area .animatedIcon:hover #animated-all-right{animation-name:right;animation-duration:.75s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}@keyframes entrance{0%{transform:translate(-24px)}to{transform:translate(6px)}}@keyframes exit{0%{transform:translate(-6px)}to{transform:translate(24px)}}@keyframes left{0%{transform:translate(0)}50%{transform:translate(-36px)}51%{transform:translate(36px)}to{transform:translate(0)}}@keyframes right{0%{transform:translate(0)}50%{transform:translate(36px)}51%{transform:translate(-36px)}to{transform:translate(0)}}:host .direction{font-size:.588rem;color:#999;margin-left:4px}:host .swipe-buttons-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}:host .swipe-buttons-container .swipe-button{margin-left:3px}
`;var P=`<div #swipeContainer class="swipe-container">
    <div #swipeBar class="swipe-bar">
        <div #swipeButton class="swipe-button" (panstart)="onPanStart($event)" (panmove)="onPanMove($event)" [attr.disabled]="disabled"
            (panend)="onPanEnd($event)" [attr.colortype]="colorType">
            <cds-icon [attr.shape]="icon" style="width: 20px; height: 20px;"></cds-icon>
        </div>
    </div>
    <div *ngIf="label && !panning" class="label-container" [@enterLeaveFade]>
        <div class="swap-label">{{label}}</div>
    </div>
</div>`;var M=`.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}.swipe-container{position:relative;background-color:#f6f6f6;padding:3px;-webkit-border-radius:21px;-moz-border-radius:21px;border-radius:21px;display:-webkit-box;display:-moz-box;display:-webkit-flexbox;display:-ms-flexbox;display:-webkit-flex;display:flex;width:112px;border:1px solid rgb(218,218,218);transition:background-color .3s ease-in-out}.swipe-container.confirmed{background-color:#62a325}.swipe-container .swipe-bar{z-index:1;-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}.swipe-container .swipe-bar .swipe-button{width:36px;height:36px;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;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;background-color:#0a2a5a;color:#fff;box-shadow:0 0 4px #ccc;border:1px solid #999;transition:margin-left .1s ease-in-out}.swipe-container .swipe-bar .swipe-button[colortype=primary]{background-color:#0a2a5a}.swipe-container .swipe-bar .swipe-button[colortype=primary][disabled=true]{background-color:#b6bfce}.swipe-container .swipe-bar .swipe-button[colortype=success]{background-color:#62a325}.swipe-container .swipe-bar .swipe-button[colortype=success][disabled=true]{background-color:#d0e3be}.swipe-container .swipe-bar .swipe-button[colortype=danger]{background-color:#c82602}.swipe-container .swipe-bar .swipe-button[colortype=danger][disabled=true]{background-color:#efbeb3}.swipe-container .label-container{z-index:0;position:absolute;top:3px;right:3px;height:-webkit-calc(100% - (3px * 2));height:-moz-calc(100% - (3px * 2));height:calc(100% - 6px);width:100%;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;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center}.swipe-container .label-container .swap-label{color:#0a2a5a;text-align:center;font-size:.588rem;flex-grow:0;flex-shrink:0;flex-basis:60%}
`;var D=function(o,t,i,a){var s=arguments.length,e=s<3?t:a===null?a=Object.getOwnPropertyDescriptor(t,i):a,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(o,t,i,a);else for(var c=o.length-1;c>=0;c--)(r=o[c])&&(e=(s<3?r(e):s>3?r(t,i,e):r(t,i))||e);return s>3&&e&&Object.defineProperty(t,i,e),e},g=class{renderer;icon;label;disabled=!1;colorType="primary";confirm=new b;panning=!1;swipeContainer;swipeBar;swipeButton;BUTTON_WIDTH=36;constructor(t){this.renderer=t}ngOnInit(){}ngOnDestroy(){}x=0;startX=0;get max(){return this.swipeBar.nativeElement.offsetWidth-this.BUTTON_WIDTH}set xPos(t){this.renderer.setStyle(this.swipeButton.nativeElement,"margin-left",t+"px")}onPanStart(t){t.preventDefault(),!this.disabled&&(this.startX=this.x,this.panning=!0)}onPanMove(t){t.preventDefault(),!this.disabled&&(this.startX+t.deltaX>0?(this.x=this.startX+t.deltaX<=this.max?this.startX+t.deltaX:this.max,this.xPos=this.x):(this.x=0,this.xPos=this.x))}onPanEnd(t){t.preventDefault(),!this.disabled&&(this.panning=!1,this.x>=this.max*.95&&(this.renderer.addClass(this.swipeContainer.nativeElement,"confirmed"),this.confirm.emit(),setTimeout(()=>{this.renderer.removeClass(this.swipeContainer.nativeElement,"confirmed")},300)),this.x=0,this.xPos=this.x,this.startX=0)}static ctorParameters=()=>[{type:k}];static propDecorators={icon:[{type:l}],label:[{type:l}],disabled:[{type:l}],colorType:[{type:l}],confirm:[{type:u}],swipeContainer:[{type:x,args:["swipeContainer",{static:!0}]}],swipeBar:[{type:x,args:["swipeBar",{static:!0}]}],swipeButton:[{type:x,args:["swipeButton",{static:!0}]}]}};g=D([f({selector:"armon-swipe-button",template:P,animations:_,standalone:!0,imports:[h],styles:[M]})],g);var L=function(o,t,i,a){var s=arguments.length,e=s<3?t:a===null?a=Object.getOwnPropertyDescriptor(t,i):a,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(o,t,i,a);else for(var c=o.length-1;c>=0;c--)(r=o[c])&&(e=(s<3?r(e):s>3?r(t,i,e):r(t,i))||e);return s>3&&e&&Object.defineProperty(t,i,e),e},z=class{accessControlPointService;interactionService;remoteAccessPoint;smallButtons=!1;buttonClicked=new b;isTouchScreen=!1;showOpenEntrance;showOpenExit;showOpenAll;visibleSpinner=!1;constructor(t,i){this.accessControlPointService=t,this.interactionService=i}ngOnInit(){this.isTouchScreen=this.interactionService.isTouchScreen,this.initializeButtonStatus()}initializeButtonStatus(){this.remoteAccessPoint&&this.remoteAccessPoint.relays&&(this.showOpenEntrance=this.getCountOfRelays(p.Entrance)>0,this.showOpenExit=this.getCountOfRelays(p.Exit)>0,this.showOpenAll=this.getCountOfRelays(p.All)>0)}getCountOfRelays(t){return this.remoteAccessPoint&&this.remoteAccessPoint.relays?this.remoteAccessPoint.relays.filter(i=>i.direction===t).length:0}onOpenDirectionAllClicked(t){t&&t.stopPropagation(),this.sendRemoteAccessRequest(p.All)}onOpenDirectionEntranceClicked(t){t&&t.stopPropagation(),this.sendRemoteAccessRequest(p.Entrance)}onOpenDirectionExitClicked(t){t&&t.stopPropagation(),this.sendRemoteAccessRequest(p.Exit)}sendRemoteAccessRequest(t){this.visibleSpinner=!0,this.buttonClicked.emit(t),this.accessControlPointService.openAccessControlPointRemotely(this.remoteAccessPoint.id,!!this.remoteAccessPoint.deviceId,t).subscribe({next:()=>{this.visibleSpinner=!1,this.interactionService.showMessage("REMOTECONTROL.OPENED",null,E.Success,this.remoteAccessPoint)},error:i=>{this.visibleSpinner=!1}})}static ctorParameters=()=>[{type:S},{type:R}];static propDecorators={remoteAccessPoint:[{type:l}],smallButtons:[{type:l}],buttonClicked:[{type:u}]}};z=L([f({selector:"armon-remote-control-item-buttons",template:O,standalone:!0,imports:[h,v,g,C],styles:[A]})],z);export{N as a,_ as b,U as c,z as d};
