@datarailsshared/datarailsshared 1.6.73 → 1.6.75

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, Input, Injectable, inject, ChangeDetectorRef, DestroyRef, ChangeDetectionStrategy, HostBinding, TemplateRef, HostListener, Directive, forwardRef, ViewChild, ContentChild, Pipe, ComponentFactoryResolver, Injector, Inject, Optional, ViewEncapsulation, PLATFORM_ID, ContentChildren, ElementRef, Host, ViewContainerRef, NgModule, InjectionToken, SkipSelf } from '@angular/core';
+import { EventEmitter, Component, Output, Input, Injectable, inject, ChangeDetectorRef, DestroyRef, ChangeDetectionStrategy, HostBinding, TemplateRef, HostListener, Directive, forwardRef, ViewChild, ContentChild, Pipe, ComponentFactoryResolver, Injector, Inject, Optional, ViewEncapsulation, PLATFORM_ID, ContentChildren, ElementRef, Host, ViewContainerRef, NgModule, ViewChildren, InjectionToken, SkipSelf } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
@@ -11,8 +11,8 @@ import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormBuilder, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Observable, BehaviorSubject, distinctUntilChanged, Subject, startWith, takeUntil, noop as noop$3, combineLatest, from, merge as merge$1, fromEvent, filter as filter$1, switchMap as switchMap$1, map as map$2, observeOn, asyncScheduler, withLatestFrom, first as first$1, interval, throwError, finalize as finalize$1, tap as tap$1, defer } from 'rxjs';
 import * as _ from 'lodash';
-import { isNil, isObject, cloneDeep, find, indexOf, reduce, map as map$1, isNumber, merge, forEach, some, orderBy, filter as filter$2, includes, pull, concat, isString, isBoolean, takeRight, take } from 'lodash';
-import { skip, debounceTime, filter, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, startWith as startWith$1, map, tap, shareReplay, switchMap, first, catchError, finalize, take as take$1 } from 'rxjs/operators';
+import { isNil, isObject, cloneDeep, find, indexOf, reduce, map as map$1, isNumber, merge, forEach, some, orderBy, filter as filter$2, includes, pull, concat, isString, isBoolean } from 'lodash';
+import { skip, debounceTime, filter, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, startWith as startWith$1, map, tap, shareReplay, switchMap, first, catchError, finalize, take } from 'rxjs/operators';
 import * as i5 from '@angular/material/datepicker';
 import { MatCalendar, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatDatepickerModule } from '@angular/material/datepicker';
 import { transition, style, animate, trigger, state } from '@angular/animations';
@@ -1057,7 +1057,7 @@ class DrModelDebounceChangeDirective {
 
 const _c0$G = ["prefix"];
 const _c1$j = ["suffix"];
-const _c2$8 = ["inputRef"];
+const _c2$9 = ["inputRef"];
 function DrInputComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
@@ -1102,8 +1102,8 @@ function DrInputComponent_button_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", ctx_r5._buttonOptions.text, "\n");
 } }
-const _c3$6 = [[["", "prefixIcon", ""]], [["", "suffixIcon", ""]]];
-const _c4$4 = ["[prefixIcon]", "[suffixIcon]"];
+const _c3$7 = [[["", "prefixIcon", ""]], [["", "suffixIcon", ""]]];
+const _c4$5 = ["[prefixIcon]", "[suffixIcon]"];
 class DrInputComponent {
     set disabled(value) {
         this.setDisabledState(value);
@@ -1272,7 +1272,7 @@ class DrInputComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.prefixIcon = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.suffixIcon = _t.first);
         } }, viewQuery: function DrInputComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c2$8, 5);
