gentics-ui-core - npm Package Compare versions

Comparing version 5.3.0 to 5.4.0

CHANGELOG.md

 # Gentics UI Core Changelog
 
+## 5.4.0 (2017-09-17)
+
+### Features
+* DropdownList exposes a `.resize()` method
+
+### Fixes
+* Fix positioning issues with DropdownList (GUIC-118)
+
 ## 5.3.0 (2017-09-17)
@@ -4,0 +12,0 @@

dist/components/dropdown-list/dropdown-content-wrapper.component.d.ts

@@ -18,2 +18,6 @@ import { TemplateRef, ElementRef, ChangeDetectorRef, EventEmitter } from '@angular/core';
     ngAfterViewInit(): void;
+    /**
+     * Positions and resizes the dropdown contents container.
+     */
+    setPositionAndSize(initialOpening?: boolean): void;
     clickHandler(e: KeyboardEvent): void;
@@ -27,5 +31,12 @@ ngOnDestroy(): void;
         left: string;
-        maxHeight?: number;
+        maxHeight: string;
+        flowUpwards: boolean;
     };
     onContentClick(): void;
+    /**
+     * Given a true height of an element, returns a new height which is limited by both
+     * the height of the window and the value of DROPDOWN_MAX_HEIGHT.
+     */
+    private limitHeight(trueHeight);
+    private getDropdownContent();
     private calculateContainerWidth();
