@indigina/ui-kit 1.1.108 → 1.1.110

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/fesm2022/indigina-ui-kit.mjs +143 -166
  2. package/fesm2022/indigina-ui-kit.mjs.map +1 -1
  3. package/lib/components/kit-dialog/kit-dialog.component.d.ts +1 -1
  4. package/lib/components/kit-dialog/kit-dialog.service.d.ts +7 -11
  5. package/lib/components/kit-dialog-actions/kit-dialog-actions.component.d.ts +1 -1
  6. package/lib/components/kit-popup/kit-popup.component.d.ts +32 -35
  7. package/lib/components/kit-profile-menu/kit-profile-menu.component.d.ts +2 -1
  8. package/package.json +1 -1
  9. package/public-api.d.ts +2 -3
  10. package/styles/components/button-variants.scss +255 -0
  11. package/lib/components/kit-dialog/kit-dialog.module.d.ts +0 -9
  12. package/lib/components/kit-dialog-actions/kit-dialog-actions.module.d.ts +0 -8
package/fesm2022/indigina-ui-kit.mjs CHANGED
@@ -3,12 +3,12 @@ import { Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulat
3
3
  import * as i1 from '@progress/kendo-angular-buttons';
4
4
  import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
5
5
  import * as i1$1 from '@angular/common';
6
- import { CommonModule, NgClass, DOCUMENT, DatePipe } from '@angular/common';
6
+ import { CommonModule, NgClass, DOCUMENT, NgTemplateOutlet, DatePipe } from '@angular/common';
7
7
  import * as i1$2 from '@progress/kendo-angular-label';
8
8
  import { LabelModule } from '@progress/kendo-angular-label';
9
9
  import { TooltipDirective, TooltipSettings } from '@progress/kendo-angular-tooltip';
10
10
  import * as i1$a from '@progress/kendo-angular-popup';
11
- import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
11
+ import { PopupService } from '@progress/kendo-angular-popup';
12
12
  import * as i1$5 from '@angular/forms';
13
13
  import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, UntypedFormControl, Validators } from '@angular/forms';
14
14
  import * as i1$3 from '@progress/kendo-angular-inputs';
@@ -23,16 +23,17 @@ import * as i1$6 from 'ngx-toastr';
23
23
  import { ToastrModule, TOAST_CONFIG, DefaultGlobalConfig } from 'ngx-toastr';
24
24
  import * as i1$7 from '@angular/router';
25
25
  import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
26
- import { BehaviorSubject, filter } from 'rxjs';
26
+ import { BehaviorSubject, filter, Subject, takeUntil } from 'rxjs';
27
27
  import { v4 } from 'uuid';
28
28
  import * as i1$8 from '@progress/kendo-angular-dialog';
29
- import { DialogModule, WindowModule } from '@progress/kendo-angular-dialog';
29
+ import { KENDO_DIALOGS, DialogActionsComponent } from '@progress/kendo-angular-dialog';
30
+ export { DialogAction, DialogCloseResult, DialogContentBase, DialogRef } from '@progress/kendo-angular-dialog';
30
31
  import * as i1$9 from '@progress/kendo-angular-indicators';
31
32
  import { IndicatorsModule } from '@progress/kendo-angular-indicators';
32
33
  import * as i2$1 from '@progress/kendo-angular-upload';
33
34
  import { UploadModule } from '@progress/kendo-angular-upload';
34
35
  import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
35
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
36
+ import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
36
37
  import initials from 'initials';
37
38
  import * as i2$2 from '@progress/kendo-angular-layout';
38
39
  import { LayoutModule, TileLayoutModule } from '@progress/kendo-angular-layout';
@@ -277,11 +278,11 @@ class KitButtonComponent {
277
278
  this.KitSvgIconType = KitSvgIconType;
278
279
  }
279
280
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
280
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitButtonComponent, isStandalone: false, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", iconType: "iconType", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass", active: "active" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
281
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitButtonComponent, isStandalone: false, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", iconType: "iconType", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass", active: "active" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button .kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
281
282
  }
282
283
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitButtonComponent, decorators: [{
283
284
  type: Component,
284
- args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"] }]
285
+ args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button .kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"] }]
285
286
  }], propDecorators: { disabled: [{
286
287
  type: Input
287
288
  }], label: [{
@@ -3385,102 +3386,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
3385
3386
  }]
3386
3387
  }] });
3387
3388
 
