@datarailsshared/datarailsshared 1.6.75 → 1.6.79

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -1103,7 +1103,7 @@ function DrInputComponent_button_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", ctx_r5._buttonOptions.text, "\n");
 } }
 const _c3$7 = [[["", "prefixIcon", ""]], [["", "suffixIcon", ""]]];
-const _c4$5 = ["[prefixIcon]", "[suffixIcon]"];
+const _c4$4 = ["[prefixIcon]", "[suffixIcon]"];
 class DrInputComponent {
     set disabled(value) {
         this.setDisabledState(value);
@@ -1286,7 +1286,7 @@ class DrInputComponent {
                     useExisting: forwardRef((() => DrInputComponent)),
                     multi: true,
                 },
-            ])], ngContentSelectors: _c4$5, decls: 8, vars: 5, consts: [[4, "ngIf", "ngIfElse"], ["maskedInput", ""], ["class", "clear-icon", 3, "click", 4, "ngIf"], ["class", "search-icon", 3, "click", 4, "ngIf"], [3, "click", 4, "ngIf"], [3, "ngModel", "disabled", "readonly", "type", "placeholder", "name", "min", "max", "minlength", "maxlength", "step", "ngModelChange", "ngModelDebounceChange", "blur", "focus"], ["inputRef", ""], [3, "ngModel", "disabled", "readonly", "type", "placeholder", "name", "min", "max", "minlength", "maxlength", "mask", "suffix", "prefix", "step", "ngModelChange", "ngModelDebounceChange", "blur", "focus"], [1, "clear-icon", 3, "click"], [1, "search-icon", 3, "click"], [3, "click"]], template: function DrInputComponent_Template(rf, ctx) { if (rf & 1) {
+            ])], ngContentSelectors: _c4$4, decls: 8, vars: 5, consts: [[4, "ngIf", "ngIfElse"], ["maskedInput", ""], ["class", "clear-icon", 3, "click", 4, "ngIf"], ["class", "search-icon", 3, "click", 4, "ngIf"], [3, "click", 4, "ngIf"], [3, "ngModel", "disabled", "readonly", "type", "placeholder", "name", "min", "max", "minlength", "maxlength", "step", "ngModelChange", "ngModelDebounceChange", "blur", "focus"], ["inputRef", ""], [3, "ngModel", "disabled", "readonly", "type", "placeholder", "name", "min", "max", "minlength", "maxlength", "mask", "suffix", "prefix", "step", "ngModelChange", "ngModelDebounceChange", "blur", "focus"], [1, "clear-icon", 3, "click"], [1, "search-icon", 3, "click"], [3, "click"]], template: function DrInputComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c3$7);
             i0.ɵɵprojection(0);
             i0.ɵɵtemplate(1, DrInputComponent_ng_container_1_Template, 3, 11, "ng-container", 0);
@@ -1387,14 +1387,14 @@ const _c0$F = ["labelTemplate"];
 const _c1$i = ["multiLabelTemplate"];
 const _c2$8 = ["optionTemplate"];
 const _c3$6 = ["optionHeaderTemplate"];
-const _c4$4 = ["optionFooterTemplate"];
-const _c5 = function (a0) { return { item: a0 }; };
+const _c4$3 = ["optionFooterTemplate"];
+const _c5$1 = function (a0) { return { item: a0 }; };
 function DrSelectComponent_2_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 6);
 } if (rf & 2) {
     const item_r12 = ctx.item;
     const ctx_r11 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r11.optionHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5, item_r12));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r11.optionHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5$1, item_r12));
 } }
 function DrSelectComponent_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_2_ng_template_0_Template, 1, 4, "ng-template", 5);
@@ -1417,7 +1417,7 @@ function DrSelectComponent_4_ng_template_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const item_r18 = ctx.item;
     const ctx_r17 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r17.labelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5, item_r18));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r17.labelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5$1, item_r18));
 } }
 function DrSelectComponent_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_4_ng_template_0_Template, 1, 4, "ng-template", 8);
@@ -1624,7 +1624,7 @@ class DrSelectComponent {
             i0.ɵɵcontentQuery(dirIndex, _c1$i, 5);
             i0.ɵɵcontentQuery(dirIndex, _c2$8, 5);
             i0.ɵɵcontentQuery(dirIndex, _c3$6, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c4$4, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c4$3, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.labelTemplate = _t.first);
@@ -5842,6 +5842,7 @@ class ChatMessage {
         this.user = obj?.user;
         this.files = obj?.files;
         this.suggestions = obj?.suggestions;
+        this.cards = obj?.cards;
     }
 }
 
