@colijnit/transaction 12.1.111 → 12.1.113

package/lib/component/checkout/style/_layout.scss

@@ -13,6 +13,7 @@
       flex-basis: $tp-checkout-default-width;
       flex-grow: 1;
       flex-shrink: 1;
+      max-width: $tp-checkout-max-width;
     }
     .co-checkout-right-panel {
       display: flex;
@@ -21,6 +22,7 @@
       flex-basis: $tp-checkout-right-panel-width;
       flex-grow: 1;
       flex-shrink: 1;
+      max-width: $tp-checkout-max-width;
     }
     .co-checkout-right-panel-relation {
       display: flex;

package/lib/component/checkout/style/_material-definition.scss

@@ -3,6 +3,7 @@ $tp-checkout-padding: 30px !default;
 $tp-checkout-column-gap: 10px !default;
 $tp-checkout-row-gap: 10px !default;
 $tp-checkout-default-width: 55% !default;
+$tp-checkout-max-width: 80% !default;
 $tp-checkout-right-panel-row-gap: 10px !default;
 $tp-checkout-right-panel-width: 400px !default;
 $tp-checkout-right-panel-width: 50% !default;

package/lib/component/core/relation/customer-groups.component.d.ts

@@ -1,14 +1,19 @@
-import { EventEmitter, OnInit } from "@angular/core";
-import { TransactionConnectorService } from "../../../service/transaction-connector.service";
-import { CustomerGroup } from "@colijnit/transactionapi/build/model/customer-group.bo";
+import { EventEmitter, OnInit } from '@angular/core';
+import { TransactionConnectorService } from '../../../service/transaction-connector.service';
+import { CustomerGroup } from '@colijnit/transactionapi/build/model/customer-group.bo';
 export declare class CustomerGroupsComponent implements OnInit {
     private _connector;
     readonly: boolean;
     required: boolean;
-    model: string;
+    set model(value: string);
+    get model(): string;
     modelChange: EventEmitter<string>;
     customerGroups: CustomerGroup[];
+    selectedCustomerGroup: CustomerGroup;
     fields: Object;
+    private _model;
     constructor(_connector: TransactionConnectorService);
     ngOnInit(): Promise<void>;
+    handleCustomerGroupChange(customerGroup: CustomerGroup): void;
+    private _setSelectedCustomerGroup;
 }

package/lib/component/relation/relation-address/relation-address.component.d.ts

@@ -9,17 +9,22 @@ export declare class RelationAddressComponent extends RelationBaseComponent impl
     private _dictionary;
     private _connector;
     private _formMasterService;
-    address: Address;
+    set address(value: Address);
+    get address(): Address;
     label: string;
     addressChange: EventEmitter<Address>;
     showClass(): boolean;
     countries: Country[];
     fields: Object;
+    countryModel: Country;
     postalCodeCheckErrorMessage: string;
     private _prevPostalCodeForCheck;
     private _prevHouseNoForCheck;
+    private _address;
     constructor(_dictionary: DictionaryService, _connector: TransactionConnectorService, _formMasterService: FormMasterService);
     ngOnInit(): Promise<void>;
     checkForPostalCodeCheckError(): Promise<void>;
     changeHouseNo(): void;
+    handleCountryChange(country: Country): void;
+    private _setSelectedAddress;
 }

package/lib/component/shared/transaction-article-text/transaction-article-text.component.d.ts

@@ -1,11 +1,11 @@
-import { EventEmitter, OnInit } from "@angular/core";
-import { Icon } from "../../../enum/icon.enum";
-import { DictionaryService } from "../../../service/dictionary.service";
-import { IconCacheService } from "../../../service/icon-cache.service";
-import { TransactionService } from "../../../service/transaction.service";
-import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
-import { StandardText } from "../../../model/standard-text";
-import { TransactionAddTextLineRequest } from "@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo";
+import { EventEmitter, OnInit } from '@angular/core';
+import { Icon } from '../../../enum/icon.enum';
+import { DictionaryService } from '../../../service/dictionary.service';
+import { IconCacheService } from '../../../service/icon-cache.service';
+import { TransactionService } from '../../../service/transaction.service';
+import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
+import { StandardText } from '../../../model/standard-text';
+import { TransactionAddTextLineRequest } from '@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo';
 export declare class TransactionArticleTextComponent implements OnInit {
     transactionService: TransactionService;
     iconCacheService: IconCacheService;

package/lib/component/shared/transaction-article-text-overview/transaction-article-text-overview.component.d.ts

@@ -1,8 +1,8 @@
-import { EventEmitter } from "@angular/core";
-import { TransactionEventService } from "../../../service/transaction-event.service";
-import { TransactionService } from "../../../service/transaction.service";
-import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
-import { CdkDrag, CdkDragDrop, CdkDropList } from "@angular/cdk/drag-drop";
+import { EventEmitter } from '@angular/core';
+import { TransactionEventService } from '../../../service/transaction-event.service';
+import { TransactionService } from '../../../service/transaction.service';
+import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
+import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
 export declare class TransactionArticleTextOverviewComponent {
     service: TransactionService;
     private _transactionEventService;

package/lib/component/transaction-card/transaction-card/style/_layout.scss

@@ -72,7 +72,12 @@
       }
     }
 