+            i0.ɵɵviewQuery(_c2$9, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
@@ -1286,8 +1286,8 @@ class DrInputComponent {
                     useExisting: forwardRef((() => DrInputComponent)),
                     multi: true,
                 },
-            ])], 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$6);
+            ])], 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) {
+            i0.ɵɵprojectionDef(_c3$7);
             i0.ɵɵprojection(0);
             i0.ɵɵtemplate(1, DrInputComponent_ng_container_1_Template, 3, 11, "ng-container", 0);
             i0.ɵɵtemplate(2, DrInputComponent_ng_template_2_Template, 2, 14, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
@@ -1385,9 +1385,9 @@ class DrInputComponent {
 
 const _c0$F = ["labelTemplate"];
 const _c1$i = ["multiLabelTemplate"];
-const _c2$7 = ["optionTemplate"];
-const _c3$5 = ["optionHeaderTemplate"];
-const _c4$3 = ["optionFooterTemplate"];
+const _c2$8 = ["optionTemplate"];
+const _c3$6 = ["optionHeaderTemplate"];
+const _c4$4 = ["optionFooterTemplate"];
 const _c5 = function (a0) { return { item: a0 }; };
 function DrSelectComponent_2_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 6);
@@ -1622,9 +1622,9 @@ class DrSelectComponent {
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrSelectComponent, selectors: [["dr-select"]], contentQueries: function DrSelectComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, _c0$F, 5);
             i0.ɵɵcontentQuery(dirIndex, _c1$i, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c2$7, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c3$5, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c4$3, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c2$8, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c3$6, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c4$4, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.labelTemplate = _t.first);
@@ -5573,7 +5573,7 @@ function StepperComponent_ng_container_3_div_1_ng_template_6_Template(rf, ctx) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(index_r11 + 1);
 } }
-const _c2$6 = function (a0, a1, a2) { return { index: a0, isLast: a1, step: a2 }; };
+const _c2$7 = function (a0, a1, a2) { return { index: a0, isLast: a1, step: a2 }; };
 function StepperComponent_ng_container_3_div_1_ng_container_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 25);
 } if (rf & 2) {
@@ -5583,7 +5583,7 @@ function StepperComponent_ng_container_3_div_1_ng_container_10_Template(rf, ctx)
     const step_r10 = ctx_r23.$implicit;
     i0.ɵɵnextContext();
     const _r6 = i0.ɵɵreference(8);
-    i0.ɵɵproperty("ngTemplateOutlet", _r6)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c2$6, index_r11, isLast_r12, step_r10));
+    i0.ɵɵproperty("ngTemplateOutlet", _r6)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c2$7, index_r11, isLast_r12, step_r10));
 } }
 function StepperComponent_ng_container_3_div_1_span_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 26);
@@ -5603,9 +5603,9 @@ function StepperComponent_ng_container_3_div_1_ng_container_12_Template(rf, ctx)
     const step_r10 = ctx_r25.$implicit;
     i0.ɵɵnextContext();
     const _r6 = i0.ɵɵreference(8);
-    i0.ɵɵproperty("ngTemplateOutlet", _r6)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c2$6, index_r11, isLast_r12, step_r10));
+    i0.ɵɵproperty("ngTemplateOutlet", _r6)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c2$7, index_r11, isLast_r12, step_r10));
 } }
-const _c3$4 = function (a0) { return { step: a0 }; };
+const _c3$5 = function (a0) { return { step: a0 }; };
 function StepperComponent_ng_container_3_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 10);
@@ -5632,7 +5632,7 @@ function StepperComponent_ng_container_3_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("step-setup", ctx_r14.inlineLabels);
     i0.ɵɵattribute("data-analytics", ctx_r14.getDataAnalyticsTag(step_r10));
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("drTooltip", step_r10.description && _r4)("drTooltipContext", i0.ɵɵpureFunction1(22, _c3$4, step_r10))("drTooltipPosition", "bottom");
+    i0.ɵɵproperty("drTooltip", step_r10.description && _r4)("drTooltipContext", i0.ɵɵpureFunction1(22, _c3$5, step_r10))("drTooltipPosition", "bottom");
     i0.ɵɵadvance(1);
     i0.ɵɵclassProp("active", ctx_r14.currentStep === step_r10)("completed", step_r10.completed);
     i0.ɵɵadvance(1);
@@ -6699,7 +6699,7 @@ function DrChatSuggestionsComponent_ng_template_3_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngForOf", ctx_r3.visibleValues);
 } }
