@datarailsshared/datarailsshared 1.3.35 → 1.3.38

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1638,7 +1638,7 @@
                             multi: true
                         }],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background:#fff;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;padding:0 8px;overflow:hidden;outline:none}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host input{display:flex;flex-grow:1;height:100%;border:none;padding:4px 0;text-align:left}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host .clear-icon{visibility:hidden}:host.clearable .clear-icon,:host.ng-touched.ng-invalid .clear-icon{visibility:visible;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91783 5.00001L9.03353 1.88395C9.11924 1.79818 9.16651 1.68374 9.16665 1.56171C9.16665 1.43962 9.11937 1.32504 9.03353 1.2394L8.76047 0.966415C8.67463 0.880433 8.56023 0.833344 8.43808 0.833344C8.31612 0.833344 8.20166 0.880433 8.11582 0.966415L5.00013 4.08227L1.88428 0.966415C1.79858 0.880433 1.68404 0.833344 1.56196 0.833344C1.44001 0.833344 1.32556 0.880433 1.23985 0.966415L0.966646 1.2394C0.788869 1.41719 0.788869 1.70637 0.966646 1.88395L4.08242 5.00001L0.966646 8.11593C0.880873 8.20184 0.833677 8.31628 0.833677 8.43831C0.833677 8.56034 0.880873 8.67478 0.966646 8.76062L1.23978 9.03361C1.32548 9.11952 1.44 9.16668 1.56188 9.16668C1.68397 9.16668 1.7985 9.11952 1.88421 9.03361L5.00005 5.91769L8.11575 9.03361C8.20159 9.11952 8.31605 9.16668 8.438 9.16668H8.43815C8.56017 9.16668 8.67456 9.11952 8.7604 9.03361L9.03346 8.76062C9.11916 8.67484 9.16643 8.56034 9.16643 8.43831C9.16643 8.31628 9.11916 8.20184 9.03346 8.116L5.91783 5.00001Z\" fill=\"%2351566F\"/></svg> ');margin:auto 8px;cursor:pointer}:host span+span,:host span+img{margin-left:0}:host.search-type{padding:0 16px;border-radius:16px}:host.search-type.ng-valid{border-color:#c3c4ce}:host.search-type .search-icon{content:url('data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.5816 10.2097C11.4878 10.1157 11.3605 10.0629 11.2277 10.0629H10.8175C10.7473 10.0629 10.6799 10.035 10.6303 9.98534C10.5322 9.88724 10.527 9.73044 10.6132 9.62178C11.4154 8.6112 11.8925 7.33534 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.33523 11.8925 8.611 11.4155 9.62155 10.6172C9.7304 10.5312 9.88711 10.5366 9.9852 10.6347C10.0349 10.6845 10.0629 10.7519 10.0629 10.8223V11.2277C10.0629 11.3605 10.1157 11.4878 10.2097 11.5816L14.2834 15.6472C14.4787 15.8421 14.795 15.8419 14.9901 15.6468L15.6468 14.9901C15.8419 14.795 15.8421 14.4787 15.6472 14.2834L11.5816 10.2097ZM5.94625 10.0629C3.67296 10.0629 1.82962 8.21955 1.82962 5.94625C1.82962 3.67296 3.67296 1.82962 5.94625 1.82962C8.21955 1.82962 10.0629 3.67296 10.0629 5.94625C10.0629 8.21955 8.21955 10.0629 5.94625 10.0629Z\" fill=\"%23BCBCBC\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}:host.with-button{padding-right:0}:host.with-button button{color:#0061ff;background:#F6F7F8;height:100%;width:auto;padding:0 8px;display:flex;align-items:center;border:none;border-left:1px solid #C3C4CE}:host ::ng-deep img[prefixIcon],:host ::ng-deep img[suffixIcon],:host ::ng-deep i[prefixIcon],:host ::ng-deep i[suffixIcon]{position:relative;margin:auto 8px}:host ::ng-deep img[prefixIcon],:host ::ng-deep i[prefixIcon]{margin-left:0}:host ::ng-deep img[suffixIcon],:host ::ng-deep i[suffixIcon]{margin-right:0}\n"]