@@ -32,0 +43,0 @@ /**

dist/components/dropdown-list/dropdown-content-wrapper.component.js

 import { Component, HostListener, ElementRef, ChangeDetectorRef, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { KeyCode } from '../../common/keycodes';
 var PAGE_MARGIN = 50;
+var DROPDOWN_MAX_HEIGHT = 650;
 var DropdownContentWrapper = (function () {
@@ -21,16 +22,26 @@ function DropdownContentWrapper(elementRef, cd) {
     DropdownContentWrapper.prototype.ngAfterViewInit = function () {
+        this.setPositionAndSize(true);
+    };
+    /**
+     * Positions and resizes the dropdown contents container.
+     */
+    DropdownContentWrapper.prototype.setPositionAndSize = function (initialOpening) {
         var _this = this;
-        var content = this.elementRef.nativeElement.querySelector('gtx-dropdown-content');
-        content.setAttribute('id', this.id);
+        if (initialOpening === void 0) { initialOpening = false; }
+        var content = this.getDropdownContent();
+        if (initialOpening) {
+            // When opening for the first time, some extra logic is required
+            this.contentStyles.height = 0;
+            this.contentStyles.opacity = 0;
+            content.setAttribute('id', this.id);
+        }
         var positionStyles = this.calculatePositionStyles();
         Object.assign(this.contentStyles, positionStyles);
-        var flowUpwards = parseInt(positionStyles.top, 10) < Math.floor(this.trigger.getBoundingClientRect().top);
-        this.contentStyles.height = 0;
+        // const flowUpwards = parseInt(positionStyles.top, 10) < Math.floor(this.trigger.getBoundingClientRect().top);
         var contentHeight = this.innerHeight(this.elementRef.nativeElement.querySelector('gtx-dropdown-content'));
         // when flowing upwards, we animate the `top` property, so must remember the final value.
         var finalTop = parseInt(this.contentStyles.top);
-        if (flowUpwards) {
-            this.contentStyles.top = finalTop + contentHeight + 'px';
+        if (positionStyles.flowUpwards) {
+            this.contentStyles.top = finalTop + Math.min(contentHeight, parseInt(positionStyles.maxHeight)) + 'px';
         }
-        this.contentStyles.opacity = 0;
         this.contentStyles.width = this.calculateContainerWidth() + 'px';
@@ -42,14 +53,12 @@ this.cd.markForCheck();
         setTimeout(function () {
-            // pad the height so the content drop shadow is displayed
+            var maxHeightValue = parseInt(positionStyles.maxHeight);
             var contentHeight = _this.innerHeight(content);
-            var bleed = contentHeight + finalTop - window.innerHeight;
-            if (0 < bleed) {
-                // the dropdown is too long to fit in the window, we make it shorter.
-                contentHeight = contentHeight - bleed - PAGE_MARGIN;
-                content.style.maxHeight = contentHeight + 'px';
+            if (maxHeightValue < contentHeight) {
+                contentHeight = maxHeightValue;
             }
+            content.style.maxHeight = Math.max(contentHeight, maxHeightValue) + 'px';
             _this.contentStyles.height = contentHeight + 'px';
             _this.contentStyles.width = _this.calculateContainerWidth() + 'px';
-            if (flowUpwards) {
-                _this.contentStyles.top = parseInt(_this.contentStyles.top) - contentHeight + 'px';
+            if (positionStyles.flowUpwards) {
+                _this.contentStyles.top = finalTop + 'px';
             }
@@ -62,2 +71,3 @@ _this.contentStyles.transform = "translateZ(0)";
             _this.cd.markForCheck();
+            _this.cd.detectChanges();
         }, 0);
@@ -71,4 +81,8 @@ };
     DropdownContentWrapper.prototype.ngOnDestroy = function () {
-        this.contentStyles.maxHeight = '';
+        var content = this.getDropdownContent();
+        if (content) {
+            content.style.maxHeight = 'none';
+        }
         this.contentStyles.opacity = 0;
+        this.contentStyles.maxHeight = 'none';
     };
@@ -79,9 +93,14 @@ /**
     DropdownContentWrapper.prototype.calculatePositionStyles = function () {
-        var positionStyles = {};
-        var content = this.elementRef.nativeElement.querySelector('gtx-dropdown-content');
+        var positionStyles = {
+            flowUpwards: false,
+            maxHeight: DROPDOWN_MAX_HEIGHT + 'px'
+        };
+        var content = this.getDropdownContent();
+        var fullHeightContent = content.querySelector('.scroller');
         // Offscreen detection
         var windowHeight = window.innerHeight;
-        var originHeight = this.innerHeight(this.trigger);
-        var offsetLeft = this.offset(this.trigger).left;
-        var offsetTop = this.offset(this.trigger).top - window.pageYOffset;
+        var triggerHeight = this.innerHeight(this.trigger);
+        var offset = this.offset(this.trigger);
+        var triggerLeft = offset.left;
+        var triggerTop = offset.top;
         var currAlignment = this.options.alignment;
@@ -91,11 +110,11 @@ // Below Origin
         if (this.options.belowTrigger === true) {
-            verticalOffset = originHeight;
+            verticalOffset = triggerHeight;
         }
-        var contentWidth = this.innerWidth(content) + PAGE_MARGIN;
-        var contentHeight = this.innerHeight(content) + PAGE_MARGIN;
-        if (offsetLeft + contentWidth > window.innerWidth) {
+        var contentWidth = this.innerWidth(fullHeightContent) + PAGE_MARGIN;
+        var contentHeight = this.innerHeight(fullHeightContent) + PAGE_MARGIN;
+        if (triggerLeft + contentWidth > window.innerWidth) {
             // Dropdown goes past screen on right, force right alignment
             currAlignment = 'right';
         }
-        else if (offsetLeft - contentWidth + this.innerWidth(this.trigger) < 0) {
+        else if (triggerLeft - contentWidth + this.innerWidth(this.trigger) < 0) {
             // Dropdown goes past screen on left, force left alignment
@@ -105,22 +124,37 @@ currAlignment = 'left';
         // Vertical bottom offscreen detection
-        if (verticalOffset + offsetTop + contentHeight > windowHeight) {
-            // If going upwards still goes offscreen, just crop height of dropdown.
-            if (offsetTop + originHeight - contentHeight < 0) {
-                var adjustedHeight = windowHeight - offsetTop - verticalOffset;
-                positionStyles.maxHeight = adjustedHeight;
+        if (verticalOffset + triggerTop + contentHeight > windowHeight) {
+            var adjustedHeight = this.limitHeight(this.innerHeight(content));
+            var contentLargerThanWindow = windowHeight <= adjustedHeight;
+            // If content is greater than half of the window height, it should
+            // flow upward if the trigger is below the half-way point
+            if (contentLargerThanWindow) {
+                positionStyles.flowUpwards = windowHeight / 2 < triggerTop;
             }
             else {
-                // Flow upwards.
+                positionStyles.flowUpwards = windowHeight <= triggerTop + adjustedHeight;
+            }
+            if (!positionStyles.flowUpwards) {
+                // If going upwards still goes offscreen, just crop height of dropdown.
+                if (triggerTop + triggerHeight - contentHeight < 0) {
+                    adjustedHeight = windowHeight - triggerTop - verticalOffset - PAGE_MARGIN;
+                }
+            }
+            else {
                 if (!verticalOffset) {
-                    verticalOffset += originHeight + 1;
+                    verticalOffset += triggerHeight + 1;
                 }
                 if (this.options.belowTrigger === true) {
-                    verticalOffset -= originHeight;
+                    verticalOffset -= triggerHeight;
                 }
-                verticalOffset -= this.innerHeight(content);
+                if (triggerTop + triggerHeight - PAGE_MARGIN < adjustedHeight) {
+                    adjustedHeight = (triggerTop + triggerHeight) - PAGE_MARGIN;
+                }
+                adjustedHeight = this.limitHeight(adjustedHeight);
+                verticalOffset -= adjustedHeight;
             }
+            positionStyles.maxHeight = this.limitHeight(adjustedHeight) + 'px';
         }
         // Handle edge alignment
         var leftPosition = 0;
-        var triggerLeft = Math.floor(this.trigger.getBoundingClientRect().left);
+        // const triggerLeft: number = Math.floor(this.trigger.getBoundingClientRect().left);
         if (currAlignment === 'left') {
@@ -139,2 +173,13 @@ leftPosition = triggerLeft;
     };
+    /**
+     * Given a true height of an element, returns a new height which is limited by both
+     * the height of the window and the value of DROPDOWN_MAX_HEIGHT.
+     */
+    DropdownContentWrapper.prototype.limitHeight = function (trueHeight) {
+        var windowHeight = window.innerHeight - PAGE_MARGIN * 2;
+        return Math.min(trueHeight, DROPDOWN_MAX_HEIGHT, windowHeight);
+    };
+    DropdownContentWrapper.prototype.getDropdownContent = function () {
+        return this.elementRef.nativeElement.querySelector('gtx-dropdown-content');
+    };
     DropdownContentWrapper.prototype.calculateContainerWidth = function () {
@@ -141,0 +186,0 @@ var containerWidth = 0;

dist/components/dropdown-list/dropdown-content-wrapper.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DropdownContentWrapper":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-content-wrapper","template":"<div class=\"dropdown-content-wrapper\"\n                    (click)=\"onContentClick()\"\n                    [ngStyle]=\"contentStyles\">\n                    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n               </div>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"ngOnDestroy":[{"__symbolic":"method"}],"calculatePositionStyles":[{"__symbolic":"method"}],"onContentClick":[{"__symbolic":"method"}],"calculateContainerWidth":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"innerWidth":[{"__symbolic":"method"}],"innerHeight":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DropdownContentWrapper":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-content-wrapper","template":"<div class=\"dropdown-content-wrapper\"\n                    (click)=\"onContentClick()\"\n                    [ngStyle]=\"contentStyles\">\n                    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n               </div>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"ngOnDestroy":[{"__symbolic":"method"}],"calculatePositionStyles":[{"__symbolic":"method"}],"onContentClick":[{"__symbolic":"method"}],"calculateContainerWidth":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"innerWidth":[{"__symbolic":"method"}],"innerHeight":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DropdownContentWrapper":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-content-wrapper","template":"<div class=\"dropdown-content-wrapper\"\n                    (click)=\"onContentClick()\"\n                    [ngStyle]=\"contentStyles\">\n                    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n               </div>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"setPositionAndSize":[{"__symbolic":"method"}],"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"ngOnDestroy":[{"__symbolic":"method"}],"calculatePositionStyles":[{"__symbolic":"method"}],"onContentClick":[{"__symbolic":"method"}],"limitHeight":[{"__symbolic":"method"}],"getDropdownContent":[{"__symbolic":"method"}],"calculateContainerWidth":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"innerWidth":[{"__symbolic":"method"}],"innerHeight":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DropdownContentWrapper":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-content-wrapper","template":"<div class=\"dropdown-content-wrapper\"\n                    (click)=\"onContentClick()\"\n                    [ngStyle]=\"contentStyles\">\n                    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n               </div>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"setPositionAndSize":[{"__symbolic":"method"}],"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"ngOnDestroy":[{"__symbolic":"method"}],"calculatePositionStyles":[{"__symbolic":"method"}],"onContentClick":[{"__symbolic":"method"}],"limitHeight":[{"__symbolic":"method"}],"getDropdownContent":[{"__symbolic":"method"}],"calculateContainerWidth":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"innerWidth":[{"__symbolic":"method"}],"innerHeight":[{"__symbolic":"method"}]}}}}]