-const _c2$5 = function (a0, a1, a2, a3) { return { "chat-suggestions--three-cols": a0, "chat-suggestions--two-cols": a1, "chat-suggestions--one-col": a2, "chat-suggestions--button-mode": a3 }; };
+const _c2$6 = function (a0, a1, a2, a3) { return { "chat-suggestions--three-cols": a0, "chat-suggestions--two-cols": a1, "chat-suggestions--one-col": a2, "chat-suggestions--button-mode": a3 }; };
 class DrChatSuggestionsComponent {
     get hiddenValues() {
         return JSON.parse(localStorage.getItem('aiChatSuggestions')) || [];
@@ -6805,7 +6805,7 @@ class DrChatSuggestionsComponent {
             i0.ɵɵtemplate(3, DrChatSuggestionsComponent_ng_template_3_Template, 2, 6, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             const _r2 = i0.ɵɵreference(4);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(3, _c2$5, ctx.colsCount === 3, ctx.colsCount === 2, ctx.colsCount === 1, ctx.buttonMode));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(3, _c2$6, ctx.colsCount === 3, ctx.colsCount === 2, ctx.colsCount === 1, ctx.buttonMode));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.buttonMode)("ngIfElse", _r2);
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, DrButtonComponent], styles: ["[_nghost-%COMP%]{display:flex;align-items:flex-start;justify-content:center}[_nghost-%COMP%]   .chat-suggestions[_ngcontent-%COMP%]{display:flex;width:100%;justify-content:center;max-width:956px}[_nghost-%COMP%]   .chat-suggestions--button-mode[_ngcontent-%COMP%]{justify-content:flex-start}[_nghost-%COMP%]   .chat-suggestions--button-mode[_ngcontent-%COMP%]   .chat-suggestions__items[_ngcontent-%COMP%]{padding-top:32px}[_nghost-%COMP%]   .chat-suggestions--one-col[_ngcontent-%COMP%]{padding-left:0;grid-template-columns:repeat(1,300px)}[_nghost-%COMP%]   .chat-suggestions--one-col[_ngcontent-%COMP%]   .chat-suggestions__items[_ngcontent-%COMP%]{grid-template-columns:repeat(1,300px)}[_nghost-%COMP%]   .chat-suggestions--two-cols[_ngcontent-%COMP%]{padding-left:0;grid-template-columns:repeat(2,300px)}[_nghost-%COMP%]   .chat-suggestions--two-cols[_ngcontent-%COMP%]   .chat-suggestions__items[_ngcontent-%COMP%]{grid-template-columns:repeat(2,300px)}[_nghost-%COMP%]   .chat-suggestions--three-cols[_ngcontent-%COMP%]{padding-left:0;grid-template-columns:repeat(3,300px)}[_nghost-%COMP%]   .chat-suggestions--three-cols[_ngcontent-%COMP%]   .chat-suggestions__container[_ngcontent-%COMP%]{padding-left:0}[_nghost-%COMP%]   .chat-suggestions--three-cols[_ngcontent-%COMP%]   .chat-suggestions__items[_ngcontent-%COMP%]{grid-template-columns:repeat(3,300px)}[_nghost-%COMP%]   .chat-suggestions__container[_ngcontent-%COMP%]{display:flex;position:relative;width:auto;margin-top:12px;padding:0 16px}[_nghost-%COMP%]   .chat-suggestions__container__button[_ngcontent-%COMP%]{z-index:3;background:linear-gradient(-90deg,#6969ff,#4eb7df) border-box;border-radius:2em;border:1.5px solid transparent}[_nghost-%COMP%]   .chat-suggestions__container__button[_ngcontent-%COMP%]  button{background:#fff;border-radius:24px;color:#4646ce;border:none;cursor:pointer}[_nghost-%COMP%]   .chat-suggestions__container[_ngcontent-%COMP%]   .chat-suggestions__items[_ngcontent-%COMP%]{display:none;position:absolute;width:100%;bottom:0;left:0;padding-bottom:56px;z-index:2}[_nghost-%COMP%]   .chat-suggestions__container--opened[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%]   .chat-suggestions__container--opened[_ngcontent-%COMP%]   .chat-suggestions__container__button[_ngcontent-%COMP%]  button{color:#4646ce;background:#f2f2fb}[_nghost-%COMP%]   .chat-suggestions__container--opened[_ngcontent-%COMP%]   .chat-suggestions__items[_ngcontent-%COMP%]{display:grid;align-items:center;justify-content:center}[_nghost-%COMP%]   .chat-suggestions__items[_ngcontent-%COMP%]{padding:0 16px;display:grid;gap:28px;grid-auto-rows:minmax(86px,auto);background:#ffffffb3}[_nghost-%COMP%]   .chat-suggestions__items__item[_ngcontent-%COMP%]{display:inline-flex;min-height:86px;width:300px;align-items:center;justify-content:center;text-align:center;padding:16px;border-radius:8px;background:#f2f2fb;box-shadow:0 1px 2px #00000026;font-size:14px;line-height:24px;color:#25258c}[_nghost-%COMP%]   .chat-suggestions__items__item[_ngcontent-%COMP%]:hover{cursor:pointer;background:#eaeaff}"], changeDetection: 0 }); }
@@ -6830,7 +6830,7 @@ class DrChatSuggestionsComponent {
 
 const _c0$p = ["drChatHeader"];
 const _c1$b = ["drChatContent"];
-const _c2$4 = ["messagesContainer"];
+const _c2$5 = ["messagesContainer"];
 function DrChatComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 8);
 } if (rf & 2) {
@@ -6874,8 +6874,8 @@ function DrChatComponent_dr_chat_suggestions_7_Template(rf, ctx) { if (rf & 1) {
     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$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 _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"];
 class DrChatComponent {
     set contentUpdateSubject(value) {
         if (value) {
@@ -6965,14 +6965,14 @@ class DrChatComponent {
             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$4, 5);
+            i0.ɵɵviewQuery(_c2$5, 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$2, 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$3);
+        } }, 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);
             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);
@@ -7065,9 +7065,9 @@ function DrChatFormDropdownComponent_i_14_Template(rf, ctx) { if (rf & 1) {
 function DrChatFormDropdownComponent_dr_dot_flashing_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "dr-dot-flashing", 15);
 } }
-const _c2$3 = function (a0) { return { "message-row_loading": a0 }; };
-const _c3$2 = function (a0, a1) { return { "message-row__input--focused": a0, "message-row__input--filled": a1 }; };
-const _c4$1 = ["*"];
+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 = ["*"];
 class DrChatFormDropdownComponent {
     constructor(cdr, domSanitizer) {
         this.cdr = cdr;
@@ -7235,7 +7235,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$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) {
+        } }, 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) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵpipe(2, "async");
@@ -7257,9 +7257,9 @@ class DrChatFormDropdownComponent {
         } if (rf & 2) {
             const _r1 = i0.ɵɵreference(7);
             let tmp_1_0;
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c2$3, ctx.isUploadingFiles));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c2$4, ctx.isUploadingFiles));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(17, _c3$2, ctx.inputFocus, !!(ctx.message == null ? null : (tmp_1_0 = ctx.message.trim()) == null ? null : tmp_1_0.length) || !!i0.ɵɵpipeBind1(2, 11, ctx.droppedFiles$).length));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(17, _c3$3, ctx.inputFocus, !!(ctx.message == null ? null : (tmp_1_0 = ctx.message.trim()) == null ? null : tmp_1_0.length) || !!i0.ɵɵpipeBind1(2, 11, ctx.droppedFiles$).length));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(4, 13, ctx.droppedFiles$).length);
             i0.ɵɵadvance(3);