3388
- class KitDialogComponent {
3389
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3390
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitDialogComponent, isStandalone: false, selector: "kit-dialog", ngImport: i0, template: "<div class=\"kit-dialog\">\n <div class=\"kit-dialog-container\" kendoDialogContainer\n [hidden]=\"true\"\n ></div>\n</div>\n", styles: [":host ::ng-deep .kit-dialog .k-overlay{opacity:.25}:host ::ng-deep .kit-dialog .k-dialog{background:var(--ui-kit-color-white);border-radius:8px;box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d;overflow:hidden}:host ::ng-deep .kit-dialog .k-dialog-titlebar{display:flex;margin:0 24px;padding:16px 0 8px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:none}:host ::ng-deep .kit-dialog .k-dialog-titlebar-action{padding:0}:host ::ng-deep .kit-dialog .k-dialog-titlebar-action:before,:host ::ng-deep .kit-dialog .k-dialog-titlebar-action:after{opacity:0}:host ::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon{width:18px;height:18px;min-width:auto;min-height:auto;color:var(--ui-kit-color-grey-12)}:host ::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon:hover{color:var(--ui-kit-color-hover);background:none}:host ::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon>svg{width:18px;height:18px}:host ::ng-deep .kit-dialog .k-dialog-title{color:var(--ui-kit-color-grey-10);font-size:18px;flex:1 0}:host ::ng-deep .kit-dialog .k-dialog-content{padding:24px}\n"], dependencies: [{ kind: "directive", type: i1$8.DialogContainerDirective, selector: "[kendoDialogContainer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3391
- }
3392
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogComponent, decorators: [{
3393
- type: Component,
3394
- args: [{ selector: 'kit-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"kit-dialog\">\n <div class=\"kit-dialog-container\" kendoDialogContainer\n [hidden]=\"true\"\n ></div>\n</div>\n", styles: [":host ::ng-deep .kit-dialog .k-overlay{opacity:.25}:host ::ng-deep .kit-dialog .k-dialog{background:var(--ui-kit-color-white);border-radius:8px;box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d;overflow:hidden}:host ::ng-deep .kit-dialog .k-dialog-titlebar{display:flex;margin:0 24px;padding:16px 0 8px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:none}:host ::ng-deep .kit-dialog .k-dialog-titlebar-action{padding:0}:host ::ng-deep .kit-dialog .k-dialog-titlebar-action:before,:host ::ng-deep .kit-dialog .k-dialog-titlebar-action:after{opacity:0}:host ::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon{width:18px;height:18px;min-width:auto;min-height:auto;color:var(--ui-kit-color-grey-12)}:host ::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon:hover{color:var(--ui-kit-color-hover);background:none}:host ::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon>svg{width:18px;height:18px}:host ::ng-deep .kit-dialog .k-dialog-title{color:var(--ui-kit-color-grey-10);font-size:18px;flex:1 0}:host ::ng-deep .kit-dialog .k-dialog-content{padding:24px}\n"] }]
3395
- }] });
3396
-
3397
3389
  class KitDialogService {
3390
+ get isDialogOpen() {
3391
+ return !!this._dialogRef();
3392
+ }
3393
+ get dialogInstance() {
3394
+ return this._dialogRef()?.content.instance || null;
3395
+ }
3396
+ get dialogRef() {
3397
+ return this._dialogRef();
3398
+ }
3398
3399
  constructor(dialogService) {
3399
3400
  this.dialogService = dialogService;
3400
- this.opened = new EventEmitter();
3401
- this.closed = new EventEmitter();
3402
- this.dialogRef = null;
3401
+ this._dialogRef = signal(null);
3403
3402
  }
3404
- openDialog(dialog) {
3405
- this.dialogRef = this.dialogService.open({
3406
- title: dialog.title,
3407
- content: dialog.component,
3408
- });
3409
- this.opened.emit(this.dialogRef);
3403
+ openDialog(settings) {
3404
+ this._dialogRef.set(this.dialogService.open({
3405
+ ...settings,
3406
+ }));
3410
3407
  }
3411
3408
  closeDialog() {
3412
- if (!this.dialogRef) {
3409
+ if (!this._dialogRef()) {
3413
3410
  return;
3414
3411
  }
3415
- this.dialogRef.close();
3416
- this.closed.emit(this.dialogRef);
3412
+ this._dialogRef()?.close();
3413
+ this._dialogRef.set(null);
3417
3414
  }
3418
3415
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogService, deps: [{ token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
3419
3416
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogService }); }
3420
3417
  }
3421
3418
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogService, decorators: [{
3422
3419
  type: Injectable
3423
- }], ctorParameters: () => [{ type: i1$8.DialogService }], propDecorators: { opened: [{
3424
- type: Output
3425
- }], closed: [{
3426
- type: Output
3427
- }] } });
3420
+ }], ctorParameters: () => [{ type: i1$8.DialogService }] });
3428
3421
 
