{"__symbolic":"module","version":4,"metadata":{"NgxAwsChimeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"ngx-aws-chime","template":"<div class=\"aws-container\">\n  <ng-container *ngIf=\"!status.meeting.active\">\n    <div class=\"preview\">\n      <video class=\"video\" #video></video>\n      <div class=\"audio\" *ngIf=\"status.audio\">\n        <div class=\"indicator\">\n          <i class=\"fas fa-volume-up\"></i>\n        </div>\n        <div class=\"level\">\n          <div\n            class=\"status\"\n            [ngStyle]=\"{\n              width: status.audio.volume + '%'\n            }\"\n          ></div>\n        </div>\n      </div>\n    </div>\n    <form [formGroup]=\"form\" *ngIf=\"devices\" class=\"join\" (submit)=\"onJoinMeeting()\">\n      <div class=\"devices\">\n        <div class=\"device\">\n          <ngx-aws-device-option\n            label=\"Audio In\"\n            [control]=\"form.get('audio')\"\n            [devices]=\"devices.audio\"\n          ></ngx-aws-device-option>\n        </div>\n        <div class=\"device\">\n          <ngx-aws-device-option\n            label=\"Audio Out\"\n            [control]=\"form.get('speaker')\"\n            [devices]=\"devices.speaker\"\n          ></ngx-aws-device-option>\n        </div>\n        <div class=\"device\">\n          <ngx-aws-device-option\n            label=\"Video\"\n            [control]=\"form.get('video')\"\n            [devices]=\"devices.video\"\n          ></ngx-aws-device-option>\n        </div>\n      </div>\n      <button type=\"submit\">\n        <i class=\"fas fa-sign-in-alt\" style=\"font-size: 1.5rem; margin-right: 1rem;\"></i>\n        Join Meeting\n      </button>\n    </form>\n  </ng-container>\n  <ng-container *ngIf=\"status.meeting.active\">\n    <ngx-aws-video-chat\n      [mode]=\"mode\"\n      [media]=\"media\"\n      [devices]=\"form.value\"\n      [selfId]=\"status.meeting.self\"\n      [collapsed]=\"isCollapsed\"\n      [videoQuality]=\"videoQuality\"\n      (collapse)=\"onCollapse($event)\"\n      (minimize)=\"onMinimize($event)\"\n      (signout)=\"signout.emit($event)\"\n    ></ngx-aws-video-chat>\n  </ng-container>\n</div>\n","styles":["::-webkit-scrollbar{height:.5rem;width:.5rem}::-webkit-scrollbar-track{background-color:#c2c2c2;padding:1rem}::-webkit-scrollbar-thumb{background-color:#727272;border-radius:1rem}::-webkit-scrollbar-corner{background-color:#c2c2c2}.aws-container{height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;border-radius:.25rem;border:1px solid #ccc;box-shadow:0 0 8px 1px rgba(0,0,0,.25)}ngx-aws-video-chat{height:100%;width:100%;display:flex}.join{display:flex;flex-direction:column}.join .devices{display:flex;flex-direction:row}.join .devices .device{margin:0 1rem;display:flex;flex-direction:column}.join button{margin:2rem auto;background-color:#2e7d32;color:#fff;border:none;padding:.5rem 1rem;border-radius:.25rem;display:flex;align-items:center}.preview{height:60%;width:80%;max-height:300px;max-width:600px;display:flex;align-items:center;flex-direction:column}.preview .video{height:80%;width:100%;max-height:200px;max-width:360px}.preview .audio{height:2rem;width:100%;margin-top:auto;max-width:300px;display:flex;align-items:center}.preview .audio .indicator{margin-right:2rem}.preview .audio .indicator mat-icon{font-size:2rem}.preview .audio .level{height:8px;width:80%;border:1px solid #868686;border-radius:4px;background-color:#cacaca}.preview .audio .level .status{margin-top:.5px;height:100%;background-color:#4caf50;transition:width .25s}aws-video-chat{height:100%;width:100%}"]}]}],"members":{"entry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"defaultDevices":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"videoQuality":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"logLevel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"signout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":3}}]}],"collapseChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":3}}]}],"minimize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":34,"character":3}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"collapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"video":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":71,"character":3},"arguments":["video",{"static":false}]}]}],"audio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":72,"character":3},"arguments":["audio",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":74,"character":29}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onCollapse":[{"__symbolic":"method"}],"onMinimize":[{"__symbolic":"method"}],"startAudioPreview":[{"__symbolic":"method"}],"setup":[{"__symbolic":"method"}],"onJoinMeeting":[{"__symbolic":"method"}]}},"NgxAwsChimeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxAwsChimeComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":12,"character":26},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":12,"character":47}],"exports":[{"__symbolic":"reference","name":"NgxAwsChimeComponent"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":13,"character":34}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngx-aws-video-element","template":"<video class=\"video\" #video></video>\n<div class=\"mute\" *ngIf=\"tile.mute\" [ngClass]=\"{ collapsed: collapsed }\">\n  <svg\n    version=\"1.1\"\n    class=\"icon icon-audio-slash\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 475.092 475.092\"\n    style=\"enable-background: new 0 0 475.092 475.092;\"\n    xml:space=\"preserve\"\n  >\n    <g>\n      <g>\n        <path\n          d=\"M113.922,269.803c-2.856-11.419-4.283-22.172-4.283-32.26v-36.55c0-4.947-1.809-9.229-5.424-12.847\n\t\t\tc-3.617-3.616-7.898-5.424-12.847-5.424c-4.952,0-9.235,1.809-12.851,5.424c-3.617,3.617-5.426,7.9-5.426,12.847v36.547\n\t\t\tc0,21.129,3.999,41.494,11.993,61.106L113.922,269.803z\"\n        />\n        <path\n          d=\"M237.545,328.897c25.126,0,46.638-8.946,64.521-26.83c17.891-17.884,26.837-39.399,26.837-64.525v-36.547L431.972,97.929\n\t\t\tc1.902-1.903,2.854-4.093,2.854-6.567c0-2.474-0.952-4.664-2.854-6.567l-23.407-23.413c-1.91-1.906-4.097-2.856-6.57-2.856\n\t\t\tc-2.472,0-4.661,0.95-6.564,2.856L43.117,413.698c-1.903,1.902-2.852,4.093-2.852,6.563c0,2.478,0.949,4.668,2.852,6.57\n\t\t\tl23.411,23.411c1.904,1.903,4.095,2.851,6.567,2.851c2.475,0,4.665-0.947,6.567-2.851l72.519-72.519\n\t\t\tc20.933,12.949,43.299,20.656,67.093,23.127v37.691h-73.089c-4.949,0-9.235,1.811-12.847,5.428\n\t\t\tc-3.618,3.613-5.43,7.898-5.43,12.847c0,4.941,1.812,9.233,5.43,12.847c3.612,3.614,7.898,5.428,12.847,5.428h182.718\n\t\t\tc4.948,0,9.232-1.813,12.847-5.428c3.62-3.613,5.428-7.905,5.428-12.847c0-4.948-1.808-9.233-5.428-12.847\n\t\t\tc-3.614-3.617-7.898-5.428-12.847-5.428h-73.087v-37.691c41.302-4.565,75.988-22.408,104.067-53.526\n\t\t\tc28.072-31.117,42.11-67.711,42.11-109.776v-36.554c0-4.947-1.808-9.229-5.421-12.845c-3.621-3.617-7.902-5.426-12.851-5.426\n\t\t\tc-4.945,0-9.229,1.809-12.847,5.426c-3.617,3.616-5.424,7.898-5.424,12.845v36.547c0,35.214-12.519,65.333-37.545,90.359\n\t\t\ts-55.151,37.544-90.362,37.544c-20.557,0-40.065-4.849-58.529-14.561l27.408-27.401\n\t\t\tC216.707,327.097,227.079,328.897,237.545,328.897z\"\n        />\n        <path\n          d=\"M290.223,16.849C274.518,5.618,256.959,0,237.545,0c-25.125,0-46.635,8.951-64.524,26.84\n\t\t\tc-17.89,17.89-26.835,39.399-26.835,64.525v146.177L323.483,60.244C317.008,42.543,305.927,28.077,290.223,16.849z\"\n        />\n      </g>\n    </g>\n  </svg>\n</div>\n<div class=\"name\" *ngIf=\"!collapsed\">\n  <span>{{ name }}</span>\n</div>\n","styles":[".video{height:100%;width:100%;-o-object-fit:fill;object-fit:fill;margin:auto}.mute{position:absolute;bottom:2rem;right:2rem;opacity:.5;font-size:1.5rem;color:#fff;background-color:#616161;height:3rem;width:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.collapsed.mute{bottom:.5rem;right:.5rem;font-size:.8rem;height:1rem;width:1rem}.name{position:absolute;left:0;bottom:0;width:100%;overflow:hidden;color:#7d7d7d;opacity:.75;padding:.25rem .5rem}.name span{text-overflow:ellipsis;word-wrap:none;overflow:hidden}.icon{height:1.25rem;width:1.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon path{fill:#fff}"]}]}],"members":{"tile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"media":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"video":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":15,"character":3},"arguments":["video",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngx-aws-video-chat","template":"<div class=\"video-chat\" class=\"{{ mode }}\" [ngClass]=\"{ collapsed: collapsed }\">\n  <!-- <div class=\"side-pane\">\n    <div class=\"attendees\">\n      <div class=\"participants-label\">\n        <span>Participants</span>\n      </div>\n      <ng-container *ngFor=\"let id of attendees\">\n        <div class=\"attendee\">\n          <div class=\"details\">\n            <span>{{ names[id] }}</span>\n          </div>\n          <button *ngIf=\"tiles[id]\" class=\"control\" (click)=\"onToggleAttendeeVideo(tiles[id])\" [disabled]=\"!tiles[id]\">\n            <div *ngIf=\"tiles[id].paused\">\n              <i class=\"fas fa-video-slash\"></i>\n            </div>\n            <div *ngIf=\"!tiles[id].paused\">\n              <svg\n                version=\"1.1\"\n                id=\"Capa_1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 467.968 467.968\"\n                xml:space=\"preserve\"\n              >\n                <g>\n                  <g>\n                    <path\n                      d=\"M264.704,96.512H51.2c-28.16,0-51.2,23.04-51.2,51.2v172.544c0,28.16,23.04,51.2,51.2,51.2h213.504\n\t\t\tc28.16,0,51.2-23.04,51.2-51.2V147.712C315.904,119.04,292.864,96.512,264.704,96.512z\"\n                    />\n                  </g>\n                </g>\n                <g>\n                  <g>\n                    <path\n                      d=\"M430.08,124.672c-3.072,0.512-6.144,2.048-8.704,3.584l-79.872,46.08V293.12l80.384,46.08\n\t\t\tc14.848,8.704,33.28,3.584,41.984-11.264c2.56-4.608,4.096-9.728,4.096-15.36V154.368\n\t\t\tC467.968,135.424,450.048,120.064,430.08,124.672z\"\n                    />\n                  </g>\n                </g>\n              </svg>\n            </div>\n          </button>\n        </div>\n      </ng-container>\n      <div class=\"attendee\">\n        <div class=\"details\">\n          <span>Avirup</span>\n        </div>\n        <button class=\"control\">\n          <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t width=\"475.085px\" height=\"475.085px\" viewBox=\"0 0 475.085 475.085\"\n\t xml:space=\"preserve\">\n<g>\n\t<g>\n\t\t<path d=\"M237.541,328.897c25.128,0,46.632-8.946,64.523-26.83c17.888-17.884,26.833-39.399,26.833-64.525V91.365\n\t\t\tc0-25.126-8.938-46.632-26.833-64.525C284.173,8.951,262.669,0,237.541,0c-25.125,0-46.632,8.951-64.524,26.84\n\t\t\tc-17.893,17.89-26.838,39.399-26.838,64.525v146.177c0,25.125,8.949,46.641,26.838,64.525\n\t\t\tC190.906,319.951,212.416,328.897,237.541,328.897z\"/>\n\t\t<path d=\"M396.563,188.15c-3.606-3.617-7.898-5.426-12.847-5.426c-4.944,0-9.226,1.809-12.847,5.426\n\t\t\tc-3.613,3.616-5.421,7.898-5.421,12.845v36.547c0,35.214-12.518,65.333-37.548,90.362c-25.022,25.03-55.145,37.545-90.36,37.545\n\t\t\tc-35.214,0-65.334-12.515-90.365-37.545c-25.028-25.022-37.541-55.147-37.541-90.362v-36.547c0-4.947-1.809-9.229-5.424-12.845\n\t\t\tc-3.617-3.617-7.895-5.426-12.847-5.426c-4.952,0-9.235,1.809-12.85,5.426c-3.618,3.616-5.426,7.898-5.426,12.845v36.547\n\t\t\tc0,42.065,14.04,78.659,42.112,109.776c28.073,31.118,62.762,48.961,104.068,53.526v37.691h-73.089\n\t\t\tc-4.949,0-9.231,1.811-12.847,5.428c-3.617,3.614-5.426,7.898-5.426,12.847c0,4.941,1.809,9.233,5.426,12.847\n\t\t\tc3.616,3.614,7.898,5.428,12.847,5.428h182.719c4.948,0,9.236-1.813,12.847-5.428c3.621-3.613,5.431-7.905,5.431-12.847\n\t\t\tc0-4.948-1.81-9.232-5.431-12.847c-3.61-3.617-7.898-5.428-12.847-5.428h-73.08v-37.691\n\t\t\tc41.299-4.565,75.985-22.408,104.061-53.526c28.076-31.117,42.12-67.711,42.12-109.776v-36.547\n\t\t\tC401.998,196.049,400.185,191.77,396.563,188.15z\"/>\n\t</g>\n</g>\n</svg>\n\n        </button>\n      </div>\n    </div>\n    <div class=\"local\" *ngIf=\"mode != 'single'\">\n      <video class=\"video\" #video></video>\n      <audio #audio></audio>\n    </div>\n  </div> -->\n  <div class=\"chat-container\">\n    <div class=\"options\" [ngClass]=\"{ hover: this.minimized }\" (click)=\"onMaximize($event)\">\n      <button class=\"control\" (click)=\"onToggleCollapse()\">\n        <svg class=\"icon icon-expand\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"collapsed\">\n          <path\n            d=\"m256 0c-140.96875 0-256 115.050781-256 256 0 140.96875 115.050781 256 256 256 140.96875 0 256-115.050781 256-256 0-140.96875-115.050781-256-256-256zm0 482c-124.617188 0-226-101.382812-226-226s101.382812-226 226-226 226 101.382812 226 226-101.382812 226-226 226zm0 0\"\n          />\n          <path d=\"m301 151h60v60h30v-90h-90zm0 0\" />\n          <path d=\"m361 361h-60v30h90v-90h-30zm0 0\" />\n          <path d=\"m151 301h-30v90h90v-30h-60zm0 0\" />\n          <path d=\"m121 211h30v-60h60v-30h-90zm0 0\" />\n        </svg>\n\n        <svg class=\"icon icon-collapsed\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"!collapsed\">\n          <path\n            d=\"m256 0c-140.949219 0-256 115.03125-256 256 0 140.949219 115.03125 256 256 256 140.949219 0 256-115.03125 256-256 0-140.949219-115.03125-256-256-256zm0 482c-124.617188 0-226-101.382812-226-226s101.382812-226 226-226 226 101.382812 226 226-101.382812 226-226 226zm0 0\"\n          />\n          <path d=\"m121 331h60v60h30v-90h-90zm0 0\" />\n          <path d=\"m181 181h-60v30h90v-90h-30zm0 0\" />\n          <path d=\"m331 121h-30v90h90v-30h-60zm0 0\" />\n          <path d=\"m301 391h30v-60h60v-30h-90zm0 0\" />\n        </svg>\n      </button>\n      <button class=\"control\" [ngClass]=\"{ blocked: this.minimized }\" (click)=\"onMinimize($event)\">\n        <svg class=\"icon icon-minimize\" viewBox=\"-18 -18 572.00902 572\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"m399.488281 255.601562h-269.894531c-6.886719 0-12.46875 5.585938-12.46875 12.472657 0 6.890625 5.582031 12.472656 12.46875 12.472656h269.894531c6.890625 0 12.472657-5.582031 12.472657-12.472656 0-6.886719-5.582032-12.472657-12.472657-12.472657zm0 0\"\n          />\n          <path\n            d=\"m268.15625-.0742188c-108.457031-.0195312-206.242188 65.3085938-247.746094 165.5117188-41.496094 100.207031-18.542968 215.542969 58.171875 292.210938 104.703125 104.703124 274.453125 104.703124 379.152344 0 104.699219-104.695313 104.699219-274.445313 0-379.148438-50.167969-50.453125-118.429687-78.746094-189.578125-78.5742188zm0 511.3554688c-134.074219 0-243.203125-109.132812-243.203125-243.207031s109.128906-243.203125 243.203125-243.203125 243.207031 109.128906 243.207031 243.203125-109.132812 243.207031-243.207031 243.207031zm0 0\"\n          />\n        </svg>\n      </button>\n    </div>\n    <div\n      class=\"screens\"\n      [ngClass]=\"{\n        mono: attendees.size == 1,\n        quad: attendees.size > 1 && attendees.size <= 4,\n        multi: attendees.size > 4,\n        hidden: minimized\n      }\"\n    >\n      <div class=\"local\" *ngIf=\"mode == 'single'\" [ngClass]=\"{ active: attendees.size > 0 }\">\n        <video class=\"video\" #video></video>\n        <audio #audio></audio>\n      </div>\n      <ng-container *ngFor=\"let id of attendees\">\n        <ngx-aws-video-element\n          class=\"screen\"\n          [name]=\"names[id]\"\n          [tile]=\"tiles[id]\"\n          [media]=\"media\"\n          [collapsed]=\"collapsed\"\n          *ngIf=\"tiles[id] && tiles[id].tileId; else novideo\"\n        ></ngx-aws-video-element>\n        <ng-template #novideo>\n          <div class=\"screen mute-video\">\n            <svg\n              version=\"1.1\"\n              class=\"icon icon-user\"\n              id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n              x=\"0px\"\n              y=\"0px\"\n              viewBox=\"0 0 460.8 460.8\"\n            >\n              <g>\n                <g>\n                  <path\n                    d=\"M230.432,0c-65.829,0-119.641,53.812-119.641,119.641s53.812,119.641,119.641,119.641s119.641-53.812,119.641-119.641\n              S296.261,0,230.432,0z\"\n                  />\n                </g>\n              </g>\n              <g>\n                <g>\n                  <path\n                    d=\"M435.755,334.89c-3.135-7.837-7.314-15.151-12.016-21.943c-24.033-35.527-61.126-59.037-102.922-64.784\n              c-5.224-0.522-10.971,0.522-15.151,3.657c-21.943,16.196-48.065,24.555-75.233,24.555s-53.29-8.359-75.233-24.555\n              c-4.18-3.135-9.927-4.702-15.151-3.657c-41.796,5.747-79.412,29.257-102.922,64.784c-4.702,6.792-8.882,14.629-12.016,21.943\n              c-1.567,3.135-1.045,6.792,0.522,9.927c4.18,7.314,9.404,14.629,14.106,20.898c7.314,9.927,15.151,18.808,24.033,27.167\n              c7.314,7.314,15.673,14.106,24.033,20.898c41.273,30.825,90.906,47.02,142.106,47.02s100.833-16.196,142.106-47.02\n              c8.359-6.269,16.718-13.584,24.033-20.898c8.359-8.359,16.718-17.241,24.033-27.167c5.224-6.792,9.927-13.584,14.106-20.898\n              C436.8,341.682,437.322,338.024,435.755,334.89z\"\n                  />\n                </g>\n              </g>\n            </svg>\n            <span>{{ names[id] }}</span>\n          </div>\n        </ng-template>\n      </ng-container>\n      <!-- <div class=\"no-participant\" *ngIf=\"!attendees || attendees.size == 0\">\n        <span>Please wait for other participants to join</span>\n      </div> -->\n    </div>\n    <div\n      class=\"controls-container\"\n      [ngClass]=\"{\n        hidden: minimized\n      }\"\n    >\n      <div class=\"controls\">\n        <button class=\"control\" [ngClass]=\"{ active: state.audio }\" (click)=\"onToggleAudio()\">\n          <svg\n            class=\"icon icon-audio\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            width=\"475.085px\"\n            height=\"475.085px\"\n            viewBox=\"0 0 475.085 475.085\"\n            xml:space=\"preserve\"\n            *ngIf=\"state.audio\"\n          >\n            <g>\n              <g>\n                <path\n                  d=\"M237.541,328.897c25.128,0,46.632-8.946,64.523-26.83c17.888-17.884,26.833-39.399,26.833-64.525V91.365\n\t\t\tc0-25.126-8.938-46.632-26.833-64.525C284.173,8.951,262.669,0,237.541,0c-25.125,0-46.632,8.951-64.524,26.84\n\t\t\tc-17.893,17.89-26.838,39.399-26.838,64.525v146.177c0,25.125,8.949,46.641,26.838,64.525\n\t\t\tC190.906,319.951,212.416,328.897,237.541,328.897z\"\n                />\n                <path\n                  d=\"M396.563,188.15c-3.606-3.617-7.898-5.426-12.847-5.426c-4.944,0-9.226,1.809-12.847,5.426\n\t\t\tc-3.613,3.616-5.421,7.898-5.421,12.845v36.547c0,35.214-12.518,65.333-37.548,90.362c-25.022,25.03-55.145,37.545-90.36,37.545\n\t\t\tc-35.214,0-65.334-12.515-90.365-37.545c-25.028-25.022-37.541-55.147-37.541-90.362v-36.547c0-4.947-1.809-9.229-5.424-12.845\n\t\t\tc-3.617-3.617-7.895-5.426-12.847-5.426c-4.952,0-9.235,1.809-12.85,5.426c-3.618,3.616-5.426,7.898-5.426,12.845v36.547\n\t\t\tc0,42.065,14.04,78.659,42.112,109.776c28.073,31.118,62.762,48.961,104.068,53.526v37.691h-73.089\n\t\t\tc-4.949,0-9.231,1.811-12.847,5.428c-3.617,3.614-5.426,7.898-5.426,12.847c0,4.941,1.809,9.233,5.426,12.847\n\t\t\tc3.616,3.614,7.898,5.428,12.847,5.428h182.719c4.948,0,9.236-1.813,12.847-5.428c3.621-3.613,5.431-7.905,5.431-12.847\n\t\t\tc0-4.948-1.81-9.232-5.431-12.847c-3.61-3.617-7.898-5.428-12.847-5.428h-73.08v-37.691\n\t\t\tc41.299-4.565,75.985-22.408,104.061-53.526c28.076-31.117,42.12-67.711,42.12-109.776v-36.547\n\t\t\tC401.998,196.049,400.185,191.77,396.563,188.15z\"\n                />\n              </g>\n            </g>\n          </svg>\n\n          <svg\n            version=\"1.1\"\n            class=\"icon icon-audio-slash\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            width=\"475.092px\"\n            height=\"475.092px\"\n            viewBox=\"0 0 475.092 475.092\"\n            xml:space=\"preserve\"\n            *ngIf=\"!state.audio\"\n          >\n            <g>\n              <g>\n                <path\n                  d=\"M113.922,269.803c-2.856-11.419-4.283-22.172-4.283-32.26v-36.55c0-4.947-1.809-9.229-5.424-12.847\n\t\t\tc-3.617-3.616-7.898-5.424-12.847-5.424c-4.952,0-9.235,1.809-12.851,5.424c-3.617,3.617-5.426,7.9-5.426,12.847v36.547\n\t\t\tc0,21.129,3.999,41.494,11.993,61.106L113.922,269.803z\"\n                />\n                <path\n                  d=\"M237.545,328.897c25.126,0,46.638-8.946,64.521-26.83c17.891-17.884,26.837-39.399,26.837-64.525v-36.547L431.972,97.929\n\t\t\tc1.902-1.903,2.854-4.093,2.854-6.567c0-2.474-0.952-4.664-2.854-6.567l-23.407-23.413c-1.91-1.906-4.097-2.856-6.57-2.856\n\t\t\tc-2.472,0-4.661,0.95-6.564,2.856L43.117,413.698c-1.903,1.902-2.852,4.093-2.852,6.563c0,2.478,0.949,4.668,2.852,6.57\n\t\t\tl23.411,23.411c1.904,1.903,4.095,2.851,6.567,2.851c2.475,0,4.665-0.947,6.567-2.851l72.519-72.519\n\t\t\tc20.933,12.949,43.299,20.656,67.093,23.127v37.691h-73.089c-4.949,0-9.235,1.811-12.847,5.428\n\t\t\tc-3.618,3.613-5.43,7.898-5.43,12.847c0,4.941,1.812,9.233,5.43,12.847c3.612,3.614,7.898,5.428,12.847,5.428h182.718\n\t\t\tc4.948,0,9.232-1.813,12.847-5.428c3.62-3.613,5.428-7.905,5.428-12.847c0-4.948-1.808-9.233-5.428-12.847\n\t\t\tc-3.614-3.617-7.898-5.428-12.847-5.428h-73.087v-37.691c41.302-4.565,75.988-22.408,104.067-53.526\n\t\t\tc28.072-31.117,42.11-67.711,42.11-109.776v-36.554c0-4.947-1.808-9.229-5.421-12.845c-3.621-3.617-7.902-5.426-12.851-5.426\n\t\t\tc-4.945,0-9.229,1.809-12.847,5.426c-3.617,3.616-5.424,7.898-5.424,12.845v36.547c0,35.214-12.519,65.333-37.545,90.359\n\t\t\ts-55.151,37.544-90.362,37.544c-20.557,0-40.065-4.849-58.529-14.561l27.408-27.401\n\t\t\tC216.707,327.097,227.079,328.897,237.545,328.897z\"\n                />\n                <path\n                  d=\"M290.223,16.849C274.518,5.618,256.959,0,237.545,0c-25.125,0-46.635,8.951-64.524,26.84\n\t\t\tc-17.89,17.89-26.835,39.399-26.835,64.525v146.177L323.483,60.244C317.008,42.543,305.927,28.077,290.223,16.849z\"\n                />\n              </g>\n            </g>\n          </svg>\n        </button>\n        <button class=\"control\" [ngClass]=\"{ active: state.video }\" (click)=\"onToggleVideo()\">\n          <svg\n            version=\"1.1\"\n            class=\"icon icon-video\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 467.968 467.968\"\n            xml:space=\"preserve\"\n            *ngIf=\"state.video\"\n          >\n            <g>\n              <g>\n                <path\n                  d=\"M264.704,96.512H51.2c-28.16,0-51.2,23.04-51.2,51.2v172.544c0,28.16,23.04,51.2,51.2,51.2h213.504\n\t\t\tc28.16,0,51.2-23.04,51.2-51.2V147.712C315.904,119.04,292.864,96.512,264.704,96.512z\"\n                />\n              </g>\n            </g>\n            <g>\n              <g>\n                <path\n                  d=\"M430.08,124.672c-3.072,0.512-6.144,2.048-8.704,3.584l-79.872,46.08V293.12l80.384,46.08\n\t\t\tc14.848,8.704,33.28,3.584,41.984-11.264c2.56-4.608,4.096-9.728,4.096-15.36V154.368\n\t\t\tC467.968,135.424,450.048,120.064,430.08,124.672z\"\n                />\n              </g>\n            </g>\n          </svg>\n\n          <svg\n            version=\"1.1\"\n            class=\"icon icon-video-slash\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 484.5 484.5\"\n            style=\"enable-background: new 0 0 484.5 484.5;\"\n            xml:space=\"preserve\"\n            *ngIf=\"!state.video\"\n          >\n            <g>\n              <g id=\"videocam-off\">\n                <path\n                  d=\"M484.5,114.75l-102,102V127.5c0-15.3-10.2-25.5-25.5-25.5H198.9l285.6,285.6V114.75z M33.15,0L0,33.15L68.85,102H51\n\t\t\tc-15.3,0-25.5,10.2-25.5,25.5v255c0,15.3,10.2,25.5,25.5,25.5h306c5.1,0,10.2-2.55,12.75-5.1l81.6,81.6l33.15-33.15L33.15,0z\"\n                />\n              </g>\n            </g>\n          </svg>\n        </button>\n        <!-- <button class=\"control\" [ngClass]=\"{ active: state.speaker }\" (click)=\"onToggleSpeaker()\">\n          <div *ngIf=\"state.speaker\">\n            <i class=\"fas fa-volume-up\"></i>\n          </div>\n          <div *ngIf=\"!state.speaker\">\n            <i class=\"fas fa-volume-mute\"></i>\n          </div>\n        </button> -->\n        <button class=\"control logout\" (click)=\"onSignOut()\">\n          <svg\n            version=\"1.1\"\n            class=\"icon icon-end-call\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 512 512\"\n            xml:space=\"preserve\"\n          >\n            <g>\n              <g>\n                <path\n                  d=\"M502.72,253.163c-66.944-63.445-154.581-98.389-246.72-98.389S76.224,189.717,9.067,253.355\n\t\t\tC3.2,259.2,0,267.029,0,275.413c0,8.448,3.371,16.491,9.067,21.845l50.688,50.709c11.712,11.669,32.747,11.328,43.627,0.491\n\t\t\tc15.851-14.677,33.323-26.816,51.776-36.053c11.435-5.525,15.509-19.051,15.509-29.845v-56.021\n\t\t\tc27.2-7.317,58.133-7.979,85.333-7.979c28.821,0,58.965,0.661,85.333,7.915v56.085c0,14.165,5.717,25.387,15.189,29.995\n\t\t\tc19.285,9.643,36.821,21.76,52.032,36.032c5.803,5.483,13.696,8.64,21.632,8.64c8.384,0,16.213-3.2,22.059-9.045l50.688-50.688\n\t\t\tc5.845-5.845,9.067-13.675,9.067-22.08C512,267.029,508.8,259.2,502.72,253.163z\"\n                />\n              </g>\n            </g>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[".video-chat{display:flex;flex-direction:row;height:100%;width:100%}.video-chat.single .side-pane{width:0;border-right:0}.video-chat.single .side-pane>div{padding:0}.video-chat.single .side-pane .attendees{height:0}.video-chat.single .side-pane .local{height:100%}.video-chat.single .side-pane .video{position:absolute;top:2.25rem;left:.25rem;z-index:2;height:10rem!important;width:10rem!important}.video-chat.single .chat-container{width:100%}.video-chat.collapsed{cursor:move}.video-chat.collapsed .side-pane{width:0;border-right:0}.video-chat.collapsed .side-pane>div{padding:0}.video-chat.collapsed .side-pane .attendees{height:0}.video-chat.collapsed .control{font-size:1rem!important}.video-chat.collapsed .chat-container{width:100%}.video-chat.collapsed .screens{height:calc(100% - 3rem)!important}.video-chat.collapsed .screens .screen.multi{-ms-grid-columns:1fr 1fr!important;grid-template-columns:1fr 1fr!important}.video-chat.collapsed .controls-container{height:3rem!important}.video-chat.collapsed .controls-container .control{margin:0 .5rem!important;height:2rem!important;width:2rem!important}.video-chat .chat-container{display:flex;flex-direction:column;width:80%;position:relative}.video-chat .chat-container .options{width:100%;background-color:#2f3538;z-index:2;padding:.5rem 0;display:flex;justify-content:flex-end}.video-chat .chat-container .options.hover{cursor:pointer!important}.video-chat .chat-container .options .control{transition:.25s;height:1.5rem;width:1.5rem;border:none;margin-right:.5rem}.video-chat .chat-container .options .control .icon{transform:scale(2)}.video-chat .chat-container .screens{height:calc(100% - 4rem);display:-ms-grid;display:grid;align-items:center;justify-content:center;-ms-grid-rows:auto;grid-template-rows:auto;overflow:auto;position:relative}.video-chat .chat-container .screens .local{height:100%;width:100%;position:absolute;transition:.25s;top:0;left:0;z-index:2}.video-chat .chat-container .screens .local .video{height:100%;width:100%}.video-chat .chat-container .screens .local.active{height:30%;width:40%;top:2px;left:2px}.video-chat .chat-container .screens.mono{-ms-grid-columns:1fr;grid-template-columns:1fr}.video-chat .chat-container .screens.quad{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}.video-chat .chat-container .screens.multi{-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr}.video-chat .chat-container .screens .screen{width:100%;height:100%;position:relative;display:flex}.video-chat .chat-container .screens .no-participant{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#757575;font-style:italic;font-size:1rem;padding:.5rem}.video-chat .chat-container .controls-container{height:4rem;width:100%;display:flex;background-color:#2f3538;align-items:center;position:relative}.video-chat .chat-container .controls-container .controls{margin:0 auto;display:flex}.video-chat .chat-container .controls-container .control{margin:0 2rem;height:3rem;width:3rem}.video-chat .control{border-radius:50%;cursor:pointer;font-size:1.5rem;display:flex;justify-content:space-around;align-items:center;background-color:#2c5863;border:none}.video-chat .control:focus{outline:0}.icon{height:1.25rem;width:1.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon path{fill:#fff}.mute-video{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.mute-video .icon-user{height:50%;width:auto;border-radius:50%;overflow:hidden;background:rgba(221,221,221,.75);padding:.5rem}.mute-video .icon-user path{fill:rgba(85,85,85,.5)}.mute-video span{margin-top:1rem;width:60%}.hidden{display:none!important}.blocked{pointer-events:none;opacity:.5}"]}]}],"members":{"media":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"devices":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"selfId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"videoQuality":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"collapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"minimize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"signout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"video":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":25,"character":3},"arguments":["video",{"static":false}]}]}],"audio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":26,"character":3},"arguments":["audio",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onJoinMeeting":[{"__symbolic":"method"}],"createRoom":[{"__symbolic":"method"}],"onToggleAudio":[{"__symbolic":"method"}],"onToggleVideo":[{"__symbolic":"method"}],"onToggleAttendeeVideo":[{"__symbolic":"method"}],"onToggleSpeaker":[{"__symbolic":"method"}],"onToggleCollapse":[{"__symbolic":"method"}],"onMinimize":[{"__symbolic":"method"}],"onMaximize":[{"__symbolic":"method"}],"onSignOut":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ngx-aws-device-option","template":"<div class=\"device-container\">\n  <label>{{ label }}</label>\n  <button type=\"button\" class=\"select\" #select>\n    <div class=\"name\">\n      <span>{{ name }}</span>\n      <i class=\"fas fa-caret-down\"></i>\n    </div>\n    <div class=\"options\">\n      <div class=\"option\" *ngFor=\"let device of devices\" (click)=\"onDeviceSelected($event, device)\">\n        {{ device.label }}\n      </div>\n    </div>\n  </button>\n</div>\n","styles":[".device-container{position:relative;display:flex;flex-direction:column;width:15rem;max-width:240px}.device-container label{margin-bottom:0;color:#9e9e9e}.device-container .select{position:relative;display:flex;padding:.25rem;border:1px solid #e0e0e0;border-radius:.25rem;color:#000;background-color:#fff;outline:0}.device-container .select .name{width:100%;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.device-container .select .name span{text-align:start;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:calc(100% - 2rem)}.device-container .select:focus{border:1px solid #0277bd}.device-container .select:focus .options{display:flex;outline:hidden}.device-container .select .options{width:100%;display:none;position:absolute;top:calc(100% + 4px);left:0;flex-direction:column;z-index:2;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:.25rem;outline:0;max-height:10rem;overflow-y:auto;overflow-x:hidden}.device-container .select .options .option{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:.5rem;border-bottom:1px solid #e0e0e0;cursor:pointer;text-align:start}.device-container .select .options .option:last-child{border-bottom:0}"]}]}],"members":{"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"devices":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":3},"arguments":["select",{"static":false}]}]}],"ngOnInit":[{"__symbolic":"method"}],"onDeviceSelected":[{"__symbolic":"method"}]}}},"origins":{"NgxAwsChimeComponent":"./lib/ngx-aws-chime.component","NgxAwsChimeModule":"./lib/ngx-aws-chime.module","ɵa":"./lib/video-element/video-element.component","ɵb":"./lib/video-chat/video-chat.component","ɵc":"./lib/device-option/device-option.component"},"importAs":"@bridgera-iot/ngx-aws-chime"}