@@ -9436,7 +9436,7 @@ function DrDropdownComponent_dr_dropdown_item_4_ng_container_3_Template(rf, ctx)
     const act_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("ngTemplateOutlet", act_r2.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1$9, act_r2));
 } }
-const _c2$2 = function () { return { withoutArrow: true }; };
+const _c2$3 = function () { return { withoutArrow: true }; };
 function DrDropdownComponent_dr_dropdown_item_4_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "dr-dropdown-item", 4);
@@ -9449,7 +9449,7 @@ function DrDropdownComponent_dr_dropdown_item_4_Template(rf, ctx) { if (rf & 1)
     const act_r2 = ctx.$implicit;
     const index_r3 = ctx.index;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("drTooltip", ctx_r1.tooltipToShow(act_r2))("drTooltipPosition", "left")("drTooltipOptions", i0.ɵɵpureFunction0(15, _c2$2))("drTooltipClass", "dr-dropdown__tooltip")("drDropdown", ctx_r1.hasChildren(act_r2) && act_r2.children)("drDropdownClass", act_r2.childOptions == null ? null : act_r2.childOptions.class)("drDropdownInHover", true)("drDropdownPosition", act_r2.childOptions == null ? null : act_r2.childOptions.position)("disabled", ctx_r1.disabled(act_r2))("selected", ctx_r1.selected(act_r2))("divider", act_r2.separateLine);
+    i0.ɵɵproperty("drTooltip", ctx_r1.tooltipToShow(act_r2))("drTooltipPosition", "left")("drTooltipOptions", i0.ɵɵpureFunction0(15, _c2$3))("drTooltipClass", "dr-dropdown__tooltip")("drDropdown", ctx_r1.hasChildren(act_r2) && act_r2.children)("drDropdownClass", act_r2.childOptions == null ? null : act_r2.childOptions.class)("drDropdownInHover", true)("drDropdownPosition", act_r2.childOptions == null ? null : act_r2.childOptions.position)("disabled", ctx_r1.disabled(act_r2))("selected", ctx_r1.selected(act_r2))("divider", act_r2.separateLine);
     i0.ɵɵattribute("data-analytics", ctx_r1.getDataAnalyticsTag(act_r2, index_r3));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", !act_r2.templateRef);
@@ -9458,8 +9458,8 @@ function DrDropdownComponent_dr_dropdown_item_4_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", act_r2.templateRef);
 } }