3429
- class KitDialogModule {
3430
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3431
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: KitDialogModule, declarations: [KitDialogComponent], imports: [DialogModule,
3432
- ButtonModule], exports: [KitDialogComponent] }); }
3433
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogModule, providers: [
3422
+ class KitDialogComponent {
3423
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3424
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitDialogComponent, isStandalone: true, selector: "kit-dialog", providers: [
3434
3425
  KitDialogService,
3435
- ], imports: [DialogModule,
3436
- ButtonModule] }); }
3426
+ ], ngImport: i0, template: "<div class=\"kit-dialog\">\n <div class=\"kit-dialog-container\" kendoDialogContainer\n [hidden]=\"true\"\n ></div>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button .kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n", "::ng-deep .kit-dialog .k-overlay{opacity:.25}::ng-deep .kit-dialog .k-dialog{background:var(--ui-kit-color-white);border-radius:8px;box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d;overflow:hidden}::ng-deep .kit-dialog .k-dialog-titlebar{display:flex;margin:0 24px;padding:16px 0 8px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:none}::ng-deep .kit-dialog .k-dialog-titlebar-action{padding:0}::ng-deep .kit-dialog .k-dialog-titlebar-action:before,::ng-deep .kit-dialog .k-dialog-titlebar-action:after{opacity:0}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon{width:18px;height:18px;min-width:auto;min-height:auto;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon:hover{color:var(--ui-kit-color-hover);background:none}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon>svg{width:18px;height:18px}::ng-deep .kit-dialog .k-dialog-title{color:var(--ui-kit-color-grey-10);font-size:18px;flex:1 0}::ng-deep .kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-dialog .k-dialog-actions{display:flex;justify-content:space-between;padding:24px;border:none;background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .k-button{flex:none}::ng-deep .kit-dialog .k-dialog-actions .k-button-text{display:flex;align-items:center;gap:8px}::ng-deep .kit-dialog .k-dialog-actions .kit-button-icon{display:block}::ng-deep .kit-dialog .k-dialog-actions .k-button{font-weight:400;border:1px solid transparent;transition:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:focus{box-shadow:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}::ng-deep .kit-dialog .k-dialog-actions .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .primary:hover{background:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .primary.active,::ng-deep .kit-dialog .k-dialog-actions .primary:active{background:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}::ng-deep .kit-dialog .k-dialog-actions .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .ghost.active,::ng-deep .kit-dialog .k-dialog-actions .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dialog .k-dialog-actions .ghost.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .ghost.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .text{color:var(--ui-kit-color-grey-10);background:none}::ng-deep .kit-dialog .k-dialog-actions .text:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .text:hover,::ng-deep .kit-dialog .k-dialog-actions .text.active,::ng-deep .kit-dialog .k-dialog-actions .text:active{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .text:hover{color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .text.active,::ng-deep .kit-dialog .k-dialog-actions .text:active{color:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .text.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .text.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .link{color:var(--ui-kit-color-main);background:none}::ng-deep .kit-dialog .k-dialog-actions .link:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .link:hover{color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .link.active,::ng-deep .kit-dialog .k-dialog-actions .link:active{color:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .link.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .link.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .dashed:disabled{border-style:dashed}::ng-deep .kit-dialog .k-dialog-actions .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .dashed.active,::ng-deep .kit-dialog .k-dialog-actions .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .dashed.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .dashed.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}::ng-deep .kit-dialog .k-dialog-actions .large .kit-button-icon{width:18px;height:18px}::ng-deep .kit-dialog .k-dialog-actions .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}::ng-deep .kit-dialog .k-dialog-actions .medium .kit-button-icon{width:16px;height:16px}::ng-deep .kit-dialog .k-dialog-actions .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}::ng-deep .kit-dialog .k-dialog-actions .small .kit-button-icon{width:14px;height:14px}::ng-deep .kit-dialog .k-dialog-actions .leading .k-button-text{flex-direction:row-reverse}::ng-deep .kit-dialog .k-dialog-actions .trailing .k-button-text{flex-direction:row}::ng-deep .kit-dialog .k-dialog-actions .no-label.large{padding:0 11px}::ng-deep .kit-dialog .k-dialog-actions .no-label.medium{padding:0 8px}::ng-deep .kit-dialog .k-dialog-actions .no-label.small{padding:0 6px}\n"], dependencies: [{ kind: "directive", type: i1$8.DialogContainerDirective, selector: "[kendoDialogContainer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3437
3427
  }
3438
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogModule, decorators: [{
3439
- type: NgModule,
3440
- args: [{
3441
- declarations: [
3442
- KitDialogComponent,
3443
- ],
3444
- exports: [
3445
- KitDialogComponent,
3446
- ],
3447
- providers: [
3428
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogComponent, decorators: [{
3429
+ type: Component,
3430
+ args: [{ selector: 'kit-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
3431
+ KENDO_DIALOGS,
3432
+ ], providers: [
3448
3433
  KitDialogService,
3449
- ],
3450
- imports: [
3451
- DialogModule,
3452
- ButtonModule,
3453
- ],
3454
- }]
3434
+ ], template: "<div class=\"kit-dialog\">\n <div class=\"kit-dialog-container\" kendoDialogContainer\n [hidden]=\"true\"\n ></div>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button .kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n", "::ng-deep .kit-dialog .k-overlay{opacity:.25}::ng-deep .kit-dialog .k-dialog{background:var(--ui-kit-color-white);border-radius:8px;box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d;overflow:hidden}::ng-deep .kit-dialog .k-dialog-titlebar{display:flex;margin:0 24px;padding:16px 0 8px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:none}::ng-deep .kit-dialog .k-dialog-titlebar-action{padding:0}::ng-deep .kit-dialog .k-dialog-titlebar-action:before,::ng-deep .kit-dialog .k-dialog-titlebar-action:after{opacity:0}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon{width:18px;height:18px;min-width:auto;min-height:auto;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon:hover{color:var(--ui-kit-color-hover);background:none}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon>svg{width:18px;height:18px}::ng-deep .kit-dialog .k-dialog-title{color:var(--ui-kit-color-grey-10);font-size:18px;flex:1 0}::ng-deep .kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-dialog .k-dialog-actions{display:flex;justify-content:space-between;padding:24px;border:none;background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .k-button{flex:none}::ng-deep .kit-dialog .k-dialog-actions .k-button-text{display:flex;align-items:center;gap:8px}::ng-deep .kit-dialog .k-dialog-actions .kit-button-icon{display:block}::ng-deep .kit-dialog .k-dialog-actions .k-button{font-weight:400;border:1px solid transparent;transition:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:focus{box-shadow:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}::ng-deep .kit-dialog .k-dialog-actions .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .primary:hover{background:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .primary.active,::ng-deep .kit-dialog .k-dialog-actions .primary:active{background:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}::ng-deep .kit-dialog .k-dialog-actions .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .ghost.active,::ng-deep .kit-dialog .k-dialog-actions .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dialog .k-dialog-actions .ghost.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .ghost.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .text{color:var(--ui-kit-color-grey-10);background:none}::ng-deep .kit-dialog .k-dialog-actions .text:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .text:hover,::ng-deep .kit-dialog .k-dialog-actions .text.active,::ng-deep .kit-dialog .k-dialog-actions .text:active{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .text:hover{color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .text.active,::ng-deep .kit-dialog .k-dialog-actions .text:active{color:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .text.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .text.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .link{color:var(--ui-kit-color-main);background:none}::ng-deep .kit-dialog .k-dialog-actions .link:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .link:hover{color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .link.active,::ng-deep .kit-dialog .k-dialog-actions .link:active{color:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .link.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .link.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .dashed:disabled{border-style:dashed}::ng-deep .kit-dialog .k-dialog-actions .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .dashed.active,::ng-deep .kit-dialog .k-dialog-actions .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .dashed.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .dashed.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}::ng-deep .kit-dialog .k-dialog-actions .large .kit-button-icon{width:18px;height:18px}::ng-deep .kit-dialog .k-dialog-actions .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}::ng-deep .kit-dialog .k-dialog-actions .medium .kit-button-icon{width:16px;height:16px}::ng-deep .kit-dialog .k-dialog-actions .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}::ng-deep .kit-dialog .k-dialog-actions .small .kit-button-icon{width:14px;height:14px}::ng-deep .kit-dialog .k-dialog-actions .leading .k-button-text{flex-direction:row-reverse}::ng-deep .kit-dialog .k-dialog-actions .trailing .k-button-text{flex-direction:row}::ng-deep .kit-dialog .k-dialog-actions .no-label.large{padding:0 11px}::ng-deep .kit-dialog .k-dialog-actions .no-label.medium{padding:0 8px}::ng-deep .kit-dialog .k-dialog-actions .no-label.small{padding:0 6px}\n"] }]
3455
3435
  }] });