dist/components/dropdown-list/dropdown-content.component.js

@@ -57,3 +57,3 @@ import { Component, ContentChildren, HostListener, EventEmitter, forwardRef, ElementRef } from '@angular/core';
                 selector: 'gtx-dropdown-content',
-                template: "<ng-content></ng-content>"
+                template: "<div class=\"scroller\"><ng-content></ng-content></div>"
             },] },
@@ -60,0 +60,0 @@ ];

dist/components/dropdown-list/dropdown-content.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DropdownContent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-content","template":"<ng-content></ng-content>"}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./dropdown-item.component","name":"DropdownItem"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"keyHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"focusFirstItem":[{"__symbolic":"method"}],"focusNext":[{"__symbolic":"method"}],"focusPrevious":[{"__symbolic":"method"}],"getIndexOfElement":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DropdownContent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-content","template":"<ng-content></ng-content>"}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./dropdown-item.component","name":"DropdownItem"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"keyHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"focusFirstItem":[{"__symbolic":"method"}],"focusNext":[{"__symbolic":"method"}],"focusPrevious":[{"__symbolic":"method"}],"getIndexOfElement":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DropdownContent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-content","template":"<div class=\"scroller\"><ng-content></ng-content></div>"}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./dropdown-item.component","name":"DropdownItem"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"keyHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"focusFirstItem":[{"__symbolic":"method"}],"focusNext":[{"__symbolic":"method"}],"focusPrevious":[{"__symbolic":"method"}],"getIndexOfElement":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DropdownContent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-content","template":"<div class=\"scroller\"><ng-content></ng-content></div>"}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./dropdown-item.component","name":"DropdownItem"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"keyHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"focusFirstItem":[{"__symbolic":"method"}],"focusNext":[{"__symbolic":"method"}],"focusPrevious":[{"__symbolic":"method"}],"getIndexOfElement":[{"__symbolic":"method"}]}}}}]