-const _c3$1 = [[["dr-dropdown-item"]]];
-const _c4 = ["dr-dropdown-item"];
+const _c3$2 = [[["dr-dropdown-item"]]];
+const _c4$1 = ["dr-dropdown-item"];
 class DrDropdownComponent {
     set options(data) {
         if (data) {
@@ -9579,8 +9579,8 @@ 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, 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$1);
+        } }, 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) {
+            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(); });
             i0.ɵɵprojection(3);
@@ -10351,8 +10351,8 @@ function DrAccordionItemHeaderComponent_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassMap(ctx_r1.chevronIconClass);
     i0.ɵɵproperty("@expansionIndicator", i0.ɵɵpureFunction2(5, _c1$5, ctx_r1.state, i0.ɵɵpureFunction1(3, _c0$c, ctx_r1.chevronRotationDegree)));
 } }
-const _c2$1 = [[["dr-accordion-item-title"]], [["dr-accordion-item-description"]], "*"];
-const _c3 = ["dr-accordion-item-title", "dr-accordion-item-description", "*"];
+const _c2$2 = [[["dr-accordion-item-title"]], [["dr-accordion-item-description"]], "*"];
+const _c3$1 = ["dr-accordion-item-title", "dr-accordion-item-description", "*"];
 class DrAccordionItemHeaderComponent {
     get isCollapsed() {
         return this.accordionItem.collapsed;
@@ -10407,8 +10407,8 @@ class DrAccordionItemHeaderComponent {
             i0.ɵɵattribute("aria-expanded", ctx.expanded)("tabindex", ctx.tabbable)("aria-disabled", ctx.disabled);
             i0.ɵɵclassMap(ctx.theme);
             i0.ɵɵclassProp("accordion-item-header-collapsed", ctx.isCollapsed)("accordion-item-header-expanded", ctx.expanded);
-        } }, inputs: { chevronOrientation: "chevronOrientation", chevronPosition: "chevronPosition", icon: "icon", toggleOnChevronClick: "toggleOnChevronClick" }, ngContentSelectors: _c3, decls: 5, vars: 2, consts: [[3, "class", "dr-accordion-item-header-icon--additional-padding", 4, "ngIf"], [3, "class", "click", 4, "ngIf"], [3, "click"]], template: function DrAccordionItemHeaderComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c2$1);
+        } }, inputs: { chevronOrientation: "chevronOrientation", chevronPosition: "chevronPosition", icon: "icon", toggleOnChevronClick: "toggleOnChevronClick" }, ngContentSelectors: _c3$1, decls: 5, vars: 2, consts: [[3, "class", "dr-accordion-item-header-icon--additional-padding", 4, "ngIf"], [3, "class", "click", 4, "ngIf"], [3, "click"]], template: function DrAccordionItemHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c2$2);
             i0.ɵɵtemplate(0, DrAccordionItemHeaderComponent_i_0_Template, 1, 4, "i", 0);
             i0.ɵɵtemplate(1, DrAccordionItemHeaderComponent_i_1_Template, 1, 8, "i", 1);
             i0.ɵɵprojection(2);
@@ -10804,7 +10804,7 @@ function DialogWrapperComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r6.dialogData.acceptButton);
 } }