@@ -6829,8 +6830,9 @@ class DrChatSuggestionsComponent {
         }] }); })();
 
 const _c0$p = ["drChatHeader"];
-const _c1$b = ["drChatContent"];
-const _c2$5 = ["messagesContainer"];
+const _c1$b = ["drChatLoader"];
+const _c2$5 = ["drChatContent"];
+const _c3$4 = ["messagesContainer"];
 function DrChatComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 8);
 } if (rf & 2) {
@@ -6852,10 +6854,17 @@ function DrChatComponent_div_6_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     const ctx_r5 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r5.chatContent);
 } }
+function DrChatComponent_div_6_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 8);
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r6.chatLoader);
+} }
 function DrChatComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11)(1, "div", 12, 13);
     i0.ɵɵprojection(3, 3);
     i0.ɵɵtemplate(4, DrChatComponent_div_6_ng_container_4_Template, 1, 1, "ng-container", 2);
+    i0.ɵɵtemplate(5, DrChatComponent_div_6_ng_container_5_Template, 1, 1, "ng-container", 2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -6863,19 +6872,21 @@ function DrChatComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("chat__messages__container--scroll", ctx_r2.messagesContainerWithScroll);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r2.chatContent);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r2.chatLoader);
 } }
 function DrChatComponent_dr_chat_suggestions_7_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
+    const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "dr-chat-suggestions", 14);
-    i0.ɵɵlistener("suggestionSelect", function DrChatComponent_dr_chat_suggestions_7_Template_dr_chat_suggestions_suggestionSelect_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.suggestionSelect.emit($event)); });
+    i0.ɵɵlistener("suggestionSelect", function DrChatComponent_dr_chat_suggestions_7_Template_dr_chat_suggestions_suggestionSelect_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.suggestionSelect.emit($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("chat__suggestions--full-height", ctx_r3.fullScreen && !(ctx_r3.messages == null ? null : ctx_r3.messages.length));
     i0.ɵɵproperty("values", ctx_r3.suggestions)("fullScreen", ctx_r3.fullScreen)("waitForReply", ctx_r3.waitForReply)("buttonMode", !!(ctx_r3.messages == null ? null : ctx_r3.messages.length));
 } }