dist/components/dropdown-list/dropdown-list.component.d.ts

@@ -38,2 +38,3 @@ import { ComponentFactoryResolver, EventEmitter, TemplateRef } from '@angular/core';
  * - `dropdownList.closeDropdown(): void`
+ * - `dropdownList.resize(): void`
  */
@@ -107,2 +108,3 @@ export declare class DropdownList {
     openDropdown(): void;
+    resize(): void;
     onTriggerClick(): void;
@@ -109,0 +111,0 @@ /**

dist/components/dropdown-list/dropdown-list.component.js

@@ -42,2 +42,3 @@ import { ChangeDetectionStrategy, Component, ComponentFactoryResolver, ContentChild, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild } from '@angular/core';
  * - `dropdownList.closeDropdown(): void`
+ * - `dropdownList.resize(): void`
  */
@@ -228,2 +229,7 @@ var DropdownList = (function () {
     };
+    DropdownList.prototype.resize = function () {
+        if (this.contentComponentRef) {
+            this.contentComponentRef.instance.setPositionAndSize();
+        }
+    };
     DropdownList.prototype.onTriggerClick = function () {
@@ -230,0 +236,0 @@ if (!this.isOpen) {

dist/components/dropdown-list/dropdown-list.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DropdownList":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-list","template":"<div (click)=\"onTriggerClick()\"><ng-content select=\"gtx-dropdown-trigger\"></ng-content></div><ng-template><ng-content select=\"gtx-dropdown-content\"></ng-content ></ng-template>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"contentsTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"trigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dropdown-trigger.directive","name":"DropdownTriggerDirective"}]}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dropdown-content.component","name":"DropdownContent"}]}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"belowTrigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sticky":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeOnEscape":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"../overlay-host/overlay-host.service","name":"OverlayHostService"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"keyHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"openDropdown":[{"__symbolic":"method"}],"onTriggerClick":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DropdownList":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-list","template":"<div (click)=\"onTriggerClick()\"><ng-content select=\"gtx-dropdown-trigger\"></ng-content></div><ng-template><ng-content select=\"gtx-dropdown-content\"></ng-content ></ng-template>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"contentsTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"trigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dropdown-trigger.directive","name":"DropdownTriggerDirective"}]}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dropdown-content.component","name":"DropdownContent"}]}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"belowTrigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sticky":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeOnEscape":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"../overlay-host/overlay-host.service","name":"OverlayHostService"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"keyHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"openDropdown":[{"__symbolic":"method"}],"onTriggerClick":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DropdownList":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-list","template":"<div (click)=\"onTriggerClick()\"><ng-content select=\"gtx-dropdown-trigger\"></ng-content></div><ng-template><ng-content select=\"gtx-dropdown-content\"></ng-content ></ng-template>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"contentsTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"trigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dropdown-trigger.directive","name":"DropdownTriggerDirective"}]}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dropdown-content.component","name":"DropdownContent"}]}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"belowTrigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sticky":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeOnEscape":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"../overlay-host/overlay-host.service","name":"OverlayHostService"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"keyHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"openDropdown":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"onTriggerClick":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DropdownList":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-dropdown-list","template":"<div (click)=\"onTriggerClick()\"><ng-content select=\"gtx-dropdown-trigger\"></ng-content></div><ng-template><ng-content select=\"gtx-dropdown-content\"></ng-content ></ng-template>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"contentsTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"trigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dropdown-trigger.directive","name":"DropdownTriggerDirective"}]}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dropdown-content.component","name":"DropdownContent"}]}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"belowTrigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sticky":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeOnEscape":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"../overlay-host/overlay-host.service","name":"OverlayHostService"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"keyHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"openDropdown":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"onTriggerClick":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}]}}}}]