+                    styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background:#fff;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;padding:0 8px;overflow:hidden;outline:none}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host input{display:flex;font-size:14px;flex-grow:1;height:100%;border:none;padding:4px 0;text-align:left}:host input::placeholder{font-size:14px;line-height:18px}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host .clear-icon{visibility:hidden}:host.clearable .clear-icon,:host.ng-touched.ng-invalid .clear-icon{visibility:visible;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91783 5.00001L9.03353 1.88395C9.11924 1.79818 9.16651 1.68374 9.16665 1.56171C9.16665 1.43962 9.11937 1.32504 9.03353 1.2394L8.76047 0.966415C8.67463 0.880433 8.56023 0.833344 8.43808 0.833344C8.31612 0.833344 8.20166 0.880433 8.11582 0.966415L5.00013 4.08227L1.88428 0.966415C1.79858 0.880433 1.68404 0.833344 1.56196 0.833344C1.44001 0.833344 1.32556 0.880433 1.23985 0.966415L0.966646 1.2394C0.788869 1.41719 0.788869 1.70637 0.966646 1.88395L4.08242 5.00001L0.966646 8.11593C0.880873 8.20184 0.833677 8.31628 0.833677 8.43831C0.833677 8.56034 0.880873 8.67478 0.966646 8.76062L1.23978 9.03361C1.32548 9.11952 1.44 9.16668 1.56188 9.16668C1.68397 9.16668 1.7985 9.11952 1.88421 9.03361L5.00005 5.91769L8.11575 9.03361C8.20159 9.11952 8.31605 9.16668 8.438 9.16668H8.43815C8.56017 9.16668 8.67456 9.11952 8.7604 9.03361L9.03346 8.76062C9.11916 8.67484 9.16643 8.56034 9.16643 8.43831C9.16643 8.31628 9.11916 8.20184 9.03346 8.116L5.91783 5.00001Z\" fill=\"%2351566F\"/></svg> ');margin:auto 8px;cursor:pointer}:host span+span,:host span+img{margin-left:0}:host.search-type{padding:0 16px;border-radius:16px}:host.search-type.ng-valid{border-color:#c3c4ce}:host.search-type .search-icon{content:url('data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.5816 10.2097C11.4878 10.1157 11.3605 10.0629 11.2277 10.0629H10.8175C10.7473 10.0629 10.6799 10.035 10.6303 9.98534C10.5322 9.88724 10.527 9.73044 10.6132 9.62178C11.4154 8.6112 11.8925 7.33534 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.33523 11.8925 8.611 11.4155 9.62155 10.6172C9.7304 10.5312 9.88711 10.5366 9.9852 10.6347C10.0349 10.6845 10.0629 10.7519 10.0629 10.8223V11.2277C10.0629 11.3605 10.1157 11.4878 10.2097 11.5816L14.2834 15.6472C14.4787 15.8421 14.795 15.8419 14.9901 15.6468L15.6468 14.9901C15.8419 14.795 15.8421 14.4787 15.6472 14.2834L11.5816 10.2097ZM5.94625 10.0629C3.67296 10.0629 1.82962 8.21955 1.82962 5.94625C1.82962 3.67296 3.67296 1.82962 5.94625 1.82962C8.21955 1.82962 10.0629 3.67296 10.0629 5.94625C10.0629 8.21955 8.21955 10.0629 5.94625 10.0629Z\" fill=\"%23BCBCBC\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}:host.with-button{padding-right:0}:host.with-button button{color:#0061ff;background:#F6F7F8;height:100%;width:auto;padding:0 8px;display:flex;align-items:center;border:none;border-left:1px solid #C3C4CE}:host ::ng-deep img[prefixIcon],:host ::ng-deep img[suffixIcon],:host ::ng-deep i[prefixIcon],:host ::ng-deep i[suffixIcon]{position:relative;margin:auto 8px}:host ::ng-deep img[prefixIcon],:host ::ng-deep i[prefixIcon]{margin-left:0}:host ::ng-deep img[suffixIcon],:host ::ng-deep i[suffixIcon]{margin-right:0}\n"]
                 },] }
     ];
     DrInputComponent.ctorParameters = function () { return [
@@ -1737,7 +1737,7 @@
                             useExisting: DrSelectComponent,
                             multi: true
                         }],