-    .transaction-line-totals-price, .transaction-line-totals-discount, .transaction-line-totals-amount, .transaction-line-totals-total {
+    .transaction-line-totals-amount {
+      .amount-number-picker {
+        height: 100%;
+      }
+    }
+    .transaction-line-totals-price, .transaction-line-totals-discount, .transaction-line-totals-total {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -93,14 +98,14 @@
     .price {
       font-weight: $tp-transaction-line-price-font-weight;
     }
-    .amount-number-picker {
-      border: none;
-
-      .co-button {
-        height: 18px;
-        width: 20px;
-      }
-    }
+    //.amount-number-picker {
+    //  border: none;
+    //
+    //  .co-button {
+    //    height: 18px;
+    //    width: 20px;
+    //  }
+    //}
     .fully-delivered {
       border-color: $tp-transaction-delivery-line-delivered-secondary-color;
       background-color: $tp-transaction-delivery-line-delivered-primary-color;

package/lib/component/transaction-card/transaction-card-invoice/transaction-card-invoice.component.d.ts

@@ -1,5 +1,5 @@
-import { TransactionInvoiceLineBaseComponent } from "../../transaction-line/transaction-invoice-line/transaction-invoice-line-base.component";
-import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionInvoiceLineBaseComponent } from '../../transaction-line/transaction-invoice-line/transaction-invoice-line-base.component';
+import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
 export declare class TransactionCardInvoiceComponent extends TransactionInvoiceLineBaseComponent {
     showClass(): boolean;
     handleShowSidePanel(line: TransactionLineInfo): void;

package/lib/component/transaction-card/transaction-card-order-delivery/transaction-card-order-delivery.component.d.ts

@@ -1,5 +1,5 @@
-import { TransactionOrderDeliveryLineBaseComponent } from "../../transaction-line/transaction-order-delivery-line/transaction-order-delivery-line-base.component";
-import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionOrderDeliveryLineBaseComponent } from '../../transaction-line/transaction-order-delivery-line/transaction-order-delivery-line-base.component';
+import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
 export declare class TransactionCardOrderDeliveryComponent extends TransactionOrderDeliveryLineBaseComponent {
     showClass(): boolean;
     handleShowSidePanel(line: TransactionLineInfo): void;

package/lib/component/transaction-card/transaction-card-receive-goods/transaction-card-receive-goods.component.d.ts

@@ -1,5 +1,5 @@
-import { TransactionReceiveGoodsLineBaseComponent } from "../../transaction-line/transaction-receive-goods-line/transaction-receive-goods-line-base.component";
-import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionReceiveGoodsLineBaseComponent } from '../../transaction-line/transaction-receive-goods-line/transaction-receive-goods-line-base.component';
+import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
 export declare class TransactionCardReceiveGoodsComponent extends TransactionReceiveGoodsLineBaseComponent {
     showClass(): boolean;
     handleShowSidePanel(line: TransactionLineInfo): void;

package/lib/component/transaction-date-select/style/_layout.scss

@@ -0,0 +1,22 @@
+@include export-module('co-transaction-date-select-layout') {
+  .co-transaction-date-select {
+    font-family: $tp-transaction-date-select-font-family;
+    font-size: $tp-transaction-date-select-font-size;
+    width: 100%;
+    .transaction-date-select-wrapper {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .co-icon {
+        height: $tp-transaction-date-select-icon-size;
+        width: $tp-transaction-date-select-icon-size;
+      }
+      .date-description {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+  }
+}

package/lib/component/transaction-date-select/style/_material-definition.scss

@@ -0,0 +1,4 @@
+$tp-transaction-date-select-font-family: $tp-font-family !default;
+$tp-transaction-date-select-font-size: $tp-font-size !default;
+$tp-transaction-date-select-icon-size: 13px !default;
+$tp-transaction-date-select-icon-color: 13px !default;

package/lib/component/transaction-date-select/style/_theme.scss

@@ -0,0 +1,12 @@
+@include export-module('co-transaction-date-select-theme') {
+  .co-transaction-date-select {
+    .co-icon {
+      svg { // for fontawesome icons
+        fill: $tp-transaction-date-select-icon-color;
+      }
+      & [fill] { // for own icons
+        fill: $tp-transaction-date-select-icon-color;
+      }
+    }
+  }
+}

package/lib/component/transaction-date-select/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/transaction-date-select/transaction-date-select.component.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '@angular/core';
+import { IconCacheService } from '../../service/icon-cache.service';
+import { Icon } from '../../enum/icon.enum';
+export declare class TransactionDateSelectComponent {
+    iconService: IconCacheService;
+    readonly icons: typeof Icon;
+    date: Date;
+    dateChange: EventEmitter<Date>;
+    showClass(): boolean;
+    constructor(iconService: IconCacheService);
+}

package/lib/component/transaction-date-select/transaction-date-select.module.d.ts

@@ -0,0 +1,2 @@
+export declare class TransactionDateSelectModule {
+}

package/lib/component/transaction-header/transaction-header-payment/style/_layout.scss

@@ -43,11 +43,12 @@
         }
       }
     }
-    .transaction-header-deposit {
+    .transaction-header-deposit  {
       .co-input-text {
         height: auto;
         padding: 0;
         input {
+          padding: 0;
           margin: 0;
         }
       }

package/lib/component/transaction-line/transaction-invoice-line/transaction-invoice-line-base.component.d.ts

@@ -1,6 +1,6 @@
-import { OnDestroy, OnInit } from "@angular/core";
-import { TransactionBaseComponent } from "../../core/base/transaction-base.component";
-import { TransactionTypeCategory } from "../../../enum/transaction-type-category.enum";
+import { OnDestroy, OnInit } from '@angular/core';
+import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
+import { TransactionTypeCategory } from '../../../enum/transaction-type-category.enum';
 export declare abstract class TransactionInvoiceLineBaseComponent extends TransactionBaseComponent implements OnInit, OnDestroy {
     readonly category: typeof TransactionTypeCategory;
     private _subscriptions;

package/lib/component/transaction-line/transaction-line/style/_layout.scss

@@ -2,7 +2,7 @@
   .co-transaction-line {
     font-family: $tp-transaction-line-font-family;
     font-size: $tp-transaction-line-font-size;
-    width: calc(100% - 30px);
+    width: 100%;
     display: flex;
     flex-direction: column;
     border: $tp-transaction-line-border;
@@ -47,6 +47,7 @@
         display: flex;
         flex-wrap: wrap;
         align-content: flex-start;
+        row-gap: $tp-transaction-line-row-gap;
         co-transaction-line-commission-button {
           margin-right: $tp-transaction-line-column-gap;
         }
@@ -54,6 +55,7 @@
       .column2 {
         display: flex;
         flex-direction: column;
+        row-gap: $tp-transaction-line-row-gap;
         margin-right: $tp-transaction-line-column-gap;
         max-width: $tp-transaction-line-button-big-width;
       }
@@ -78,15 +80,20 @@
       co-transaction-line-delivery-date-button {
         //max-width: calc((#{$tp-transaction-line-button-width} * 2) + #{$tp-transaction-line-column-gap});
         .transaction-line-button {
-          align-items: flex-end;
+          align-items: center;
         }
       }
       .co-statusbar-wrapper {
         height: $tp-transaction-line-button-height;
-        align-items: flex-end;
+        align-items: center;
+      }
+    }
+    .transaction-line-totals-amount {
+      .amount-number-picker {
+        height: 100%;
       }
     }
-    .transaction-line-totals-price, .transaction-line-totals-discount, .transaction-line-totals-amount, .transaction-line-totals-total {
+    .transaction-line-totals-price, .transaction-line-totals-discount, .transaction-line-totals-total {
       display: flex;
       align-items: center;
       justify-content: $tp-transaction-line-totals-justify-content;
@@ -104,14 +111,14 @@
     .price {
       font-weight: $tp-transaction-line-price-font-weight;
     }
-    .amount-number-picker {
-      border: none;
-
-      .co-button {
-        height: 18px;
-        width: 20px;
-      }
-    }
+    //.amount-number-picker {
+    //  border: none;
+    //
+    //  .co-button {
+    //    height: 18px;
+    //    width: 20px;
+    //  }
+    //}
     .fully-delivered {
       border-color: $tp-transaction-delivery-line-delivered-secondary-color;
       background-color: $tp-transaction-delivery-line-delivered-primary-color;
@@ -225,5 +232,11 @@
         column-gap: $tp-transaction-line-column-gap;
       }
     }
+    &.preview {
+      .transaction-line-totals {
+        grid-template-rows: $tp-transaction-line-button-height;
+        grid-gap: $tp-transaction-line-row-gap;
+      }
+    }
   }
 }

package/lib/component/transaction-line/transaction-purchase-order-line/style/_layout.scss

@@ -49,11 +49,11 @@
       height: 20px;
       margin: 2px;
     }
-    .amount-number-picker {
-      height: 25px;
-      border: 1px solid black;
-      border-radius: 10px;
-      width: 100px;
-    }
+    //.amount-number-picker {
+    //  height: 25px;
+    //  border: 1px solid black;
+    //  border-radius: 10px;
+    //  width: 100px;
+    //}
   }
 }

package/lib/component/transaction-line-action-buttons/style/_layout.scss

@@ -36,6 +36,7 @@
 
     .action-button-wrapper {
       cursor: pointer;
+      padding: $tp-transaction-line-action-buttons-action-button-padding;
       border-radius: $tp-transaction-line-action-buttons-action-button-border-radius;
       display: flex;
       align-items: center;

package/lib/component/transaction-line-action-buttons/style/_material-definition.scss

@@ -4,7 +4,7 @@ $tp-transaction-line-action-buttons-font-color: $tp-color-font !default;
 $tp-transaction-line-action-buttons-background-color: $tp-default-background-accent !default;
 $tp-transaction-line-action-buttons-popup-background-color: $tp-default-background-accent !default;
 $tp-transaction-line-action-buttons-padding: 10px !default;
-$tp-transaction-line-action-buttons-row-gap: 10px !default;
+$tp-transaction-line-action-buttons-row-gap: 0 !default;
 $tp-transaction-line-action-buttons-border-radius: 10px !default;
 $tp-transaction-line-action-buttons-box-shadow: 0px 0px 3px 0px rgba(1, 1, 1, 0.5) !default;
 $tp-transaction-line-action-buttons-add-text-background-color: $tp-color-action !default;
@@ -13,10 +13,12 @@ $tp-transaction-line-action-buttons-action-menu-button-size: 26px !default;
 $tp-transaction-line-action-buttons-action-menu-button-border-radius: $tp-default-border-radius !default;
 $tp-transaction-line-action-buttons-action-menu-button-icon-size: 18px !default;
 $tp-transaction-line-action-buttons-action-button-size: 30px !default;
-$tp-transaction-line-action-buttons-action-button-border-radius: 50% !default;
+$tp-transaction-line-action-buttons-action-button-border-radius: 10px !default;
+$tp-transaction-line-action-buttons-action-button-padding: 10px !default;
 $tp-transaction-line-action-buttons-action-button-icon-size: 15px !default;
 $tp-transaction-line-action-buttons-action-button-margin: 2px !default;
 $tp-transaction-line-action-buttons-action-button-column-gap: 10px !default;
 $tp-transaction-line-action-buttons-action-button-icon-color: $tp-color-dark !default;
 $tp-transaction-line-action-buttons-action-button-background-color: #030D3C !default;
 $tp-transaction-line-action-buttons-action-button-color: $tp-color-dark !default;
+$tp-transaction-line-action-buttons-action-button-hover-background-color: $tp-color-hover !default;

package/lib/component/transaction-line-action-buttons/style/_theme.scss

@@ -15,5 +15,8 @@
     .co-icon {
       fill: $tp-transaction-line-action-buttons-action-button-color;
     }
+    .action-button-wrapper:hover {
+      background-color: $tp-transaction-line-action-buttons-action-button-hover-background-color;
+    }
   }
 }