dist/components/select/select.component.d.ts

@@ -69,2 +69,3 @@ import { ChangeDetectorRef, EventEmitter } from '@angular/core';
     private _disabled;
+    private preventDeselect;
     private dropdownList;
@@ -90,6 +91,2 @@ private dropdownContent;
     /**
-     * Given a SelectOption, returns the position in the 2D selectedIndex array.
-     */
-    private getIndexFromSelectOption(selected);
-    /**
      * Handle keydown events to enable keyboard navigation and selection of options.
@@ -105,2 +102,6 @@ */
     /**
+     * Given a SelectOption, returns the position in the 2D selectedIndex array.
+     */
+    private getIndexFromSelectOption(selected);
+    /**
      * Once the contents have been compiled, we can build up the optionGroups array, grouping options into
@@ -107,0 +108,0 @@ * a "default" group, i.e. the group of options which are not children of a <gtx-optgroup>, and then any

dist/components/select/select.component.js

@@ -69,2 +69,3 @@ import { ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, HostListener, Input, Output, ViewChild } from '@angular/core';
         this._disabled = false;
+        this.preventDeselect = false;
         // ValueAccessor members
@@ -128,32 +129,14 @@ this.onChange = function () { };
     Select.prototype.dropdownOpened = function () {
+        var _this = this;
         if (0 < this.selectedOptions.length) {
+            this.preventDeselect = true;
             var selected = this.selectedOptions[0];
             this.selectedIndex = this.getIndexFromSelectOption(selected);
-            this.scrollToSelectedOption();
+            setTimeout(function () {
+                _this.scrollToSelectedOption();
+                _this.preventDeselect = false;
+            }, 100);
         }
     };
     /**
-     * Given a SelectOption, returns the position in the 2D selectedIndex array.
-     */
-    Select.prototype.getIndexFromSelectOption = function (selected) {
-        if (selected) {
-            var selectedGroup = 0;
-            var selectedOption = 0;
-            for (var i = 0; i < this.optionGroups.length; i++) {
-                var group = this.optionGroups[i];
-                selectedGroup = i;
-                for (var j = 0; j < group.options.length; j++) {
-                    var option = group.options[j];
-                    selectedOption = j;
-                    if (option === selected) {
-                        return [selectedGroup, selectedOption];
-                    }
-                }
-            }
-        }
-        else {
-            return [0, 0];
-        }
-    };
-    /**
      * Handle keydown events to enable keyboard navigation and selection of options.
@@ -202,3 +185,5 @@ */
     Select.prototype.deselect = function () {
-        this.selectedIndex = [0, -1];
+        if (!this.preventDeselect) {
+            this.selectedIndex = [0, -1];
+        }
     };
