angular-duo-pane/bundles/angular-duo-pane.umd.min.js

A library for Angular projects to easily add a two pane view for desktops, foldables and dual screen devices.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core")):"function"==typeof define&&define.amd?define("angular-duo-pane",["exports","@angular/core"],t):t((e=e||self)["angular-duo-pane"]={},e.ng.core)}(this,(function(e,t){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */function n(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a}function i(e,t,n,i){return new(n||(n=Promise))((function(r,o){function a(e){try{l(i.next(e))}catch(e){o(e)}}function s(e){try{l(i.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}l((i=i.apply(e,t||[])).next())}))}function r(e,t){var n,i,r,o,a={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return o={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function s(o){return function(s){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,i&&(r=2&o[0]?i.return:o[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,o[1])).done)return r;switch(i=0,r&&(o=[2&o[0],r.value]),o[0]){case 0:case 1:r=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,i=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(r=a.trys,(r=r.length>0&&r[r.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!r||o[1]>r[0]&&o[1]<r[3])){a.label=o[1];break}if(6===o[0]&&a.label<r[1]){a.label=r[1],r=o;break}if(r&&a.label<r[2]){a.label=r[2],a.ops.push(o);break}r[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],i=0}finally{n=r=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,s])}}}function o(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}var a=function(){function e(e,t,n,i){this.width=e,this.height=t,this.top=n,this.left=i}return Object.defineProperty(e.prototype,"width",{get:function(){return this.Width},set:function(e){this.Width=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"height",{get:function(){return this.Height},set:function(e){this.Height=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"top",{get:function(){return this.Top},set:function(e){this.Top=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"left",{get:function(){return this.Left},set:function(e){this.Left=e},enumerable:!0,configurable:!0}),e}(),s=function(){function e(e){this.changeDetectorRef=e,this.embeddedViewRef=null,this.Segment=new a(0,0,0,0),this.ContentTemplateRef=void 0}return Object.defineProperty(e.prototype,"segment",{get:function(){return this.Segment},set:function(e){this.Segment=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"contentTemplateRef",{get:function(){return this.ContentTemplateRef},set:function(e){e instanceof t.TemplateRef&&(this.ContentTemplateRef=e,this.renderView())},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewInit=function(){this.renderView()},e.prototype.renderView=function(){this.ContentTemplateRef&&this.viewContainerRef&&(this.embeddedViewRef&&this.embeddedViewRef.destroy(),this.viewContainerRef.clear(),this.embeddedViewRef=this.viewContainerRef.createEmbeddedView(this.ContentTemplateRef),this.changeDetectorRef.detectChanges())},e.ctorParameters=function(){return[{type:t.ChangeDetectorRef}]},n([t.ViewChild("viewContainer",{read:t.ViewContainerRef,static:!0})],e.prototype,"viewContainerRef",void 0),n([t.Input()],e.prototype,"segment",null),n([t.Input()],e.prototype,"contentTemplateRef",null),e=n([t.Component({selector:"duo-pane",template:'<div class="dual-screen-view-pane" [style.left]="segment.left + \'px\'" [style.top]="segment.top + \'px\'" [style.height]="segment.height + \'px\'" [style.width]="segment.width + \'px\'">\n    <ng-container #viewContainer></ng-container>\n</div>\n',styles:[".dual-screen-view-pane{position:absolute;overflow:auto}"]})],e)}(),l=function(){function e(){var e=this;this.Spanning="none",this.FoldSize=0,this.BrowserShellSize=0,this.Segments=null,this.needsDispatch=!1,this.Spanning=sessionStorage.getItem(s.ns+"-spanning")||"none",this.FoldSize=+sessionStorage.getItem(s.ns+"-fold-size")||0,this.BrowserShellSize=+sessionStorage.getItem(s.ns+"-browser-shell-size")||0,this.eventTarget=document.createDocumentFragment(),window.addEventListener("message",(function(t){"update"===t.data.action&&Object.assign(e,t.data.value)})),window.addEventListener("resize",(function(){return e.debounce(e.invalidate(),200)}))}var s;return s=e,e.prototype.addEventListener=function(e,t,n){this.eventTarget.addEventListener(e,t,n)},e.prototype.removeEventListener=function(e,t,n){this.eventTarget.removeEventListener(e,t,n)},e.prototype.dispatchEvent=function(e){if("change"===e.type){var t="on"+e.type;return"function"==typeof this[t]&&this[t](e),this.eventTarget.dispatchEvent(e)}},Object.defineProperty(e.prototype,"foldSize",{get:function(){return this.FoldSize},set:function(e){sessionStorage.setItem(s.ns+"-fold-size",e.toString()),this.FoldSize=e,this.invalidate()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"browserShellSize",{get:function(){return this.BrowserShellSize},set:function(e){sessionStorage.setItem(s.ns+"-browser-shell-size",e.toString()),this.BrowserShellSize=e,this.invalidate()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"spanning",{get:function(){return this.Spanning},set:function(e){sessionStorage.setItem(s.ns+"-spanning",e),this.Spanning=e,this.invalidate()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"segments",{set:function(e){this.Segments=e},enumerable:!0,configurable:!0}),e.prototype.getTwoLargestSegments=function(){var e,t,n=this.windowSegments;if(n.length>2){var i=[null,null],r=0;try{for(var a=o(n),s=a.next();!s.done;s=a.next()){var l=s.value,h=l.height*l.width;h>=r&&(r=h,i[0]=i[1],i[1]=l)}}catch(t){e={error:t}}finally{try{s&&!s.done&&(t=a.return)&&t.call(a)}finally{if(e)throw e.error}}return i}return n},Object.defineProperty(e.prototype,"windowSegments",{get:function(){if(null!==this.Segments&&this.Segments.length>0)return this.Segments;if("none"===this.spanning)return[new a(window.innerWidth,window.innerHeight,0,0)];if("single-fold-horizontal"===this.spanning){var e=(window.innerHeight-this.browserShellSize)/2,t=window.innerWidth;return[new a(t,e-this.foldSize/2,0,0),new a(t,this.foldSize,e-this.foldSize/2,0),new a(t,window.innerHeight,e+this.foldSize/2,0)]}if("single-fold-vertical"===this.spanning){t=window.innerWidth/2-this.foldSize/2;var n=window.innerHeight;return[new a(t,n,0,0),new a(this.foldSize,n,0,t),new a(t,n,0,window.innerWidth/2+this.foldSize/2)]}},enumerable:!0,configurable:!0}),e.prototype.debounce=function(e,t){var n;return function(){clearTimeout(n),n=setTimeout((function(){e.apply(this,arguments)}),t)}},e.prototype.invalidate=function(){return i(this,void 0,void 0,(function(){var e;return r(this,(function(t){switch(t.label){case 0:return this.needsDispatch?[3,2]:(this.needsDispatch=!0,e=this,[4,Promise.resolve(!1)]);case 1:e.needsDispatch=t.sent(),this.dispatchEvent(new Event("change")),t.label=2;case 2:return[2]}}))}))},e.ns="__foldables__",e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=s=n([t.Injectable({providedIn:"root"})],e)}(),h=function(){function e(e,n,i,r){var o=this;this.componentfactoryResolver=e,this.templateRef=n,this.viewContainer=i,this.dualScreenInformationService=r,this.secondaryPaneTemplateRef=null,this.EnsureSecondaryPaneVisible=!1,this.TwoPaneMinWidthSingleSegment=0,this.TwoPaneMinHeightSingleSegment=0,this.TwoPaneSpanningModeSingleSegment="none",this.PrimaryPanePercentageSingleSegment=50,this.paneFactory=this.componentfactoryResolver.resolveComponentFactory(s),this.primaryPaneRef=null,this.secondaryPaneRef=null,this.secondaryPaneVisibilityHandler=new t.EventEmitter,this.secondaryPaneVisible=void 0,r.addEventListener("change",(function(){o.updateView()})),this.updateView()}return Object.defineProperty(e.prototype,"primaryPanePercentageSingleSegment",{get:function(){return this.PrimaryPanePercentageSingleSegment},set:function(e){if("string"==typeof e){var t=Number(e);!isNaN(t)&&t>=0&&t<=100&&(this.PrimaryPanePercentageSingleSegment=t,this.updateView())}else"number"==typeof e&&e>=0&&e<=100&&(this.PrimaryPanePercentageSingleSegment=e,this.updateView())},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"secondaryPane",{set:function(e){this.secondaryPaneTemplateRef=e,this.destroySecondaryPaneRef(),this.updateView()},enumerable:!0,configurable:!0}),e.prototype.destroySecondaryPaneRef=function(){if(this.secondaryPaneRef){var e=this.viewContainer.indexOf(this.secondaryPaneRef.hostView);e>=0&&this.viewContainer.remove(e),this.secondaryPaneRef.destroy(),this.secondaryPaneRef=null}},e.prototype.destroyPrimaryPaneRef=function(){if(this.primaryPaneRef){var e=this.viewContainer.indexOf(this.primaryPaneRef.hostView);e>=0&&this.viewContainer.remove(e),this.primaryPaneRef.destroy(),this.primaryPaneRef=null}},Object.defineProperty(e.prototype,"ensureSecondaryPaneVisible",{set:function(e){this.EnsureSecondaryPaneVisible=e,this.updateView()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"twoPaneMinWidthSingleSegment",{set:function(e){if("string"==typeof e){var t=Number(e);t>=0&&!isNaN(t)&&(this.TwoPaneMinWidthSingleSegment=t,this.updateView())}else"number"==typeof e&&e>=0&&(this.TwoPaneMinWidthSingleSegment=e,this.updateView())},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"twoPaneMinHeightSingleSegment",{set:function(e){if("string"==typeof e){var t=Number(e);t>=0&&!isNaN(t)&&(this.TwoPaneMinHeightSingleSegment=t,this.updateView())}else"number"==typeof e&&e>=0&&(this.TwoPaneMinHeightSingleSegment=e,this.updateView())},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"twoPaneSpanningModeSingleSegment",{set:function(e){e&&(this.TwoPaneSpanningModeSingleSegment=e,this.updateView())},enumerable:!0,configurable:!0}),e.prototype.emitSecondaryPaneVisibility=function(e){void 0!==this.secondaryPaneVisible&&null!==this.secondaryPaneVisible&&e===this.secondaryPaneVisible||(this.secondaryPaneVisible=e,this.secondaryPaneVisibilityHandler.emit(e))},e.prototype.updateView=function(){var e=this.dualScreenInformationService.windowSegments;e.length>0&&(e.length>1?this.renderDualPanes(this.dualScreenInformationService.getTwoLargestSegments()):e[0].height>=this.TwoPaneMinHeightSingleSegment&&e[0].width>=this.TwoPaneMinWidthSingleSegment&&"none"!==this.TwoPaneSpanningModeSingleSegment?this.renderBothPanes(e[0]):this.EnsureSecondaryPaneVisible?(this.destroyPrimaryPaneRef(),this.renderSecondaryPane(e[0])):(this.destroySecondaryPaneRef(),this.renderPrimaryPane(e[0]),this.emitSecondaryPaneVisibility(!1)))},e.prototype.renderBothPanes=function(e){var t,n;if("single-fold-horizontal"===this.TwoPaneSpanningModeSingleSegment){var i=this.PrimaryPanePercentageSingleSegment/100;t=new a(e.width,e.height*i,0,0),n=new a(e.width,e.height*(1-i),e.height*i,0)}else{if("single-fold-vertical"!==this.TwoPaneSpanningModeSingleSegment)return;i=this.PrimaryPanePercentageSingleSegment/100;t=new a(e.width*i,e.height,0,0),n=new a(e.width*(1-i),e.height,0,e.width*i)}this.renderDualPanes([t,n])},e.prototype.renderDualPanes=function(e){e.length>0&&this.renderPrimaryPane(e[0]),e.length>1&&this.renderSecondaryPane(e[1])},e.prototype.renderPrimaryPane=function(e){this.primaryPaneRef||(this.primaryPaneRef=this.viewContainer.createComponent(this.paneFactory)),this.primaryPaneRef.instance.segment=e,this.primaryPaneRef.instance.contentTemplateRef=this.templateRef},e.prototype.renderSecondaryPane=function(e){null!==this.secondaryPaneTemplateRef&&void 0!==this.secondaryPaneTemplateRef&&(this.secondaryPaneRef||(this.secondaryPaneRef=this.viewContainer.createComponent(this.paneFactory)),this.secondaryPaneRef.instance.segment=e,this.secondaryPaneRef.instance.contentTemplateRef=this.secondaryPaneTemplateRef,this.emitSecondaryPaneVisibility(!0))},e.ctorParameters=function(){return[{type:t.ComponentFactoryResolver},{type:t.TemplateRef},{type:t.ViewContainerRef},{type:l}]},n([t.Input()],e.prototype,"primaryPanePercentageSingleSegment",null),n([t.Output()],e.prototype,"secondaryPaneVisibilityHandler",void 0),n([t.Input()],e.prototype,"secondaryPane",null),n([t.Input()],e.prototype,"ensureSecondaryPaneVisible",null),n([t.Input()],e.prototype,"twoPaneMinWidthSingleSegment",null),n([t.Input()],e.prototype,"twoPaneMinHeightSingleSegment",null),n([t.Input()],e.prototype,"twoPaneSpanningModeSingleSegment",null),e=n([t.Directive({selector:"[duoPane]"})],e)}(),c=function(){function e(){}return e=n([t.NgModule({declarations:[s,h],imports:[],exports:[h,s]})],e)}();e.AngularDuoPaneModule=c,e.DuoPaneDirective=h,e.Segment=a,e.ɵa=s,e.ɵb=l,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=angular-duo-pane.umd.min.js.map