3456
3436
 
3457
3437
  class KitDialogActionsComponent {
3458
3438
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3459
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitDialogActionsComponent, isStandalone: false, selector: "kit-dialog-actions", ngImport: i0, template: "<kendo-dialog-actions class=\"kit-dialog-actions d-flex flex-justify-content-end\" layout=\"normal\">\n <ng-content\n ></ng-content>\n</kendo-dialog-actions>\n", styles: ["::ng-deep .kit-dialog-actions{padding:24px;border:none;background:var(--ui-kit-color-grey-13)}\n"], dependencies: [{ kind: "component", type: i1$8.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3439
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitDialogActionsComponent, isStandalone: true, selector: "kit-dialog-actions", ngImport: i0, template: "<kendo-dialog-actions class=\"kit-dialog-actions d-flex flex-justify-content-end\" layout=\"normal\">\n <ng-content\n ></ng-content>\n</kendo-dialog-actions>\n", styles: ["::ng-deep .kit-dialog-actions{padding:24px;border:none;background:var(--ui-kit-color-grey-13)}\n"], dependencies: [{ kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3460
3440
  }
3461
3441
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogActionsComponent, decorators: [{
3462
3442
  type: Component,
3463
- args: [{ selector: 'kit-dialog-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<kendo-dialog-actions class=\"kit-dialog-actions d-flex flex-justify-content-end\" layout=\"normal\">\n <ng-content\n ></ng-content>\n</kendo-dialog-actions>\n", styles: ["::ng-deep .kit-dialog-actions{padding:24px;border:none;background:var(--ui-kit-color-grey-13)}\n"] }]
3464
- }] });
3465
-
3466
- class KitDialogActionsModule {
3467
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
3468
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: KitDialogActionsModule, declarations: [KitDialogActionsComponent], imports: [WindowModule], exports: [KitDialogActionsComponent] }); }
3469
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogActionsModule, imports: [WindowModule] }); }
3470
- }
3471
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogActionsModule, decorators: [{
3472
- type: NgModule,
3473
- args: [{
3474
- declarations: [
3475
- KitDialogActionsComponent,
3476
- ],
3477
- exports: [
3478
- KitDialogActionsComponent,
3479
- ],
3480
- imports: [
3481
- WindowModule,
3482
- ],
3483
- }]
3443
+ args: [{ selector: 'kit-dialog-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
3444
+ DialogActionsComponent,
3445
+ ], template: "<kendo-dialog-actions class=\"kit-dialog-actions d-flex flex-justify-content-end\" layout=\"normal\">\n <ng-content\n ></ng-content>\n</kendo-dialog-actions>\n", styles: ["::ng-deep .kit-dialog-actions{padding:24px;border:none;background:var(--ui-kit-color-grey-13)}\n"] }]
3484
3446
  }] });
3485
3447
 
3486
3448
  class KitTimepickerComponent {
@@ -4435,100 +4397,102 @@ var KitPopupPositionMode;
4435
4397
  KitPopupPositionMode["FIXED"] = "fixed";
4436
4398
  })(KitPopupPositionMode || (KitPopupPositionMode = {}));
4437
4399
 