@@ -240,2 +225,25 @@ // ValueAccessor members
     /**
+     * Given a SelectOption, returns the position in the 2D selectedIndex array.
+     */
+    Select.prototype.getIndexFromSelectOption = function (selected) {
+        if (selected) {
+            var selectedGroup = 0;
+            var selectedOption = 0;
+            for (var i = 0; i < this.optionGroups.length; i++) {
+                var group = this.optionGroups[i];
+                selectedGroup = i;
+                for (var j = 0; j < group.options.length; j++) {
+                    var option = group.options[j];
+                    selectedOption = j;
+                    if (option === selected) {
+                        return [selectedGroup, selectedOption];
+                    }
+                }
+            }
+        }
+        else {
+            return [0, 0];
+        }
+    };
+    /**
      * Once the contents have been compiled, we can build up the optionGroups array, grouping options into
@@ -242,0 +250,0 @@ * a "default" group, i.e. the group of options which are not children of a <gtx-optgroup>, and then any

dist/components/select/select.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"NormalizedOptionGroup":{"__symbolic":"interface"},"Select":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-select","template":"<gtx-dropdown-list width=\"trigger\" belowTrigger=\"false\" [sticky]=\"multiple\" [disabled]=\"disabled\" (open)=\"dropdownOpened()\"><gtx-dropdown-trigger><div class=\"view-value select-input\" [attr.tabindex]=\"disabled ? null : 0\" [attr.disabled]=\"disabled ? true : null\" (blur)=\"inputBlur($event)\" #viewValueContainer ><div>{{ viewValue }}</div><icon>arrow_drop_down</icon></div><label (click)=\"viewValueContainer.focus()\">{{ label }}</label></gtx-dropdown-trigger><gtx-dropdown-content (keydown)=\"handleKeydown($event)\" ><ul class=\"select-options\" (click)=\"viewValueContainer.focus()\" (mouseover)=\"deselect()\"><ng-template ngFor [ngForOf]=\"optionGroups\" let-group let-groupIndex=\"index\" ><li *ngIf=\"!group.isDefaultGroup\" class=\"group-label\">{{ group.label }}</li><li *ngFor=\"let option of group.options; let optionIndex = index\" [class.disabled]=\"group.disabled || option.disabled\" [class.selected]=\"selectedIndex[0] === groupIndex && selectedIndex[1] === optionIndex\" class=\"select-option\" (click)=\"selectItem(groupIndex, optionIndex)\" ><gtx-checkbox *ngIf=\"multiple\" [checked]=\"isSelected(option)\" (change)=\"selectItem(groupIndex, optionIndex)\"></gtx-checkbox>{{ option.viewValue }}</li></ng-template></ul></gtx-dropdown-content ></gtx-dropdown-list>","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"Select"},"multi":true}]}]}],"members":{"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../dropdown-list/dropdown-list.component","name":"DropdownList"}]}]}],"dropdownContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../dropdown-list/dropdown-content.component","name":"DropdownContent"}]}]}],"_selectOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./option.component","name":"SelectOption"},{"descendants":false}]}]}],"_selectOptionGroups":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./option.component","name":"SelectOptionGroup"},{"descendants":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"inputBlur":[{"__symbolic":"method"}],"dropdownOpened":[{"__symbolic":"method"}],"getIndexFromSelectOption":[{"__symbolic":"method"}],"handleKeydown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"isSelected":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"buildOptionGroups":[{"__symbolic":"method"}],"getInitiallySelectedOptions":[{"__symbolic":"method"}],"toggleSelectedOption":[{"__symbolic":"method"}],"updateViewValue":[{"__symbolic":"method"}],"scrollToSelectedOption":[{"__symbolic":"method"}],"searchByKeyCode":[{"__symbolic":"method"}],"getFirstIndex":[{"__symbolic":"method"}],"getLastIndex":[{"__symbolic":"method"}],"getNextIndex":[{"__symbolic":"method"}],"getPreviousIndex":[{"__symbolic":"method"}],"updateSelectedIndex":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NormalizedOptionGroup":{"__symbolic":"interface"},"Select":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-select","template":"<gtx-dropdown-list width=\"trigger\" belowTrigger=\"false\" [sticky]=\"multiple\" [disabled]=\"disabled\" (open)=\"dropdownOpened()\"><gtx-dropdown-trigger><div class=\"view-value select-input\" [attr.tabindex]=\"disabled ? null : 0\" [attr.disabled]=\"disabled ? true : null\" (blur)=\"inputBlur($event)\" #viewValueContainer ><div>{{ viewValue }}</div><icon>arrow_drop_down</icon></div><label (click)=\"viewValueContainer.focus()\">{{ label }}</label></gtx-dropdown-trigger><gtx-dropdown-content (keydown)=\"handleKeydown($event)\" ><ul class=\"select-options\" (click)=\"viewValueContainer.focus()\" (mouseover)=\"deselect()\"><ng-template ngFor [ngForOf]=\"optionGroups\" let-group let-groupIndex=\"index\" ><li *ngIf=\"!group.isDefaultGroup\" class=\"group-label\">{{ group.label }}</li><li *ngFor=\"let option of group.options; let optionIndex = index\" [class.disabled]=\"group.disabled || option.disabled\" [class.selected]=\"selectedIndex[0] === groupIndex && selectedIndex[1] === optionIndex\" class=\"select-option\" (click)=\"selectItem(groupIndex, optionIndex)\" ><gtx-checkbox *ngIf=\"multiple\" [checked]=\"isSelected(option)\" (change)=\"selectItem(groupIndex, optionIndex)\"></gtx-checkbox>{{ option.viewValue }}</li></ng-template></ul></gtx-dropdown-content ></gtx-dropdown-list>","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"Select"},"multi":true}]}]}],"members":{"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../dropdown-list/dropdown-list.component","name":"DropdownList"}]}]}],"dropdownContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../dropdown-list/dropdown-content.component","name":"DropdownContent"}]}]}],"_selectOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./option.component","name":"SelectOption"},{"descendants":false}]}]}],"_selectOptionGroups":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./option.component","name":"SelectOptionGroup"},{"descendants":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"inputBlur":[{"__symbolic":"method"}],"dropdownOpened":[{"__symbolic":"method"}],"getIndexFromSelectOption":[{"__symbolic":"method"}],"handleKeydown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"isSelected":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"buildOptionGroups":[{"__symbolic":"method"}],"getInitiallySelectedOptions":[{"__symbolic":"method"}],"toggleSelectedOption":[{"__symbolic":"method"}],"updateViewValue":[{"__symbolic":"method"}],"scrollToSelectedOption":[{"__symbolic":"method"}],"searchByKeyCode":[{"__symbolic":"method"}],"getFirstIndex":[{"__symbolic":"method"}],"getLastIndex":[{"__symbolic":"method"}],"getNextIndex":[{"__symbolic":"method"}],"getPreviousIndex":[{"__symbolic":"method"}],"updateSelectedIndex":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"NormalizedOptionGroup":{"__symbolic":"interface"},"Select":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-select","template":"<gtx-dropdown-list width=\"trigger\" belowTrigger=\"false\" [sticky]=\"multiple\" [disabled]=\"disabled\" (open)=\"dropdownOpened()\"><gtx-dropdown-trigger><div class=\"view-value select-input\" [attr.tabindex]=\"disabled ? null : 0\" [attr.disabled]=\"disabled ? true : null\" (blur)=\"inputBlur($event)\" #viewValueContainer ><div>{{ viewValue }}</div><icon>arrow_drop_down</icon></div><label (click)=\"viewValueContainer.focus()\">{{ label }}</label></gtx-dropdown-trigger><gtx-dropdown-content (keydown)=\"handleKeydown($event)\" ><ul class=\"select-options\" (click)=\"viewValueContainer.focus()\" (mouseover)=\"deselect()\"><ng-template ngFor [ngForOf]=\"optionGroups\" let-group let-groupIndex=\"index\" ><li *ngIf=\"!group.isDefaultGroup\" class=\"group-label\">{{ group.label }}</li><li *ngFor=\"let option of group.options; let optionIndex = index\" [class.disabled]=\"group.disabled || option.disabled\" [class.selected]=\"selectedIndex[0] === groupIndex && selectedIndex[1] === optionIndex\" class=\"select-option\" (click)=\"selectItem(groupIndex, optionIndex)\" ><gtx-checkbox *ngIf=\"multiple\" [checked]=\"isSelected(option)\" (change)=\"selectItem(groupIndex, optionIndex)\"></gtx-checkbox>{{ option.viewValue }}</li></ng-template></ul></gtx-dropdown-content ></gtx-dropdown-list>","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"Select"},"multi":true}]}]}],"members":{"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../dropdown-list/dropdown-list.component","name":"DropdownList"}]}]}],"dropdownContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../dropdown-list/dropdown-content.component","name":"DropdownContent"}]}]}],"_selectOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./option.component","name":"SelectOption"},{"descendants":false}]}]}],"_selectOptionGroups":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./option.component","name":"SelectOptionGroup"},{"descendants":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"inputBlur":[{"__symbolic":"method"}],"dropdownOpened":[{"__symbolic":"method"}],"handleKeydown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"isSelected":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"getIndexFromSelectOption":[{"__symbolic":"method"}],"buildOptionGroups":[{"__symbolic":"method"}],"getInitiallySelectedOptions":[{"__symbolic":"method"}],"toggleSelectedOption":[{"__symbolic":"method"}],"updateViewValue":[{"__symbolic":"method"}],"scrollToSelectedOption":[{"__symbolic":"method"}],"searchByKeyCode":[{"__symbolic":"method"}],"getFirstIndex":[{"__symbolic":"method"}],"getLastIndex":[{"__symbolic":"method"}],"getNextIndex":[{"__symbolic":"method"}],"getPreviousIndex":[{"__symbolic":"method"}],"updateSelectedIndex":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NormalizedOptionGroup":{"__symbolic":"interface"},"Select":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"gtx-select","template":"<gtx-dropdown-list width=\"trigger\" belowTrigger=\"false\" [sticky]=\"multiple\" [disabled]=\"disabled\" (open)=\"dropdownOpened()\"><gtx-dropdown-trigger><div class=\"view-value select-input\" [attr.tabindex]=\"disabled ? null : 0\" [attr.disabled]=\"disabled ? true : null\" (blur)=\"inputBlur($event)\" #viewValueContainer ><div>{{ viewValue }}</div><icon>arrow_drop_down</icon></div><label (click)=\"viewValueContainer.focus()\">{{ label }}</label></gtx-dropdown-trigger><gtx-dropdown-content (keydown)=\"handleKeydown($event)\" ><ul class=\"select-options\" (click)=\"viewValueContainer.focus()\" (mouseover)=\"deselect()\"><ng-template ngFor [ngForOf]=\"optionGroups\" let-group let-groupIndex=\"index\" ><li *ngIf=\"!group.isDefaultGroup\" class=\"group-label\">{{ group.label }}</li><li *ngFor=\"let option of group.options; let optionIndex = index\" [class.disabled]=\"group.disabled || option.disabled\" [class.selected]=\"selectedIndex[0] === groupIndex && selectedIndex[1] === optionIndex\" class=\"select-option\" (click)=\"selectItem(groupIndex, optionIndex)\" ><gtx-checkbox *ngIf=\"multiple\" [checked]=\"isSelected(option)\" (change)=\"selectItem(groupIndex, optionIndex)\"></gtx-checkbox>{{ option.viewValue }}</li></ng-template></ul></gtx-dropdown-content ></gtx-dropdown-list>","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"Select"},"multi":true}]}]}],"members":{"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dropdownList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../dropdown-list/dropdown-list.component","name":"DropdownList"}]}]}],"dropdownContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../dropdown-list/dropdown-content.component","name":"DropdownContent"}]}]}],"_selectOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./option.component","name":"SelectOption"},{"descendants":false}]}]}],"_selectOptionGroups":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./option.component","name":"SelectOptionGroup"},{"descendants":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"inputBlur":[{"__symbolic":"method"}],"dropdownOpened":[{"__symbolic":"method"}],"handleKeydown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"isSelected":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"getIndexFromSelectOption":[{"__symbolic":"method"}],"buildOptionGroups":[{"__symbolic":"method"}],"getInitiallySelectedOptions":[{"__symbolic":"method"}],"toggleSelectedOption":[{"__symbolic":"method"}],"updateViewValue":[{"__symbolic":"method"}],"scrollToSelectedOption":[{"__symbolic":"method"}],"searchByKeyCode":[{"__symbolic":"method"}],"getFirstIndex":[{"__symbolic":"method"}],"getLastIndex":[{"__symbolic":"method"}],"getNextIndex":[{"__symbolic":"method"}],"getPreviousIndex":[{"__symbolic":"method"}],"updateSelectedIndex":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "gentics-ui-core",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Gentics UI Core Framework",
@@ -18,3 +18,3 @@ "main": "dist/index.js",
   },
-  "homepage": "https://dev.gentics.com/gentics-ui-core/",
+  "homepage": "https://gentics-ui-core.neocities.org",
   "bugs": {
@@ -21,0 +21,0 @@ "url": "http://git.gentics.com/psc/gentics-ui-core/issues"

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2634545

increased by0.19%

Lines of code

9597

increased by0.77%

Number of low quality alerts

0

decreased by-100%

No dependency changes