-const _c3$4 = [[["dr-chat-alert"]], [["dr-chat-form"]], [["dr-ai-search-input"]], [["dr-chat-message"]]];
-const _c4$3 = ["dr-chat-alert", "dr-chat-form", "dr-ai-search-input", "dr-chat-message"];
+const _c4$2 = [[["dr-chat-alert"]], [["dr-chat-form"]], [["dr-ai-search-input"]], [["dr-chat-message"]]];
+const _c5 = ["dr-chat-alert", "dr-chat-form", "dr-ai-search-input", "dr-chat-message"];
 class DrChatComponent {
     set contentUpdateSubject(value) {
         if (value) {
@@ -6957,29 +6968,31 @@ class DrChatComponent {
             i0.ɵɵcontentQuery(dirIndex, DrChatFormComponent, 5);
             i0.ɵɵcontentQuery(dirIndex, _c0$p, 5);
             i0.ɵɵcontentQuery(dirIndex, _c1$b, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c2$5, 5);
             i0.ɵɵcontentQuery(dirIndex, DrChatMessageComponent, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chatForm = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chatHeader = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chatLoader = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chatContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messages = _t);
         } }, viewQuery: function DrChatComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c2$5, 5);
+            i0.ɵɵviewQuery(_c3$4, 5);
             i0.ɵɵviewQuery(DrChatSuggestionsComponent, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messagesContainer = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._chatSuggestions = _t.first);
-        } }, inputs: { fullScreen: "fullScreen", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply", scrollDelay: "scrollDelay" }, outputs: { suggestionSelect: "suggestionSelect" }, features: [i0.ɵɵProvidersFeature([DrChatCustomMessageService])], ngContentSelectors: _c4$3, decls: 11, vars: 6, consts: [[1, "chat"], [1, "chat__sticky-top"], [3, "ngTemplateOutlet", 4, "ngIf"], [1, "chat__alert"], ["class", "chat__empty-state", 4, "ngIf"], ["class", "chat__messages", 4, "ngIf"], ["class", "chat__suggestions", 3, "values", "fullScreen", "waitForReply", "chat__suggestions--full-height", "buttonMode", "suggestionSelect", 4, "ngIf"], [1, "form"], [3, "ngTemplateOutlet"], [1, "chat__empty-state"], [1, "chat__empty-state__text"], [1, "chat__messages"], [1, "chat__messages__container"], ["messagesContainer", ""], [1, "chat__suggestions", 3, "values", "fullScreen", "waitForReply", "buttonMode", "suggestionSelect"]], template: function DrChatComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c3$4);
+        } }, inputs: { fullScreen: "fullScreen", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply", scrollDelay: "scrollDelay" }, outputs: { suggestionSelect: "suggestionSelect" }, features: [i0.ɵɵProvidersFeature([DrChatCustomMessageService])], ngContentSelectors: _c5, decls: 11, vars: 6, consts: [[1, "chat"], [1, "chat__sticky-top"], [3, "ngTemplateOutlet", 4, "ngIf"], [1, "chat__alert"], ["class", "chat__empty-state", 4, "ngIf"], ["class", "chat__messages", 4, "ngIf"], ["class", "chat__suggestions", 3, "values", "fullScreen", "waitForReply", "chat__suggestions--full-height", "buttonMode", "suggestionSelect", 4, "ngIf"], [1, "form"], [3, "ngTemplateOutlet"], [1, "chat__empty-state"], [1, "chat__empty-state__text"], [1, "chat__messages"], [1, "chat__messages__container"], ["messagesContainer", ""], [1, "chat__suggestions", 3, "values", "fullScreen", "waitForReply", "buttonMode", "suggestionSelect"]], template: function DrChatComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c4$2);
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵtemplate(2, DrChatComponent_ng_container_2_Template, 1, 1, "ng-container", 2);
             i0.ɵɵelementStart(3, "div", 3);
             i0.ɵɵprojection(4);
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(5, DrChatComponent_div_5_Template, 3, 1, "div", 4);
-            i0.ɵɵtemplate(6, DrChatComponent_div_6_Template, 5, 3, "div", 5);
+            i0.ɵɵtemplate(6, DrChatComponent_div_6_Template, 6, 4, "div", 5);
             i0.ɵɵtemplate(7, DrChatComponent_dr_chat_suggestions_7_Template, 1, 6, "dr-chat-suggestions", 6);
             i0.ɵɵelementStart(8, "div", 7);
             i0.ɵɵprojection(9, 1);
@@ -6999,7 +7012,7 @@ class DrChatComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatComponent, [{
         type: Component,
-        args: [{ selector: 'dr-chat', providers: [DrChatCustomMessageService], template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__sticky-top\">\n        <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n        <div class=\"chat__alert\">\n            <ng-content select=\"dr-chat-alert\"></ng-content>\n        </div>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div\n            #messagesContainer\n            class=\"chat__messages__container\"\n            [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n            <ng-container *ngIf=\"chatContent\" [ngTemplateOutlet]=\"chatContent\"></ng-container>\n        </div>\n    </div>\n\n    <dr-chat-suggestions\n        *ngIf=\"suggestions?.length\"\n        [values]=\"suggestions\"\n        [fullScreen]=\"fullScreen\"\n        [waitForReply]=\"waitForReply\"\n        class=\"chat__suggestions\"\n        [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n        [buttonMode]=\"!!messages?.length\"\n        (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n        <ng-content select=\"dr-ai-search-input\"></ng-content>\n    </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px;box-shadow:0 2px 36px #00000026}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:44px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:400;line-height:28px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:8px}.chat__suggestions{flex:1}.chat__suggestions ::ng-deep .chat-suggestions__container{padding:0}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:32px;padding-right:32px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:912px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{font-size:16px}\n"] }]
+        args: [{ selector: 'dr-chat', providers: [DrChatCustomMessageService], template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__sticky-top\">\n        <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n        <div class=\"chat__alert\">\n            <ng-content select=\"dr-chat-alert\"></ng-content>\n        </div>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div\n            #messagesContainer\n            class=\"chat__messages__container\"\n            [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n            <ng-container *ngIf=\"chatContent\" [ngTemplateOutlet]=\"chatContent\"></ng-container>\n            <ng-container *ngIf=\"chatLoader\" [ngTemplateOutlet]=\"chatLoader\"></ng-container>\n        </div>\n    </div>\n\n    <dr-chat-suggestions\n        *ngIf=\"suggestions?.length\"\n        [values]=\"suggestions\"\n        [fullScreen]=\"fullScreen\"\n        [waitForReply]=\"waitForReply\"\n        class=\"chat__suggestions\"\n        [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n        [buttonMode]=\"!!messages?.length\"\n        (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n        <ng-content select=\"dr-ai-search-input\"></ng-content>\n    </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px;box-shadow:0 2px 36px #00000026}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:44px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:400;line-height:28px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:8px}.chat__suggestions{flex:1}.chat__suggestions ::ng-deep .chat-suggestions__container{padding:0}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:32px;padding-right:32px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:912px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{font-size:16px}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { fullScreen: [{
             type: Input
         }], noMessagesPlaceholder: [{
@@ -7028,6 +7041,9 @@ class DrChatComponent {
         }], chatHeader: [{
             type: ContentChild,
             args: ['drChatHeader']
+        }], chatLoader: [{
+            type: ContentChild,
+            args: ['drChatLoader']
         }], chatContent: [{
             type: ContentChild,
             args: ['drChatContent']
@@ -7067,7 +7083,7 @@ function DrChatFormDropdownComponent_dr_dot_flashing_15_Template(rf, ctx) { if (
 } }
 const _c2$4 = function (a0) { return { "message-row_loading": a0 }; };
 const _c3$3 = function (a0, a1) { return { "message-row__input--focused": a0, "message-row__input--filled": a1 }; };
-const _c4$2 = ["*"];
+const _c4$1 = ["*"];
 class DrChatFormDropdownComponent {
     constructor(cdr, domSanitizer) {
         this.cdr = cdr;
@@ -7235,7 +7251,7 @@ class DrChatFormDropdownComponent {
             i0.ɵɵlistener("drop", function DrChatFormDropdownComponent_drop_HostBindingHandler($event) { return ctx.onDrop($event); })("dragover", function DrChatFormDropdownComponent_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function DrChatFormDropdownComponent_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); });
         } if (rf & 2) {
             i0.ɵɵclassProp("file-over", ctx.fileOver);
-        } }, inputs: { isUploadingFiles: "isUploadingFiles", message: "message", messagePlaceholder: "messagePlaceholder", dropFiles: "dropFiles", dropFilePlaceholder: "dropFilePlaceholder", waitForReply: "waitForReply", showDotFlashing: "showDotFlashing" }, outputs: { send: "send", uploadFiles: "uploadFiles", abort: "abort", inputChange: "inputChange" }, ngContentSelectors: _c4$2, decls: 16, vars: 20, consts: [[1, "message-row", 3, "ngClass"], [1, "message-row__input", 3, "ngClass"], [3, "files", "isRemovable", "maxLengthText", "removeFileEvent", 4, "ngIf"], [1, "message-row__input-textarea-wrap"], ["type", "text", 3, "ngModel", "rows", "placeholder", "focus", "blur", "mouseenter", "mouseleave", "ngModelChange", "keydown.enter"], ["textAreaElement", ""], [1, "message-row__btns"], ["type", "file", "hidden", "", "multiple", "", 3, "change"], ["fileInput", ""], ["class", "dr-icon-send-arrow-up send-button", 3, "click", 4, "ngIf"], ["class", "dr-icon-stop abort-button", 3, "click", 4, "ngIf"], ["class", "wait-reply-dot-flashing", 4, "ngIf"], [3, "files", "isRemovable", "maxLengthText", "removeFileEvent"], [1, "dr-icon-send-arrow-up", "send-button", 3, "click"], [1, "dr-icon-stop", "abort-button", 3, "click"], [1, "wait-reply-dot-flashing"]], template: function DrChatFormDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { isUploadingFiles: "isUploadingFiles", message: "message", messagePlaceholder: "messagePlaceholder", dropFiles: "dropFiles", dropFilePlaceholder: "dropFilePlaceholder", waitForReply: "waitForReply", showDotFlashing: "showDotFlashing" }, outputs: { send: "send", uploadFiles: "uploadFiles", abort: "abort", inputChange: "inputChange" }, ngContentSelectors: _c4$1, decls: 16, vars: 20, consts: [[1, "message-row", 3, "ngClass"], [1, "message-row__input", 3, "ngClass"], [3, "files", "isRemovable", "maxLengthText", "removeFileEvent", 4, "ngIf"], [1, "message-row__input-textarea-wrap"], ["type", "text", 3, "ngModel", "rows", "placeholder", "focus", "blur", "mouseenter", "mouseleave", "ngModelChange", "keydown.enter"], ["textAreaElement", ""], [1, "message-row__btns"], ["type", "file", "hidden", "", "multiple", "", 3, "change"], ["fileInput", ""], ["class", "dr-icon-send-arrow-up send-button", 3, "click", 4, "ngIf"], ["class", "dr-icon-stop abort-button", 3, "click", 4, "ngIf"], ["class", "wait-reply-dot-flashing", 4, "ngIf"], [3, "files", "isRemovable", "maxLengthText", "removeFileEvent"], [1, "dr-icon-send-arrow-up", "send-button", 3, "click"], [1, "dr-icon-stop", "abort-button", 3, "click"], [1, "wait-reply-dot-flashing"]], template: function DrChatFormDropdownComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵpipe(2, "async");
@@ -9459,7 +9475,7 @@ function DrDropdownComponent_dr_dropdown_item_4_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵproperty("ngIf", act_r2.templateRef);
 } }
 const _c3$2 = [[["dr-dropdown-item"]]];
-const _c4$1 = ["dr-dropdown-item"];
+const _c4 = ["dr-dropdown-item"];
 class DrDropdownComponent {
     set options(data) {
         if (data) {
@@ -9579,7 +9595,7 @@ class DrDropdownComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuContainer = _t.first);
-        } }, inputs: { options: "options" }, outputs: { onAction: "action" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4$1, decls: 6, vars: 5, consts: [[1, "dr-dropdown"], ["menuContainer", ""], ["tabindex", "-1", "role", "listbox", 1, "dr-dropdown__container", 3, "mouseenter", "mouseleave"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown", 4, "ngFor", "ngForOf"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown"], ["dropdownItemContent", "", 4, "ngIf"], ["dropdownItemActions", "", 4, "ngIf"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["dropdownItemContent", ""], ["class", "dr-dropdown__icon", 3, "class", 4, "ngIf"], [1, "dr-dropdown__text"], [1, "dr-dropdown__icon"], ["dropdownItemActions", ""], [3, "class", "showOnHover", "mousedown", 4, "ngFor", "ngForOf"], ["class", "dr-icon-arrow-right", 4, "ngIf"], [3, "mousedown"], [1, "dr-icon-arrow-right"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function DrDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { options: "options" }, outputs: { onAction: "action" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c4, decls: 6, vars: 5, consts: [[1, "dr-dropdown"], ["menuContainer", ""], ["tabindex", "-1", "role", "listbox", 1, "dr-dropdown__container", 3, "mouseenter", "mouseleave"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown", 4, "ngFor", "ngForOf"], ["drDropdownChild", "", "role", "option", "tabindex", "0", 3, "drTooltip", "drTooltipPosition", "drTooltipOptions", "drTooltipClass", "drDropdown", "drDropdownClass", "drDropdownInHover", "drDropdownPosition", "disabled", "selected", "divider", "mousedown"], ["dropdownItemContent", "", 4, "ngIf"], ["dropdownItemActions", "", 4, "ngIf"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["dropdownItemContent", ""], ["class", "dr-dropdown__icon", 3, "class", 4, "ngIf"], [1, "dr-dropdown__text"], [1, "dr-dropdown__icon"], ["dropdownItemActions", ""], [3, "class", "showOnHover", "mousedown", 4, "ngFor", "ngForOf"], ["class", "dr-icon-arrow-right", 4, "ngIf"], [3, "mousedown"], [1, "dr-icon-arrow-right"], ["dropdownItemContent", "", 3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function DrDropdownComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c3$2);
             i0.ɵɵelementStart(0, "div", 0, 1)(2, "div", 2);
             i0.ɵɵlistener("mouseenter", function DrDropdownComponent_Template_div_mouseenter_2_listener() { return ctx.onMouseenter(); })("mouseleave", function DrDropdownComponent_Template_div_mouseleave_2_listener() { return ctx.onMouseleave(); });
@@ -13646,9 +13662,8 @@ function DrGalleryComponent_dr_button_0_Template(rf, ctx) { if (rf & 1) {
 function DrGalleryComponent_div_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-const _c2 = function (a0) { return { "dr-gallery-item_active": a0 }; };
-const _c3 = function () { return {}; };
-const _c4 = function (a0) { return { $implicit: a0 }; };
+const _c2 = function () { return {}; };
+const _c3 = function (a0) { return { $implicit: a0 }; };
 function DrGalleryComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6, 7);
     i0.ɵɵtemplate(2, DrGalleryComponent_div_4_ng_container_2_Template, 1, 0, "ng-container", 8);
@@ -13658,9 +13673,10 @@ function DrGalleryComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     const i_r7 = ctx.index;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("transition", ctx_r2.transition);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c2, ctx_r2.centerIndex === i_r7))("ngStyle", ctx_r2.modeType === "loop" ? ctx_r2.getStyle() : i0.ɵɵpureFunction0(8, _c3));
+    i0.ɵɵclassProp("dr-gallery-item_active", ctx_r2.centerIndex === i_r7)("dr-gallery-item_fadein", ctx_r2.fadeIn && ctx_r2.centerIndex === i_r7 + 1);
+    i0.ɵɵproperty("ngStyle", ctx_r2.modeType === "loop" ? ctx_r2.getStyle() : i0.ɵɵpureFunction0(9, _c2));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.template)("ngTemplateOutletContext", i0.ɵɵpureFunction1(9, _c4, item_r6));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.template)("ngTemplateOutletContext", i0.ɵɵpureFunction1(10, _c3, item_r6));
 } }
 function DrGalleryComponent_dr_button_5_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
@@ -13701,6 +13717,9 @@ class DrGalleryComponent {
         this.noTransition = '0ms';
         this.modeType = 'loop';
         this.isOutsideBtns = false;
+        this.fadeIn = false;
+        this.autoPlay = false;
+        this.autoplayInterval = 5000; //5 seconds
         this.activeIndex = 0;
         this.carouselItems = [];
         this.transform = 'translateX(0%)';
@@ -13713,8 +13732,14 @@ class DrGalleryComponent {
         setTimeout(() => {
             this.calculateItemOffsets();
             this.updateTransform();
+            if (this.autoPlay) {
+                this.startAutoplay();
+            }
         });
     }
+    ngOnDestroy() {
+        this.clearAutoplay();
+    }
     initializeCarousel() {
         if (this.modeType === 'loop') {
             this.carouselItems = [
@@ -13783,11 +13808,18 @@ class DrGalleryComponent {
                 this.activeIndex++;
                 this.updateTransform();
             }
+            else {
+                this.activeIndex = 0;
+                this.updateTransform();
+            }
         }
     }
     navigate(index) {
         this.activeIndex = index;
         this.updateTransform();
+        if (this.autoPlay) {
+            this.startAutoplay();
+        }
     }
     get canGoPrev() {
         if (this.modeType === 'loop')
@@ -13824,6 +13856,18 @@ class DrGalleryComponent {
             this.transition = this.defaultTransition;
         this.cdr.markForCheck();
     }
+    startAutoplay() {
+        this.clearAutoplay();
+        this.autoplayTimer = setInterval(() => {
+            this.next();
+        }, this.autoplayInterval);
+    }
+    clearAutoplay() {
+        if (this.autoplayTimer) {
+            clearInterval(this.autoplayTimer);
+            this.autoplayTimer = null;
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = function DrGalleryComponent_Factory(t) { return new (t || DrGalleryComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrGalleryComponent, selectors: [["dr-gallery"]], contentQueries: function DrGalleryComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, TemplateRef, 5);
@@ -13837,27 +13881,28 @@ class DrGalleryComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemElements = _t);
-        } }, inputs: { modeType: "modeType", isOutsideBtns: "isOutsideBtns", items: "items", itemsCount: "itemsCount" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 6, vars: 10, consts: [["class", "dr-gallery-btn dr-gallery-btn_left", "theme", "icon", 3, "icon", "click", 4, "ngIf"], ["carouselContainer", ""], [1, "dr-gallery-items"], ["class", "dr-gallery-item", 3, "transition", "ngClass", "ngStyle", 4, "ngFor", "ngForOf"], ["class", "dr-gallery-btn dr-gallery-btn_right", "theme", "icon", 3, "iconSize", "icon", "click", 4, "ngIf"], ["theme", "icon", 1, "dr-gallery-btn", "dr-gallery-btn_left", 3, "icon", "click"], [1, "dr-gallery-item", 3, "ngClass", "ngStyle"], ["carouselItem", ""], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["theme", "icon", 1, "dr-gallery-btn", "dr-gallery-btn_right", 3, "iconSize", "icon", "click"]], template: function DrGalleryComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { modeType: "modeType", isOutsideBtns: "isOutsideBtns", fadeIn: "fadeIn", autoPlay: "autoPlay", autoplayInterval: "autoplayInterval", items: "items", itemsCount: "itemsCount" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 6, vars: 12, consts: [["class", "dr-gallery-btn dr-gallery-btn_left", "theme", "icon", 3, "icon", "click", 4, "ngIf"], ["carouselContainer", ""], [1, "dr-gallery-items"], ["class", "dr-gallery-item", 3, "transition", "dr-gallery-item_active", "dr-gallery-item_fadein", "ngStyle", 4, "ngFor", "ngForOf"], ["class", "dr-gallery-btn dr-gallery-btn_right", "theme", "icon", 3, "iconSize", "icon", "click", 4, "ngIf"], ["theme", "icon", 1, "dr-gallery-btn", "dr-gallery-btn_left", 3, "icon", "click"], [1, "dr-gallery-item", 3, "ngStyle"], ["carouselItem", ""], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["theme", "icon", 1, "dr-gallery-btn", "dr-gallery-btn_right", 3, "iconSize", "icon", "click"]], template: function DrGalleryComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, DrGalleryComponent_dr_button_0_Template, 1, 1, "dr-button", 0);
             i0.ɵɵelementStart(1, "div", null, 1)(3, "div", 2);
-            i0.ɵɵtemplate(4, DrGalleryComponent_div_4_Template, 3, 11, "div", 3);
+            i0.ɵɵtemplate(4, DrGalleryComponent_div_4_Template, 3, 12, "div", 3);
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(5, DrGalleryComponent_dr_button_5_Template, 1, 2, "dr-button", 4);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", !ctx.isOutsideBtns);
             i0.ɵɵadvance(1);
             i0.ɵɵclassMapInterpolate1("dr-gallery-caroousel dr-gallery-caroousel_", ctx.modeType, "");
+            i0.ɵɵclassProp("dr-gallery-caroousel_fadein", ctx.fadeIn);
             i0.ɵɵadvance(2);
             i0.ɵɵstyleProp("transition", ctx.transition)("transform", ctx.transform);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", ctx.carouselItems);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", !ctx.isOutsideBtns);
-        } }, dependencies: [CommonModule, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, DrInputsModule, DrButtonComponent], styles: [".dr-gallery-caroousel[_ngcontent-%COMP%]{display:block;position:relative;overflow:hidden}.dr-gallery-items[_ngcontent-%COMP%]{display:flex;position:relative;align-items:flex-end;will-change:transform}.dr-gallery-item[_ngcontent-%COMP%]{box-sizing:border-box;position:relative;padding:42px 24px;margin-top:-8px;flex-grow:1}.dr-gallery-btn[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);z-index:9999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;box-shadow:0 4px 4px #00000040}.dr-gallery-btn[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{width:40px!important;height:40px!important}.dr-gallery-btn[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{border-radius:50%}.dr-gallery-btn_left[_ngcontent-%COMP%]{left:0}.dr-gallery-btn_right[_ngcontent-%COMP%]{right:0}.dr-gallery-caroousel_loop[_ngcontent-%COMP%]   .dr-gallery-item[_ngcontent-%COMP%]{width:100%;min-height:240px}.dr-gallery-caroousel_loop[_ngcontent-%COMP%]   .dr-gallery-item_active[_ngcontent-%COMP%]{transform:scale(1.2)}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, DrInputsModule, DrButtonComponent], styles: [".dr-gallery-caroousel[_ngcontent-%COMP%]{display:block;position:relative;overflow:hidden}.dr-gallery-caroousel.dr-gallery-caroousel_loop[_ngcontent-%COMP%]   .dr-gallery-item[_ngcontent-%COMP%]{width:100%;min-height:240px}.dr-gallery-caroousel.dr-gallery-caroousel_loop[_ngcontent-%COMP%]   .dr-gallery-item_active[_ngcontent-%COMP%]{transform:scale(1.2)}.dr-gallery-caroousel.dr-gallery-caroousel_fadein[_ngcontent-%COMP%]   .dr-gallery-item[_ngcontent-%COMP%]{opacity:0}.dr-gallery-items[_ngcontent-%COMP%]{display:flex;position:relative;align-items:flex-end;will-change:transform}.dr-gallery-item[_ngcontent-%COMP%]{box-sizing:border-box;position:relative;flex-grow:1;padding:42px 24px;margin-top:-8px}.dr-gallery-item_fadein[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_fadeIn .3s ease-in .25s forwards}.dr-gallery-btn[_ngcontent-%COMP%]{position:absolute;top:50%;transform:translateY(-50%);z-index:9999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;box-shadow:0 4px 4px #00000040}.dr-gallery-btn[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{width:40px!important;height:40px!important}.dr-gallery-btn[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{border-radius:50%}.dr-gallery-btn_left[_ngcontent-%COMP%]{left:0}.dr-gallery-btn_right[_ngcontent-%COMP%]{right:0}@keyframes _ngcontent-%COMP%_fadeIn{0%{opacity:0}to{opacity:1}}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrGalleryComponent, [{
         type: Component,
-        args: [{ selector: 'dr-gallery', imports: [CommonModule, DrInputsModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<dr-button\n    *ngIf=\"!isOutsideBtns\"\n    class=\"dr-gallery-btn dr-gallery-btn_left\"\n    (click)=\"prev()\"\n    theme=\"icon\"\n    [icon]=\"'dr-icon-arrow-left'\">\n</dr-button>\n\n<div #carouselContainer class=\"dr-gallery-caroousel dr-gallery-caroousel_{{ modeType }}\">\n    <div class=\"dr-gallery-items\" [style.transition]=\"transition\" [style.transform]=\"transform\">\n        <div\n            #carouselItem\n            *ngFor=\"let item of carouselItems; let i = index\"\n            class=\"dr-gallery-item\"\n            [style.transition]=\"transition\"\n            [ngClass]=\"{ 'dr-gallery-item_active': centerIndex === i }\"\n            [ngStyle]=\"modeType === 'loop' ? getStyle() : {}\">\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: item }\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<dr-button\n    *ngIf=\"!isOutsideBtns\"\n    class=\"dr-gallery-btn dr-gallery-btn_right\"\n    (click)=\"next()\"\n    [iconSize]=\"'24px'\"\n    theme=\"icon\"\n    [icon]=\"'dr-icon-arrow-right'\">\n</dr-button>\n", styles: [".dr-gallery-caroousel{display:block;position:relative;overflow:hidden}.dr-gallery-items{display:flex;position:relative;align-items:flex-end;will-change:transform}.dr-gallery-item{box-sizing:border-box;position:relative;padding:42px 24px;margin-top:-8px;flex-grow:1}.dr-gallery-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:9999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;box-shadow:0 4px 4px #00000040}.dr-gallery-btn button{width:40px!important;height:40px!important}.dr-gallery-btn button:hover{border-radius:50%}.dr-gallery-btn_left{left:0}.dr-gallery-btn_right{right:0}.dr-gallery-caroousel_loop .dr-gallery-item{width:100%;min-height:240px}.dr-gallery-caroousel_loop .dr-gallery-item_active{transform:scale(1.2)}\n"] }]
+        args: [{ selector: 'dr-gallery', imports: [CommonModule, DrInputsModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<dr-button\n    *ngIf=\"!isOutsideBtns\"\n    class=\"dr-gallery-btn dr-gallery-btn_left\"\n    (click)=\"prev()\"\n    theme=\"icon\"\n    [icon]=\"'dr-icon-arrow-left'\">\n</dr-button>\n\n<div\n    #carouselContainer\n    class=\"dr-gallery-caroousel dr-gallery-caroousel_{{ modeType }}\"\n    [class.dr-gallery-caroousel_fadein]=\"fadeIn\">\n    <div class=\"dr-gallery-items\" [style.transition]=\"transition\" [style.transform]=\"transform\">\n        <div\n            #carouselItem\n            *ngFor=\"let item of carouselItems; let i = index\"\n            class=\"dr-gallery-item\"\n            [style.transition]=\"transition\"\n            [class.dr-gallery-item_active]=\"centerIndex === i\"\n            [class.dr-gallery-item_fadein]=\"fadeIn && centerIndex === i + 1\"\n            [ngStyle]=\"modeType === 'loop' ? getStyle() : {}\">\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: item }\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<dr-button\n    *ngIf=\"!isOutsideBtns\"\n    class=\"dr-gallery-btn dr-gallery-btn_right\"\n    (click)=\"next()\"\n    [iconSize]=\"'24px'\"\n    theme=\"icon\"\n    [icon]=\"'dr-icon-arrow-right'\">\n</dr-button>\n", styles: [".dr-gallery-caroousel{display:block;position:relative;overflow:hidden}.dr-gallery-caroousel.dr-gallery-caroousel_loop .dr-gallery-item{width:100%;min-height:240px}.dr-gallery-caroousel.dr-gallery-caroousel_loop .dr-gallery-item_active{transform:scale(1.2)}.dr-gallery-caroousel.dr-gallery-caroousel_fadein .dr-gallery-item{opacity:0}.dr-gallery-items{display:flex;position:relative;align-items:flex-end;will-change:transform}.dr-gallery-item{box-sizing:border-box;position:relative;flex-grow:1;padding:42px 24px;margin-top:-8px}.dr-gallery-item_fadein{animation:fadeIn .3s ease-in .25s forwards}.dr-gallery-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:9999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;box-shadow:0 4px 4px #00000040}.dr-gallery-btn button{width:40px!important;height:40px!important}.dr-gallery-btn button:hover{border-radius:50%}.dr-gallery-btn_left{left:0}.dr-gallery-btn_right{right:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { template: [{
             type: ContentChild,
             args: [TemplateRef]
@@ -13865,6 +13910,12 @@ class DrGalleryComponent {
             type: Input
         }], isOutsideBtns: [{
             type: Input
+        }], fadeIn: [{
+            type: Input
+        }], autoPlay: [{
+            type: Input
+        }], autoplayInterval: [{
+            type: Input
         }], items: [{
             type: Input
         }], itemsCount: [{