-                    styles: [":host{width:100%;height:32px}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}\n"]
+                    styles: [":host{width:100%;height:32px}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px;font-size:14px;line-height:18px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}\n"]
                 },] }
     ];
     DrSelectComponent.ctorParameters = function () { return [
@@ -2138,6 +2138,8 @@
         function DrToggleButtonComponent(cdr) {
             this.cdr = cdr;
             this._disabled = false;
+            this.bindLabel = null;
+            this.bindValue = null;
             this.onChange = function () { };
             this.onTouched = function () { };
         }
@@ -2162,7 +2164,7 @@
             this._disabled = isDisabled;
         };
         DrToggleButtonComponent.prototype.setValue = function (item) {
-            this.selectedValue = item;
+            this.selectedValue = item[this.bindValue] || item;
             this.onChange(this.selectedValue);
             this.onTouched();
             this.cdr.markForCheck();
@@ -2172,7 +2174,7 @@
     DrToggleButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-toggle-button',
-                    template: "<div class=\"toggle-container\" [class.disabled]=\"this._disabled \">\r\n    <div *ngFor=\"let item of items\" (click)=\"setValue(item)\"\r\n         [class.selected]=\"item === selectedValue\"\r\n         class=\"toggle-container__item\">\r\n        {{item.name || item}}\r\n    </div>\r\n</div>\r\n",
+                    template: "<div class=\"toggle-container\" [class.disabled]=\"this._disabled \">\r\n    <div *ngFor=\"let item of items\" (click)=\"setValue(item)\"\r\n         [class.selected]=\"item[bindValue] === selectedValue || item === selectedValue\"\r\n         class=\"toggle-container__item\">\r\n        {{item[bindLabel] || item.name || item}}\r\n    </div>\r\n</div>\r\n",
                     providers: [
                         { provide: forms.NG_VALUE_ACCESSOR, useExisting: i0.forwardRef(function () { return DrToggleButtonComponent; }), multi: true }
                     ],
@@ -2185,6 +2187,8 @@
     ]; };
     DrToggleButtonComponent.propDecorators = {
         items: [{ type: i0.Input }],
+        bindLabel: [{ type: i0.Input }],
+        bindValue: [{ type: i0.Input }],
         selectedValue: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }]
     };