package/lib/component/transaction-line-action-buttons/transaction-line-action-buttons.component.d.ts

@@ -27,6 +27,7 @@ export declare class TransactionLineActionButtonsComponent implements OnInit {
     readonly: boolean;
     showActionButtons: boolean;
     private _transactionLine;
+    private _actionButtonsPopupComponentRef;
     constructor(elementRef: ElementRef, iconCacheService: IconCacheService, _transactionService: TransactionService, _dictionaryService: DictionaryService, _transactionEventService: TransactionEventService, _overlayService: OverlayService);
     ngOnInit(): void;
     handleShowHideClick(): void;

package/lib/component/transaction-line-fields/transaction-line-delivery-date-button.component.d.ts

@@ -1,10 +1,22 @@
-import { Icon } from "../../enum/icon.enum";
-import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
 import { IconCacheService } from "../../service/icon-cache.service";
-export declare class TransactionLineDeliveryDateButtonComponent {
+import { TransactionBaseComponent } from '../core/base/transaction-base.component';
+import { OverlayService } from '@colijnit/corecomponents_v12';
+import { TransactionEventService } from '../../service/transaction-event.service';
+import { TransactionService } from '../../service/transaction.service';
+import { DictionaryService } from '../../service/dictionary.service';
+import { TransactionImageService } from '../../service/transaction-image.service';
+export declare class TransactionLineDeliveryDateButtonComponent extends TransactionBaseComponent {
+    transactionEventService: TransactionEventService;
+    service: TransactionService;
     iconCacheService: IconCacheService;
-    readonly icons: typeof Icon;
-    transactionLine: TransactionLineInfo;
+    protected dictionaryService: DictionaryService;
+    protected imageService: TransactionImageService;
+    protected changeDetector: ChangeDetectorRef;
+    private _overlayService;
+    private _elementRef;
     showClass(): boolean;
-    constructor(iconCacheService: IconCacheService);
+    private _calendarPopupComponentRef;
+    constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _overlayService: OverlayService, _elementRef: ElementRef);
+    handleShowDialog(event: MouseEvent): void;
 }

package/lib/component/transaction-line-purchase-receive-goods/style/_layout.scss

@@ -9,10 +9,10 @@
       display: flex;
       flex-direction: column;
 
-      .amount-number-picker {
-        height: 40px;
-        margin: 5px;
-      }
+      //.amount-number-picker {
+      //  height: 40px;
+      //  margin: 5px;
+      //}
     }
 
     .header-wrapper {

package/lib/enum/icon.enum.d.ts

@@ -65,6 +65,7 @@ export declare enum Icon {
     Purchase = "purchase",
     Resize = "resize",
     ShareSolid = "share_solid",
+    SharpLightTruckMovingClock = "sharp_light_truck_moving_clock",
     ShelvesLight = "shelves_light",
     ShelvesRegular = "shelves_regular",
     ShelvesSolid = "shelves_solid",

package/lib/res/dictionary/dictionaries.d.ts

@@ -10261,6 +10261,7 @@ export declare class Dictionaries {
         ARRIVAL_DATE2: string;
         ARRIVAL_DATE: string;
         ARRIVAL_DATE_OBLIGATION: string;
+        ART_ORDER_LINE: string;
         ARTICLE: string;
         ARTICLEGROUP: string;
         ARTICLENR: string;
@@ -14145,6 +14146,7 @@ export declare class Dictionaries {
         ORDER_INFORMATION: string;
         ORDER_INFORMATION1: string;
         ORDER_KIND: string;
+        ORDER_LINE: string;
         ORDER_LINES: string;
         ORDER_LINES_ALLOCATED_NOT_FOUND: string;
         ORDER_LINES_EXIST: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/transaction",
-  "version": "12.1.111",
+  "version": "12.1.113",
   "description": "Colijn IT transaction module for Angular 12",
   "repository": "npm/npm",
   "author": "Colijn IT",

package/esm2015/lib/component/core/directive/overlay.directive.js

@@ -1,106 +0,0 @@
-import { Directive, ElementRef, Input } from '@angular/core';
-export class OverlayDirective {
-    constructor(elementRef) {
-        this.keepInView = false;
-        this.inheritWidth = false;
-        this.rightAlign = false;
-        this.handleScroll = (event) => {
-            this._checkAndPlaceElement();
-        };
-        this._elementRef = elementRef;
-    }
-    set parent(value) {
-        if (value) {
-            this._parent = value instanceof ElementRef ? value : value.elementRef;
-        }
-        else {
-            if (this._parent) {
-                this._resizeObserver.disconnect();
-            }
-        }
-    }
-    ngOnDestroy() {
-        document.removeEventListener("scroll", this.handleScroll, true);
-        this._intersectionObserver.disconnect();
-        this._resizeObserver.disconnect();
-        this._elementRef = undefined;
-        this._parent = undefined;
-    }
-    ngOnInit() {
-        if (!this._elementRef || !this._elementRef.nativeElement) {
-            return;
-        }
-        document.addEventListener("scroll", this.handleScroll, true);
-        this._checkAndPlaceElement();
-        this._resizeObserver = new ResizeObserver((entries) => {
-            this._checkAndPlaceElement();
-        });
-        this._intersectionObserver = new IntersectionObserver((entries) => {
-            if (entries && entries.length > 0) {
-                if (entries[0].isIntersecting === false) {
-                    this._elementRef.nativeElement.style.opacity = 0; // hide cause parent is not visible
-                }
-                else {
-                    this._elementRef.nativeElement.style.opacity = 1;
-                }
-            }
-        }, {
-            root: null
-        });
-        this._intersectionObserver.observe(this._parent.nativeElement); // observe parent for visibility
-        this._resizeObserver.observe(document.body);
-    }
-    _checkAndPlaceElement() {
-        if (this._elementRef && this._elementRef.nativeElement && this._parent && this._parent.nativeElement) {
-            const elementRect = this._elementRef.nativeElement.getBoundingClientRect();
-            const parentRect = this._parent.nativeElement.getBoundingClientRect();
-            this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
-        }
-    }
-    _placeElement(bottom, right, parentRect, elementRect) {
-        if (bottom < parentRect.bottom + elementRect.height) { // make sure it fits at the bottom
-            this._elementRef.nativeElement.style.top = (parentRect.top - elementRect.height) + "px";
-            this._elementRef.nativeElement.classList.add('top');
-        }
-        else {
-            this._elementRef.nativeElement.classList.remove('top');
-            this._elementRef.nativeElement.style.top = parentRect.bottom + "px";
-        }
-        if (this.inheritWidth) {
-            this._elementRef.nativeElement.style.width = parentRect.width + "px";
-        }
-        if (this.rightAlign) {
-            this._elementRef.nativeElement.style.left = (parentRect.right - elementRect.width) + "px";
-        }
-        else {
-            this._elementRef.nativeElement.style.left = parentRect.left + "px";
-        }
-        if (this.keepInView) {
-            if (elementRect.right > window.innerWidth) {
-                //see if we can move it to the left
-                if ((window.innerWidth - elementRect.width) > 0) {
-                    this._elementRef.nativeElement.style.left = (window.innerWidth - elementRect.width) + "px";
-                }
-                else { //resize so it fits into view
-                    this._elementRef.nativeElement.style.width = window.innerWidth + "px";
-                    this._elementRef.nativeElement.style.left = 0;
-                }
-            }
-        }
-    }
-}
-OverlayDirective.decorators = [
-    { type: Directive, args: [{
-                selector: "[overlay]"
-            },] }
-];
-OverlayDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-OverlayDirective.propDecorators = {
-    parent: [{ type: Input, args: ["overlay",] }],
-    keepInView: [{ type: Input }],
-    inheritWidth: [{ type: Input }],
-    rightAlign: [{ type: Input }]
-};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmxheS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90cmFuc2FjdGlvbi9zcmMvbGliL2NvbXBvbmVudC9jb3JlL2RpcmVjdGl2ZS9vdmVybGF5LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBZ0IsS0FBSyxFQUFvQixNQUFNLGVBQWUsQ0FBQztBQU01RixNQUFNLE9BQU8sZ0JBQWdCO0lBMkIzQixZQUNJLFVBQXNCO1FBZG5CLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFHNUIsaUJBQVksR0FBWSxLQUFLLENBQUM7UUFHOUIsZUFBVSxHQUFZLEtBQUssQ0FBQztRQWlENUIsaUJBQVksR0FBRyxDQUFDLEtBQVksRUFBRSxFQUFFO1lBQ3JDLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1FBQy9CLENBQUMsQ0FBQTtRQXpDQyxJQUFJLENBQUMsV0FBVyxHQUFHLFVBQVUsQ0FBQztJQUNoQyxDQUFDO0lBN0JELElBQ1csTUFBTSxDQUFDLEtBQTBDO1FBQzFELElBQUksS0FBSyxFQUFFO1lBQ1QsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLFlBQVksVUFBVSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUM7U0FDdkU7YUFBTTtZQUNMLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtnQkFDaEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxVQUFVLEVBQUUsQ0FBQzthQUNuQztTQUNGO0lBQ0gsQ0FBQztJQXNCTSxXQUFXO1FBQ2hCLFFBQVEsQ0FBQyxtQkFBbUIsQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRSxJQUFJLENBQUMsQ0FBQztRQUNoRSxJQUFJLENBQUMscUJBQXFCLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDeEMsSUFBSSxDQUFDLGVB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O2dCQUNULFFBQVEsRUFBRSxXQUFXO2FBQ3RCOzs7WUFMa0IsVUFBVTs7O3FCQVExQixLQUFLLFNBQUMsU0FBUzt5QkFXZixLQUFLOzJCQUdMLEtBQUs7eUJBR0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7RGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7T3ZlcmxheVBhcmVudERpcmVjdGl2ZX0gZnJvbSAnQGNvbGlqbml0L2NvcmVjb21wb25lbnRzX3YxMi9saWIvZGlyZWN0aXZlcy9vdmVybGF5L292ZXJsYXktcGFyZW50LmRpcmVjdGl2ZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogXCJbb3ZlcmxheV1cIlxyXG59KVxyXG5leHBvcnQgY2xhc3MgT3ZlcmxheURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSwgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KFwib3ZlcmxheVwiKVxyXG4gIHB1YmxpYyBzZXQgcGFyZW50KHZhbHVlOiBPdmVybGF5UGFyZW50RGlyZWN0aXZlIHwgRWxlbWVudFJlZikge1xyXG4gICAgaWYgKHZhbHVlKSB7XHJcbiAgICAgIHRoaXMuX3BhcmVudCA9IHZhbHVlIGluc3RhbmNlb2YgRWxlbWVudFJlZiA/IHZhbHVlIDogdmFsdWUuZWxlbWVudFJlZjtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIGlmICh0aGlzLl9wYXJlbnQpIHtcclxuICAgICAgICB0aGlzLl9yZXNpemVPYnNlcnZlci5kaXNjb25uZWN0KCk7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgcHVibGljIGtlZXBJblZpZXc6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICBwdWJsaWMgaW5oZXJpdFdpZHRoOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgcHVibGljIHJpZ2h0QWxpZ246IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgcHJpdmF0ZSBfZWxlbWVudFJlZjogRWxlbWVudFJlZjtcclxuICBwcml2YXRlIF9yZXNpemVPYnNlcnZlcjogUmVzaXplT2JzZXJ2ZXI7XHJcbiAgcHJpdmF0ZSBfaW50ZXJzZWN0aW9uT2JzZXJ2ZXI6IEludGVyc2VjdGlvbk9ic2VydmVyO1xyXG4gIHByaXZhdGUgX3BhcmVudDogRWxlbWVudFJlZjtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICAgIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWZcclxuICApIHtcclxuICAgIHRoaXMuX2VsZW1lbnRSZWYgPSBlbGVtZW50UmVmO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xyXG4gICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcihcInNjcm9sbFwiLCB0aGlzLmhhbmRsZVNjcm9sbCwgdHJ1ZSk7XHJcbiAgICB0aGlzLl9pbnRlcnNlY3Rpb25PYnNlcnZlci5kaXNjb25uZWN0KCk7XHJcbiAgICB0aGlzLl9yZXNpemVPYnNlcnZlci5kaXNjb25uZWN0KCk7XHJcbiAgICB0aGlzLl9lbGVtZW50UmVmID0gdW5kZWZpbmVkO1xyXG4gICAgdGhpcy5fcGFyZW50ID0gdW5kZWZpbmVkO1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICBpZiAoIXRoaXMuX2VsZW1lbnRSZWYgfHwgIXRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCkge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKFwic2Nyb2xsXCIsIHRoaXMuaGFuZGxlU2Nyb2xsLCB0cnVlKTtcclxuICAgIHRoaXMuX2NoZWNrQW5kUGxhY2VFbGVtZW50KCk7XHJcbiAgICB0aGlzLl9yZXNpemVPYnNlcnZlciA9IG5ldyBSZXNpemVPYnNlcnZlcihcclxuICAgICAgICAoZW50cmllcykgPT4ge1xyXG4gICAgICAgICAgdGhpcy5fY2hlY2tBbmRQbGFjZUVsZW1lbnQoKTtcclxuICAgICAgICB9XHJcbiAgICApO1xyXG4gICAgdGhpcy5faW50ZXJzZWN0aW9uT2JzZXJ2ZXIgPSBuZXcgSW50ZXJzZWN0aW9uT2JzZXJ2ZXIoXHJcbiAgICAgICAgKGVudHJpZXM6IEludGVyc2VjdGlvbk9ic2VydmVyRW50cnlbXSkgPT4ge1xyXG4gICAgICAgICAgaWYgKGVudHJpZXMgJiYgZW50cmllcy5sZW5ndGggPiAwKSB7XHJcbiAgICAgICAgICAgIGlmIChlbnRyaWVzWzBdLmlzSW50ZXJzZWN0aW5nID09PSBmYWxzZSkge1xyXG4gICAgICAgICAgICAgIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5zdHlsZS5vcGFjaXR5ID0gMDsgLy8gaGlkZSBjYXVzZSBwYXJlbnQgaXMgbm90IHZpc2libGVcclxuICAgICAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuc3R5bGUub3BhY2l0eSA9IDE7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgIH1cclxuICAgICAgICB9LCB7XHJcbiAgICAgICAgICByb290OiBudWxsXHJcbiAgICAgICAgfVxyXG4gICAgKTtcclxuICAgIHRoaXMuX2ludGVyc2VjdGlvbk9ic2VydmVyLm9ic2VydmUodGhpcy5fcGFyZW50Lm5hdGl2ZUVsZW1lbnQpOyAvLyBvYnNlcnZlIHBhcmVudCBmb3IgdmlzaWJpbGl0eVxyXG4gICAgdGhpcy5fcmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZShkb2N1bWVudC5ib2R5KTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBoYW5kbGVTY3JvbGwgPSAoZXZlbnQ6IEV2ZW50KSA9PiB7XHJcbiAgICB0aGlzLl9jaGVja0FuZFBsYWNlRWxlbWVudCgpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBfY2hlY2tBbmRQbGFjZUVsZW1lbnQoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5fZWxlbWVudFJlZiAmJiB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQgJiYgdGhpcy5fcGFyZW50ICYmIHRoaXMuX3BhcmVudC5uYXRpdmVFbGVtZW50KSB7XHJcbiAgICAgIGNvbnN0IGVsZW1lbnRSZWN0OiBDbGllbnRSZWN0ID0gdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xyXG4gICAgICBjb25zdCBwYXJlbnRSZWN0OiBDbGllbnRSZWN0ID0gdGhpcy5fcGFyZW50Lm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcbiAgICAgIHRoaXMuX3BsYWNlRWxlbWVudCh3aW5kb3cuaW5uZXJIZWlnaHQsIHdpbmRvdy5pbm5lcldpZHRoLCBwYXJlbnRSZWN0LCBlbGVtZW50UmVjdCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIF9wbGFjZUVsZW1lbnQoYm90dG9tOiBudW1iZXIsIHJpZ2h0OiBudW1iZXIsIHBhcmVudFJlY3Q6IENsaWVudFJlY3QsIGVsZW1lbnRSZWN0OiBDbGllbnRSZWN0KTogdm9pZCB7XHJcbiAgICBpZiAoYm90dG9tIDwgcGFyZW50UmVjdC5ib3R0b20gKyBlbGVtZW50UmVjdC5oZWlnaHQpIHsgLy8gbWFrZSBzdXJlIGl0IGZpdHMgYXQgdGhlIGJvdHRvbVxyXG4gICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuc3R5bGUudG9wID0gKHBhcmVudFJlY3QudG9wIC0gZWxlbWVudFJlY3QuaGVpZ2h0KSArIFwicHhcIjtcclxuICAgICAgdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmNsYXNzTGlzdC5hZGQoJ3RvcCcpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmNsYXNzTGlzdC5yZW1vdmUoJ3RvcCcpO1xyXG4gICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuc3R5bGUudG9wID0gcGFyZW50UmVjdC5ib3R0b20gKyBcInB4XCI7XHJcbiAgICB9XHJcbiAgICBpZiAodGhpcy5pbmhlcml0V2lkdGgpIHtcclxuICAgICAgdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnN0eWxlLndpZHRoID0gcGFyZW50UmVjdC53aWR0aCArIFwicHhcIjtcclxuICAgIH1cclxuICAgIGlmICh0aGlzLnJpZ2h0QWxpZ24pIHtcclxuICAgICAgdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnN0eWxlLmxlZnQgPSAocGFyZW50UmVjdC5yaWdodCAtIGVsZW1lbnRSZWN0LndpZHRoKSArIFwicHhcIjtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5zdHlsZS5sZWZ0ID0gcGFyZW50UmVjdC5sZWZ0ICsgXCJweFwiO1xyXG4gICAgfVxyXG4gICAgaWYgKHRoaXMua2VlcEluVmlldykge1xyXG4gICAgICBpZiAoZWxlbWVudFJlY3QucmlnaHQgPiB3aW5kb3cuaW5uZXJXaWR0aCkge1xyXG4gICAgICAgIC8vc2VlIGlmIHdlIGNhbiBtb3ZlIGl0IHRvIHRoZSBsZWZ0XHJcbiAgICAgICAgaWYgKCh3aW5kb3cuaW5uZXJXaWR0aCAtIGVsZW1lbnRSZWN0LndpZHRoKSA+IDApIHtcclxuICAgICAgICAgIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5zdHlsZS5sZWZ0ID0gKHdpbmRvdy5pbm5lcldpZHRoIC0gZWxlbWVudFJlY3Qud2lkdGgpICsgXCJweFwiO1xyXG4gICAgICAgIH0gZWxzZSB7IC8vcmVzaXplIHNvIGl0IGZpdHMgaW50byB2aWV3XHJcbiAgICAgICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuc3R5bGUud2lkdGggPSB3aW5kb3cuaW5uZXJXaWR0aCArIFwicHhcIjtcclxuICAgICAgICAgIHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5zdHlsZS5sZWZ0ID0gMDtcclxuICAgICAgICB9XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19