ng-zenduit 2.2.4 → 2.3.0

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 (6) hide show
  1. package/fesm2022/ng-zenduit.mjs +134 -58
  2. package/fesm2022/ng-zenduit.mjs.map +1 -1
  3. package/package.json +2 -2
  4. package/styles/all.scss +0 -1
  5. package/types/ng-zenduit.d.ts +43 -10
  6. package/styles/snackbar.scss +0 -91
package/fesm2022/ng-zenduit.mjs CHANGED
@@ -1,6 +1,8 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, EventEmitter, Input, Output, ChangeDetectionStrategy, Component, HostListener, forwardRef, HostBinding, ViewChild, InjectionToken, Inject, Directive, ContentChild, Optional, ViewEncapsulation, NgModule } from '@angular/core';
3
- import { show } from 'node-snackbar';
2
+ import { EventEmitter, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, Injector, Injectable, HostListener, forwardRef, HostBinding, ViewChild, InjectionToken, Inject, Directive, ContentChild, Optional, NgModule } from '@angular/core';
3
+ import * as i1$1 from '@angular/cdk/overlay';
4
+ import { Overlay, OverlayModule } from '@angular/cdk/overlay';
5
+ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
4
6
  import * as i1 from '@angular/common';
5
7
  import { CommonModule } from '@angular/common';
6
8
  import * as i2$1 from '@angular/forms';
@@ -11,9 +13,6 @@ import { PhoneNumberUtil } from 'google-libphonenumber';
11
13
  import * as i2 from '@ngx-translate/core';
12
14
  import { TranslateModule } from '@ngx-translate/core';
13
15
  import moment from 'moment/moment';
14
- import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
15
- import * as i1$1 from '@angular/cdk/overlay';
16
- import { OverlayModule } from '@angular/cdk/overlay';
17
16
  import uniqBy from 'lodash.uniqby';
18
17
  import { fabric } from 'fabric';
19
18
  import { BehaviorSubject, Subject, Subscription, fromEvent } from 'rxjs';
@@ -26,57 +25,106 @@ import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
26
25
  import * as i1$3 from 'ng2-charts';
27
26
  import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
28
27
 
28
+ /**
29
+ * Presentational card rendered by {@link ZenNotifyService} through a CDK overlay.
30
+ * It draws the status icon, the message and an optional dismiss button, styled
31
+ * per the ZenduONE design system (Untitled UI "Alert").
32
+ */
33
+ class ZenSnackbarComponent {
34
+ constructor() {
35
+ this.message = '';
36
+ this.type = 'info';
37
+ this.hasDismiss = true;
38
+ /** Emitted when the user clicks the dismiss button. */
39
+ this.dismiss = new EventEmitter();
40
+ }
41
+ onDismiss() {
42
+ this.dismiss.emit();
43
+ }
44
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
45
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenSnackbarComponent, isStandalone: false, selector: "zen-snackbar", inputs: { message: "message", type: "type", hasDismiss: "hasDismiss" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div\n class=\"zen-snackbar\"\n role=\"alert\"\n [class.zen-snackbar--info]=\"type === 'info'\"\n [class.zen-snackbar--neutral]=\"type === 'neutral'\"\n [class.zen-snackbar--success]=\"type === 'success'\"\n [class.zen-snackbar--warn]=\"type === 'warn'\"\n [class.zen-snackbar--error]=\"type === 'error'\">\n\n <!-- Status icon -->\n <span class=\"zen-snackbar__icon\">\n @switch (type) {\n @case ('success') {\n <!-- check-circle -->\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n @case ('warn') {\n <!-- alert-triangle -->\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 9V13M12 17H12.01M10.2899 3.86001L1.81995 18C1.64536 18.3024 1.55291 18.6453 1.55193 18.9945C1.55096 19.3437 1.6415 19.6871 1.81439 19.9905C1.98728 20.2939 2.23673 20.5468 2.53774 20.7239C2.83875 20.901 3.1808 20.9962 3.52995 21H20.4699C20.8191 20.9962 21.1611 20.901 21.4621 20.7239C21.7632 20.5468 22.0126 20.2939 22.1855 19.9905C22.3584 19.6871 22.4489 19.3437 22.448 18.9945C22.447 18.6453 22.3545 18.3024 22.1799 18L13.7099 3.86001C13.5317 3.56611 13.2807 3.32313 12.9812 3.15449C12.6817 2.98585 12.3438 2.89726 11.9999 2.89726C11.6561 2.89726 11.3182 2.98585 11.0187 3.15449C10.7192 3.32313 10.4682 3.56611 10.2899 3.86001Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n @case ('error') {\n <!-- alert-circle -->\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n @default {\n <!-- info (also used for the 'neutral' variant) -->\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n }\n </span>\n\n <!-- Message -->\n <p class=\"zen-snackbar__message\">{{ message }}</p>\n\n <!-- Dismiss -->\n @if (hasDismiss) {\n <button\n class=\"zen-snackbar__close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"onDismiss()\">\n <!-- x -->\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18M6 6L18 18\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n }\n</div>\n", styles: [".zen-snackbar-overlay{pointer-events:auto}.zen-snackbar{display:flex;align-items:flex-start;gap:12px;box-sizing:border-box;min-width:320px;max-width:573px;padding:16px;border:1px solid transparent;border-radius:8px;font-family:Inter,sans-serif;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;animation:zen-snackbar-in .16s ease-out}.zen-snackbar__message{flex:1 1 0;min-width:0;margin:0;font-weight:500;font-size:14px;line-height:20px;word-break:break-word;color:inherit}.zen-snackbar__icon{flex-shrink:0;display:flex;width:20px;height:20px}.zen-snackbar__icon svg{display:block;width:20px;height:20px}.zen-snackbar__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin:0;border:0;background:transparent;border-radius:6px;color:#98a2b3;cursor:pointer;transition:color .12s ease}.zen-snackbar__close svg{display:block;width:20px;height:20px}.zen-snackbar__close:hover{color:#667085}.zen-snackbar--info{background:#fafdff;border-color:#88c1f1;color:#105494}.zen-snackbar--info .zen-snackbar__icon{color:#136ab6}.zen-snackbar--neutral{background:#fcfcfd;border-color:#d0d5dd;color:#344054}.zen-snackbar--neutral .zen-snackbar__icon{color:#475467}.zen-snackbar--success{background:#f6fef9;border-color:#6ce9a6;color:#027a48}.zen-snackbar--success .zen-snackbar__icon{color:#039855}.zen-snackbar--warn{background:#fffcf5;border-color:#fec84b;color:#b54708}.zen-snackbar--warn .zen-snackbar__icon{color:#dc6803}.zen-snackbar--error{background:#fffbfa;border-color:#fda29b;color:#b42318}.zen-snackbar--error .zen-snackbar__icon{color:#d92d20}@keyframes zen-snackbar-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
46
+ }
47
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSnackbarComponent, decorators: [{
48
+ type: Component,
49
+ args: [{ selector: 'zen-snackbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n class=\"zen-snackbar\"\n role=\"alert\"\n [class.zen-snackbar--info]=\"type === 'info'\"\n [class.zen-snackbar--neutral]=\"type === 'neutral'\"\n [class.zen-snackbar--success]=\"type === 'success'\"\n [class.zen-snackbar--warn]=\"type === 'warn'\"\n [class.zen-snackbar--error]=\"type === 'error'\">\n\n <!-- Status icon -->\n <span class=\"zen-snackbar__icon\">\n @switch (type) {\n @case ('success') {\n <!-- check-circle -->\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n @case ('warn') {\n <!-- alert-triangle -->\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 9V13M12 17H12.01M10.2899 3.86001L1.81995 18C1.64536 18.3024 1.55291 18.6453 1.55193 18.9945C1.55096 19.3437 1.6415 19.6871 1.81439 19.9905C1.98728 20.2939 2.23673 20.5468 2.53774 20.7239C2.83875 20.901 3.1808 20.9962 3.52995 21H20.4699C20.8191 20.9962 21.1611 20.901 21.4621 20.7239C21.7632 20.5468 22.0126 20.2939 22.1855 19.9905C22.3584 19.6871 22.4489 19.3437 22.448 18.9945C22.447 18.6453 22.3545 18.3024 22.1799 18L13.7099 3.86001C13.5317 3.56611 13.2807 3.32313 12.9812 3.15449C12.6817 2.98585 12.3438 2.89726 11.9999 2.89726C11.6561 2.89726 11.3182 2.98585 11.0187 3.15449C10.7192 3.32313 10.4682 3.56611 10.2899 3.86001Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n @case ('error') {\n <!-- alert-circle -->\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n @default {\n <!-- info (also used for the 'neutral' variant) -->\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n }\n }\n </span>\n\n <!-- Message -->\n <p class=\"zen-snackbar__message\">{{ message }}</p>\n\n <!-- Dismiss -->\n @if (hasDismiss) {\n <button\n class=\"zen-snackbar__close\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"onDismiss()\">\n <!-- x -->\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18M6 6L18 18\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n }\n</div>\n", styles: [".zen-snackbar-overlay{pointer-events:auto}.zen-snackbar{display:flex;align-items:flex-start;gap:12px;box-sizing:border-box;min-width:320px;max-width:573px;padding:16px;border:1px solid transparent;border-radius:8px;font-family:Inter,sans-serif;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;animation:zen-snackbar-in .16s ease-out}.zen-snackbar__message{flex:1 1 0;min-width:0;margin:0;font-weight:500;font-size:14px;line-height:20px;word-break:break-word;color:inherit}.zen-snackbar__icon{flex-shrink:0;display:flex;width:20px;height:20px}.zen-snackbar__icon svg{display:block;width:20px;height:20px}.zen-snackbar__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin:0;border:0;background:transparent;border-radius:6px;color:#98a2b3;cursor:pointer;transition:color .12s ease}.zen-snackbar__close svg{display:block;width:20px;height:20px}.zen-snackbar__close:hover{color:#667085}.zen-snackbar--info{background:#fafdff;border-color:#88c1f1;color:#105494}.zen-snackbar--info .zen-snackbar__icon{color:#136ab6}.zen-snackbar--neutral{background:#fcfcfd;border-color:#d0d5dd;color:#344054}.zen-snackbar--neutral .zen-snackbar__icon{color:#475467}.zen-snackbar--success{background:#f6fef9;border-color:#6ce9a6;color:#027a48}.zen-snackbar--success .zen-snackbar__icon{color:#039855}.zen-snackbar--warn{background:#fffcf5;border-color:#fec84b;color:#b54708}.zen-snackbar--warn .zen-snackbar__icon{color:#dc6803}.zen-snackbar--error{background:#fffbfa;border-color:#fda29b;color:#b42318}.zen-snackbar--error .zen-snackbar__icon{color:#d92d20}@keyframes zen-snackbar-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"] }]
50
+ }], propDecorators: { message: [{
51
+ type: Input
52
+ }], type: [{
53
+ type: Input
54
+ }], hasDismiss: [{
55
+ type: Input
56
+ }], dismiss: [{
57
+ type: Output
58
+ }] } });
59
+
29
60
  class ZenNotifyService {
61
+ constructor() {
62
+ this._overlay = inject(Overlay);
63
+ this._injector = inject(Injector);
64
+ /** The currently shown snackbar overlay, if any. */
65
+ this._overlayRef = null;
66
+ /** Auto-dismiss timer handle for the current snackbar. */
67
+ this._timer = null;
68
+ }
30
69
  info(msg, duration = 5000, hasDismiss = true) {
31
70
  console.log(msg);
32
- show({
33
- pos: "top-center",
34
- text: msg,
35
- textColor: "white",
36
- duration: duration,
37
- actionText: "dismiss",
38
- actionTextColor: "white",
39
- showAction: hasDismiss
40
- });
71
+ this._show(msg, 'info', duration, hasDismiss);
72
+ }
73
+ neutral(msg, duration = 5000, hasDismiss = true) {
74
+ console.log(msg);
75
+ this._show(msg, 'neutral', duration, hasDismiss);
41
76
  }
42
77
  success(msg, duration = 5000, hasDismiss = true) {
43
78
  console.log(msg);
44
- show({
45
- pos: "top-center",
46
- text: msg,
47
- textColor: "white",
48
- backgroundColor: "#5cbb3a", // $color-success-primary
49
- duration: duration,
50
- actionText: "dismiss",
51
- actionTextColor: "white",
52
- showAction: hasDismiss
53
- });
79
+ this._show(msg, 'success', duration, hasDismiss);
54
80
  }
55
81
  warn(msg, duration = 5000, hasDismiss = true) {
56
82
  console.warn(msg);
57
- show({
58
- pos: "top-center",
59
- text: msg,
60
- textColor: "white",
61
- backgroundColor: "#f1b10b", // $color-alert-primary
62
- duration: duration,
63
- actionText: "dismiss",
64
- actionTextColor: "white",
65
- showAction: hasDismiss
66
- });
83
+ this._show(msg, 'warn', duration, hasDismiss);
67
84
  }
68
85
  error(err, duration = 5000, hasDismiss = true) {
69
86
  console.error(err);
70
- show({
71
- pos: "top-center",
72
- text: this.getErrorMessage(err),
73
- textColor: "white",
74
- backgroundColor: "#dc3e33", // $color-error-primary
75
- duration: duration,
76
- actionText: "dismiss",
77
- actionTextColor: "white",
78
- showAction: hasDismiss
87
+ this._show(this.getErrorMessage(err), 'error', duration, hasDismiss);
88
+ }
89
+ /**
90
+ * Renders the snackbar through a CDK overlay so it shares the browser top
91
+ * layer with CDK dialogs and always paints above them. Only one snackbar is
92
+ * shown at a time — a new call replaces the previous one.
93
+ */
94
+ _show(message, type, duration, hasDismiss) {
95
+ // Replace any snackbar that is currently on screen.
96
+ this._dismiss();
97
+ const positionStrategy = this._overlay
98
+ .position()
99
+ .global()
100
+ .top('24px')
101
+ .centerHorizontally();
102
+ this._overlayRef = this._overlay.create({
103
+ positionStrategy,
104
+ scrollStrategy: this._overlay.scrollStrategies.noop(),
105
+ panelClass: 'zen-snackbar-overlay',
79
106
  });
107
+ const portal = new ComponentPortal(ZenSnackbarComponent, null, this._injector);
108
+ const snackbarRef = this._overlayRef.attach(portal);
109
+ snackbarRef.instance.message = message;
110
+ snackbarRef.instance.type = type;
111
+ snackbarRef.instance.hasDismiss = hasDismiss;
112
+ snackbarRef.instance.dismiss.subscribe(() => this._dismiss());
113
+ snackbarRef.changeDetectorRef.markForCheck();
114
+ if (duration && duration > 0) {
115
+ this._timer = setTimeout(() => this._dismiss(), duration);
116
+ }
117
+ }
118
+ /** Disposes the active snackbar overlay and clears the auto-dismiss timer. */
119
+ _dismiss() {
120
+ if (this._timer) {
121
+ clearTimeout(this._timer);
122
+ this._timer = null;
123
+ }
124
+ if (this._overlayRef) {
125
+ this._overlayRef.dispose();
126
+ this._overlayRef = null;
127
+ }
80
128
  }
81
129
  getErrorMessage(ex) {
82
130
  if (!ex) {
@@ -7405,10 +7453,26 @@ class ZenduDatePickerDropdownComponent {
7405
7453
  && this.endDate.getTime() === this._appliedPresetEndTime) {
7406
7454
  return this._translate.instant(this._appliedPresetLabel);
7407
7455
  }
7456
+ // Show the preset name when the range matches one
7457
+ const presetLabel = this.matchingPresetLabel(this.startDate, this.endDate);
7458
+ if (presetLabel) {
7459
+ return this._translate.instant(presetLabel);
7460
+ }
7408
7461
  return `${this.formatDate(this.startDate)} - ${this.formatDate(this.endDate)}`;
7409
7462
  }
7410
7463
  return this.placeholder || this._translate.instant('Select dates');
7411
7464
  }
7465
+ matchingPresetLabel(start, end) {
7466
+ for (const preset of this.activePresets) {
7467
+ const range = preset.getRange();
7468
+ if (range.start && range.end
7469
+ && moment(start).isSame(range.start, 'day')
7470
+ && moment(end).isSame(range.end, 'day')) {
7471
+ return preset.label;
7472
+ }
7473
+ }
7474
+ return null;
7475
+ }
7412
7476
  get legendMarkers() {
7413
7477
  return (this.dateMarkers || []).filter(m => !!m.title);
7414
7478
  }
@@ -7481,22 +7545,30 @@ class ZenduDatePickerDropdownComponent {
7481
7545
  updateDropdownPosition() {
7482
7546
  if (!this.triggerBtn)
7483
7547
  return;
7484
- setTimeout(() => {
7485
- const rect = this.triggerBtn.nativeElement.getBoundingClientRect();
7548
+ // Place below the trigger synchronously so the panel opens without a flash
7549
+ const rect = this.triggerBtn.nativeElement.getBoundingClientRect();
7550
+ this.dropdownStyle = {
7551
+ left: `${rect.left}px`,
7552
+ top: `${rect.bottom + 8}px`
7553
+ };
7554
+ // Once rendered, flip above or pin to the viewport if it overflows
7555
+ requestAnimationFrame(() => {
7486
7556
  const dropdownEl = this._element.nativeElement.querySelector('.dropdown-menu');
7487
- const dropdownHeight = dropdownEl ? dropdownEl.scrollHeight : 500;
7488
- const spaceBelow = window.innerHeight - rect.bottom - 8;
7489
- const spaceAbove = rect.top - 8;
7557
+ if (!dropdownEl)
7558
+ return;
7559
+ const r = this.triggerBtn.nativeElement.getBoundingClientRect();
7560
+ const dropdownHeight = dropdownEl.scrollHeight;
7561
+ const spaceBelow = window.innerHeight - r.bottom - 8;
7562
+ const spaceAbove = r.top - 8;
7490
7563
  const margin = 16;
7491
7564
  const viewportHeight = window.innerHeight;
7492
- const style = { left: `${rect.left}px` };
7493
7565
  if (spaceBelow >= dropdownHeight) {
7494
- // Fits below the trigger
7495
- style['top'] = `${rect.bottom + 8}px`;
7566
+ return;
7496
7567
  }
7497
- else if (spaceAbove >= dropdownHeight) {
7568
+ const style = { left: `${r.left}px` };
7569
+ if (spaceAbove >= dropdownHeight) {
7498
7570
  // Fits above the trigger
7499
- style['bottom'] = `${viewportHeight - rect.top + 8}px`;
7571
+ style['bottom'] = `${viewportHeight - r.top + 8}px`;
7500
7572
  }
7501
7573
  else {
7502
7574
  // Doesn't fit either way — pin to viewport so full content is visible
@@ -9475,7 +9547,8 @@ class NgZenduitModule {
9475
9547
  ZenModulePopupComponent,
9476
9548
  ZenChartComponent,
9477
9549
  ZenProgressStepsComponent,
9478
- ZenStepBaseComponent], imports: [CommonModule,
9550
+ ZenStepBaseComponent,
9551
+ ZenSnackbarComponent], imports: [CommonModule,
9479
9552
  FormsModule,
9480
9553
  DragDropModule,
9481
9554
  SignaturePadComponent,
@@ -9529,7 +9602,8 @@ class NgZenduitModule {
9529
9602
  ZenModulePopupComponent,
9530
9603
  ZenChartComponent,
9531
9604
  ZenProgressStepsComponent,
9532
- ZenStepBaseComponent] }); }
9605
+ ZenStepBaseComponent,
9606
+ ZenSnackbarComponent] }); }
9533
9607
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgZenduitModule, providers: [
9534
9608
  OpenCVService,
9535
9609
  provideCharts(withDefaultRegisterables()),
@@ -9603,7 +9677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
9603
9677
  ZenModulePopupComponent,
9604
9678
  ZenChartComponent,
9605
9679
  ZenProgressStepsComponent,
9606
- ZenStepBaseComponent
9680
+ ZenStepBaseComponent,
9681
+ ZenSnackbarComponent
9607
9682
  ],
9608
9683
  exports: [
9609
9684
  ZenduCheckboxComponent,
@@ -9654,7 +9729,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
9654
9729
  ZenModulePopupComponent,
9655
9730
  ZenChartComponent,
9656
9731
  ZenProgressStepsComponent,
9657
- ZenStepBaseComponent
9732
+ ZenStepBaseComponent,
9733
+ ZenSnackbarComponent
9658
9734
  ], imports: [CommonModule,
9659
9735
  FormsModule,
9660
9736
  DragDropModule,
@@ -9682,5 +9758,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
9682
9758
  * Generated bundle index. Do not edit.
9683
9759
  */
9684
9760
 
9685
- export { DATEPICKER_POSITION, NgZenduitModule, ZEN_DATE_PICKER_DEFAULT_PRESETS, ZEN_ICON_CONFIG, ZenBadgeComponent, ZenButtonComponent, ZenChartComponent, ZenDropdownMenuComponent, ZenEldStatusComponent, ZenLiveViewPlayerComponent, ZenModulePopupComponent, ZenNavSearchComponent, ZenNotifyService, ZenProgressStepsComponent, ZenStepBaseComponent, ZenSubmoduleItemComponent, ZenSubpageItemComponent, ZenTooltipDirective, ZenTooltipPopupComponent, ZenduAvatarComponent, ZenduAvatarGroupComponent, ZenduAvatarLabelGroupComponent, ZenduAvatarProfilePhotoComponent, ZenduCardBlockComponent, ZenduCheckboxComponent, ZenduColorPickerComponent, ZenduColumnConfigurationComponent, ZenduDatePickerDropdownComponent, ZenduDatepickerComponent, ZenduDocScanner, ZenduFileUpload, ZenduFileUploaderComponent, ZenduFilterComponent, ZenduGroupsComponent, ZenduIconComponent, ZenduInputComponent, ZenduLocationSearch, ZenduMapComponent, ZenduMapPreviewComponent, ZenduPaginationBarComponent, ZenduPhoneInputComponent, ZenduProgress, ZenduRadioButtonComponent, ZenduSearchBoxComponent, ZenduSelectButtonDirective, ZenduSelectComponent, ZenduSelectOptionDirective, ZenduSelectValueDirective, ZenduSliderComponent, ZenduSortHeaderComponent, ZenduSpinner, ZenduTimepickerComponent, ZenduToggleComponent, ZenduToggleSlideComponent };
9761
+ export { DATEPICKER_POSITION, NgZenduitModule, ZEN_DATE_PICKER_DEFAULT_PRESETS, ZEN_ICON_CONFIG, ZenBadgeComponent, ZenButtonComponent, ZenChartComponent, ZenDropdownMenuComponent, ZenEldStatusComponent, ZenLiveViewPlayerComponent, ZenModulePopupComponent, ZenNavSearchComponent, ZenNotifyService, ZenProgressStepsComponent, ZenSnackbarComponent, ZenStepBaseComponent, ZenSubmoduleItemComponent, ZenSubpageItemComponent, ZenTooltipDirective, ZenTooltipPopupComponent, ZenduAvatarComponent, ZenduAvatarGroupComponent, ZenduAvatarLabelGroupComponent, ZenduAvatarProfilePhotoComponent, ZenduCardBlockComponent, ZenduCheckboxComponent, ZenduColorPickerComponent, ZenduColumnConfigurationComponent, ZenduDatePickerDropdownComponent, ZenduDatepickerComponent, ZenduDocScanner, ZenduFileUpload, ZenduFileUploaderComponent, ZenduFilterComponent, ZenduGroupsComponent, ZenduIconComponent, ZenduInputComponent, ZenduLocationSearch, ZenduMapComponent, ZenduMapPreviewComponent, ZenduPaginationBarComponent, ZenduPhoneInputComponent, ZenduProgress, ZenduRadioButtonComponent, ZenduSearchBoxComponent, ZenduSelectButtonDirective, ZenduSelectComponent, ZenduSelectOptionDirective, ZenduSelectValueDirective, ZenduSliderComponent, ZenduSortHeaderComponent, ZenduSpinner, ZenduTimepickerComponent, ZenduToggleComponent, ZenduToggleSlideComponent };
9686
9762
  //# sourceMappingURL=ng-zenduit.mjs.map