4400
+ const defaultPositionMode = KitPopupPositionMode.ABSOLUTE;
4438
4401
  class KitPopupComponent {
4439
- constructor(elementRef) {
4440
- this.elementRef = elementRef;
4441
- /**
4442
- * Specifies the element that will be used as an anchor. The Popup opens next to that element
4443
- */
4444
- this.anchor = null;
4445
- /**
4446
- * Defines whether to close popup when the user clicks outside its boundaries
4447
- */
4448
- this.closeOnOutsideClick = true;
4449
- /**
4450
- * Defines the horizontal position of the anchor element
4451
- */
4452
- this.anchorHorizontalAlign = KitPopupAlignHorizontal.LEFT;
4453
- /**
4454
- * Defines the horizontal position of the popup
4455
- */
4456
- this.popupHorizontalAlign = KitPopupAlignHorizontal.LEFT;
4457
- this.showFooter = false;
4458
- this.cancelButtonLabel = '';
4459
- this.applyButtonLabel = '';
4460
- this.isApplyButtonDisabled = false;
4461
- this.positionMode = KitPopupPositionMode.ABSOLUTE;
4462
- this.cancel = new EventEmitter();
4463
- this.apply = new EventEmitter();
4464
- this.visible = signal(false);
4465
- this.anchorAlign = {
4466
- horizontal: this.anchorHorizontalAlign,
4467
- vertical: KitPopupAlignVertical.BOTTOM,
4468
- };
4469
- this.popupAlign = {
4470
- horizontal: this.popupHorizontalAlign,
4471
- vertical: KitPopupAlignVertical.TOP,
4472
- };
4402
+ get popupHTMLElement() {
4403
+ return this.popupRef?.popupElement || null;
4404
+ }
4405
+ get isPopupOpen() {
4406
+ return !!this.popupRef;
4407
+ }
4408
+ get anchorElement() {
4409
+ return this.anchor() instanceof ElementRef && this.anchor().nativeElement || this.anchor();
4410
+ }
4411
+ constructor(popupService) {
4412
+ this.popupService = popupService;
4413
+ this.anchor = input.required();
4414
+ this.content = input.required();
4415
+ this.closeOnOutsideClick = input(true);
4416
+ this.showFooter = input(false);
4417
+ this.cancelButtonLabel = input('');
4418
+ this.applyButtonLabel = input('');
4419
+ this.isApplyButtonDisabled = input(false);
4420
+ this.positionMode = input(defaultPositionMode);
4421
+ this.popupClass = input('');
4422
+ this.closePopupOnCancel = input(true);
4423
+ this.onCancel = output();
4424
+ this.onApply = output();
4425
+ this.onOpen = output();
4426
+ this.onClose = output();
4473
4427
  this.kitButtonKind = KitButtonKind;
4474
4428
  this.kitButtonType = KitButtonType;
4429
+ this.popupRef = null;
4430
+ this.destroy$ = new Subject();
4475
4431
  }
4476
4432
  documentClick(event) {
4477
- if (!this.closeOnOutsideClick) {
4433
+ if (!this.closeOnOutsideClick() || !this.popupRef) {
4478
4434
  return;
4479
4435
  }
4480
- if (!this.elementRef?.nativeElement.contains(event.target) && !this.anchorElement?.contains(event.target)) {
4481
- this.hide();
4436
+ if (!this.popupRef?.popupElement.contains(event.target) && !this.anchorElement?.contains(event.target)) {
4437
+ this.close();
4482
4438
  }
4483
4439
  }
4484
4440
  ngOnInit() {
4485
- this.anchorAlign.horizontal = this.anchorHorizontalAlign;
4486
- this.popupAlign.horizontal = this.popupHorizontalAlign;
4441
+ outputToObservable(this.onOpen).pipe(takeUntil(this.destroy$))
4442
+ .subscribe(() => {
4443
+ if (this.popupClass()) {
4444
+ const kendoPopup = this.popupRef?.popupElement;
4445
+ kendoPopup?.classList.add(this.popupClass());
4446
+ }
4447
+ });
4487
4448
  }
4488
- get anchorElement() {
4489
- return this.anchor instanceof ElementRef && this.anchor.nativeElement || this.anchor;
4449
+ ngOnDestroy() {
4450
+ this.popupRef = null;
4451
+ this.destroy$.next();
4452
+ this.destroy$.complete();
4490
4453
  }
4491
- toggle() {
4492
- if (!this.visible()) {
4493
- this.visible.set(true);
4454
+ toggle(options) {
4455
+ if (this.popupRef) {
4456
+ this.close();
4457
+ }
4458
+ else {
4459
+ this.popupRef = this.popupService.open({
4460
+ ...options,
4461
+ anchor: this.anchor(),
4462
+ content: this.popupTemplate,
4463
+ positionMode: this.positionMode(),
4464
+ });
4465
+ this.onOpen.emit();
4466
+ }
4467
+ }
4468
+ close() {
4469
+ if (!this.popupRef) {
4494
4470
  return;
4495
4471
  }
4496
- this.hide();
4472
+ this.popupRef.close();
4473
+ this.popupRef = null;
4474
+ this.onClose.emit();
4497
4475
  }
4498
- hide() {
4499
- this.visible.set(false);
4476
+ cancel() {
4477
+ this.onCancel.emit();
4478
+ this.closePopupOnCancel() && this.close();
4500
4479
  }
4501
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitPopupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
4502
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: "anchor", closeOnOutsideClick: "closeOnOutsideClick", anchorHorizontalAlign: "anchorHorizontalAlign", popupHorizontalAlign: "popupHorizontalAlign", showFooter: "showFooter", cancelButtonLabel: "cancelButtonLabel", applyButtonLabel: "applyButtonLabel", isApplyButtonDisabled: "isApplyButtonDisabled", positionMode: "positionMode" }, outputs: { cancel: "cancel", apply: "apply" }, host: { listeners: { "document:click": "documentClick($event)" } }, ngImport: i0, template: "@if (visible()) {\n <kendo-popup class=\"kit-popup\"\n [anchor]=\"anchor\"\n [popupAlign]=\"popupAlign\"\n [anchorAlign]=\"anchorAlign\"\n [positionMode]=\"positionMode\">\n <ng-content\n ></ng-content>\n @if (showFooter) {\n <div class=\"footer\">\n <kit-button [label]=\"cancelButtonLabel\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"cancel.emit()\"\n ></kit-button>\n <kit-button [label]=\"applyButtonLabel\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"isApplyButtonDisabled\"\n (clicked)=\"apply.emit()\"\n ></kit-button>\n </div>\n }\n </kendo-popup>\n}\n", styles: ["::ng-deep .kit-popup .k-popup{box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .kit-popup .k-popup .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"], dependencies: [{ kind: "ngmodule", type: PopupModule }, { kind: "component", type: i1$a.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4480
+ apply() {
4481
+ this.onApply.emit();
4482
+ this.close();
4483
+ }
4484
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitPopupComponent, deps: [{ token: i1$a.PopupService }], target: i0.ɵɵFactoryTarget.Component }); }
4485
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, applyButtonLabel: { classPropertyName: "applyButtonLabel", publicName: "applyButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isApplyButtonDisabled: { classPropertyName: "isApplyButtonDisabled", publicName: "isApplyButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, positionMode: { classPropertyName: "positionMode", publicName: "positionMode", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, closePopupOnCancel: { classPropertyName: "closePopupOnCancel", publicName: "closePopupOnCancel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCancel: "onCancel", onApply: "onApply", onOpen: "onOpen", onClose: "onClose" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #popupTemplate>\n <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\n @if (showFooter()) {\n <div class=\"footer\">\n <kit-button [label]=\"cancelButtonLabel()\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"cancel()\"\n ></kit-button>\n <kit-button [label]=\"applyButtonLabel()\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"isApplyButtonDisabled()\"\n (clicked)=\"apply()\"\n ></kit-button>\n </div>\n }\n</ng-template>\n", styles: ["::ng-deep .k-popup{box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .k-popup .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4503
4486
  }
4504
4487
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitPopupComponent, decorators: [{
4505
4488
  type: Component,
4506
- args: [{ selector: 'kit-popup', imports: [
4507
- PopupModule,
4489
+ args: [{ selector: 'kit-popup', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
4508
4490
  KitButtonModule,
4509
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n <kendo-popup class=\"kit-popup\"\n [anchor]=\"anchor\"\n [popupAlign]=\"popupAlign\"\n [anchorAlign]=\"anchorAlign\"\n [positionMode]=\"positionMode\">\n <ng-content\n ></ng-content>\n @if (showFooter) {\n <div class=\"footer\">\n <kit-button [label]=\"cancelButtonLabel\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"cancel.emit()\"\n ></kit-button>\n <kit-button [label]=\"applyButtonLabel\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"isApplyButtonDisabled\"\n (clicked)=\"apply.emit()\"\n ></kit-button>\n </div>\n }\n </kendo-popup>\n}\n", styles: ["::ng-deep .kit-popup .k-popup{box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .kit-popup .k-popup .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"] }]
4510
- }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { anchor: [{
4511
- type: Input
4512
- }], closeOnOutsideClick: [{
4513
- type: Input
4514
- }], anchorHorizontalAlign: [{
4515
- type: Input
4516
- }], popupHorizontalAlign: [{
4517
- type: Input
4518
- }], showFooter: [{
4519
- type: Input
4520
- }], cancelButtonLabel: [{
4521
- type: Input
4522
- }], applyButtonLabel: [{
4523
- type: Input
4524
- }], isApplyButtonDisabled: [{
4525
- type: Input
4526
- }], positionMode: [{
4527
- type: Input
4528
- }], cancel: [{
4529
- type: Output
4530
- }], apply: [{
4531
- type: Output
4491
+ NgTemplateOutlet,
4492
+ ], template: "<ng-template #popupTemplate>\n <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\n @if (showFooter()) {\n <div class=\"footer\">\n <kit-button [label]=\"cancelButtonLabel()\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"cancel()\"\n ></kit-button>\n <kit-button [label]=\"applyButtonLabel()\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"isApplyButtonDisabled()\"\n (clicked)=\"apply()\"\n ></kit-button>\n </div>\n }\n</ng-template>\n", styles: ["::ng-deep .k-popup{box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .k-popup .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"] }]
4493
+ }], ctorParameters: () => [{ type: i1$a.PopupService }], propDecorators: { popupTemplate: [{
4494
+ type: ViewChild,
4495
+ args: ['popupTemplate']
4532
4496
  }], documentClick: [{
4533
4497
  type: HostListener,
4534
4498
  args: ['document:click', ['$event']]
@@ -4684,10 +4648,22 @@ class KitProfileMenuComponent {
4684
4648
  }
4685
4649
  onClick(item) {
4686
4650
  item?.action && item.action();
4687
- this.userMenu.hide();
4651
+ this.popup.close();
4652
+ }
4653
+ toggle() {
4654
+ this.popup.toggle({
4655
+ anchorAlign: {
4656
+ horizontal: KitPopupAlignHorizontal.RIGHT,
4657
+ vertical: KitPopupAlignVertical.BOTTOM,
4658
+ },
4659
+ popupAlign: {
4660
+ horizontal: KitPopupAlignHorizontal.RIGHT,
4661
+ vertical: KitPopupAlignVertical.TOP,
4662
+ },
4663
+ });
4688
4664
  }
4689
4665
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4690
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "userMenu", first: true, predicate: ["userMenu"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [class.active]=\"userMenu.visible()\"\n (click)=\"userMenu.toggle()\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.menu-popup .menu-item-icon{display:block;width:18px;height:18px}.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}.menu-popup .menu-item-text{font-size:14px;font-weight:400}.menu-popup ::ng-deep .k-popup{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitAvatarModule }, { kind: "component", type: KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "closeOnOutsideClick", "anchorHorizontalAlign", "popupHorizontalAlign", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode"], outputs: ["cancel", "apply"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4666
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [class.active]=\"popup.isPopupOpen\"\n (click)=\"toggle()\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #popup\n popupClass=\"menu-popup\"\n [anchor]=\"menuButton\"\n [content]=\"content\">\n </kit-popup>\n</div>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .menu-popup .k-popup{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitAvatarModule }, { kind: "component", type: KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4691
4667
  }
4692
4668
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitProfileMenuComponent, decorators: [{
4693
4669
  type: Component,
@@ -4697,7 +4673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
4697
4673
  KitPopupComponent,
4698
4674
  KitSvgIconModule,
4699
4675
  RouterLink,
4700
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [class.active]=\"userMenu.visible()\"\n (click)=\"userMenu.toggle()\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #userMenu\n class=\"menu-popup\"\n [anchor]=\"menuButton\"\n [anchorHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\"\n [popupHorizontalAlign]=\"KitPopupAlignHorizontal.RIGHT\">\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n </kit-popup>\n</div>\n\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}.menu-popup .popup-header-details{min-width:0;font-size:14px}.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}.menu-popup .menu-item-icon{display:block;width:18px;height:18px}.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}.menu-popup .menu-item-text{font-size:14px;font-weight:400}.menu-popup ::ng-deep .k-popup{padding:0}\n"] }]
4676
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n <button #menuButton\n class=\"menu-button\"\n [class.active]=\"popup.isPopupOpen\"\n (click)=\"toggle()\">\n <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n [name]=\"userName\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <kit-svg-icon class=\"menu-button-icon\"\n [icon]=\"KitSvgIcon.CARET_DOWN\"\n ></kit-svg-icon>\n </button>\n\n <kit-popup #popup\n popupClass=\"menu-popup\"\n [anchor]=\"menuButton\"\n [content]=\"content\">\n </kit-popup>\n</div>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"popup-header\">\n <kit-avatar class=\"popup-header-avatar\"\n [name]=\"userName\"\n [size]=\"KitAvatarSize.LARGE\"\n [imageSrc]=\"avatarImageSrc\"\n ></kit-avatar>\n <div class=\"popup-header-details\">\n @if (userName) {\n <div class=\"popup-header-name\">{{ userName }}</div>\n }\n @if (companyName) {\n <div class=\"popup-header-company\">{{ companyName }}</div>\n }\n </div>\n </div>\n <div class=\"popup-menu\">\n @for (item of menuItems; track item) {\n <a class=\"menu-item\"\n [ngClass]=\"item.cssClass\"\n [routerLink]=\"item.link\"\n (click)=\"onClick(item)\">\n @if (item.icon) {\n <kit-svg-icon class=\"menu-item-icon\"\n [icon]=\"item.icon\"\n [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n <span class=\"menu-item-text\">{{ item.title }}</span>\n </a>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .menu-popup .k-popup{padding:0}\n"] }]
4701
4677
  }], propDecorators: { menuItems: [{
4702
4678
  type: Input
4703
4679
  }], userName: [{
@@ -4706,9 +4682,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
4706
4682
  type: Input
4707
4683
  }], avatarImageSrc: [{
4708
4684
  type: Input
4709
- }], userMenu: [{
4685
+ }], popup: [{
4710
4686
  type: ViewChild,
4711
- args: ['userMenu']
4687
+ args: ['popup']
4712
4688
  }] } });
4713
4689
 
4714
4690
  class KitTabComponent {
@@ -5468,20 +5444,21 @@ class KitScrollNavigationComponent {
5468
5444
  }
5469
5445
  let index = 0;
5470
5446
  const contentScrollTop = contentElement.scrollTop + (contentElement.clientHeight / 2);
5447
+ const scrolledSectionIndexes = new Set();
5471
5448
  for (const section of this.items.toArray()) {
5472
5449
  const sectionElement = section.sectionContent?.nativeElement;
5473
5450
  const sectionTop = sectionElement.offsetTop;
5474
5451
  const sectionHeight = sectionElement.offsetHeight;
5475
- if ((contentElement.scrollTop + contentElement.clientHeight) === contentElement.scrollHeight) {
5476
- this.activeSectionIndex.set(this.items.length - 1);
5477
- break;
5452
+ const isFullyVisibleOnScreen = sectionTop <= contentScrollTop && ((sectionTop + sectionHeight) >= contentScrollTop);
5453
+ if ((sectionTop + sectionHeight < (contentElement.scrollTop + contentElement.clientHeight)) || isFullyVisibleOnScreen) {
5454
+ scrolledSectionIndexes.add(index);
5478
5455
  }
5479
- if (sectionTop <= contentScrollTop && ((sectionTop + sectionHeight) >= contentScrollTop)) {
5480
- this.activeSectionIndex.set(index);
5481
- break;
5456
+ if ((contentElement.scrollTop + contentElement.clientHeight) === contentElement.scrollHeight) {
5457
+ scrolledSectionIndexes.add(index);
5482
5458
  }
5483
5459
  index++;
5484
5460
  }
5461
+ this.activeSectionIndex.set(Array.from(scrolledSectionIndexes)[scrolledSectionIndexes.size - 1]);
5485
5462
  }
5486
5463
  scrollToSection(index) {
5487
5464
  const section = this.items?.toArray()[index]?.sectionContent?.nativeElement;
@@ -5504,11 +5481,11 @@ class KitScrollNavigationComponent {
5504
5481
  }
5505
5482
  }
5506
5483
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitScrollNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5507
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitScrollNavigationComponent, isStandalone: false, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n @for (item of items; track item) {\n <kit-button class=\"nav-item\"\n [class.active]=\"activeSectionIndex() === $index\"\n [label]=\"item.title\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.SMALL\"\n [disabled]=\"isNavigationBtnDisabled()\"\n (clicked)=\"scrollToSection($index)\"\n ></kit-button>\n @if (!$last) {\n <kit-svg-icon class=\"nav-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n }\n }\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of items; track item) {\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n ></ng-container>\n }\n </div>\n</div>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;gap:34px;height:100%}.kit-scroll-navigation-items{display:flex;align-items:center;gap:18px;padding-bottom:27px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation .nav-icon{width:16px;height:16px;stroke:var(--ui-kit-color-grey-10);fill:none}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
5484
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitScrollNavigationComponent, isStandalone: false, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n @for (item of items; track item) {\n <kit-button class=\"nav-item\"\n [class.active]=\"activeSectionIndex() === $index\"\n [label]=\"item.title\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.SMALL\"\n [disabled]=\"isNavigationBtnDisabled()\"\n (clicked)=\"scrollToSection($index)\"\n ></kit-button>\n }\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of items; track item) {\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n ></ng-container>\n }\n </div>\n</div>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;gap:34px;height:100%}.kit-scroll-navigation-items{display:flex;align-items:center;gap:18px;padding-bottom:27px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation .nav-icon{width:16px;height:16px;stroke:var(--ui-kit-color-grey-10);fill:none}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
5508
5485
  }
5509
5486
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitScrollNavigationComponent, decorators: [{
5510
5487
  type: Component,
5511
- args: [{ selector: 'kit-scroll-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n @for (item of items; track item) {\n <kit-button class=\"nav-item\"\n [class.active]=\"activeSectionIndex() === $index\"\n [label]=\"item.title\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.SMALL\"\n [disabled]=\"isNavigationBtnDisabled()\"\n (clicked)=\"scrollToSection($index)\"\n ></kit-button>\n @if (!$last) {\n <kit-svg-icon class=\"nav-icon\"\n [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n ></kit-svg-icon>\n }\n }\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of items; track item) {\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n ></ng-container>\n }\n </div>\n</div>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;gap:34px;height:100%}.kit-scroll-navigation-items{display:flex;align-items:center;gap:18px;padding-bottom:27px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation .nav-icon{width:16px;height:16px;stroke:var(--ui-kit-color-grey-10);fill:none}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"] }]
5488
+ args: [{ selector: 'kit-scroll-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n @for (item of items; track item) {\n <kit-button class=\"nav-item\"\n [class.active]=\"activeSectionIndex() === $index\"\n [label]=\"item.title\"\n [type]=\"KitButtonType.GHOST\"\n [kind]=\"KitButtonKind.SMALL\"\n [disabled]=\"isNavigationBtnDisabled()\"\n (clicked)=\"scrollToSection($index)\"\n ></kit-button>\n }\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of items; track item) {\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n ></ng-container>\n }\n </div>\n</div>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;gap:34px;height:100%}.kit-scroll-navigation-items{display:flex;align-items:center;gap:18px;padding-bottom:27px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation .nav-icon{width:16px;height:16px;stroke:var(--ui-kit-color-grey-10);fill:none}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"] }]
5512
5489
  }], propDecorators: { items: [{
5513
5490
  type: ContentChildren,
5514
5491
  args: [KitScrollNavigationSectionComponent]
@@ -6033,5 +6010,5 @@ const kitDataStateToODataString = (state) => toODataString(state);
6033
6010
  * Generated bundle index. Do not edit.
6034
6011
  */
6035
6012
 
6036
- export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogActionsModule, KitDialogComponent, KitDialogModule, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridModule, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxState, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitScrollNavigationComponent, KitScrollNavigationModule, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID, kitDataStateToODataString };
6013
+ export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridModule, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxState, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitScrollNavigationComponent, KitScrollNavigationModule, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID, kitDataStateToODataString };
6037
6014
  //# sourceMappingURL=indigina-ui-kit.mjs.map