@@ -2926,6 +2930,7 @@
                 if (data) {
                     this.option = data.option;
                     this.position = data.position;
+                    this.drDropdownInHover = data.drDropdownInHover;
                     this.containerClass = data.class;
                     this.list = data.list || [];
                     this.list.forEach(function (item) {
@@ -2944,6 +2949,10 @@
             enumerable: false,
             configurable: true
         });
+        DrDropdownComponent.prototype.onMouseLeave = function () {
+            if (this.drDropdownInHover)
+                this.menuService.destroy();
+        };
         DrDropdownComponent.prototype.onClickedOutside = function () {
             if (this.firstInit) {
                 this.menuService.destroy();
@@ -3008,7 +3017,7 @@
     DrDropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-dropdown',
-                    template: "<div #menuContainer\r\n     (clickOutside)=\"onClickedOutside()\"\r\n     [drDropdownPosition]=\"option\"\r\n     #dropdownPosition=\"dropdownPosition\"\r\n     [position]=\"position\"\r\n     [class]=\"containerClass\"\r\n     class=\"dr-dropdown\">\r\n    <div class=\"dr-dropdown__container\">\r\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\r\n             (click)=\"action(act)\"\r\n             [drTooltip]=\"tooltipToShow(act)\"\r\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\r\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\r\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\r\n             class=\"dr-dropdown__container__item\"\r\n             [class.item-disabled]=\"disabled(act)\"\r\n             [class.item-selected]=\"selected(act)\">\r\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\r\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\r\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\r\n               [class]=\"actionIcon.icon\"\r\n               [class.showOnHover]=\"actionIcon.showOnHover\"\r\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\r\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\r\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    template: "<div #menuContainer\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (clickOutside)=\"onClickedOutside()\"\r\n     [drDropdownPosition]=\"option\"\r\n     #dropdownPosition=\"dropdownPosition\"\r\n     [position]=\"position\"\r\n     [class]=\"containerClass\"\r\n     class=\"dr-dropdown\">\r\n    <div class=\"dr-dropdown__container\">\r\n        <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\r\n             (click)=\"action(act)\"\r\n             [drTooltip]=\"tooltipToShow(act)\"\r\n             [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\r\n             [drTooltipOptions]=\"{ withoutArrow: true }\"\r\n             [drTooltipClass]=\"'dr-dropdown__tooltip'\"\r\n             class=\"dr-dropdown__container__item\"\r\n             [class.item-disabled]=\"disabled(act)\"\r\n             [class.item-selected]=\"selected(act)\">\r\n            <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\r\n            <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\r\n            <i *ngFor=\"let actionIcon of act.actionIcons\"\r\n               [class]=\"actionIcon.icon\"\r\n               [class.showOnHover]=\"actionIcon.showOnHover\"\r\n               (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\r\n            <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\r\n            <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden}::ng-deep .dr-dropdown__container__item:hover .dr-dropdown{visibility:visible}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item:hover{background-color:#f6f7f8}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item .showOnHover{visibility:hidden}.dr-dropdown.content-top{transform:translate(-50%,-100%)}.dr-dropdown.content-top-left{transform:translate(-100%,-100%)}.dr-dropdown.content-bottom{transform:translate(-50%,50%)}.dr-dropdown.content-bottom-left{transform:translate(-90%,35%)}.dr-dropdown.content-bottom-right{transform:translateY(45%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
                 },] }
@@ -3032,7 +3041,18 @@
             this._document = _document;
             this.position = 'left';
         }
+        DrDropdownDirective.prototype.elementHover = function () {
+            if (!this.drDropdownInHover)
+                return;
+            this.openDropdown();
+        };
         DrDropdownDirective.prototype.elementClick = function () {
+            this.openDropdown();
+        };
+        DrDropdownDirective.prototype.documentClick = function (e) {
+            this.closeDropdown(e);
+        };
+        DrDropdownDirective.prototype.openDropdown = function () {
             var option = this.el.nativeElement.getBoundingClientRect();
             this._document.querySelectorAll('dr-dropdown').forEach(function (item) { return item.remove(); });
             if (this.contentCmpRef && this.contentCmpRef.destroyCbs) {
@@ -3043,13 +3063,14 @@
                 this.service.destroy();
                 this.showMenu({
                     option: option,
+                    drDropdownInHover: this.drDropdownInHover,
                     position: this.position,
                     list: this.drDropdown,
                     class: this.drDropdownClass
                 });
             }
         };
-        DrDropdownDirective.prototype.documentClick = function (e) {
+        DrDropdownDirective.prototype.closeDropdown = function (e) {
             var menuItem = e.target.classList;
             if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
                 return;
@@ -3090,7 +3111,9 @@
         position: [{ type: i0.Input }],
         drDropdown: [{ type: i0.Input }],
         drDropdownClass: [{ type: i0.Input }],
+        drDropdownInHover: [{ type: i0.Input }],
         contentCmpRef: [{ type: i0.ViewChild, args: [DrDropdownComponent, { static: true, read: i0.ViewContainerRef },] }],
+        elementHover: [{ type: i0.HostListener, args: ['mouseenter',] }],
         elementClick: [{ type: i0.HostListener, args: ['click',] }],
         documentClick: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };