@datarailsshared/datarailsshared 1.4.177 → 1.4.178

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -6466,9 +6466,11 @@
     };
 
     var DrChatSuggestionsComponent = /** @class */ (function () {
-        function DrChatSuggestionsComponent() {
+        function DrChatSuggestionsComponent(cdr) {
+            this.cdr = cdr;
             this._nonHiddenValues = [];
             this.visibleValues = [];
+            this.isSuggestedMenuOpen = false;
             this.values = [];
             this.fullScreen = false;
             this.buttonMode = false;
@@ -6494,15 +6496,13 @@
             this.filterValues();
         };
         DrChatSuggestionsComponent.prototype.onItemClick = function (item) {
-            var _this = this;
             if (this.waitForReply) {
                 return;
             }
+            this.isSuggestedMenuOpen = false;
             this.suggestionSelect.emit(item);
             this.hiddenValues = __spreadArray(__spreadArray([], __read(this.hiddenValues)), [item]);
             this.filterValues();
-            this.suggestionCardsList.nativeElement.style.visibility = 'hidden';
-            setTimeout(function () { return _this.suggestionCardsList.nativeElement.style.visibility = ''; }, 10);
         };
         DrChatSuggestionsComponent.prototype.filterValues = function () {
             var hiddenValues = this.hiddenValues;
@@ -6521,29 +6521,37 @@
                 var item = nonHiddenValues.splice(randomIndex, 1)[0];
                 this.visibleValues.push(item);
             }
+            this.cdr.markForCheck();
         };
         DrChatSuggestionsComponent.prototype.clearHidden = function () {
             localStorage.setItem('aiChatSuggestions', null);
             this.filterValues();
         };
+        DrChatSuggestionsComponent.prototype.toggleSuggestedMenu = function () {
+            this.isSuggestedMenuOpen = !this.isSuggestedMenuOpen;
+            if (this.isSuggestedMenuOpen) {
+                this.fillVisibleValues();
+            }
+        };
         return DrChatSuggestionsComponent;
     }());
     DrChatSuggestionsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-chat-suggestions',
-                    template: "<div class=\"chat-suggestions\">\n    <ng-container *ngIf=\"buttonMode; else suggestionCards\">\n        <div class=\"chat-suggestions__container\" (mouseenter)=\"fillVisibleValues()\">\n            <dr-button theme=\"ghost\" class=\"chat-suggestions__container__button\">\n                Suggested chats\n            </dr-button>\n            <ng-container *ngTemplateOutlet=\"suggestionCards\"></ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #suggestionCards>\n    <div class=\"chat-suggestions__items\" #suggestionCardsList>\n        <div class=\"chat-suggestions__items__background\"></div>\n        <div *ngFor=\"let item of visibleValues\"\n             class=\"chat-suggestions__items__item\" (click)=\"onItemClick(item)\">\n            {{ item }}\n        </div>\n    </div>\n</ng-template>\n",
+                    template: "<div class=\"chat-suggestions\">\n    <ng-container *ngIf=\"buttonMode; else suggestionCards\">\n        <div class=\"chat-suggestions__container\"\n             [class.chat-suggestions__container--opened]=\"isSuggestedMenuOpen\"\n             *ngIf=\"visibleValues.length\">\n            <dr-button theme=\"ghost\" class=\"chat-suggestions__container__button\" (click)=\"toggleSuggestedMenu()\">\n                Suggested chats\n            </dr-button>\n            <ng-container *ngTemplateOutlet=\"suggestionCards\"></ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #suggestionCards>\n    <div class=\"chat-suggestions__items\">\n        <div class=\"chat-suggestions__items__background\"></div>\n        <div *ngFor=\"let item of visibleValues\"\n             class=\"chat-suggestions__items__item\" (click)=\"onItemClick(item)\">\n            {{ item }}\n        </div>\n    </div>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;align-items:flex-start;justify-content:center}:host .chat-suggestions{display:flex;width:100%;max-width:970px}:host .chat-suggestions__container{display:flex;position:relative;width:auto;margin-top:12px;padding:0 24px}:host .chat-suggestions__container:hover{width:100%}:host .chat-suggestions__container:hover .chat-suggestions__container__button::ng-deep button{color:#4646ce;background:#f2f2fb}:host .chat-suggestions__container:hover .chat-suggestions__items,:host .chat-suggestions__container:hover .chat-suggestions__items__background{display:flex}:host .chat-suggestions__container__button::ng-deep button{background:#F2F2FF!important;border-radius:4px}:host .chat-suggestions__container .chat-suggestions__items{display:none;position:absolute;width:100%;bottom:0;left:0;padding-bottom:32px;z-index:2}:host .chat-suggestions__items{display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;padding:0 24px}:host .chat-suggestions__items__background{display:none;position:absolute;top:-32px;right:0;bottom:32px;left:0;background:white;opacity:.7;z-index:-1}:host .chat-suggestions__items__item{margin:0 0 20px;display:inline-flex;height:76px;width:275px;padding:16px;border-radius:8px;background:#F2F2FF;box-shadow:0 1px 2px #00000026;font-size:14px;line-height:24px;color:#25258c}:host .chat-suggestions__items__item:hover{cursor:pointer;background:#EAEAFF}\n"]
+                    styles: [":host{display:flex;align-items:flex-start;justify-content:center}:host .chat-suggestions{display:flex;width:100%;max-width:970px}:host .chat-suggestions__container{display:flex;position:relative;width:auto;margin-top:12px;padding:0 24px}:host .chat-suggestions__container__button{z-index:3}:host .chat-suggestions__container__button::ng-deep button{background:#F2F2FB!important;border-radius:4px;cursor:pointer}:host .chat-suggestions__container .chat-suggestions__items{display:none;position:absolute;width:100%;bottom:0;left:0;padding-bottom:32px;z-index:2}:host .chat-suggestions__container--opened{width:100%}:host .chat-suggestions__container--opened .chat-suggestions__container__button::ng-deep button{color:#4646ce;background:#F2F2FB}:host .chat-suggestions__container--opened .chat-suggestions__items,:host .chat-suggestions__container--opened .chat-suggestions__items__background{display:flex}:host .chat-suggestions__items{display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;padding:0 24px}:host .chat-suggestions__items__background{display:none;position:absolute;top:-32px;right:0;bottom:32px;left:0;background:#FFFFFF;opacity:.7;z-index:-1}:host .chat-suggestions__items__item{margin:0 0 20px;display:inline-flex;height:76px;width:275px;padding:16px;border-radius:8px;background:#F2F2FB;box-shadow:0 1px 2px #00000026;font-size:14px;line-height:24px;color:#25258c}:host .chat-suggestions__items__item:hover{cursor:pointer;background:#EAEAFF}\n"]
                 },] }
     ];
-    DrChatSuggestionsComponent.ctorParameters = function () { return []; };
+    DrChatSuggestionsComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     DrChatSuggestionsComponent.propDecorators = {
         values: [{ type: i0.Input }],
         fullScreen: [{ type: i0.Input }],
         buttonMode: [{ type: i0.Input }],
         waitForReply: [{ type: i0.Input }],
-        suggestionSelect: [{ type: i0.Output }],
-        suggestionCardsList: [{ type: i0.ViewChild, args: ['suggestionCardsList',] }]
+        suggestionSelect: [{ type: i0.Output }]
     };
 
     var DrChatComponent = /** @class */ (function () {