-const _c2 = function (a0) { return { "flex-position": a0 }; };
+const _c2$1 = function (a0) { return { "flex-position": a0 }; };
 class DialogWrapperComponent {
     get elementClass() {
         return this.dialogData?.theme?.noThemeSizeClass ? null : this.dialogData?.theme?.themeSize || 'medium-modal';
@@ -10915,7 +10915,7 @@ class DialogWrapperComponent {
             i0.ɵɵproperty("ngIf", ctx.dialogData.title);
             i0.ɵɵadvance(1);
             i0.ɵɵclassProp("dialog-wrapper__content--no-padding", ctx.dialogData.theme == null ? null : ctx.dialogData.theme.contentNoPadding);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2, (ctx.dialogData.contentIcon == null ? null : ctx.dialogData.contentIcon.class) && !ctx.childComponent));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2$1, (ctx.dialogData.contentIcon == null ? null : ctx.dialogData.contentIcon.class) && !ctx.childComponent));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.dialogData.contentIcon == null ? null : ctx.dialogData.contentIcon.class);
             i0.ɵɵadvance(1);
@@ -13633,24 +13633,42 @@ class DrChipComponent {
             type: Output
         }] }); })();
 
-function DrGalleryComponent_div_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+const _c0$1 = ["carouselContainer"];
+const _c1 = ["carouselItem"];
+function DrGalleryComponent_dr_button_0_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-button", 5);
+    i0.ɵɵlistener("click", function DrGalleryComponent_dr_button_0_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.prev()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("icon", "dr-icon-arrow-left");
+} }
+function DrGalleryComponent_div_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-const _c0$1 = function (a0) { return { "dr-gallery-item_active": a0 }; };
-const _c1 = function (a0) { return { $implicit: a0 }; };
-function DrGalleryComponent_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵtemplate(1, DrGalleryComponent_div_3_ng_container_1_Template, 1, 0, "ng-container", 6);
+const _c2 = function (a0) { return { "dr-gallery-item_active": a0 }; };
+const _c3 = function () { return {}; };
+const _c4 = 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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r1 = ctx.$implicit;
-    const i_r2 = ctx.index;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵstyleMap(ctx_r0.getStyle());
-    i0.ɵɵstyleProp("transition", ctx_r0.transition);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$1, ctx_r0.centerIndex === i_r2));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.template)("ngTemplateOutletContext", i0.ɵɵpureFunction1(9, _c1, item_r1));
+    const item_r6 = ctx.$implicit;
+    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.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.template)("ngTemplateOutletContext", i0.ɵɵpureFunction1(9, _c4, item_r6));
+} }
+function DrGalleryComponent_dr_button_5_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-button", 9);
+    i0.ɵɵlistener("click", function DrGalleryComponent_dr_button_5_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.next()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("iconSize", "24px")("icon", "dr-icon-arrow-right");
 } }
 class DrGalleryComponent {
     set items(value) {
@@ -13675,25 +13693,57 @@ class DrGalleryComponent {
     get centerIndex() {
         return this.itemsCount > 1 && this.itemsCount % 2 !== 0 ? this.activeIndex + Math.floor(this.itemsCount / 2) : null;
     }
-    ngOnChanges() {
-        this.activeIndex = this.itemsCount;
-        this.initializeCarousel();
-        this.updateTransform();
-    }
     constructor(cdr) {
         this.cdr = cdr;
         this._items = [];
         this._itemsCount = 3;
         this.defaultTransition = '250ms ease-in-out';
         this.noTransition = '0ms';
+        this.modeType = 'loop';
+        this.isOutsideBtns = false;
         this.activeIndex = 0;
         this.carouselItems = [];
-        this.transform = `translateX(0%)`;
+        this.transform = 'translateX(0%)';
         this.transition = this.defaultTransition;
+        this.itemOffsets = [];
+        this.itemWidths = [];
+    }
+    ngAfterViewInit() {
+        // Wait for initial render
+        setTimeout(() => {
+            this.calculateItemOffsets();
+            this.updateTransform();
+        });
     }
     initializeCarousel() {
-        this.carouselItems = [...takeRight(this.items, this.itemsCount), ...this.items, ...take(this.items, this.itemsCount)];
-        this.updateTransform();
+        if (this.modeType === 'loop') {
+            this.carouselItems = [
+                ...this._items.slice(-this.itemsCount),
+                ...this._items,
+                ...this._items.slice(0, this.itemsCount),
+            ];
+            this.activeIndex = this.itemsCount;
+        }
+        else {
+            this.carouselItems = [...this._items];
+            this.activeIndex = 0;
+        }
+        setTimeout(() => {
+            this.calculateItemOffsets();
+            this.updateTransform();
+        });
+    }
+    calculateItemOffsets() {
+        this.itemOffsets = [];
+        this.itemWidths = [];
+        let offset = 0;
+        const elements = this.itemElements.toArray();
+        for (const el of elements) {
+            const width = el.nativeElement.offsetWidth;
+            this.itemOffsets.push(offset);
+            this.itemWidths.push(width);
+            offset += width;
+        }
     }
     getStyle() {
         const percent = `calc(${100 / this.itemsCount}%)`;
@@ -13704,20 +13754,54 @@ class DrGalleryComponent {
         };
     }
     prev() {
-        this.activeIndex--;
-        this.transition = this.defaultTransition;
-        this.updateTransform();
-        if (this.activeIndex <= 0) {
-            this.resetIndexAfterDelay(this.carouselItems.length - this.items.length);
+        if (this.modeType === 'loop') {
+            this.activeIndex--;
+            this.transition = this.defaultTransition;
+            this.updateTransform();
+            if (this.activeIndex <= 0) {
+                this.resetIndexAfterDelay(this.carouselItems.length - this.items.length);
+            }
+        }
+        else {
+            if (this.activeIndex > 0) {
+                this.activeIndex--;
+                this.updateTransform();
+            }
         }
     }
     next() {
-        this.activeIndex++;
-        this.transition = this.defaultTransition;
-        this.updateTransform();
-        if (this.activeIndex + this.itemsCount > this.carouselItems.length - 1) {
-            this.resetIndexAfterDelay(this.itemsCount);
+        if (this.modeType === 'loop') {
+            this.activeIndex++;
+            this.transition = this.defaultTransition;
+            this.updateTransform();
+            if (this.activeIndex + this.itemsCount > this.carouselItems.length - 1) {
+                this.resetIndexAfterDelay(this.itemsCount);
+            }
         }
+        else {
+            if (this.activeIndex + 1 < this.carouselItems.length) {
+                this.activeIndex++;
+                this.updateTransform();
+            }
+        }
+    }
+    navigate(index) {
+        this.activeIndex = index;
+        this.updateTransform();
+    }
+    get canGoPrev() {
+        if (this.modeType === 'loop')
+            return true;
+        return !!(this.activeIndex > 0);
+    }
+    get canGoNext() {
+        if (this.modeType === 'loop')
+            return true;
+        const containerWidth = this.containerRef?.nativeElement?.offsetWidth || 0;
+        const currentOffset = this.itemOffsets[this.activeIndex] || 0;
+        const lastIndex = this.itemOffsets.length - 1;
+        const totalContentWidth = this.itemOffsets[lastIndex] + this.itemWidths[lastIndex];
+        return currentOffset + containerWidth < totalContentWidth - 1;
     }
     resetIndexAfterDelay(newIndex) {
         setTimeout(() => {
@@ -13727,9 +13811,17 @@ class DrGalleryComponent {
         }, 250);
     }
     updateTransform(skipTransition = false) {
-        this.transform = `translateX(${-100 * (this.activeIndex / this.itemsCount)}%)`;
+        if (this.modeType === 'loop') {
+            this.transform = `translateX(${-100 * (this.activeIndex / this.itemsCount)}%)`;
+        }
+        else {
+            const offset = this.itemOffsets[this.activeIndex] || 0;
+            this.transform = `translateX(-${offset}px)`;
+        }
         if (skipTransition)
             this.transition = this.noTransition;
+        else
+            this.transition = this.defaultTransition;
         this.cdr.markForCheck();
     }
     /** @nocollapse */ static { this.ɵfac = function DrGalleryComponent_Factory(t) { return new (t || DrGalleryComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
@@ -13738,36 +13830,51 @@ class DrGalleryComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.template = _t.first);
-        } }, inputs: { items: "items", itemsCount: "itemsCount" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 5, vars: 8, consts: [["theme", "icon", 1, "dr-gallery-btn", "dr-gallery-btn_left", 3, "icon", "click"], [1, "dr-gallery-caroousel"], [1, "dr-gallery-items"], ["class", "dr-gallery-item", 3, "transition", "ngClass", "style", 4, "ngFor", "ngForOf"], ["theme", "icon", 1, "dr-gallery-btn", "dr-gallery-btn_right", 3, "iconSize", "icon", "click"], [1, "dr-gallery-item", 3, "ngClass"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function DrGalleryComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "dr-button", 0);
-            i0.ɵɵlistener("click", function DrGalleryComponent_Template_dr_button_click_0_listener() { return ctx.prev(); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
-            i0.ɵɵtemplate(3, DrGalleryComponent_div_3_Template, 2, 11, "div", 3);
+        } }, viewQuery: function DrGalleryComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$1, 5);
+            i0.ɵɵviewQuery(_c1, 5);
+        } if (rf & 2) {
+            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) {
+            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.ɵɵelementEnd()();
-            i0.ɵɵelementStart(4, "dr-button", 4);
-            i0.ɵɵlistener("click", function DrGalleryComponent_Template_dr_button_click_4_listener() { return ctx.next(); });
-            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(5, DrGalleryComponent_dr_button_5_Template, 1, 2, "dr-button", 4);
         } if (rf & 2) {
-            i0.ɵɵproperty("icon", "dr-icon-arrow-left");
+            i0.ɵɵproperty("ngIf", !ctx.isOutsideBtns);
+            i0.ɵɵadvance(1);
+            i0.ɵɵclassMapInterpolate1("dr-gallery-caroousel dr-gallery-caroousel_", ctx.modeType, "");
             i0.ɵɵadvance(2);
             i0.ɵɵstyleProp("transition", ctx.transition)("transform", ctx.transform);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", ctx.carouselItems);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("iconSize", "24px")("icon", "dr-icon-arrow-right");
-        } }, dependencies: [CommonModule, i1.NgClass, i1.NgForOf, i1.NgTemplateOutlet, 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;width:100%;min-height:240px}.dr-gallery-item_active[_ngcontent-%COMP%]{transform:scale(1.2)}.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}"], changeDetection: 0 }); }
+            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 }); }
 }
 (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 class=\"dr-gallery-btn dr-gallery-btn_left\" (click)=\"prev()\" theme=\"icon\" [icon]=\"'dr-icon-arrow-left'\"> </dr-button>\n<div class=\"dr-gallery-caroousel\">\n    <div class=\"dr-gallery-items\" [style.transition]=\"transition\" [style.transform]=\"transform\">\n        <div\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            [style]=\"getStyle()\">\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: item }\"></ng-container>\n        </div>\n    </div>\n</div>\n\n<dr-button\n    class=\"dr-gallery-btn dr-gallery-btn_right\"\n    (click)=\"next()\"\n    [iconSize]=\"'24px'\"\n    theme=\"icon\"\n    [icon]=\"'dr-icon-arrow-right'\"></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;width:100%;min-height:240px}.dr-gallery-item_active{transform:scale(1.2)}.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}\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 #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"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { template: [{
             type: ContentChild,
             args: [TemplateRef]
+        }], modeType: [{
+            type: Input
+        }], isOutsideBtns: [{
+            type: Input
         }], items: [{
             type: Input
         }], itemsCount: [{
             type: Input
+        }], containerRef: [{
+            type: ViewChild,
+            args: ['carouselContainer']
+        }], itemElements: [{
+            type: ViewChildren,
+            args: ['carouselItem']
         }] }); })();
 
 /**
@@ -14024,14 +14131,14 @@ class DrawerRef {
         this.id = _ref.id;
         // Emit when opening animation completes
         containerInstance._animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'visible'), take$1(1))
+            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'visible'), take(1))
             .subscribe(() => {
             this._afterOpened.next();
             this._afterOpened.complete();
         });
         // Dispose overlay when closing animation is complete
         containerInstance._animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'hidden'), take$1(1))
+            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'hidden'), take(1))
             .subscribe(() => {
             clearTimeout(this._closeFallbackTimeout);
             this._ref.close(this._result);
@@ -14058,7 +14165,7 @@ class DrawerRef {
         if (this.containerInstance && !this._afterDismissed.closed) {
             // Transition the backdrop in parallel to the drawer.
             this.containerInstance._animationStateChanged
-                .pipe(filter((event) => event.phaseName === 'start'), take$1(1))
+                .pipe(filter((event) => event.phaseName === 'start'), take(1))
                 .subscribe((event) => {
                 // The logic that disposes of the overlay depends on the exit animation completing, however
                 // it isn't guaranteed if the parent view is destroyed while it's running. Add a fallback