ng-zenduit 2.3.7 → 2.3.9
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.
- package/fesm2022/ng-zenduit.mjs +400 -107
- package/fesm2022/ng-zenduit.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/all.scss +1 -0
- package/styles/overlay.scss +23 -0
- package/types/ng-zenduit.d.ts +132 -16
package/fesm2022/ng-zenduit.mjs
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, Injector, Injectable, HostListener, forwardRef, booleanAttribute, numberAttribute, HostBinding, ViewChild, InjectionToken, Inject, Optional, Directive, ContentChild, NgModule } from '@angular/core';
|
|
3
|
-
import * as i1
|
|
2
|
+
import { EventEmitter, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, Injector, Injectable, ElementRef, HostListener, forwardRef, booleanAttribute, numberAttribute, HostBinding, ViewChild, InjectionToken, Inject, Optional, Directive, ContentChild, NgModule } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/cdk/overlay';
|
|
4
4
|
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
|
|
5
5
|
import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
6
|
-
import
|
|
6
|
+
import { ESCAPE } from '@angular/cdk/keycodes';
|
|
7
|
+
import { Subject, BehaviorSubject, Subscription, fromEvent } from 'rxjs';
|
|
8
|
+
import { filter, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
9
|
+
import * as i1$1 from '@angular/common';
|
|
7
10
|
import { CommonModule } from '@angular/common';
|
|
8
11
|
import * as i2$1 from '@angular/forms';
|
|
9
12
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
@@ -15,8 +18,6 @@ import { TranslateModule } from '@ngx-translate/core';
|
|
|
15
18
|
import moment from 'moment/moment';
|
|
16
19
|
import uniqBy from 'lodash.uniqby';
|
|
17
20
|
import { fabric } from 'fabric';
|
|
18
|
-
import { BehaviorSubject, Subject, Subscription, fromEvent } from 'rxjs';
|
|
19
|
-
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
20
21
|
import { SignaturePadComponent } from '@almothafar/angular-signature-pad';
|
|
21
22
|
import * as i1$2 from '@angular/common/http';
|
|
22
23
|
import { HttpHeaders, provideHttpClient, withXhr, withInterceptorsFromDi } from '@angular/common/http';
|
|
@@ -163,6 +164,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
163
164
|
}]
|
|
164
165
|
}] });
|
|
165
166
|
|
|
167
|
+
const DEFAULT_OFFSET_Y = 4;
|
|
168
|
+
const DEFAULT_VIEWPORT_MARGIN = 8;
|
|
169
|
+
/**
|
|
170
|
+
* Shared overlay primitive for the whole library. Opens a floating panel
|
|
171
|
+
* anchored to a trigger using CDK Overlay, with viewport-aware connected
|
|
172
|
+
* positioning that:
|
|
173
|
+
* - renders in the overlay container, so it is never clipped by an ancestor's
|
|
174
|
+
* `overflow` (cards, scroll areas) or by the viewport edge;
|
|
175
|
+
* - prefers opening below the trigger and flips above when there isn't room;
|
|
176
|
+
* - pushes itself into the viewport and shrinks to fit (`flexibleDimensions`),
|
|
177
|
+
* so the panel scrolls internally instead of overflowing;
|
|
178
|
+
* - tracks the trigger on scroll/resize (or closes, if asked).
|
|
179
|
+
*
|
|
180
|
+
* Consumers keep their own open/close state and panel markup — they call
|
|
181
|
+
* {@link openConnectedPanel} and react to {@link ZenConnectedPanelRef.closed}.
|
|
182
|
+
*/
|
|
183
|
+
class ZenduOverlayService {
|
|
184
|
+
constructor(_overlay, _ngZone) {
|
|
185
|
+
this._overlay = _overlay;
|
|
186
|
+
this._ngZone = _ngZone;
|
|
187
|
+
}
|
|
188
|
+
openConnectedPanel(config) {
|
|
189
|
+
const originEl = config.origin instanceof ElementRef
|
|
190
|
+
? config.origin.nativeElement
|
|
191
|
+
: config.origin;
|
|
192
|
+
const offsetY = config.offsetY ?? DEFAULT_OFFSET_Y;
|
|
193
|
+
const positionStrategy = this._overlay.position()
|
|
194
|
+
.flexibleConnectedTo(originEl)
|
|
195
|
+
.withPositions(this._positions(offsetY))
|
|
196
|
+
.withPush(true)
|
|
197
|
+
.withFlexibleDimensions(true)
|
|
198
|
+
.withGrowAfterOpen(true)
|
|
199
|
+
.withViewportMargin(config.viewportMargin ?? DEFAULT_VIEWPORT_MARGIN);
|
|
200
|
+
// Scroll is handled by our own capture-phase listener (set up below),
|
|
201
|
+
// which — unlike CDK's reposition/close strategies — also reacts to
|
|
202
|
+
// nested/non-cdkScrollable containers. Use a noop strategy so CDK
|
|
203
|
+
// doesn't additionally react and double the work on every scroll.
|
|
204
|
+
const scrollStrategy = this._overlay.scrollStrategies.noop();
|
|
205
|
+
const overlayConfig = {
|
|
206
|
+
positionStrategy,
|
|
207
|
+
scrollStrategy,
|
|
208
|
+
hasBackdrop: false,
|
|
209
|
+
disposeOnNavigation: true,
|
|
210
|
+
panelClass: this._panelClasses(config.panelClass)
|
|
211
|
+
};
|
|
212
|
+
// Width: match the trigger by default; otherwise honour the override.
|
|
213
|
+
// 'auto' leaves width unset so the panel sizes to its content.
|
|
214
|
+
const width = config.width ?? 'origin';
|
|
215
|
+
if (width === 'origin') {
|
|
216
|
+
overlayConfig.width = originEl.getBoundingClientRect().width;
|
|
217
|
+
}
|
|
218
|
+
else if (width !== 'auto') {
|
|
219
|
+
overlayConfig.width = width;
|
|
220
|
+
}
|
|
221
|
+
if (config.minWidth != null) {
|
|
222
|
+
overlayConfig.minWidth = config.minWidth;
|
|
223
|
+
}
|
|
224
|
+
const overlayRef = this._overlay.create(overlayConfig);
|
|
225
|
+
overlayRef.attach(new TemplatePortal(config.content, config.viewContainerRef));
|
|
226
|
+
const closed = new Subject();
|
|
227
|
+
const destroyed = new Subject();
|
|
228
|
+
// Ignore the pointer interaction that OPENED the panel. open() is
|
|
229
|
+
// commonly called from inside a click handler — the picker's own
|
|
230
|
+
// trigger, or a DIFFERENT element entirely (e.g. a host select's
|
|
231
|
+
// "Custom" option that reveals a date-picker and calls open()). That
|
|
232
|
+
// click bubbles to the document, and when another overlay is already
|
|
233
|
+
// open the shared CDK outside-click listener reports it as an "outside"
|
|
234
|
+
// event in the SAME task — dismissing the panel the instant it opens.
|
|
235
|
+
// A real outside click happens in a later task, so clearing the flag on
|
|
236
|
+
// the next macrotask lets those through while swallowing the opener.
|
|
237
|
+
let ignoreOpeningInteraction = true;
|
|
238
|
+
this._ngZone.runOutsideAngular(() => {
|
|
239
|
+
setTimeout(() => { ignoreOpeningInteraction = false; }, 0);
|
|
240
|
+
});
|
|
241
|
+
// Outside click — also ignore clicks on the trigger itself, so the
|
|
242
|
+
// consumer's own toggle handler isn't fighting a close from here.
|
|
243
|
+
overlayRef.outsidePointerEvents()
|
|
244
|
+
.pipe(filter(event => !ignoreOpeningInteraction && !originEl.contains(event.target)), takeUntil(destroyed))
|
|
245
|
+
.subscribe(() => closed.next('outside'));
|
|
246
|
+
// Escape key.
|
|
247
|
+
overlayRef.keydownEvents()
|
|
248
|
+
.pipe(filter(event => event.keyCode === ESCAPE), takeUntil(destroyed))
|
|
249
|
+
.subscribe(() => closed.next('escape'));
|
|
250
|
+
// Detach (e.g. scrollBehavior: 'close', or navigation).
|
|
251
|
+
overlayRef.detachments()
|
|
252
|
+
.pipe(takeUntil(destroyed))
|
|
253
|
+
.subscribe(() => closed.next('detach'));
|
|
254
|
+
// Keep the panel anchored while open. CDK's reposition/close scroll
|
|
255
|
+
// strategies react only to its ScrollDispatcher — a BUBBLE-phase global
|
|
256
|
+
// `document` scroll listener plus elements explicitly tagged
|
|
257
|
+
// `cdkScrollable`. But `scroll` does not bubble, so scrolling a nested
|
|
258
|
+
// `overflow:auto` container or a MatDialog body (which is not a
|
|
259
|
+
// registered cdkScrollable) never reaches that listener and the panel
|
|
260
|
+
// freezes / detaches. A CAPTURE-phase document listener sees scroll from
|
|
261
|
+
// ANY ancestor on the way down, closing that blind spot. It runs outside
|
|
262
|
+
// Angular and is rAF-throttled, so scrolling stays smooth.
|
|
263
|
+
let rafId = null;
|
|
264
|
+
const schedule = (action) => {
|
|
265
|
+
if (rafId != null)
|
|
266
|
+
return;
|
|
267
|
+
rafId = requestAnimationFrame(() => {
|
|
268
|
+
rafId = null;
|
|
269
|
+
action();
|
|
270
|
+
});
|
|
271
|
+
};
|
|
272
|
+
const onScroll = (event) => {
|
|
273
|
+
// Ignore scrolling *inside* the panel (e.g. the options list / a
|
|
274
|
+
// calendar's own overflow): the trigger hasn't moved, so there's
|
|
275
|
+
// nothing to reposition — and for 'close' it must not self-close.
|
|
276
|
+
if (overlayRef.overlayElement?.contains(event.target))
|
|
277
|
+
return;
|
|
278
|
+
if (config.scrollBehavior === 'close') {
|
|
279
|
+
schedule(() => this._ngZone.run(() => {
|
|
280
|
+
if (overlayRef.hasAttached()) {
|
|
281
|
+
overlayRef.detach();
|
|
282
|
+
}
|
|
283
|
+
}));
|
|
284
|
+
}
|
|
285
|
+
else {
|
|
286
|
+
schedule(() => overlayRef.updatePosition());
|
|
287
|
+
}
|
|
288
|
+
};
|
|
289
|
+
const onResize = () => schedule(() => overlayRef.updatePosition());
|
|
290
|
+
const removeViewportListeners = () => {
|
|
291
|
+
document.removeEventListener('scroll', onScroll, true);
|
|
292
|
+
window.removeEventListener('resize', onResize);
|
|
293
|
+
if (rafId != null) {
|
|
294
|
+
cancelAnimationFrame(rafId);
|
|
295
|
+
rafId = null;
|
|
296
|
+
}
|
|
297
|
+
};
|
|
298
|
+
this._ngZone.runOutsideAngular(() => {
|
|
299
|
+
// capture: true → receives scroll from any nested container.
|
|
300
|
+
document.addEventListener('scroll', onScroll, true);
|
|
301
|
+
window.addEventListener('resize', onResize);
|
|
302
|
+
});
|
|
303
|
+
return {
|
|
304
|
+
overlayRef,
|
|
305
|
+
closed: closed.asObservable(),
|
|
306
|
+
updatePosition: () => overlayRef.updatePosition(),
|
|
307
|
+
close: () => {
|
|
308
|
+
removeViewportListeners();
|
|
309
|
+
destroyed.next();
|
|
310
|
+
destroyed.complete();
|
|
311
|
+
if (overlayRef.hasAttached()) {
|
|
312
|
+
overlayRef.detach();
|
|
313
|
+
}
|
|
314
|
+
overlayRef.dispose();
|
|
315
|
+
closed.complete();
|
|
316
|
+
}
|
|
317
|
+
};
|
|
318
|
+
}
|
|
319
|
+
/**
|
|
320
|
+
* Fallback order: below the trigger (start- then end-aligned), then above
|
|
321
|
+
* (start- then end-aligned). CDK picks the first that fits; `withPush`
|
|
322
|
+
* nudges it fully on-screen.
|
|
323
|
+
*/
|
|
324
|
+
_positions(offsetY) {
|
|
325
|
+
return [
|
|
326
|
+
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY },
|
|
327
|
+
{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY },
|
|
328
|
+
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offsetY },
|
|
329
|
+
{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offsetY }
|
|
330
|
+
];
|
|
331
|
+
}
|
|
332
|
+
_panelClasses(extra) {
|
|
333
|
+
const classes = ['zen-overlay-panel'];
|
|
334
|
+
if (Array.isArray(extra)) {
|
|
335
|
+
classes.push(...extra);
|
|
336
|
+
}
|
|
337
|
+
else if (extra) {
|
|
338
|
+
classes.push(extra);
|
|
339
|
+
}
|
|
340
|
+
return classes;
|
|
341
|
+
}
|
|
342
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduOverlayService, deps: [{ token: i1.Overlay }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
343
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduOverlayService, providedIn: 'root' }); }
|
|
344
|
+
}
|
|
345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduOverlayService, decorators: [{
|
|
346
|
+
type: Injectable,
|
|
347
|
+
args: [{ providedIn: 'root' }]
|
|
348
|
+
}], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.NgZone }] });
|
|
349
|
+
|
|
166
350
|
class ZenduCheckboxComponent {
|
|
167
351
|
constructor() {
|
|
168
352
|
this.checkedChange = new EventEmitter();
|
|
@@ -185,7 +369,7 @@ class ZenduCheckboxComponent {
|
|
|
185
369
|
this.checkedChange.emit(this.checked);
|
|
186
370
|
}
|
|
187
371
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
188
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduCheckboxComponent, isStandalone: false, selector: "zen-checkbox", inputs: { checked: "checked", label: "label", labelColor: "labelColor", disabled: "disabled", disableValueChange: "disableValueChange", indeterminate: "indeterminate", imageUrl: "imageUrl", size: "size", supportingText: "supportingText" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"checkbox-component\"\n [ngClass]=\"{'app-disabled': disabled, 'checkbox-md': size === 'md'}\"\n (click)=\"toggle()\">\n <button class=\"app-checkbox\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n @if (checked && !indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">done</i>\n }\n @if (indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">remove</i>\n }\n </button>\n @if (label || supportingText) {\n <div class=\"app-checkbox-text-wrap\"\n >\n @if (label) {\n <div class=\"app-checkbox-label\"\n [ngStyle]=\"{'color': labelColor }\">\n @if (imageUrl) {\n <img class=\"checkbox-image\"\n [src]=\"imageUrl\"\n >\n }\n {{ label }}\n </div>\n }\n @if (supportingText) {\n <div class=\"app-checkbox-supporting-text\"\n >\n {{ supportingText }}\n </div>\n }\n </div>\n }\n</div>\n", styles: [".checkbox-component{display:flex;align-items:flex-start;cursor:pointer;gap:8px}.checkbox-component .app-checkbox{padding:0;position:relative;width:16px;min-width:16px;height:16px;min-height:16px;border:1px solid #D0D5DD;border-radius:4px;box-sizing:border-box;color:#fff;background:#fff;cursor:pointer;margin-top:2px}.checkbox-component .app-checkbox:focus{outline:none;border-color:#88c1f1;box-shadow:0 0 0 4px #f4ebff}.checkbox-component .app-checkbox:disabled{cursor:not-allowed}.checkbox-component .app-checkbox.app-checked,.checkbox-component .app-checkbox.app-indeterminate{border-color:#136ab6;color:#136ab6;background:#f1f7fe}.checkbox-component .app-checkbox .app-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px}.checkbox-component .app-checkbox-text-wrap{display:flex;flex-direction:column}.checkbox-component .app-checkbox-label{font-weight:500;font-size:14px;line-height:20px;color:#344054;display:flex;align-items:center}.checkbox-component .app-checkbox-label .checkbox-image{margin-right:8px;width:36px}.checkbox-component .app-checkbox-supporting-text{font-weight:400;font-size:14px;line-height:20px;color:#667085}.checkbox-component:hover,.checkbox-component:focus{outline:none;text-decoration:none}.checkbox-component:hover .app-checkbox,.checkbox-component:focus .app-checkbox{background:#e3eefb;border-color:#136ab6}.checkbox-component:hover .app-checkbox.app-checked,.checkbox-component:focus .app-checkbox.app-checked{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component:hover .app-checkbox.app-indeterminate,.checkbox-component:focus .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component.app-disabled{cursor:not-allowed}.checkbox-component.app-disabled:hover .app-checkbox,.checkbox-component.app-disabled:focus .app-checkbox{background:#f2f4f7;border-color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-checked,.checkbox-component.app-disabled:focus .app-checkbox.app-checked{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-indeterminate,.checkbox-component.app-disabled:focus .app-checkbox.app-indeterminate{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled .app-checkbox{border-color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox.app-checked,.checkbox-component.app-disabled .app-checkbox.app-indeterminate{border-color:#eaecf0;color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox-label,.checkbox-component.app-disabled .app-checkbox-supporting-text{color:#d0d5dd}.checkbox-component.checkbox-md{gap:12px}.checkbox-component.checkbox-md .app-checkbox{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:6px;margin-top:2px}.checkbox-component.checkbox-md .app-checkbox .app-checkbox-icon{font-size:16px}.checkbox-component.checkbox-md .app-checkbox-label,.checkbox-component.checkbox-md .app-checkbox-supporting-text{font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
372
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduCheckboxComponent, isStandalone: false, selector: "zen-checkbox", inputs: { checked: "checked", label: "label", labelColor: "labelColor", disabled: "disabled", disableValueChange: "disableValueChange", indeterminate: "indeterminate", imageUrl: "imageUrl", size: "size", supportingText: "supportingText" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"checkbox-component\"\n [ngClass]=\"{'app-disabled': disabled, 'checkbox-md': size === 'md'}\"\n (click)=\"toggle()\">\n <button class=\"app-checkbox\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'app-checked': checked && !indeterminate, 'app-indeterminate': indeterminate }\">\n @if (checked && !indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">done</i>\n }\n @if (indeterminate) {\n <i\n class=\"material-icons app-checkbox-icon\">remove</i>\n }\n </button>\n @if (label || supportingText) {\n <div class=\"app-checkbox-text-wrap\"\n >\n @if (label) {\n <div class=\"app-checkbox-label\"\n [ngStyle]=\"{'color': labelColor }\">\n @if (imageUrl) {\n <img class=\"checkbox-image\"\n [src]=\"imageUrl\"\n >\n }\n {{ label }}\n </div>\n }\n @if (supportingText) {\n <div class=\"app-checkbox-supporting-text\"\n >\n {{ supportingText }}\n </div>\n }\n </div>\n }\n</div>\n", styles: [".checkbox-component{display:flex;align-items:flex-start;cursor:pointer;gap:8px}.checkbox-component .app-checkbox{padding:0;position:relative;width:16px;min-width:16px;height:16px;min-height:16px;border:1px solid #D0D5DD;border-radius:4px;box-sizing:border-box;color:#fff;background:#fff;cursor:pointer;margin-top:2px}.checkbox-component .app-checkbox:focus{outline:none;border-color:#88c1f1;box-shadow:0 0 0 4px #f4ebff}.checkbox-component .app-checkbox:disabled{cursor:not-allowed}.checkbox-component .app-checkbox.app-checked,.checkbox-component .app-checkbox.app-indeterminate{border-color:#136ab6;color:#136ab6;background:#f1f7fe}.checkbox-component .app-checkbox .app-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px}.checkbox-component .app-checkbox-text-wrap{display:flex;flex-direction:column}.checkbox-component .app-checkbox-label{font-weight:500;font-size:14px;line-height:20px;color:#344054;display:flex;align-items:center}.checkbox-component .app-checkbox-label .checkbox-image{margin-right:8px;width:36px}.checkbox-component .app-checkbox-supporting-text{font-weight:400;font-size:14px;line-height:20px;color:#667085}.checkbox-component:hover,.checkbox-component:focus{outline:none;text-decoration:none}.checkbox-component:hover .app-checkbox,.checkbox-component:focus .app-checkbox{background:#e3eefb;border-color:#136ab6}.checkbox-component:hover .app-checkbox.app-checked,.checkbox-component:focus .app-checkbox.app-checked{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component:hover .app-checkbox.app-indeterminate,.checkbox-component:focus .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.checkbox-component.app-disabled{cursor:not-allowed}.checkbox-component.app-disabled:hover .app-checkbox,.checkbox-component.app-disabled:focus .app-checkbox{background:#f2f4f7;border-color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-checked,.checkbox-component.app-disabled:focus .app-checkbox.app-checked{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled:hover .app-checkbox.app-indeterminate,.checkbox-component.app-disabled:focus .app-checkbox.app-indeterminate{background:#f2f4f7;border-color:#eaecf0;color:#eaecf0}.checkbox-component.app-disabled .app-checkbox{border-color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox.app-checked,.checkbox-component.app-disabled .app-checkbox.app-indeterminate{border-color:#eaecf0;color:#eaecf0;background:#f2f4f7}.checkbox-component.app-disabled .app-checkbox-label,.checkbox-component.app-disabled .app-checkbox-supporting-text{color:#d0d5dd}.checkbox-component.checkbox-md{gap:12px}.checkbox-component.checkbox-md .app-checkbox{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:6px;margin-top:2px}.checkbox-component.checkbox-md .app-checkbox .app-checkbox-icon{font-size:16px}.checkbox-component.checkbox-md .app-checkbox-label,.checkbox-component.checkbox-md .app-checkbox-supporting-text{font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
189
373
|
}
|
|
190
374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCheckboxComponent, decorators: [{
|
|
191
375
|
type: Component,
|
|
@@ -293,7 +477,7 @@ class ZenduColorPickerComponent {
|
|
|
293
477
|
this.colorChange.emit(color);
|
|
294
478
|
}
|
|
295
479
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduColorPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
296
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduColorPickerComponent, isStandalone: false, selector: "zen-colorpicker", inputs: { color: "color", icon: "icon", customTarget: "customTarget", showNone: "showNone" }, outputs: { colorChange: "colorChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"colorpicker-component\"\n (click)=\"toggle()\"\n [class.opened]=\"opened\"\n [class.no-size]=\"customTarget\">\n\n @if (!customTarget) {\n @if (icon == 'text') {\n <div>\n <img src=\"https://storage.googleapis.com/zenduit-icons/components/color_picker_text.svg\"\n class=\"icon-text\">\n </div>\n }\n @if (icon == 'paint') {\n <div>\n <img src=\"https://storage.googleapis.com/zenduit-icons/components/color_picker_paint.svg\"\n class=\"icon-paint\">\n </div>\n }\n <div class=\"toggle\">\n <i class=\"material-icons\">arrow_drop_down</i>\n </div>\n <div class=\"color-line\"\n [ngStyle]=\"{'border-color': color}\">\n </div>\n }\n\n @if (opened) {\n <div\n class=\"color-menu\"\n [ngStyle]=\"{ 'left': menuLeft, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"colors-container\">\n @for (row of colorsRows; track row) {\n <div\n class=\"color-row\">\n @for (rowColor of row.colors; track rowColor) {\n <div\n (click)=\"selectColor(rowColor)\"\n class=\"color-item\"\n [ngStyle]=\"{'background-color': rowColor}\">\n @if (rowColor == color) {\n <div\n class=\"select-icon\">\n <i class=\"material-icons\">check</i>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n @if (showNone) {\n <div\n class=\"no-color\"\n (click)=\"selectColor('')\">\n None\n </div>\n }\n </div>\n }\n</div>\n", styles: [".colorpicker-component{border:1px solid var(--color-primary, #2188d9);position:relative;border-radius:4px;padding:3px 4px;width:29px;height:19px;display:flex;cursor:pointer}.colorpicker-component.no-size{border:0;width:0px;height:0px;padding:0;margin:0}.colorpicker-component .color-line{width:14px;border:2px solid;position:absolute;bottom:5px;left:3px;z-index:1;background-color:#000}.colorpicker-component .material-icons{color:#333;font-size:16px}.colorpicker-component .icon-paint{margin-bottom:2px;margin-left:2px;height:13px;width:13px}.colorpicker-component .icon-text{margin-bottom:4px;margin-left:2px;height:11px;width:11px}.colorpicker-component .toggle{padding-top:4px}.colorpicker-component.opened{background:#2188d91a}.colorpicker-component.opened .material-icons{color:var(--color-primary, #2188d9)!important}.colorpicker-component .color-menu{background:#fff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a;border-radius:8px;position:fixed;overflow-y:auto;white-space:initial;padding:4px;z-index:10}.colorpicker-component .color-menu .colors-container .color-row{display:flex;align-items:center;justify-content:space-between}.colorpicker-component .color-menu .colors-container .color-row .color-item{width:14px;height:14px;cursor:pointer;border:1px solid #d5d5d5;border-radius:1px;margin:1px}.colorpicker-component .color-menu .colors-container .color-row .select-icon{position:relative}.colorpicker-component .color-menu .colors-container .color-row .select-icon .material-icons{position:absolute;color:#fff!important;font-size:12px;font-weight:700}.colorpicker-component .color-menu .no-color{background:#fff;border:1px solid #b0b0b0;border-radius:5px;font-family:Roboto;font-style:normal;font-weight:400;font-size:12px;display:flex;justify-content:center;margin-top:5px;cursor:pointer;color:#333}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
480
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduColorPickerComponent, isStandalone: false, selector: "zen-colorpicker", inputs: { color: "color", icon: "icon", customTarget: "customTarget", showNone: "showNone" }, outputs: { colorChange: "colorChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"colorpicker-component\"\n (click)=\"toggle()\"\n [class.opened]=\"opened\"\n [class.no-size]=\"customTarget\">\n\n @if (!customTarget) {\n @if (icon == 'text') {\n <div>\n <img src=\"https://storage.googleapis.com/zenduit-icons/components/color_picker_text.svg\"\n class=\"icon-text\">\n </div>\n }\n @if (icon == 'paint') {\n <div>\n <img src=\"https://storage.googleapis.com/zenduit-icons/components/color_picker_paint.svg\"\n class=\"icon-paint\">\n </div>\n }\n <div class=\"toggle\">\n <i class=\"material-icons\">arrow_drop_down</i>\n </div>\n <div class=\"color-line\"\n [ngStyle]=\"{'border-color': color}\">\n </div>\n }\n\n @if (opened) {\n <div\n class=\"color-menu\"\n [ngStyle]=\"{ 'left': menuLeft, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"colors-container\">\n @for (row of colorsRows; track row) {\n <div\n class=\"color-row\">\n @for (rowColor of row.colors; track rowColor) {\n <div\n (click)=\"selectColor(rowColor)\"\n class=\"color-item\"\n [ngStyle]=\"{'background-color': rowColor}\">\n @if (rowColor == color) {\n <div\n class=\"select-icon\">\n <i class=\"material-icons\">check</i>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n @if (showNone) {\n <div\n class=\"no-color\"\n (click)=\"selectColor('')\">\n None\n </div>\n }\n </div>\n }\n</div>\n", styles: [".colorpicker-component{border:1px solid var(--color-primary, #2188d9);position:relative;border-radius:4px;padding:3px 4px;width:29px;height:19px;display:flex;cursor:pointer}.colorpicker-component.no-size{border:0;width:0px;height:0px;padding:0;margin:0}.colorpicker-component .color-line{width:14px;border:2px solid;position:absolute;bottom:5px;left:3px;z-index:1;background-color:#000}.colorpicker-component .material-icons{color:#333;font-size:16px}.colorpicker-component .icon-paint{margin-bottom:2px;margin-left:2px;height:13px;width:13px}.colorpicker-component .icon-text{margin-bottom:4px;margin-left:2px;height:11px;width:11px}.colorpicker-component .toggle{padding-top:4px}.colorpicker-component.opened{background:#2188d91a}.colorpicker-component.opened .material-icons{color:var(--color-primary, #2188d9)!important}.colorpicker-component .color-menu{background:#fff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a;border-radius:8px;position:fixed;overflow-y:auto;white-space:initial;padding:4px;z-index:10}.colorpicker-component .color-menu .colors-container .color-row{display:flex;align-items:center;justify-content:space-between}.colorpicker-component .color-menu .colors-container .color-row .color-item{width:14px;height:14px;cursor:pointer;border:1px solid #d5d5d5;border-radius:1px;margin:1px}.colorpicker-component .color-menu .colors-container .color-row .select-icon{position:relative}.colorpicker-component .color-menu .colors-container .color-row .select-icon .material-icons{position:absolute;color:#fff!important;font-size:12px;font-weight:700}.colorpicker-component .color-menu .no-color{background:#fff;border:1px solid #b0b0b0;border-radius:5px;font-family:Roboto;font-style:normal;font-weight:400;font-size:12px;display:flex;justify-content:center;margin-top:5px;cursor:pointer;color:#333}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
297
481
|
}
|
|
298
482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduColorPickerComponent, decorators: [{
|
|
299
483
|
type: Component,
|
|
@@ -970,7 +1154,7 @@ class ZenduInputComponent {
|
|
|
970
1154
|
useExisting: forwardRef(() => ZenduInputComponent),
|
|
971
1155
|
multi: true
|
|
972
1156
|
}
|
|
973
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [ngClass]=\"inputClasses\">\n <!-- Label -->\n @if (showLabel) {\n <label\n [for]=\"id\"\n class=\"zen-input-label text text-sm text-weight-medium\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n @if (required) {\n <span class=\"required-indicator\">*</span>\n }\n </label>\n }\n\n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n <!-- Leading icon -->\n @if (leadingIcon && variant === 'default' && !multiline) {\n <i\n class=\"material-icons zen-input-leading-icon\"\n (click)=\"onLeadingIconClick($event)\">\n {{ leadingIcon }}\n </i>\n }\n\n <!-- Leading dropdown -->\n @if (variant === 'leading-dropdown') {\n <div\n class=\"zen-input-leading-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggleLeadingDropdown(); $event.stopPropagation()\">\n <span class=\"dropdown-label\">{{ getLeadingDropdownLabel() }}</span>\n <i class=\"material-icons dropdown-icon\">expand_more</i>\n </button>\n @if (leadingDropdownOpen) {\n <div class=\"zen-dropdown-menu\"\n [ngClass]=\"{'open': leadingDropdownOpen}\">\n @for (option of leadingDropdownOptions; track option) {\n <button\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === leadingDropdownValue}\"\n (click)=\"onLeadingDropdownChange(option.value); $event.stopPropagation()\">\n @if (option.icon) {\n <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n }\n {{ option.label | translate }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n <!-- Leading text -->\n @if (variant === 'leading-text') {\n <span\n class=\"zen-input-leading-text text text-md text-weight-regular\">\n {{ leadingText }}\n </span>\n }\n\n <!-- Payment card icon -->\n @if (variant === 'payment') {\n <div\n class=\"zen-payment-card-icon\">\n <i class=\"material-icons card-icon\">payment</i>\n </div>\n }\n\n <!-- Input content based on type -->\n @if (type === 'tel') {\n <ng-container *ngTemplateOutlet=\"phoneInputTemplate\"></ng-container>\n } @else if (multiline) {\n <textarea #inputElement\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [rows]=\"rows\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"></textarea>\n } @else {\n <input #inputElement\n [type]=\"type\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.step]=\"step\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n [ngClass]=\"{'zen-payment-field': variant === 'payment'}\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\" />\n }\n\n <!-- Multiline footer: help icon (left), then character count + resize handle (right).\n Only rendered when it has content so an empty textarea keeps a full-height\n scrollbar and symmetric padding (see the no-footer rule in SCSS). -->\n @if (multiline && (resizable || helpIcon || showCharacterCount)) {\n <div class=\"zen-textarea-footer\">\n @if (helpIcon) {\n <div class=\"zen-input-trailing-container\">\n <span\n class=\"zen-help-icon\"\n role=\"img\"\n [class.disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-label]=\"helpTooltip | translate\"\n (mouseenter)=\"updateHelpTooltipPlacement($event)\"\n (focus)=\"updateHelpTooltipPlacement($event)\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <div\n class=\"zen-help-tooltip\"\n [class.align-start]=\"helpTooltipAlign === 'start'\"\n [class.align-end]=\"helpTooltipAlign === 'end'\"\n [class.place-below]=\"helpTooltipPlacement === 'below'\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n </span>\n </div>\n }\n <div class=\"zen-textarea-footer-end\">\n @if (showCharacterCount) {\n <span class=\"zen-character-count text text-sm text-weight-regular\">\n {{ characterCount }}\n </span>\n }\n @if (resizable) {\n <span\n class=\"zen-textarea-resize-handle\"\n [class.disabled]=\"disabled\"\n title=\"Drag to resize\"\n (pointerdown)=\"onResizeStart($event)\"\n (click)=\"$event.stopPropagation()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17.5 5.5 5.5 17.5M17.5 12.5 12.5 17.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n }\n </div>\n </div>\n }\n\n <!-- Default input template -->\n\n <!-- Trailing elements container \u2014 render only when it has content, so a plain\n input (e.g. number) doesn't reserve trailing space or shift its spinner. -->\n @if (\n variant === 'trailing-text' ||\n (showCharacterCount && !helpIcon && variant === 'default' && !multiline) ||\n (helpIcon && variant !== 'trailing-dropdown' && !multiline) ||\n variant === 'trailing-dropdown'\n ) {\n <div class=\"zen-input-trailing-container\">\n <!-- Trailing text -->\n @if (variant === 'trailing-text') {\n <span\n class=\"zen-input-trailing-text text text-md text-weight-regular\">\n {{ trailingText }}\n </span>\n }\n\n <!-- Character counter -->\n @if (showCharacterCount && !helpIcon && variant === 'default' && !multiline) {\n <span\n class=\"zen-character-count text text-sm text-weight-regular\">\n {{ characterCount }}\n </span>\n }\n\n <!-- Help icon -->\n @if (helpIcon && variant !== 'trailing-dropdown' && !multiline) {\n <span\n class=\"zen-help-icon\"\n role=\"img\"\n [class.disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-label]=\"helpTooltip | translate\"\n (mouseenter)=\"updateHelpTooltipPlacement($event)\"\n (focus)=\"updateHelpTooltipPlacement($event)\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <!-- Help tooltip (shown on hover / focus) -->\n <div\n class=\"zen-help-tooltip\"\n [class.align-start]=\"helpTooltipAlign === 'start'\"\n [class.align-end]=\"helpTooltipAlign === 'end'\"\n [class.place-below]=\"helpTooltipPlacement === 'below'\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n </span>\n }\n\n <!-- Trailing dropdown -->\n @if (variant === 'trailing-dropdown') {\n <div\n class=\"zen-input-trailing-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggleTrailingDropdown(); $event.stopPropagation()\">\n <span class=\"dropdown-label\">{{ getTrailingDropdownLabel() }}</span>\n <i class=\"material-icons dropdown-icon\">expand_more</i>\n </button>\n @if (trailingDropdownOpen) {\n <div class=\"zen-dropdown-menu dropdown-menu-right\"\n [ngClass]=\"{'open': trailingDropdownOpen}\">\n @for (option of trailingDropdownOptions; track option) {\n <button\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === trailingDropdownValue}\"\n (click)=\"onTrailingDropdownChange(option.value); $event.stopPropagation()\">\n @if (option.icon) {\n <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n }\n {{ option.label | translate }}\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Hint text / Error message -->\n @if (showHintText) {\n <div\n class=\"zen-input-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n @if (destructive) {\n <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n }\n {{ displayHintText | translate }}\n </div>\n }\n\n <!-- Phone Country Dropdown (for tel type) -->\n @if (type === 'tel' && isPhoneDropdownExpanded) {\n <div\n class=\"zen-phone-dropdown-menu\">\n <div class=\"zen-phone-dropdown-list\">\n <!-- Countries List -->\n @for (country of countryList; track country) {\n <button type=\"button\"\n class=\"zen-phone-dropdown-item\"\n [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n (click)=\"onCountryChanged(country)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"country.flag\"\n [alt]=\"country.countryName\">\n <span class=\"zen-phone-country-name\">{{ country.countryName | translate }}</span>\n <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n </button>\n }\n <!-- Custom Country -->\n <button type=\"button\"\n class=\"zen-phone-dropdown-item\"\n [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n (click)=\"onCountryChanged(customCountry)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"customCountry.flag\"\n [alt]=\"customCountry.countryName\">\n <span class=\"zen-phone-country-name\">{{ customCountry.countryName | translate }}</span>\n <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n </button>\n </div>\n </div>\n }\n</div>\n\n<!-- Phone Input Template -->\n<ng-template #phoneInputTemplate>\n <!-- Phone country selector -->\n <div class=\"zen-phone-country-select\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"selectedCountry.flag\"\n [alt]=\"selectedCountry.countryName\">\n <span class=\"zen-phone-code\">{{ selectedCountry.countryCallingCode }}</span>\n <button type=\"button\"\n class=\"zen-phone-dropdown-btn\"\n [disabled]=\"disabled\"\n (click)=\"togglePhoneDropdown(); $event.stopPropagation()\">\n <i class=\"material-icons zen-phone-expand-icon\"\n [ngClass]=\"{'active': isPhoneDropdownExpanded}\">expand_more</i>\n </button>\n </div>\n\n <!-- Phone input field -->\n <input #inputElement\n type=\"text\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"phoneText\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"phoneMaxLength\"\n [attr.minlength]=\"minLength\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\" />\n</ng-template>\n\n<!-- Click outside handler for dropdowns -->\n@if (leadingDropdownOpen || trailingDropdownOpen || isPhoneDropdownExpanded) {\n <div\n class=\"zen-dropdown-backdrop\"\n (click)=\"closeDropdowns(); hidePhoneDropdown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-label{color:#344054;display:flex;align-items:center;gap:4px}.zen-input-container .zen-input-label .required-indicator{color:#f04438}.zen-input-container .zen-input-label.disabled{color:#667085}.zen-input-container .zen-input-label.destructive{color:#344054}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover:not(.disabled){border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon{font-size:20px;color:#98a2b3;flex-shrink:0;cursor:pointer;transition:color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon:hover{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{position:relative;flex-shrink:0;margin-right:4px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-text{color:#667085;flex-shrink:0;padding-right:4px}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container{display:flex;align-items:center;gap:8px;flex-shrink:0}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-text{color:#667085;flex-shrink:0;padding-left:4px}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-character-count{color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:help;outline:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon i{font-size:16px;color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):hover i,.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):focus-visible i{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon.disabled{cursor:not-allowed}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon.disabled i{color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):hover .zen-help-tooltip,.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):focus-visible .zen-help-tooltip{display:block}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-start{left:-6px;right:auto;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-start .tooltip-arrow{left:8px;right:auto;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-end{left:auto;right:-6px;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-end .tooltip-arrow{left:auto;right:8px;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.place-below{top:calc(100% + 8px);bottom:auto}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.place-below .tooltip-arrow{top:-6px;bottom:auto;border-top:none;border-bottom:6px solid #101828}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:6px 10px;border-radius:6px;font-family:Inter,sans-serif;font-size:12px;line-height:16px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;width:max-content;max-width:260px;white-space:normal;text-align:left}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip .tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #101828}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown{position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;border-left:1px solid #D0D5DD;padding:0 0 0 8px;margin-left:4px;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:200px;max-height:240px;overflow-y:auto;z-index:100;padding:4px}.zen-input-container .zen-dropdown-menu.dropdown-menu-right{left:auto;right:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .option-icon{font-size:20px;color:#98a2b3}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494;font-weight:500}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .option-icon{color:#136ab6}.zen-input-container .zen-input-hint{display:flex;align-items:center;gap:4px;color:#667085}.zen-input-container .zen-input-hint .hint-icon{font-size:16px;color:#f04438}.zen-input-container .zen-input-hint.destructive{color:#f04438}.zen-input-container.focused .zen-input-field-wrapper{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container.focused .zen-input-field-wrapper.destructive{border-color:#fda29b;box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.zen-input-container.filled .zen-input-field-wrapper{background:#fff}.zen-input-container.disabled .zen-input-field-wrapper{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.zen-input-container.disabled .zen-input-field-wrapper:hover{border-color:#d0d5dd}.zen-input-container.destructive .zen-input-field-wrapper{border-color:#fda29b}.zen-input-container.destructive .zen-input-field-wrapper:hover:not(.disabled){border-color:#f97066}.zen-input-container.multiline .zen-input-field-wrapper{flex-direction:column;align-items:stretch;min-height:auto;gap:0;padding:0}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field{flex:0 0 auto;box-sizing:border-box;width:100%;resize:none;min-height:80px;padding:10px 6px 0 14px;font-family:inherit;line-height:24px;scrollbar-gutter:stable}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar{width:8px}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-track{background:transparent;border:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-thumb{background:#d0d5dd;border:none;border-radius:4px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer{display:flex;align-items:center;gap:8px;padding:0 14px 10px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer-end{display:flex;align-items:center;gap:8px;margin-left:auto}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle{display:inline-flex;align-items:center;justify-content:center;color:#98a2b3;cursor:ns-resize;touch-action:none;transition:color .2s ease}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle svg{display:block}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle:hover{color:#475467}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle.disabled{color:#d0d5dd;cursor:not-allowed;pointer-events:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-character-count{color:#98a2b3}.zen-input-container.multiline .zen-input-field-wrapper:not(:has(.zen-textarea-footer)) .zen-input-field{padding-bottom:10px}.zen-input-container.size-sm .zen-input-label{font-size:12px;line-height:18px}.zen-input-container.size-sm .zen-input-field-wrapper{padding:8px 12px;min-height:36px;box-sizing:border-box}.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-field,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-leading-text,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-trailing-text{font-size:14px;line-height:20px}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-input-field{font-family:Courier New,Courier,monospace}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #F2F4F7;border-radius:4px;width:34px;height:24px;flex-shrink:0}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon .card-icon{font-size:16px;color:#4285f4;line-height:1}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon zen-icon{font-size:16px;color:#98a2b3;line-height:1}.zen-input-container.variant-input-field .zen-input-field-wrapper{padding:12px 14px;min-height:48px}.zen-phone-country-select{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-phone-country-select .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-phone-country-select .zen-phone-code{color:#344054;font-family:Inter,sans-serif;font-size:14px;font-weight:500;min-width:max-content}.zen-phone-country-select .zen-phone-dropdown-btn{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.zen-phone-country-select .zen-phone-dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon.active{transform:rotate(180deg)}.zen-phone-country-select .zen-phone-dropdown-btn:hover:not(:disabled) .zen-phone-expand-icon{color:#475467}.zen-phone-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100}.zen-phone-dropdown-menu .zen-phone-dropdown-list{padding:4px}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease;font-family:Inter,sans-serif;font-size:14px;text-align:left;color:#344054}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-name{flex:1;min-width:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item:hover{background:#f9fafb}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active{background:#f1f7fe;color:#105494}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active .zen-phone-country-code{color:#136ab6}.zen-payment-field{font-family:Courier New,Courier,monospace!important;letter-spacing:1px}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1157
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [ngClass]=\"inputClasses\">\n <!-- Label -->\n @if (showLabel) {\n <label\n [for]=\"id\"\n class=\"zen-input-label text text-sm text-weight-medium\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n @if (required) {\n <span class=\"required-indicator\">*</span>\n }\n </label>\n }\n\n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n <!-- Leading icon -->\n @if (leadingIcon && variant === 'default' && !multiline) {\n <i\n class=\"material-icons zen-input-leading-icon\"\n (click)=\"onLeadingIconClick($event)\">\n {{ leadingIcon }}\n </i>\n }\n\n <!-- Leading dropdown -->\n @if (variant === 'leading-dropdown') {\n <div\n class=\"zen-input-leading-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggleLeadingDropdown(); $event.stopPropagation()\">\n <span class=\"dropdown-label\">{{ getLeadingDropdownLabel() }}</span>\n <i class=\"material-icons dropdown-icon\">expand_more</i>\n </button>\n @if (leadingDropdownOpen) {\n <div class=\"zen-dropdown-menu\"\n [ngClass]=\"{'open': leadingDropdownOpen}\">\n @for (option of leadingDropdownOptions; track option) {\n <button\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === leadingDropdownValue}\"\n (click)=\"onLeadingDropdownChange(option.value); $event.stopPropagation()\">\n @if (option.icon) {\n <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n }\n {{ option.label | translate }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n <!-- Leading text -->\n @if (variant === 'leading-text') {\n <span\n class=\"zen-input-leading-text text text-md text-weight-regular\">\n {{ leadingText }}\n </span>\n }\n\n <!-- Payment card icon -->\n @if (variant === 'payment') {\n <div\n class=\"zen-payment-card-icon\">\n <i class=\"material-icons card-icon\">payment</i>\n </div>\n }\n\n <!-- Input content based on type -->\n @if (type === 'tel') {\n <ng-container *ngTemplateOutlet=\"phoneInputTemplate\"></ng-container>\n } @else if (multiline) {\n <textarea #inputElement\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [rows]=\"rows\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"></textarea>\n } @else {\n <input #inputElement\n [type]=\"type\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.step]=\"step\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n [ngClass]=\"{'zen-payment-field': variant === 'payment'}\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\" />\n }\n\n <!-- Multiline footer: help icon (left), then character count + resize handle (right).\n Only rendered when it has content so an empty textarea keeps a full-height\n scrollbar and symmetric padding (see the no-footer rule in SCSS). -->\n @if (multiline && (resizable || helpIcon || showCharacterCount)) {\n <div class=\"zen-textarea-footer\">\n @if (helpIcon) {\n <div class=\"zen-input-trailing-container\">\n <span\n class=\"zen-help-icon\"\n role=\"img\"\n [class.disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-label]=\"helpTooltip | translate\"\n (mouseenter)=\"updateHelpTooltipPlacement($event)\"\n (focus)=\"updateHelpTooltipPlacement($event)\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <div\n class=\"zen-help-tooltip\"\n [class.align-start]=\"helpTooltipAlign === 'start'\"\n [class.align-end]=\"helpTooltipAlign === 'end'\"\n [class.place-below]=\"helpTooltipPlacement === 'below'\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n </span>\n </div>\n }\n <div class=\"zen-textarea-footer-end\">\n @if (showCharacterCount) {\n <span class=\"zen-character-count text text-sm text-weight-regular\">\n {{ characterCount }}\n </span>\n }\n @if (resizable) {\n <span\n class=\"zen-textarea-resize-handle\"\n [class.disabled]=\"disabled\"\n title=\"Drag to resize\"\n (pointerdown)=\"onResizeStart($event)\"\n (click)=\"$event.stopPropagation()\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17.5 5.5 5.5 17.5M17.5 12.5 12.5 17.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n }\n </div>\n </div>\n }\n\n <!-- Default input template -->\n\n <!-- Trailing elements container \u2014 render only when it has content, so a plain\n input (e.g. number) doesn't reserve trailing space or shift its spinner. -->\n @if (\n variant === 'trailing-text' ||\n (showCharacterCount && !helpIcon && variant === 'default' && !multiline) ||\n (helpIcon && variant !== 'trailing-dropdown' && !multiline) ||\n variant === 'trailing-dropdown'\n ) {\n <div class=\"zen-input-trailing-container\">\n <!-- Trailing text -->\n @if (variant === 'trailing-text') {\n <span\n class=\"zen-input-trailing-text text text-md text-weight-regular\">\n {{ trailingText }}\n </span>\n }\n\n <!-- Character counter -->\n @if (showCharacterCount && !helpIcon && variant === 'default' && !multiline) {\n <span\n class=\"zen-character-count text text-sm text-weight-regular\">\n {{ characterCount }}\n </span>\n }\n\n <!-- Help icon -->\n @if (helpIcon && variant !== 'trailing-dropdown' && !multiline) {\n <span\n class=\"zen-help-icon\"\n role=\"img\"\n [class.disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-label]=\"helpTooltip | translate\"\n (mouseenter)=\"updateHelpTooltipPlacement($event)\"\n (focus)=\"updateHelpTooltipPlacement($event)\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <!-- Help tooltip (shown on hover / focus) -->\n <div\n class=\"zen-help-tooltip\"\n [class.align-start]=\"helpTooltipAlign === 'start'\"\n [class.align-end]=\"helpTooltipAlign === 'end'\"\n [class.place-below]=\"helpTooltipPlacement === 'below'\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n </span>\n }\n\n <!-- Trailing dropdown -->\n @if (variant === 'trailing-dropdown') {\n <div\n class=\"zen-input-trailing-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggleTrailingDropdown(); $event.stopPropagation()\">\n <span class=\"dropdown-label\">{{ getTrailingDropdownLabel() }}</span>\n <i class=\"material-icons dropdown-icon\">expand_more</i>\n </button>\n @if (trailingDropdownOpen) {\n <div class=\"zen-dropdown-menu dropdown-menu-right\"\n [ngClass]=\"{'open': trailingDropdownOpen}\">\n @for (option of trailingDropdownOptions; track option) {\n <button\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === trailingDropdownValue}\"\n (click)=\"onTrailingDropdownChange(option.value); $event.stopPropagation()\">\n @if (option.icon) {\n <i class=\"material-icons option-icon\">{{ option.icon }}</i>\n }\n {{ option.label | translate }}\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Hint text / Error message -->\n @if (showHintText) {\n <div\n class=\"zen-input-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n @if (destructive) {\n <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n }\n {{ displayHintText | translate }}\n </div>\n }\n\n <!-- Phone Country Dropdown (for tel type) -->\n @if (type === 'tel' && isPhoneDropdownExpanded) {\n <div\n class=\"zen-phone-dropdown-menu\">\n <div class=\"zen-phone-dropdown-list\">\n <!-- Countries List -->\n @for (country of countryList; track country) {\n <button type=\"button\"\n class=\"zen-phone-dropdown-item\"\n [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n (click)=\"onCountryChanged(country)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"country.flag\"\n [alt]=\"country.countryName\">\n <span class=\"zen-phone-country-name\">{{ country.countryName | translate }}</span>\n <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n </button>\n }\n <!-- Custom Country -->\n <button type=\"button\"\n class=\"zen-phone-dropdown-item\"\n [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n (click)=\"onCountryChanged(customCountry)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"customCountry.flag\"\n [alt]=\"customCountry.countryName\">\n <span class=\"zen-phone-country-name\">{{ customCountry.countryName | translate }}</span>\n <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n </button>\n </div>\n </div>\n }\n</div>\n\n<!-- Phone Input Template -->\n<ng-template #phoneInputTemplate>\n <!-- Phone country selector -->\n <div class=\"zen-phone-country-select\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"selectedCountry.flag\"\n [alt]=\"selectedCountry.countryName\">\n <span class=\"zen-phone-code\">{{ selectedCountry.countryCallingCode }}</span>\n <button type=\"button\"\n class=\"zen-phone-dropdown-btn\"\n [disabled]=\"disabled\"\n (click)=\"togglePhoneDropdown(); $event.stopPropagation()\">\n <i class=\"material-icons zen-phone-expand-icon\"\n [ngClass]=\"{'active': isPhoneDropdownExpanded}\">expand_more</i>\n </button>\n </div>\n\n <!-- Phone input field -->\n <input #inputElement\n type=\"text\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"phoneText\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.maxlength]=\"phoneMaxLength\"\n [attr.minlength]=\"minLength\"\n [autocomplete]=\"autocomplete\"\n class=\"zen-input-field text text-md text-weight-regular\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\" />\n</ng-template>\n\n<!-- Click outside handler for dropdowns -->\n@if (leadingDropdownOpen || trailingDropdownOpen || isPhoneDropdownExpanded) {\n <div\n class=\"zen-dropdown-backdrop\"\n (click)=\"closeDropdowns(); hidePhoneDropdown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-label{color:#344054;display:flex;align-items:center;gap:4px}.zen-input-container .zen-input-label .required-indicator{color:#f04438}.zen-input-container .zen-input-label.disabled{color:#667085}.zen-input-container .zen-input-label.destructive{color:#344054}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover:not(.disabled){border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon{font-size:20px;color:#98a2b3;flex-shrink:0;cursor:pointer;transition:color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-icon:hover{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{position:relative;flex-shrink:0;margin-right:4px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-leading-text{color:#667085;flex-shrink:0;padding-right:4px}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container{display:flex;align-items:center;gap:8px;flex-shrink:0}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-text{color:#667085;flex-shrink:0;padding-left:4px}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-character-count{color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:help;outline:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon i{font-size:16px;color:#98a2b3}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):hover i,.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):focus-visible i{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon.disabled{cursor:not-allowed}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon.disabled i{color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):hover .zen-help-tooltip,.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon:not(.disabled):focus-visible .zen-help-tooltip{display:block}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-start{left:-6px;right:auto;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-start .tooltip-arrow{left:8px;right:auto;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-end{left:auto;right:-6px;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.align-end .tooltip-arrow{left:auto;right:8px;transform:none}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.place-below{top:calc(100% + 8px);bottom:auto}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip.place-below .tooltip-arrow{top:-6px;bottom:auto;border-top:none;border-bottom:6px solid #101828}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:6px 10px;border-radius:6px;font-family:Inter,sans-serif;font-size:12px;line-height:16px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;width:max-content;max-width:260px;white-space:normal;text-align:left}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-help-icon .zen-help-tooltip .tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #101828}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown{position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;border-left:1px solid #D0D5DD;padding:0 0 0 8px;margin-left:4px;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:20px;color:#98a2b3;transition:transform .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-trailing-container .zen-input-trailing-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:200px;max-height:240px;overflow-y:auto;z-index:100;padding:4px}.zen-input-container .zen-dropdown-menu.dropdown-menu-right{left:auto;right:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .option-icon{font-size:20px;color:#98a2b3}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494;font-weight:500}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .option-icon{color:#136ab6}.zen-input-container .zen-input-hint{display:flex;align-items:center;gap:4px;color:#667085}.zen-input-container .zen-input-hint .hint-icon{font-size:16px;color:#f04438}.zen-input-container .zen-input-hint.destructive{color:#f04438}.zen-input-container.focused .zen-input-field-wrapper{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container.focused .zen-input-field-wrapper.destructive{border-color:#fda29b;box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.zen-input-container.filled .zen-input-field-wrapper{background:#fff}.zen-input-container.disabled .zen-input-field-wrapper{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.zen-input-container.disabled .zen-input-field-wrapper:hover{border-color:#d0d5dd}.zen-input-container.destructive .zen-input-field-wrapper{border-color:#fda29b}.zen-input-container.destructive .zen-input-field-wrapper:hover:not(.disabled){border-color:#f97066}.zen-input-container.multiline .zen-input-field-wrapper{flex-direction:column;align-items:stretch;min-height:auto;gap:0;padding:0}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field{flex:0 0 auto;box-sizing:border-box;width:100%;resize:none;min-height:80px;padding:10px 6px 0 14px;font-family:inherit;line-height:24px;scrollbar-gutter:stable}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar{width:8px}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-track{background:transparent;border:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-input-field::-webkit-scrollbar-thumb{background:#d0d5dd;border:none;border-radius:4px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer{display:flex;align-items:center;gap:8px;padding:0 14px 10px}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-footer-end{display:flex;align-items:center;gap:8px;margin-left:auto}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle{display:inline-flex;align-items:center;justify-content:center;color:#98a2b3;cursor:ns-resize;touch-action:none;transition:color .2s ease}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle svg{display:block}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle:hover{color:#475467}.zen-input-container.multiline .zen-input-field-wrapper .zen-textarea-resize-handle.disabled{color:#d0d5dd;cursor:not-allowed;pointer-events:none}.zen-input-container.multiline .zen-input-field-wrapper .zen-character-count{color:#98a2b3}.zen-input-container.multiline .zen-input-field-wrapper:not(:has(.zen-textarea-footer)) .zen-input-field{padding-bottom:10px}.zen-input-container.size-sm .zen-input-label{font-size:12px;line-height:18px}.zen-input-container.size-sm .zen-input-field-wrapper{padding:8px 12px;min-height:36px;box-sizing:border-box}.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-field,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-leading-text,.zen-input-container.size-sm .zen-input-field-wrapper .zen-input-trailing-text{font-size:14px;line-height:20px}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-input-field{font-family:Courier New,Courier,monospace}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #F2F4F7;border-radius:4px;width:34px;height:24px;flex-shrink:0}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon .card-icon{font-size:16px;color:#4285f4;line-height:1}.zen-input-container.variant-payment .zen-input-field-wrapper .zen-payment-card-icon zen-icon{font-size:16px;color:#98a2b3;line-height:1}.zen-input-container.variant-input-field .zen-input-field-wrapper{padding:12px 14px;min-height:48px}.zen-phone-country-select{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-phone-country-select .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-phone-country-select .zen-phone-code{color:#344054;font-family:Inter,sans-serif;font-size:14px;font-weight:500;min-width:max-content}.zen-phone-country-select .zen-phone-dropdown-btn{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.zen-phone-country-select .zen-phone-dropdown-btn:disabled{cursor:not-allowed;opacity:.5}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-phone-country-select .zen-phone-dropdown-btn .zen-phone-expand-icon.active{transform:rotate(180deg)}.zen-phone-country-select .zen-phone-dropdown-btn:hover:not(:disabled) .zen-phone-expand-icon{color:#475467}.zen-phone-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100}.zen-phone-dropdown-menu .zen-phone-dropdown-list{padding:4px}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease;font-family:Inter,sans-serif;font-size:14px;text-align:left;color:#344054}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-name{flex:1;min-width:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item:hover{background:#f9fafb}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active{background:#f1f7fe;color:#105494}.zen-phone-dropdown-menu .zen-phone-dropdown-list .zen-phone-dropdown-item.active .zen-phone-country-code{color:#136ab6}.zen-payment-field{font-family:Courier New,Courier,monospace!important;letter-spacing:1px}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
974
1158
|
}
|
|
975
1159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduInputComponent, decorators: [{
|
|
976
1160
|
type: Component,
|
|
@@ -1298,7 +1482,7 @@ class ZenduColumnConfigurationComponent {
|
|
|
1298
1482
|
.includes(this.searchText.trim().toLowerCase()));
|
|
1299
1483
|
}
|
|
1300
1484
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduColumnConfigurationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduColumnConfigurationComponent, isStandalone: false, selector: "zen-column-configuration", inputs: { configuration: "configuration", defaultConfiguration: "defaultConfiguration", dropdownPosition: "dropdownPosition" }, outputs: { configurationChange: "configurationChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-config-component\">\n <button class=\"button-basic button-icon\"\n [ngClass]=\"{ 'active': showPanel }\"\n (click)=\"togglePanel()\">\n <i class=\"material-icons\">view_column</i>\n </button>\n\n @if (showPanel) {\n <div\n class=\"action-menu column-config-menu\"\n [ngClass]=\"{'right': dropdownPosition === 'right'}\">\n <div class=\"action-menu-header\">\n <div class=\"title\">Manage Columns</div>\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"filterItems()\"></zen-search-box>\n </div>\n <div class=\"action-menu-body dnd-container\"\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (config of filteredColumnsConfiguration; track config) {\n <div\n class=\"action-item-checkbox drag-item\"\n cdkDrag>\n <zen-checkbox class=\"flex-1\"\n [(checked)]=\"config.isVisible\"\n [label]=\"config.displayName\"></zen-checkbox>\n <i class=\"material-icons drag-icon\">drag_handle</i>\n </div>\n }\n </div>\n <div class=\"action-menu-footer\">\n <button (click)=\"reset()\"\n type=\"button\"\n class=\"button-stroked full-width\">Reset</button>\n <button (click)=\"apply()\"\n type=\"button\"\n class=\"button-flat full-width\">Apply</button>\n </div>\n </div>\n }\n</div>\n", styles: [".column-config-component{display:inline-block;position:relative}.column-config-component .column-config-menu{top:115%;width:300px}.column-config-component .column-config-menu.right{right:0}.column-config-component .column-config-menu .dnd-container{max-height:218px;overflow-y:auto}.column-config-component .column-config-menu .dnd-container .drag-item{justify-content:space-between}.column-config-component .column-config-menu .dnd-container .drag-item .drag-icon{cursor:move;color:#b8b9bc}.column-config-component .column-config-menu .dnd-container .dndDraggingSource{display:none}.column-config-component .column-config-menu .dnd-container .dndPlaceholder{background-color:#b8b9bc;display:block;min-height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1485
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduColumnConfigurationComponent, isStandalone: false, selector: "zen-column-configuration", inputs: { configuration: "configuration", defaultConfiguration: "defaultConfiguration", dropdownPosition: "dropdownPosition" }, outputs: { configurationChange: "configurationChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-config-component\">\n <button class=\"button-basic button-icon\"\n [ngClass]=\"{ 'active': showPanel }\"\n (click)=\"togglePanel()\">\n <i class=\"material-icons\">view_column</i>\n </button>\n\n @if (showPanel) {\n <div\n class=\"action-menu column-config-menu\"\n [ngClass]=\"{'right': dropdownPosition === 'right'}\">\n <div class=\"action-menu-header\">\n <div class=\"title\">Manage Columns</div>\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"filterItems()\"></zen-search-box>\n </div>\n <div class=\"action-menu-body dnd-container\"\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (config of filteredColumnsConfiguration; track config) {\n <div\n class=\"action-item-checkbox drag-item\"\n cdkDrag>\n <zen-checkbox class=\"flex-1\"\n [(checked)]=\"config.isVisible\"\n [label]=\"config.displayName\"></zen-checkbox>\n <i class=\"material-icons drag-icon\">drag_handle</i>\n </div>\n }\n </div>\n <div class=\"action-menu-footer\">\n <button (click)=\"reset()\"\n type=\"button\"\n class=\"button-stroked full-width\">Reset</button>\n <button (click)=\"apply()\"\n type=\"button\"\n class=\"button-flat full-width\">Apply</button>\n </div>\n </div>\n }\n</div>\n", styles: [".column-config-component{display:inline-block;position:relative}.column-config-component .column-config-menu{top:115%;width:300px}.column-config-component .column-config-menu.right{right:0}.column-config-component .column-config-menu .dnd-container{max-height:218px;overflow-y:auto}.column-config-component .column-config-menu .dnd-container .drag-item{justify-content:space-between}.column-config-component .column-config-menu .dnd-container .drag-item .drag-icon{cursor:move;color:#b8b9bc}.column-config-component .column-config-menu .dnd-container .dndDraggingSource{display:none}.column-config-component .column-config-menu .dnd-container .dndPlaceholder{background-color:#b8b9bc;display:block;min-height:40px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1302
1486
|
}
|
|
1303
1487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduColumnConfigurationComponent, decorators: [{
|
|
1304
1488
|
type: Component,
|
|
@@ -1365,7 +1549,7 @@ class ZenduIconComponent {
|
|
|
1365
1549
|
}
|
|
1366
1550
|
}
|
|
1367
1551
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduIconComponent, deps: [{ token: i0.ElementRef }, { token: ZEN_ICON_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1368
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduIconComponent, isStandalone: false, selector: "zen-icon", inputs: { src: "src", name: "name", size: "size", color: "color", theme: "theme", customColor: "customColor" }, host: { properties: { "class.zen-icon--featured": "isFeatured" } }, usesOnChanges: true, ngImport: i0, template: "@if (isFeatured) {\n <div\n class=\"zen-icon-featured\"\n [ngClass]=\"['zen-icon-' + size, 'zen-icon-' + color, 'zen-icon-' + theme]\">\n <div class=\"zen-icon-inner\"\n [style.mask-image]=\"'url(' + resolvedSrc + ')'\"\n [style.-webkit-mask-image]=\"'url(' + resolvedSrc + ')'\"\n [style.background-color]=\"customColor || null\">\n </div>\n </div>\n}\n", styles: [":host{background-color:#000;width:24px;height:24px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;display:block}:host(.zen-icon--featured){background-color:transparent;width:auto;height:auto;-webkit-mask-size:unset;mask-size:unset;-webkit-mask-repeat:unset;mask-repeat:unset;display:inline-flex}.zen-icon-featured{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.zen-icon-xs{width:24px;height:24px}.zen-icon-xs .zen-icon-inner{width:12px;height:12px}.zen-icon-sm{width:32px;height:32px}.zen-icon-sm .zen-icon-inner{width:16px;height:16px}.zen-icon-md{width:40px;height:40px}.zen-icon-md .zen-icon-inner{width:20px;height:20px}.zen-icon-lg{width:48px;height:48px}.zen-icon-lg .zen-icon-inner{width:24px;height:24px}.zen-icon-xl{width:56px;height:56px}.zen-icon-xl .zen-icon-inner{width:28px;height:28px}.zen-icon-inner{display:block;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.zen-icon-light-circle,.zen-icon-light-circle-outline,.zen-icon-dark-circle{border-radius:50%}.zen-icon-xs.zen-icon-light-circle,.zen-icon-xs.zen-icon-light-circle-outline,.zen-icon-xs.zen-icon-dark-circle{border-radius:12px}.zen-icon-sm.zen-icon-light-circle,.zen-icon-sm.zen-icon-light-circle-outline,.zen-icon-sm.zen-icon-dark-circle{border-radius:16px}.zen-icon-md.zen-icon-light-circle,.zen-icon-md.zen-icon-light-circle-outline,.zen-icon-md.zen-icon-dark-circle{border-radius:20px}.zen-icon-lg.zen-icon-light-circle,.zen-icon-lg.zen-icon-light-circle-outline,.zen-icon-lg.zen-icon-dark-circle{border-radius:24px}.zen-icon-xl.zen-icon-light-circle,.zen-icon-xl.zen-icon-light-circle-outline,.zen-icon-xl.zen-icon-dark-circle{border-radius:28px}.zen-icon-xs.zen-icon-light-square,.zen-icon-xs.zen-icon-mid-square,.zen-icon-xs.zen-icon-dark-square{border-radius:4px}.zen-icon-sm.zen-icon-light-square,.zen-icon-sm.zen-icon-mid-square,.zen-icon-sm.zen-icon-dark-square{border-radius:6px}.zen-icon-md.zen-icon-light-square,.zen-icon-md.zen-icon-mid-square,.zen-icon-md.zen-icon-dark-square{border-radius:8px}.zen-icon-lg.zen-icon-light-square,.zen-icon-lg.zen-icon-mid-square,.zen-icon-lg.zen-icon-dark-square{border-radius:10px}.zen-icon-xl.zen-icon-light-square,.zen-icon-xl.zen-icon-mid-square,.zen-icon-xl.zen-icon-dark-square{border-radius:12px}.zen-icon-light-circle-outline{border-style:solid}.zen-icon-xs.zen-icon-light-circle-outline{border-width:2px}.zen-icon-sm.zen-icon-light-circle-outline{border-width:4px}.zen-icon-md.zen-icon-light-circle-outline{border-width:6px}.zen-icon-lg.zen-icon-light-circle-outline{border-width:8px}.zen-icon-xl.zen-icon-light-circle-outline{border-width:10px}.zen-icon-dark-circle{border-style:solid}.zen-icon-xs.zen-icon-dark-circle{border-width:2px}.zen-icon-sm.zen-icon-dark-circle{border-width:4px}.zen-icon-md.zen-icon-dark-circle{border-width:6px}.zen-icon-lg.zen-icon-dark-circle{border-width:8px}.zen-icon-xl.zen-icon-dark-circle{border-width:10px}.zen-icon-primary.zen-icon-light-circle,.zen-icon-primary.zen-icon-light-square{background-color:#e3eefb}.zen-icon-primary.zen-icon-light-circle .zen-icon-inner,.zen-icon-primary.zen-icon-light-square .zen-icon-inner{background-color:#136ab6}.zen-icon-primary.zen-icon-light-circle-outline{background-color:#e3eefb;border-color:#f1f7fe}.zen-icon-primary.zen-icon-light-circle-outline .zen-icon-inner{background-color:#136ab6}.zen-icon-primary.zen-icon-dark-circle{background-color:#136ab6;border-color:#105494}.zen-icon-primary.zen-icon-dark-circle .zen-icon-inner{background-color:#fff}.zen-icon-primary.zen-icon-mid-square{background-color:#2188d9}.zen-icon-primary.zen-icon-mid-square .zen-icon-inner{background-color:#fff}.zen-icon-primary.zen-icon-dark-square{background-color:#136ab6}.zen-icon-primary.zen-icon-dark-square .zen-icon-inner{background-color:#fff}.zen-icon-gray.zen-icon-light-circle,.zen-icon-gray.zen-icon-light-square{background-color:#f2f4f7}.zen-icon-gray.zen-icon-light-circle .zen-icon-inner,.zen-icon-gray.zen-icon-light-square .zen-icon-inner{background-color:#475467}.zen-icon-gray.zen-icon-light-circle-outline{background-color:#f2f4f7;border-color:#f9fafb}.zen-icon-gray.zen-icon-light-circle-outline .zen-icon-inner{background-color:#475467}.zen-icon-gray.zen-icon-dark-circle{background-color:#475467;border-color:#344054}.zen-icon-gray.zen-icon-dark-circle .zen-icon-inner{background-color:#fff}.zen-icon-gray.zen-icon-mid-square,.zen-icon-gray.zen-icon-dark-square{background-color:#475467}.zen-icon-gray.zen-icon-mid-square .zen-icon-inner,.zen-icon-gray.zen-icon-dark-square .zen-icon-inner{background-color:#fff}.zen-icon-error.zen-icon-light-circle,.zen-icon-error.zen-icon-light-square{background-color:#fee4e2}.zen-icon-error.zen-icon-light-circle .zen-icon-inner,.zen-icon-error.zen-icon-light-square .zen-icon-inner{background-color:#d92d20}.zen-icon-error.zen-icon-light-circle-outline{background-color:#fee4e2;border-color:#fef3f2}.zen-icon-error.zen-icon-light-circle-outline .zen-icon-inner{background-color:#d92d20}.zen-icon-error.zen-icon-dark-circle{background-color:#f04438;border-color:#d92d20}.zen-icon-error.zen-icon-dark-circle .zen-icon-inner{background-color:#fff}.zen-icon-error.zen-icon-mid-square,.zen-icon-error.zen-icon-dark-square{background-color:#f04438}.zen-icon-error.zen-icon-mid-square .zen-icon-inner,.zen-icon-error.zen-icon-dark-square .zen-icon-inner{background-color:#fff}.zen-icon-warning.zen-icon-light-circle,.zen-icon-warning.zen-icon-light-square{background-color:#fef0c7}.zen-icon-warning.zen-icon-light-circle .zen-icon-inner,.zen-icon-warning.zen-icon-light-square .zen-icon-inner{background-color:#dc6803}.zen-icon-warning.zen-icon-light-circle-outline{background-color:#fef0c7;border-color:#fffaeb}.zen-icon-warning.zen-icon-light-circle-outline .zen-icon-inner{background-color:#dc6803}.zen-icon-warning.zen-icon-dark-circle{background-color:#f79009;border-color:#dc6803}.zen-icon-warning.zen-icon-dark-circle .zen-icon-inner{background-color:#fff}.zen-icon-warning.zen-icon-mid-square,.zen-icon-warning.zen-icon-dark-square{background-color:#f79009}.zen-icon-warning.zen-icon-mid-square .zen-icon-inner,.zen-icon-warning.zen-icon-dark-square .zen-icon-inner{background-color:#fff}.zen-icon-success.zen-icon-light-circle,.zen-icon-success.zen-icon-light-square{background-color:#d1fadf}.zen-icon-success.zen-icon-light-circle .zen-icon-inner,.zen-icon-success.zen-icon-light-square .zen-icon-inner{background-color:#039855}.zen-icon-success.zen-icon-light-circle-outline{background-color:#d1fadf;border-color:#ecfdf3}.zen-icon-success.zen-icon-light-circle-outline .zen-icon-inner{background-color:#039855}.zen-icon-success.zen-icon-dark-circle{background-color:#12b76a;border-color:#039855}.zen-icon-success.zen-icon-dark-circle .zen-icon-inner{background-color:#fff}.zen-icon-success.zen-icon-mid-square,.zen-icon-success.zen-icon-dark-square{background-color:#12b76a}.zen-icon-success.zen-icon-mid-square .zen-icon-inner,.zen-icon-success.zen-icon-dark-square .zen-icon-inner{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1552
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduIconComponent, isStandalone: false, selector: "zen-icon", inputs: { src: "src", name: "name", size: "size", color: "color", theme: "theme", customColor: "customColor" }, host: { properties: { "class.zen-icon--featured": "isFeatured" } }, usesOnChanges: true, ngImport: i0, template: "@if (isFeatured) {\n <div\n class=\"zen-icon-featured\"\n [ngClass]=\"['zen-icon-' + size, 'zen-icon-' + color, 'zen-icon-' + theme]\">\n <div class=\"zen-icon-inner\"\n [style.mask-image]=\"'url(' + resolvedSrc + ')'\"\n [style.-webkit-mask-image]=\"'url(' + resolvedSrc + ')'\"\n [style.background-color]=\"customColor || null\">\n </div>\n </div>\n}\n", styles: [":host{background-color:#000;width:24px;height:24px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;display:block}:host(.zen-icon--featured){background-color:transparent;width:auto;height:auto;-webkit-mask-size:unset;mask-size:unset;-webkit-mask-repeat:unset;mask-repeat:unset;display:inline-flex}.zen-icon-featured{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.zen-icon-xs{width:24px;height:24px}.zen-icon-xs .zen-icon-inner{width:12px;height:12px}.zen-icon-sm{width:32px;height:32px}.zen-icon-sm .zen-icon-inner{width:16px;height:16px}.zen-icon-md{width:40px;height:40px}.zen-icon-md .zen-icon-inner{width:20px;height:20px}.zen-icon-lg{width:48px;height:48px}.zen-icon-lg .zen-icon-inner{width:24px;height:24px}.zen-icon-xl{width:56px;height:56px}.zen-icon-xl .zen-icon-inner{width:28px;height:28px}.zen-icon-inner{display:block;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.zen-icon-light-circle,.zen-icon-light-circle-outline,.zen-icon-dark-circle{border-radius:50%}.zen-icon-xs.zen-icon-light-circle,.zen-icon-xs.zen-icon-light-circle-outline,.zen-icon-xs.zen-icon-dark-circle{border-radius:12px}.zen-icon-sm.zen-icon-light-circle,.zen-icon-sm.zen-icon-light-circle-outline,.zen-icon-sm.zen-icon-dark-circle{border-radius:16px}.zen-icon-md.zen-icon-light-circle,.zen-icon-md.zen-icon-light-circle-outline,.zen-icon-md.zen-icon-dark-circle{border-radius:20px}.zen-icon-lg.zen-icon-light-circle,.zen-icon-lg.zen-icon-light-circle-outline,.zen-icon-lg.zen-icon-dark-circle{border-radius:24px}.zen-icon-xl.zen-icon-light-circle,.zen-icon-xl.zen-icon-light-circle-outline,.zen-icon-xl.zen-icon-dark-circle{border-radius:28px}.zen-icon-xs.zen-icon-light-square,.zen-icon-xs.zen-icon-mid-square,.zen-icon-xs.zen-icon-dark-square{border-radius:4px}.zen-icon-sm.zen-icon-light-square,.zen-icon-sm.zen-icon-mid-square,.zen-icon-sm.zen-icon-dark-square{border-radius:6px}.zen-icon-md.zen-icon-light-square,.zen-icon-md.zen-icon-mid-square,.zen-icon-md.zen-icon-dark-square{border-radius:8px}.zen-icon-lg.zen-icon-light-square,.zen-icon-lg.zen-icon-mid-square,.zen-icon-lg.zen-icon-dark-square{border-radius:10px}.zen-icon-xl.zen-icon-light-square,.zen-icon-xl.zen-icon-mid-square,.zen-icon-xl.zen-icon-dark-square{border-radius:12px}.zen-icon-light-circle-outline{border-style:solid}.zen-icon-xs.zen-icon-light-circle-outline{border-width:2px}.zen-icon-sm.zen-icon-light-circle-outline{border-width:4px}.zen-icon-md.zen-icon-light-circle-outline{border-width:6px}.zen-icon-lg.zen-icon-light-circle-outline{border-width:8px}.zen-icon-xl.zen-icon-light-circle-outline{border-width:10px}.zen-icon-dark-circle{border-style:solid}.zen-icon-xs.zen-icon-dark-circle{border-width:2px}.zen-icon-sm.zen-icon-dark-circle{border-width:4px}.zen-icon-md.zen-icon-dark-circle{border-width:6px}.zen-icon-lg.zen-icon-dark-circle{border-width:8px}.zen-icon-xl.zen-icon-dark-circle{border-width:10px}.zen-icon-primary.zen-icon-light-circle,.zen-icon-primary.zen-icon-light-square{background-color:#e3eefb}.zen-icon-primary.zen-icon-light-circle .zen-icon-inner,.zen-icon-primary.zen-icon-light-square .zen-icon-inner{background-color:#136ab6}.zen-icon-primary.zen-icon-light-circle-outline{background-color:#e3eefb;border-color:#f1f7fe}.zen-icon-primary.zen-icon-light-circle-outline .zen-icon-inner{background-color:#136ab6}.zen-icon-primary.zen-icon-dark-circle{background-color:#136ab6;border-color:#105494}.zen-icon-primary.zen-icon-dark-circle .zen-icon-inner{background-color:#fff}.zen-icon-primary.zen-icon-mid-square{background-color:#2188d9}.zen-icon-primary.zen-icon-mid-square .zen-icon-inner{background-color:#fff}.zen-icon-primary.zen-icon-dark-square{background-color:#136ab6}.zen-icon-primary.zen-icon-dark-square .zen-icon-inner{background-color:#fff}.zen-icon-gray.zen-icon-light-circle,.zen-icon-gray.zen-icon-light-square{background-color:#f2f4f7}.zen-icon-gray.zen-icon-light-circle .zen-icon-inner,.zen-icon-gray.zen-icon-light-square .zen-icon-inner{background-color:#475467}.zen-icon-gray.zen-icon-light-circle-outline{background-color:#f2f4f7;border-color:#f9fafb}.zen-icon-gray.zen-icon-light-circle-outline .zen-icon-inner{background-color:#475467}.zen-icon-gray.zen-icon-dark-circle{background-color:#475467;border-color:#344054}.zen-icon-gray.zen-icon-dark-circle .zen-icon-inner{background-color:#fff}.zen-icon-gray.zen-icon-mid-square,.zen-icon-gray.zen-icon-dark-square{background-color:#475467}.zen-icon-gray.zen-icon-mid-square .zen-icon-inner,.zen-icon-gray.zen-icon-dark-square .zen-icon-inner{background-color:#fff}.zen-icon-error.zen-icon-light-circle,.zen-icon-error.zen-icon-light-square{background-color:#fee4e2}.zen-icon-error.zen-icon-light-circle .zen-icon-inner,.zen-icon-error.zen-icon-light-square .zen-icon-inner{background-color:#d92d20}.zen-icon-error.zen-icon-light-circle-outline{background-color:#fee4e2;border-color:#fef3f2}.zen-icon-error.zen-icon-light-circle-outline .zen-icon-inner{background-color:#d92d20}.zen-icon-error.zen-icon-dark-circle{background-color:#f04438;border-color:#d92d20}.zen-icon-error.zen-icon-dark-circle .zen-icon-inner{background-color:#fff}.zen-icon-error.zen-icon-mid-square,.zen-icon-error.zen-icon-dark-square{background-color:#f04438}.zen-icon-error.zen-icon-mid-square .zen-icon-inner,.zen-icon-error.zen-icon-dark-square .zen-icon-inner{background-color:#fff}.zen-icon-warning.zen-icon-light-circle,.zen-icon-warning.zen-icon-light-square{background-color:#fef0c7}.zen-icon-warning.zen-icon-light-circle .zen-icon-inner,.zen-icon-warning.zen-icon-light-square .zen-icon-inner{background-color:#dc6803}.zen-icon-warning.zen-icon-light-circle-outline{background-color:#fef0c7;border-color:#fffaeb}.zen-icon-warning.zen-icon-light-circle-outline .zen-icon-inner{background-color:#dc6803}.zen-icon-warning.zen-icon-dark-circle{background-color:#f79009;border-color:#dc6803}.zen-icon-warning.zen-icon-dark-circle .zen-icon-inner{background-color:#fff}.zen-icon-warning.zen-icon-mid-square,.zen-icon-warning.zen-icon-dark-square{background-color:#f79009}.zen-icon-warning.zen-icon-mid-square .zen-icon-inner,.zen-icon-warning.zen-icon-dark-square .zen-icon-inner{background-color:#fff}.zen-icon-success.zen-icon-light-circle,.zen-icon-success.zen-icon-light-square{background-color:#d1fadf}.zen-icon-success.zen-icon-light-circle .zen-icon-inner,.zen-icon-success.zen-icon-light-square .zen-icon-inner{background-color:#039855}.zen-icon-success.zen-icon-light-circle-outline{background-color:#d1fadf;border-color:#ecfdf3}.zen-icon-success.zen-icon-light-circle-outline .zen-icon-inner{background-color:#039855}.zen-icon-success.zen-icon-dark-circle{background-color:#12b76a;border-color:#039855}.zen-icon-success.zen-icon-dark-circle .zen-icon-inner{background-color:#fff}.zen-icon-success.zen-icon-mid-square,.zen-icon-success.zen-icon-dark-square{background-color:#12b76a}.zen-icon-success.zen-icon-mid-square .zen-icon-inner,.zen-icon-success.zen-icon-dark-square .zen-icon-inner{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1369
1553
|
}
|
|
1370
1554
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduIconComponent, decorators: [{
|
|
1371
1555
|
type: Component,
|
|
@@ -1919,13 +2103,13 @@ class ZenduDatepickerComponent {
|
|
|
1919
2103
|
}
|
|
1920
2104
|
this.updateDays();
|
|
1921
2105
|
}
|
|
1922
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatepickerComponent, deps: [{ token: i0.ElementRef }, { token: i1
|
|
1923
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDatepickerComponent, isStandalone: false, selector: "zen-datepicker", inputs: { date: "date", showTime: "showTime", showSeconds: "showSeconds", showDate: "showDate", parentContainer: "parentContainer", containerClass: "containerClass", minDate: "minDate", maxDate: "maxDate", boxDesign: "boxDesign", highlightDays: "highlightDays", autoConfirm: "autoConfirm", hint: "hint", highlightError: "highlightError", disabled: "disabled", readonly: "readonly", xPosition: "xPosition", yPosition: "yPosition", dispalyOverParent: "dispalyOverParent" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, viewQueries: [{ propertyName: "dateMenu", first: true, predicate: ["dateMenu"], descendants: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dateMenuTemplate", first: true, predicate: ["dateMenuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"date-component\">\n <!-- Material design datepicker toggle -->\n @if (!boxDesign) {\n <button class=\"date-toggle\"\n #triggerButton\n [disabled]=\"disabled || readonly\"\n (click)=\"togglePicker()\"\n [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n <div class=\"date-content\">\n <!-- date placeholder -->\n @if (!date && showDate && !showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date\" | translate}}\n </div>\n }\n @if (!date && showTime && !showDate) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Time\" | translate}}\n </div>\n }\n @if (!date && showTime && showDate && showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date & Time\" | translate}}\n </div>\n }\n <!-- Selected datetime -->\n @if (date) {\n <div>\n @if (showDate) {\n <span>{{formattedDate()}}</span>\n }\n @if (showTime) {\n <span> {{formattedTime()}}</span>\n }\n </div>\n }\n </div>\n <!-- Datepicker icon, depends on picker type -->\n <zen-icon class=\"date-icon\"\n [src]=\"getIcon()\"\n [ngClass]=\"{'filled': date}\">\n </zen-icon>\n </button>\n }\n\n <!-- Box design datepicker toggle -->\n @if (boxDesign) {\n <button class=\"date-toggle new-box-design\"\n #triggerButton\n [disabled]=\"disabled || readonly\"\n (click)=\"togglePicker()\"\n [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n <!-- Datepicker icon, depends on picker type -->\n <zen-icon class=\"date-icon\"\n [src]=\"getIcon()\"\n [ngClass]=\"{'filled': date}\">\n </zen-icon>\n <div class=\"date-content new-box-design\">\n <!-- date placeholder -->\n @if (!date && showDate && !showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date\" | translate}}\n </div>\n }\n @if (!date && showTime && !showDate) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Time\" | translate}}\n </div>\n }\n @if (!date && showTime && showDate && showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date & Time\" | translate}}\n </div>\n }\n <!-- Selected datetime -->\n @if (date) {\n <div>\n @if (showDate) {\n <span>{{formattedDate()}}</span>\n }\n @if (showTime) {\n <span> {{formattedTime()}}</span>\n }\n </div>\n }\n </div>\n </button>\n }\n\n <!-- Datepicker popup -->\n <ng-container *ngTemplateOutlet=\"dateMenuTemplate\">\n </ng-container>\n\n <ng-template #dateMenuTemplate>\n @if (isPickerVisible) {\n <div #dateMenu\n class=\"date-menu\"\n [ngClass]=\"{ 'right': right, 'bottom': bottom }\">\n <div class=\"date-modal\">\n @if (showDate) {\n <div class=\"days-toolbar\">\n <i (click)=\"prevMonth()\"\n class=\"material-icons\">navigate_before</i>\n <span class=\"title\"\n (click)=\"showMonthPicker()\">{{daysTitle}}</span>\n <i (click)=\"nextMonth()\"\n class=\"material-icons\">navigate_next</i>\n </div>\n <div class=\"days-container\">\n <div class=\"week-days\">\n @for (weekDay of weekDays; track weekDay) {\n <div\n class=\"week-day\">\n {{weekDay | translate}}\n </div>\n }\n </div>\n @for (row of dayRows; track row) {\n <div\n class=\"day-row\">\n @for (day of row.days; track day) {\n <div\n (click)=\"selectDay(day)\"\n class=\"day-item\"\n [class.ousideRange]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.disabledDay]=\"day.isDisabled\">\n {{day.lbl | translate}}\n @if (day.isHighlighted) {\n <zen-icon\n class=\"highlight-icon\"\n src=\"assets/ng-zenduit/icons/play.svg\"></zen-icon>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n @if (showTime) {\n <div\n class=\"time-container\">\n <div class=\"time-lbl\">\n {{\"Select Time\" | translate}}:\n </div>\n <div class=\"time-picker\">\n <div class=\"input-wrapper\">\n <div class=\"time-button\" (click)=\"hourUp()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </div>\n <input [(ngModel)]=\"hour\"\n (ngModelChange)=\"timeChanged()\" />\n <div class=\"time-button\" (click)=\"hourDown()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </div>\n </div>\n <span>:</span>\n <div class=\"input-wrapper\">\n <div class=\"time-button\" (click)=\"minUp()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </div>\n <input [(ngModel)]=\"min\"\n (ngModelChange)=\"timeChanged()\" />\n <div class=\"time-button\" (click)=\"minDown()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </div>\n </div>\n @if (showSeconds) {\n <span>:</span>\n }\n @if (showSeconds) {\n <div class=\"input-wrapper\">\n <div class=\"time-button\" (click)=\"secUp()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </div>\n <input [(ngModel)]=\"sec\"\n (ngModelChange)=\"timeChanged()\" />\n <div class=\"time-button\" (click)=\"secDown()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </div>\n </div>\n }\n <div class=\"am-pm-picker\">\n <div class=\"main\"\n (click)=\"toggleTime()\">\n {{(isPM ? 'PM' : 'AM') | translate}}\n </div>\n <div class=\"sub\"\n (click)=\"toggleTime()\">\n {{(isPM ? 'AM' : 'PM') | translate}}\n </div>\n </div>\n </div>\n </div>\n }\n @if (hint) {\n <div class=\"hint\"\n >\n <div class=\"hint-description\">\n {{hint.description | translate}}\n </div>\n <div class=\"hint-date\"\n (click)=\"selectHintDate(hint.date)\">\n {{hint.maskText | translate}}\n </div>\n </div>\n }\n @if (!autoConfirm || showTime) {\n <div class=\"footer\"\n >\n @if (date) {\n <button\n (click)=\"clear()\"\n class=\"button-stroked\">\n {{\"Clear\" | translate}}\n </button>\n }\n @if (!date) {\n <button\n (click)=\"cancel()\"\n class=\"button-stroked\">\n {{\"Cancel\" | translate}}\n </button>\n }\n <button [disabled]=\"!_dateToSet\"\n (click)=\"apply()\"\n class=\"button-flat\">\n {{\"Apply\" | translate}}\n </button>\n </div>\n }\n @if (monthPickerVisible) {\n <div class=\"month-picker\">\n <div class=\"days-toolbar\">\n <i (click)=\"prevYear()\"\n class=\"material-icons\">navigate_before</i>\n <span class=\"title\"\n (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n <i (click)=\"nextYear()\"\n class=\"material-icons\">navigate_next</i>\n </div>\n <div class=\"months-container\">\n @for (month of months; track month; let index = $index) {\n <div class=\"month-item\"\n (click)=\"selectMonth(index)\">\n {{ month | translate }}\n </div>\n }\n </div>\n </div>\n }\n @if (yearPickerVisible) {\n <div class=\"month-picker\">\n <div class=\"days-toolbar\">\n <i (click)=\"prevYearGroup()\"\n class=\"material-icons\">navigate_before</i>\n <span class=\"title\"\n (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n <i (click)=\"nextYearGroup()\"\n class=\"material-icons\">navigate_next</i>\n </div>\n <div class=\"months-container\">\n @for (year of years; track year) {\n <div class=\"month-item\"\n (click)=\"selectYear(year)\">\n {{ year }}\n </div>\n }\n </div>\n </div>\n }\n </div>\n <div class=\"date-modal-extra-space\"></div>\n </div>\n }\n </ng-template>\n</div>\n", styles: [".date-component{width:100%;position:relative}.date-component .date-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;gap:9px;transition:.3s;width:100%;background:var(--color-white-primary, #ffffff);appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid var(--color-white-tint-4, #d6d6d8);padding:0 0 8px;font-size:14px;font-style:normal;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.date-component .date-toggle.new-box-design{border:1px solid var(--color-white-tint-1, #f2f2f2);border-radius:2px;padding:6px 12px;gap:4px!important}.date-component .date-toggle:hover .date-placeholder{color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:hover .date-icon{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:focus,.date-component .date-toggle.active{border-color:var(--color-blue-primary, #2188d9)}.date-component .date-toggle:focus .date-icon,.date-component .date-toggle.active .date-icon{background-color:var(--color-blue-primary, #2188d9)!important}.date-component .date-toggle[disabled]{cursor:not-allowed;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle[disabled] .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle[disabled] .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle.readonly .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.error{border-color:var(--color-error-primary, #dc3e33)}.date-component .date-toggle.error .date-icon{background-color:var(--color-error-primary, #dc3e33)!important}.date-component .date-toggle.error .date-content.new-box-design{color:var(--color-error-primary, #dc3e33)!important}.date-component .date-content{flex:1;font-size:16px;text-align:left;height:18px;min-width:30px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap;transition:.3s}.date-component .date-content .date-placeholder{transition:.3s;color:var(--color-white-tint-6, #bebebe)}.date-component .date-content.new-box-design{color:var(--color-grey-shade-2, #828282)}.date-component .date-icon{width:24px;height:24px;background-color:var(--color-white-tint-6, #bebebe);transition:.3s}.date-component .date-icon.filled{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-menu{position:absolute;visibility:hidden}.date-component .time-container{display:flex;padding:16px 24px;justify-content:space-between;border-bottom:1px solid #f2f2f2;align-items:center}.date-component .time-container .time-lbl{font-weight:500;font-size:14px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap}.date-component .time-container .time-picker{display:flex;align-items:center;gap:7px}.date-component .time-container .time-picker .input-wrapper{display:flex;flex-direction:column;align-items:center}.date-component .time-container .time-picker .input-wrapper .time-button{display:flex;width:100%;align-items:center;justify-content:center;cursor:pointer;transition:.3s;border-radius:2px;overflow:hidden;height:18px}.date-component .time-container .time-picker .input-wrapper .time-button:hover{background-color:var(--color-blue-tint-1, #f4f9fd)}.date-component .time-container .time-picker .input-wrapper .time-button:hover zen-icon{background:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .input-wrapper zen-icon{background-color:var(--color-grey-shade-2, #828282);width:16px;height:16px;transition:.3s}.date-component .time-container .time-picker .input-wrapper input{width:30px;height:25px;text-align:center;border:1px solid var(--color-white-tint-1, #f2f2f2)}.date-component .time-container .time-picker .input-wrapper input:focus{outline:none;border-color:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .input-wrapper input{font-weight:400;font-size:14px;color:var(--color-grey-primary, #4f4f4f);border-radius:2px}.date-component .time-container .time-picker .am-pm-picker{font-weight:400;font-size:14px;padding-top:18px;cursor:pointer}.date-component .time-container .time-picker .am-pm-picker .main{color:var(--color-grey-primary, #4f4f4f)}.date-component .time-container .time-picker .am-pm-picker .sub{color:var(--color-white-tint-4, #d6d6d8)}.date-component .hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 24px;border-bottom:1px solid #ECECED;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:#4f4f4f}.date-component .hint .hint-date{cursor:pointer;text-decoration-line:underline}.date-component .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}.date-component .month-picker{position:absolute;inset:0;background:#fff}.date-component .month-picker .months-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px 20px}.date-component .month-picker .months-container .month-item{display:inline-flex;align-items:center;justify-content:center;height:50px;width:30%;cursor:pointer;color:var(--color-grey-shade-2, #828282);border-radius:4px}.date-component .month-picker .months-container .month-item:hover{color:#fff;background-color:var(--color-blue-primary, #2188d9)}.date-component .right{right:0}.date-component .bottom{bottom:42px}.date-menu{width:320px;background:transparent;z-index:1200}.date-menu .date-modal{border-radius:8px;width:320px;overflow-y:auto;white-space:initial;background:#fff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a}.date-menu .date-modal-extra-space{height:10px;margin:0 0 -10px;background:transparent}.date-menu .days-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 34px}.date-menu .days-toolbar .material-icons{color:#333;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none}.date-menu .days-toolbar .title{font-size:14px;font-weight:500;color:var(--color-grey-primary, #4f4f4f);cursor:pointer}.date-menu .days-container{border-bottom:1px solid #f2f2f2;padding:0 24px}.date-menu .days-container .week-days{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--color-grey-primary, #4f4f4f);font-weight:500;margin-bottom:8px;cursor:default}.date-menu .days-container .week-days .week-day{width:39px;text-align:center}.date-menu .days-container .day-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;color:var(--color-grey-primary, #4f4f4f)}.date-menu .days-container .day-row .day-item{position:relative;width:39px;height:39px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:4px}.date-menu .days-container .day-row .day-item .highlight-icon{position:absolute;right:0;height:14px;width:14px;background-color:#5cbb3a}.date-menu .days-container .day-row .day-item:hover{background:var(--color-blue-tint-1, #f4f9fd);color:var(--color-blue-primary, #2188d9)}.date-menu .days-container .day-row .day-item.selected{background:var(--color-primary, #2188d9);color:#fff}.date-menu .days-container .day-row .day-item.selected .highlight-icon{background-color:#fff}.date-menu .days-container .day-row .day-item.ousideRange{color:#b8b9bc}.date-menu .days-container .day-row .day-item.disabledDay{color:#b8b9bc;cursor:not-allowed!important}.date-menu .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}::ng-deep .custom-backdrop{position:absolute;top:0;left:0;width:100vw;height:100vh}::ng-deep .cdk-overlay-pane.custom-overlay{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2106
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatepickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2107
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDatepickerComponent, isStandalone: false, selector: "zen-datepicker", inputs: { date: "date", showTime: "showTime", showSeconds: "showSeconds", showDate: "showDate", parentContainer: "parentContainer", containerClass: "containerClass", minDate: "minDate", maxDate: "maxDate", boxDesign: "boxDesign", highlightDays: "highlightDays", autoConfirm: "autoConfirm", hint: "hint", highlightError: "highlightError", disabled: "disabled", readonly: "readonly", xPosition: "xPosition", yPosition: "yPosition", dispalyOverParent: "dispalyOverParent" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:scroll": "scroll()" } }, viewQueries: [{ propertyName: "dateMenu", first: true, predicate: ["dateMenu"], descendants: true }, { propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dateMenuTemplate", first: true, predicate: ["dateMenuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"date-component\">\n <!-- Material design datepicker toggle -->\n @if (!boxDesign) {\n <button class=\"date-toggle\"\n #triggerButton\n [disabled]=\"disabled || readonly\"\n (click)=\"togglePicker()\"\n [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n <div class=\"date-content\">\n <!-- date placeholder -->\n @if (!date && showDate && !showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date\" | translate}}\n </div>\n }\n @if (!date && showTime && !showDate) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Time\" | translate}}\n </div>\n }\n @if (!date && showTime && showDate && showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date & Time\" | translate}}\n </div>\n }\n <!-- Selected datetime -->\n @if (date) {\n <div>\n @if (showDate) {\n <span>{{formattedDate()}}</span>\n }\n @if (showTime) {\n <span> {{formattedTime()}}</span>\n }\n </div>\n }\n </div>\n <!-- Datepicker icon, depends on picker type -->\n <zen-icon class=\"date-icon\"\n [src]=\"getIcon()\"\n [ngClass]=\"{'filled': date}\">\n </zen-icon>\n </button>\n }\n\n <!-- Box design datepicker toggle -->\n @if (boxDesign) {\n <button class=\"date-toggle new-box-design\"\n #triggerButton\n [disabled]=\"disabled || readonly\"\n (click)=\"togglePicker()\"\n [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n <!-- Datepicker icon, depends on picker type -->\n <zen-icon class=\"date-icon\"\n [src]=\"getIcon()\"\n [ngClass]=\"{'filled': date}\">\n </zen-icon>\n <div class=\"date-content new-box-design\">\n <!-- date placeholder -->\n @if (!date && showDate && !showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date\" | translate}}\n </div>\n }\n @if (!date && showTime && !showDate) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Time\" | translate}}\n </div>\n }\n @if (!date && showTime && showDate && showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date & Time\" | translate}}\n </div>\n }\n <!-- Selected datetime -->\n @if (date) {\n <div>\n @if (showDate) {\n <span>{{formattedDate()}}</span>\n }\n @if (showTime) {\n <span> {{formattedTime()}}</span>\n }\n </div>\n }\n </div>\n </button>\n }\n\n <!-- Datepicker popup -->\n <ng-container *ngTemplateOutlet=\"dateMenuTemplate\">\n </ng-container>\n\n <ng-template #dateMenuTemplate>\n @if (isPickerVisible) {\n <div #dateMenu\n class=\"date-menu\"\n [ngClass]=\"{ 'right': right, 'bottom': bottom }\">\n <div class=\"date-modal\">\n @if (showDate) {\n <div class=\"days-toolbar\">\n <i (click)=\"prevMonth()\"\n class=\"material-icons\">navigate_before</i>\n <span class=\"title\"\n (click)=\"showMonthPicker()\">{{daysTitle}}</span>\n <i (click)=\"nextMonth()\"\n class=\"material-icons\">navigate_next</i>\n </div>\n <div class=\"days-container\">\n <div class=\"week-days\">\n @for (weekDay of weekDays; track weekDay) {\n <div\n class=\"week-day\">\n {{weekDay | translate}}\n </div>\n }\n </div>\n @for (row of dayRows; track row) {\n <div\n class=\"day-row\">\n @for (day of row.days; track day) {\n <div\n (click)=\"selectDay(day)\"\n class=\"day-item\"\n [class.ousideRange]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.disabledDay]=\"day.isDisabled\">\n {{day.lbl | translate}}\n @if (day.isHighlighted) {\n <zen-icon\n class=\"highlight-icon\"\n src=\"assets/ng-zenduit/icons/play.svg\"></zen-icon>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n @if (showTime) {\n <div\n class=\"time-container\">\n <div class=\"time-lbl\">\n {{\"Select Time\" | translate}}:\n </div>\n <div class=\"time-picker\">\n <div class=\"input-wrapper\">\n <div class=\"time-button\" (click)=\"hourUp()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </div>\n <input [(ngModel)]=\"hour\"\n (ngModelChange)=\"timeChanged()\" />\n <div class=\"time-button\" (click)=\"hourDown()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </div>\n </div>\n <span>:</span>\n <div class=\"input-wrapper\">\n <div class=\"time-button\" (click)=\"minUp()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </div>\n <input [(ngModel)]=\"min\"\n (ngModelChange)=\"timeChanged()\" />\n <div class=\"time-button\" (click)=\"minDown()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </div>\n </div>\n @if (showSeconds) {\n <span>:</span>\n }\n @if (showSeconds) {\n <div class=\"input-wrapper\">\n <div class=\"time-button\" (click)=\"secUp()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </div>\n <input [(ngModel)]=\"sec\"\n (ngModelChange)=\"timeChanged()\" />\n <div class=\"time-button\" (click)=\"secDown()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </div>\n </div>\n }\n <div class=\"am-pm-picker\">\n <div class=\"main\"\n (click)=\"toggleTime()\">\n {{(isPM ? 'PM' : 'AM') | translate}}\n </div>\n <div class=\"sub\"\n (click)=\"toggleTime()\">\n {{(isPM ? 'AM' : 'PM') | translate}}\n </div>\n </div>\n </div>\n </div>\n }\n @if (hint) {\n <div class=\"hint\"\n >\n <div class=\"hint-description\">\n {{hint.description | translate}}\n </div>\n <div class=\"hint-date\"\n (click)=\"selectHintDate(hint.date)\">\n {{hint.maskText | translate}}\n </div>\n </div>\n }\n @if (!autoConfirm || showTime) {\n <div class=\"footer\"\n >\n @if (date) {\n <button\n (click)=\"clear()\"\n class=\"button-stroked\">\n {{\"Clear\" | translate}}\n </button>\n }\n @if (!date) {\n <button\n (click)=\"cancel()\"\n class=\"button-stroked\">\n {{\"Cancel\" | translate}}\n </button>\n }\n <button [disabled]=\"!_dateToSet\"\n (click)=\"apply()\"\n class=\"button-flat\">\n {{\"Apply\" | translate}}\n </button>\n </div>\n }\n @if (monthPickerVisible) {\n <div class=\"month-picker\">\n <div class=\"days-toolbar\">\n <i (click)=\"prevYear()\"\n class=\"material-icons\">navigate_before</i>\n <span class=\"title\"\n (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n <i (click)=\"nextYear()\"\n class=\"material-icons\">navigate_next</i>\n </div>\n <div class=\"months-container\">\n @for (month of months; track month; let index = $index) {\n <div class=\"month-item\"\n (click)=\"selectMonth(index)\">\n {{ month | translate }}\n </div>\n }\n </div>\n </div>\n }\n @if (yearPickerVisible) {\n <div class=\"month-picker\">\n <div class=\"days-toolbar\">\n <i (click)=\"prevYearGroup()\"\n class=\"material-icons\">navigate_before</i>\n <span class=\"title\"\n (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n <i (click)=\"nextYearGroup()\"\n class=\"material-icons\">navigate_next</i>\n </div>\n <div class=\"months-container\">\n @for (year of years; track year) {\n <div class=\"month-item\"\n (click)=\"selectYear(year)\">\n {{ year }}\n </div>\n }\n </div>\n </div>\n }\n </div>\n <div class=\"date-modal-extra-space\"></div>\n </div>\n }\n </ng-template>\n</div>\n", styles: [".date-component{width:100%;position:relative}.date-component .date-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;gap:9px;transition:.3s;width:100%;background:var(--color-white-primary, #ffffff);appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid var(--color-white-tint-4, #d6d6d8);padding:0 0 8px;font-size:14px;font-style:normal;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.date-component .date-toggle.new-box-design{border:1px solid var(--color-white-tint-1, #f2f2f2);border-radius:2px;padding:6px 12px;gap:4px!important}.date-component .date-toggle:hover .date-placeholder{color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:hover .date-icon{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:focus,.date-component .date-toggle.active{border-color:var(--color-blue-primary, #2188d9)}.date-component .date-toggle:focus .date-icon,.date-component .date-toggle.active .date-icon{background-color:var(--color-blue-primary, #2188d9)!important}.date-component .date-toggle[disabled]{cursor:not-allowed;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle[disabled] .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle[disabled] .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle.readonly .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.error{border-color:var(--color-error-primary, #dc3e33)}.date-component .date-toggle.error .date-icon{background-color:var(--color-error-primary, #dc3e33)!important}.date-component .date-toggle.error .date-content.new-box-design{color:var(--color-error-primary, #dc3e33)!important}.date-component .date-content{flex:1;font-size:16px;text-align:left;height:18px;min-width:30px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap;transition:.3s}.date-component .date-content .date-placeholder{transition:.3s;color:var(--color-white-tint-6, #bebebe)}.date-component .date-content.new-box-design{color:var(--color-grey-shade-2, #828282)}.date-component .date-icon{width:24px;height:24px;background-color:var(--color-white-tint-6, #bebebe);transition:.3s}.date-component .date-icon.filled{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-menu{position:absolute;visibility:hidden}.date-component .time-container{display:flex;padding:16px 24px;justify-content:space-between;border-bottom:1px solid #f2f2f2;align-items:center}.date-component .time-container .time-lbl{font-weight:500;font-size:14px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap}.date-component .time-container .time-picker{display:flex;align-items:center;gap:7px}.date-component .time-container .time-picker .input-wrapper{display:flex;flex-direction:column;align-items:center}.date-component .time-container .time-picker .input-wrapper .time-button{display:flex;width:100%;align-items:center;justify-content:center;cursor:pointer;transition:.3s;border-radius:2px;overflow:hidden;height:18px}.date-component .time-container .time-picker .input-wrapper .time-button:hover{background-color:var(--color-blue-tint-1, #f4f9fd)}.date-component .time-container .time-picker .input-wrapper .time-button:hover zen-icon{background:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .input-wrapper zen-icon{background-color:var(--color-grey-shade-2, #828282);width:16px;height:16px;transition:.3s}.date-component .time-container .time-picker .input-wrapper input{width:30px;height:25px;text-align:center;border:1px solid var(--color-white-tint-1, #f2f2f2)}.date-component .time-container .time-picker .input-wrapper input:focus{outline:none;border-color:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .input-wrapper input{font-weight:400;font-size:14px;color:var(--color-grey-primary, #4f4f4f);border-radius:2px}.date-component .time-container .time-picker .am-pm-picker{font-weight:400;font-size:14px;padding-top:18px;cursor:pointer}.date-component .time-container .time-picker .am-pm-picker .main{color:var(--color-grey-primary, #4f4f4f)}.date-component .time-container .time-picker .am-pm-picker .sub{color:var(--color-white-tint-4, #d6d6d8)}.date-component .hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 24px;border-bottom:1px solid #ECECED;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:#4f4f4f}.date-component .hint .hint-date{cursor:pointer;text-decoration-line:underline}.date-component .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}.date-component .month-picker{position:absolute;inset:0;background:#fff}.date-component .month-picker .months-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px 20px}.date-component .month-picker .months-container .month-item{display:inline-flex;align-items:center;justify-content:center;height:50px;width:30%;cursor:pointer;color:var(--color-grey-shade-2, #828282);border-radius:4px}.date-component .month-picker .months-container .month-item:hover{color:#fff;background-color:var(--color-blue-primary, #2188d9)}.date-component .right{right:0}.date-component .bottom{bottom:42px}.date-menu{width:320px;background:transparent;z-index:1200}.date-menu .date-modal{border-radius:8px;width:320px;overflow-y:auto;white-space:initial;background:#fff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a}.date-menu .date-modal-extra-space{height:10px;margin:0 0 -10px;background:transparent}.date-menu .days-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 34px}.date-menu .days-toolbar .material-icons{color:#333;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none}.date-menu .days-toolbar .title{font-size:14px;font-weight:500;color:var(--color-grey-primary, #4f4f4f);cursor:pointer}.date-menu .days-container{border-bottom:1px solid #f2f2f2;padding:0 24px}.date-menu .days-container .week-days{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--color-grey-primary, #4f4f4f);font-weight:500;margin-bottom:8px;cursor:default}.date-menu .days-container .week-days .week-day{width:39px;text-align:center}.date-menu .days-container .day-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;color:var(--color-grey-primary, #4f4f4f)}.date-menu .days-container .day-row .day-item{position:relative;width:39px;height:39px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:4px}.date-menu .days-container .day-row .day-item .highlight-icon{position:absolute;right:0;height:14px;width:14px;background-color:#5cbb3a}.date-menu .days-container .day-row .day-item:hover{background:var(--color-blue-tint-1, #f4f9fd);color:var(--color-blue-primary, #2188d9)}.date-menu .days-container .day-row .day-item.selected{background:var(--color-primary, #2188d9);color:#fff}.date-menu .days-container .day-row .day-item.selected .highlight-icon{background-color:#fff}.date-menu .days-container .day-row .day-item.ousideRange{color:#b8b9bc}.date-menu .days-container .day-row .day-item.disabledDay{color:#b8b9bc;cursor:not-allowed!important}.date-menu .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}::ng-deep .custom-backdrop{position:absolute;top:0;left:0;width:100vw;height:100vh}::ng-deep .cdk-overlay-pane.custom-overlay{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1924
2108
|
}
|
|
1925
2109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatepickerComponent, decorators: [{
|
|
1926
2110
|
type: Component,
|
|
1927
2111
|
args: [{ selector: 'zen-datepicker', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"date-component\">\n <!-- Material design datepicker toggle -->\n @if (!boxDesign) {\n <button class=\"date-toggle\"\n #triggerButton\n [disabled]=\"disabled || readonly\"\n (click)=\"togglePicker()\"\n [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n <div class=\"date-content\">\n <!-- date placeholder -->\n @if (!date && showDate && !showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date\" | translate}}\n </div>\n }\n @if (!date && showTime && !showDate) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Time\" | translate}}\n </div>\n }\n @if (!date && showTime && showDate && showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date & Time\" | translate}}\n </div>\n }\n <!-- Selected datetime -->\n @if (date) {\n <div>\n @if (showDate) {\n <span>{{formattedDate()}}</span>\n }\n @if (showTime) {\n <span> {{formattedTime()}}</span>\n }\n </div>\n }\n </div>\n <!-- Datepicker icon, depends on picker type -->\n <zen-icon class=\"date-icon\"\n [src]=\"getIcon()\"\n [ngClass]=\"{'filled': date}\">\n </zen-icon>\n </button>\n }\n\n <!-- Box design datepicker toggle -->\n @if (boxDesign) {\n <button class=\"date-toggle new-box-design\"\n #triggerButton\n [disabled]=\"disabled || readonly\"\n (click)=\"togglePicker()\"\n [ngClass]=\"{'active': isPickerVisible,'error': highlightError,'readonly': readonly}\">\n <!-- Datepicker icon, depends on picker type -->\n <zen-icon class=\"date-icon\"\n [src]=\"getIcon()\"\n [ngClass]=\"{'filled': date}\">\n </zen-icon>\n <div class=\"date-content new-box-design\">\n <!-- date placeholder -->\n @if (!date && showDate && !showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date\" | translate}}\n </div>\n }\n @if (!date && showTime && !showDate) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Time\" | translate}}\n </div>\n }\n @if (!date && showTime && showDate && showTime) {\n <div class=\"date-placeholder\"\n >\n {{\"Select Date & Time\" | translate}}\n </div>\n }\n <!-- Selected datetime -->\n @if (date) {\n <div>\n @if (showDate) {\n <span>{{formattedDate()}}</span>\n }\n @if (showTime) {\n <span> {{formattedTime()}}</span>\n }\n </div>\n }\n </div>\n </button>\n }\n\n <!-- Datepicker popup -->\n <ng-container *ngTemplateOutlet=\"dateMenuTemplate\">\n </ng-container>\n\n <ng-template #dateMenuTemplate>\n @if (isPickerVisible) {\n <div #dateMenu\n class=\"date-menu\"\n [ngClass]=\"{ 'right': right, 'bottom': bottom }\">\n <div class=\"date-modal\">\n @if (showDate) {\n <div class=\"days-toolbar\">\n <i (click)=\"prevMonth()\"\n class=\"material-icons\">navigate_before</i>\n <span class=\"title\"\n (click)=\"showMonthPicker()\">{{daysTitle}}</span>\n <i (click)=\"nextMonth()\"\n class=\"material-icons\">navigate_next</i>\n </div>\n <div class=\"days-container\">\n <div class=\"week-days\">\n @for (weekDay of weekDays; track weekDay) {\n <div\n class=\"week-day\">\n {{weekDay | translate}}\n </div>\n }\n </div>\n @for (row of dayRows; track row) {\n <div\n class=\"day-row\">\n @for (day of row.days; track day) {\n <div\n (click)=\"selectDay(day)\"\n class=\"day-item\"\n [class.ousideRange]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.disabledDay]=\"day.isDisabled\">\n {{day.lbl | translate}}\n @if (day.isHighlighted) {\n <zen-icon\n class=\"highlight-icon\"\n src=\"assets/ng-zenduit/icons/play.svg\"></zen-icon>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n @if (showTime) {\n <div\n class=\"time-container\">\n <div class=\"time-lbl\">\n {{\"Select Time\" | translate}}:\n </div>\n <div class=\"time-picker\">\n <div class=\"input-wrapper\">\n <div class=\"time-button\" (click)=\"hourUp()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </div>\n <input [(ngModel)]=\"hour\"\n (ngModelChange)=\"timeChanged()\" />\n <div class=\"time-button\" (click)=\"hourDown()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </div>\n </div>\n <span>:</span>\n <div class=\"input-wrapper\">\n <div class=\"time-button\" (click)=\"minUp()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </div>\n <input [(ngModel)]=\"min\"\n (ngModelChange)=\"timeChanged()\" />\n <div class=\"time-button\" (click)=\"minDown()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </div>\n </div>\n @if (showSeconds) {\n <span>:</span>\n }\n @if (showSeconds) {\n <div class=\"input-wrapper\">\n <div class=\"time-button\" (click)=\"secUp()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </div>\n <input [(ngModel)]=\"sec\"\n (ngModelChange)=\"timeChanged()\" />\n <div class=\"time-button\" (click)=\"secDown()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </div>\n </div>\n }\n <div class=\"am-pm-picker\">\n <div class=\"main\"\n (click)=\"toggleTime()\">\n {{(isPM ? 'PM' : 'AM') | translate}}\n </div>\n <div class=\"sub\"\n (click)=\"toggleTime()\">\n {{(isPM ? 'AM' : 'PM') | translate}}\n </div>\n </div>\n </div>\n </div>\n }\n @if (hint) {\n <div class=\"hint\"\n >\n <div class=\"hint-description\">\n {{hint.description | translate}}\n </div>\n <div class=\"hint-date\"\n (click)=\"selectHintDate(hint.date)\">\n {{hint.maskText | translate}}\n </div>\n </div>\n }\n @if (!autoConfirm || showTime) {\n <div class=\"footer\"\n >\n @if (date) {\n <button\n (click)=\"clear()\"\n class=\"button-stroked\">\n {{\"Clear\" | translate}}\n </button>\n }\n @if (!date) {\n <button\n (click)=\"cancel()\"\n class=\"button-stroked\">\n {{\"Cancel\" | translate}}\n </button>\n }\n <button [disabled]=\"!_dateToSet\"\n (click)=\"apply()\"\n class=\"button-flat\">\n {{\"Apply\" | translate}}\n </button>\n </div>\n }\n @if (monthPickerVisible) {\n <div class=\"month-picker\">\n <div class=\"days-toolbar\">\n <i (click)=\"prevYear()\"\n class=\"material-icons\">navigate_before</i>\n <span class=\"title\"\n (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n <i (click)=\"nextYear()\"\n class=\"material-icons\">navigate_next</i>\n </div>\n <div class=\"months-container\">\n @for (month of months; track month; let index = $index) {\n <div class=\"month-item\"\n (click)=\"selectMonth(index)\">\n {{ month | translate }}\n </div>\n }\n </div>\n </div>\n }\n @if (yearPickerVisible) {\n <div class=\"month-picker\">\n <div class=\"days-toolbar\">\n <i (click)=\"prevYearGroup()\"\n class=\"material-icons\">navigate_before</i>\n <span class=\"title\"\n (click)=\"showYearPicker()\">{{ currentSlot | date: 'yyyy' }}</span>\n <i (click)=\"nextYearGroup()\"\n class=\"material-icons\">navigate_next</i>\n </div>\n <div class=\"months-container\">\n @for (year of years; track year) {\n <div class=\"month-item\"\n (click)=\"selectYear(year)\">\n {{ year }}\n </div>\n }\n </div>\n </div>\n }\n </div>\n <div class=\"date-modal-extra-space\"></div>\n </div>\n }\n </ng-template>\n</div>\n", styles: [".date-component{width:100%;position:relative}.date-component .date-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;gap:9px;transition:.3s;width:100%;background:var(--color-white-primary, #ffffff);appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid var(--color-white-tint-4, #d6d6d8);padding:0 0 8px;font-size:14px;font-style:normal;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.date-component .date-toggle.new-box-design{border:1px solid var(--color-white-tint-1, #f2f2f2);border-radius:2px;padding:6px 12px;gap:4px!important}.date-component .date-toggle:hover .date-placeholder{color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:hover .date-icon{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-toggle:focus,.date-component .date-toggle.active{border-color:var(--color-blue-primary, #2188d9)}.date-component .date-toggle:focus .date-icon,.date-component .date-toggle.active .date-icon{background-color:var(--color-blue-primary, #2188d9)!important}.date-component .date-toggle[disabled]{cursor:not-allowed;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle[disabled] .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle[disabled] .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.date-component .date-toggle.readonly .date-content{color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.readonly .date-icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.date-component .date-toggle.error{border-color:var(--color-error-primary, #dc3e33)}.date-component .date-toggle.error .date-icon{background-color:var(--color-error-primary, #dc3e33)!important}.date-component .date-toggle.error .date-content.new-box-design{color:var(--color-error-primary, #dc3e33)!important}.date-component .date-content{flex:1;font-size:16px;text-align:left;height:18px;min-width:30px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap;transition:.3s}.date-component .date-content .date-placeholder{transition:.3s;color:var(--color-white-tint-6, #bebebe)}.date-component .date-content.new-box-design{color:var(--color-grey-shade-2, #828282)}.date-component .date-icon{width:24px;height:24px;background-color:var(--color-white-tint-6, #bebebe);transition:.3s}.date-component .date-icon.filled{background-color:var(--color-grey-shade-2, #828282)}.date-component .date-menu{position:absolute;visibility:hidden}.date-component .time-container{display:flex;padding:16px 24px;justify-content:space-between;border-bottom:1px solid #f2f2f2;align-items:center}.date-component .time-container .time-lbl{font-weight:500;font-size:14px;color:var(--color-grey-primary, #4f4f4f);white-space:nowrap}.date-component .time-container .time-picker{display:flex;align-items:center;gap:7px}.date-component .time-container .time-picker .input-wrapper{display:flex;flex-direction:column;align-items:center}.date-component .time-container .time-picker .input-wrapper .time-button{display:flex;width:100%;align-items:center;justify-content:center;cursor:pointer;transition:.3s;border-radius:2px;overflow:hidden;height:18px}.date-component .time-container .time-picker .input-wrapper .time-button:hover{background-color:var(--color-blue-tint-1, #f4f9fd)}.date-component .time-container .time-picker .input-wrapper .time-button:hover zen-icon{background:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .input-wrapper zen-icon{background-color:var(--color-grey-shade-2, #828282);width:16px;height:16px;transition:.3s}.date-component .time-container .time-picker .input-wrapper input{width:30px;height:25px;text-align:center;border:1px solid var(--color-white-tint-1, #f2f2f2)}.date-component .time-container .time-picker .input-wrapper input:focus{outline:none;border-color:var(--color-blue-primary, #2188d9)}.date-component .time-container .time-picker .input-wrapper input{font-weight:400;font-size:14px;color:var(--color-grey-primary, #4f4f4f);border-radius:2px}.date-component .time-container .time-picker .am-pm-picker{font-weight:400;font-size:14px;padding-top:18px;cursor:pointer}.date-component .time-container .time-picker .am-pm-picker .main{color:var(--color-grey-primary, #4f4f4f)}.date-component .time-container .time-picker .am-pm-picker .sub{color:var(--color-white-tint-4, #d6d6d8)}.date-component .hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 24px;border-bottom:1px solid #ECECED;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:#4f4f4f}.date-component .hint .hint-date{cursor:pointer;text-decoration-line:underline}.date-component .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}.date-component .month-picker{position:absolute;inset:0;background:#fff}.date-component .month-picker .months-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px 20px}.date-component .month-picker .months-container .month-item{display:inline-flex;align-items:center;justify-content:center;height:50px;width:30%;cursor:pointer;color:var(--color-grey-shade-2, #828282);border-radius:4px}.date-component .month-picker .months-container .month-item:hover{color:#fff;background-color:var(--color-blue-primary, #2188d9)}.date-component .right{right:0}.date-component .bottom{bottom:42px}.date-menu{width:320px;background:transparent;z-index:1200}.date-menu .date-modal{border-radius:8px;width:320px;overflow-y:auto;white-space:initial;background:#fff;box-shadow:0 2px 4px -1px #00000008,0 4px 5px #0000003d,0 1px 10px #0000001a}.date-menu .date-modal-extra-space{height:10px;margin:0 0 -10px;background:transparent}.date-menu .days-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 34px}.date-menu .days-toolbar .material-icons{color:#333;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none}.date-menu .days-toolbar .title{font-size:14px;font-weight:500;color:var(--color-grey-primary, #4f4f4f);cursor:pointer}.date-menu .days-container{border-bottom:1px solid #f2f2f2;padding:0 24px}.date-menu .days-container .week-days{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--color-grey-primary, #4f4f4f);font-weight:500;margin-bottom:8px;cursor:default}.date-menu .days-container .week-days .week-day{width:39px;text-align:center}.date-menu .days-container .day-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:400;color:var(--color-grey-primary, #4f4f4f)}.date-menu .days-container .day-row .day-item{position:relative;width:39px;height:39px;display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:4px}.date-menu .days-container .day-row .day-item .highlight-icon{position:absolute;right:0;height:14px;width:14px;background-color:#5cbb3a}.date-menu .days-container .day-row .day-item:hover{background:var(--color-blue-tint-1, #f4f9fd);color:var(--color-blue-primary, #2188d9)}.date-menu .days-container .day-row .day-item.selected{background:var(--color-primary, #2188d9);color:#fff}.date-menu .days-container .day-row .day-item.selected .highlight-icon{background-color:#fff}.date-menu .days-container .day-row .day-item.ousideRange{color:#b8b9bc}.date-menu .days-container .day-row .day-item.disabledDay{color:#b8b9bc;cursor:not-allowed!important}.date-menu .footer{display:flex;justify-content:end;gap:16px;padding:16px 24px}::ng-deep .custom-backdrop{position:absolute;top:0;left:0;width:100vw;height:100vh}::ng-deep .cdk-overlay-pane.custom-overlay{position:absolute}\n"] }]
|
|
1928
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1
|
|
2112
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.TranslateService }], propDecorators: { date: [{
|
|
1929
2113
|
type: Input
|
|
1930
2114
|
}], dateChange: [{
|
|
1931
2115
|
type: Output
|
|
@@ -2328,7 +2512,7 @@ class ZenduGroupsComponent {
|
|
|
2328
2512
|
return this._treeMap;
|
|
2329
2513
|
}
|
|
2330
2514
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduGroupsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2331
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduGroupsComponent, isStandalone: false, selector: "zen-groups", inputs: { dataSource: "dataSource", filteredDataSource: "filteredDataSource", hideSelectAll: "hideSelectAll", isSelectedAll: "isSelectedAll", inline: "inline", width: "width", placeholder: "placeholder", hideSearch: "hideSearch", idProp: "idProp", displayProp: "displayProp" }, outputs: { isSelectedAllChange: "isSelectedAllChange", checkedChange: "checkedChange" }, host: { listeners: { "window:mousedown": "onOutsideClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Dropdown mode (default) -->\n@if (!inline) {\n <div class=\"zen-groups-dropdown\" [style.width]=\"width\">\n <button class=\"zen-groups-toggle\"\n (click)=\"toggleDropdown()\"\n [ngClass]=\"{'active': isOpen}\">\n <span class=\"zen-groups-toggle-label\">\n @if (!selectedLabel) {\n <span class=\"zen-groups-placeholder\">{{ placeholder | translate }}</span>\n }\n @if (selectedLabel) {\n <span class=\"zen-groups-value\">{{ selectedLabel }}</span>\n }\n </span>\n <i class=\"material-icons zen-groups-chevron\">expand_more</i>\n </button>\n @if (isOpen) {\n <div class=\"zen-groups-panel\" [class.open-upward]=\"openUpward\">\n @if (!hideSearch) {\n <div class=\"zen-groups-search\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"onSearchChange()\"></zen-search-box>\n </div>\n }\n <ng-container *ngTemplateOutlet=\"treeContent\"></ng-container>\n </div>\n }\n </div>\n}\n\n<!-- Inline mode (used inside zen-filter) -->\n@if (inline) {\n <div class=\"zen-groups-inline\">\n @if (!hideSearch) {\n <div class=\"zen-groups-search\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"onSearchChange()\"></zen-search-box>\n </div>\n }\n <ng-container *ngTemplateOutlet=\"treeContent\"></ng-container>\n </div>\n}\n\n<!-- Shared tree content -->\n<ng-template #treeContent>\n <div class=\"zen-groups-tree\">\n @if (!hideSelectAll) {\n <div class=\"action-item-checkbox select-all\">\n @if (dataSource.length === displayDataSource.length) {\n <zen-checkbox\n [(checked)]=\"isSelectedAll\"\n [indeterminate]=\"hasActiveItems && !isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll()\">\n </zen-checkbox>\n }\n </div>\n }\n\n @for (dsItem of displayDataSource; track dsItem) {\n @if (isTreeItemVisible(dsItem)) {\n <div\n class=\"action-item-checkbox tree-item\"\n [style.padding-left.px]=\"(inline ? 0 : 24) + (dsItem.level || 0) * 24\">\n @if (dsItem.level > 0) {\n @for (connector of getTreeConnectors(dsItem); track connector; let i = $index) {\n <div\n class=\"tree-connector\"\n [ngClass]=\"'tree-connector-' + connector\"\n [style.left.px]=\"(inline ? 8 : 32) + i * 24\">\n </div>\n }\n }\n <div class=\"tree-item-row\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [indeterminate]=\"isTreeItemIndeterminate(dsItem)\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"onCheckChanged(dsItem)\"\n [label]=\"dsItem[displayProp]?.toString() | translate\"></zen-checkbox>\n @if (hasChildren(dsItem)) {\n <span\n class=\"tree-item-badge\">{{ getChildCount(dsItem) }}</span>\n }\n </div>\n @if (hasChildren(dsItem)) {\n <button\n class=\"tree-item-toggle\"\n (click)=\"toggleTreeNode(dsItem)\">\n <i class=\"material-icons tree-toggle-icon\"\n [class.open]=\"dsItem.isOpen\">expand_more</i>\n </button>\n }\n </div>\n }\n }\n\n @if (searchText && displayDataSource.length === 0) {\n <div class=\"zen-groups-no-results\">\n {{ 'No Results Found' | translate }}\n </div>\n }\n </div>\n</ng-template>\n", styles: [".zen-groups-dropdown{position:relative;display:inline-block}.zen-groups-dropdown .zen-groups-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:#fff;border:1px solid #d0d5dd;border-radius:8px;padding:10px 14px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;color:#344054;transition:border-color .2s;appearance:none;outline:none}.zen-groups-dropdown .zen-groups-toggle:hover{border-color:#98a2b3}.zen-groups-dropdown .zen-groups-toggle:focus,.zen-groups-dropdown .zen-groups-toggle.active{border-color:var(--color-primary, #2188d9);box-shadow:0 0 0 3px rgba(var(--color-primary, #2188d9),.12)}.zen-groups-dropdown .zen-groups-toggle.active .zen-groups-chevron{transform:rotate(180deg);color:var(--color-primary, #2188d9)}.zen-groups-dropdown .zen-groups-toggle .zen-groups-toggle-label{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zen-groups-dropdown .zen-groups-toggle .zen-groups-placeholder{color:#667085}.zen-groups-dropdown .zen-groups-toggle .zen-groups-value{color:#344054}.zen-groups-dropdown .zen-groups-toggle .zen-groups-chevron{font-size:20px;color:#667085;transition:transform .2s,color .2s;flex-shrink:0;margin-left:8px}.zen-groups-dropdown .zen-groups-panel{position:absolute;top:calc(100% + 4px);left:0}.zen-groups-dropdown .zen-groups-panel.open-upward{top:auto;bottom:calc(100% + 4px)}.zen-groups-dropdown .zen-groups-panel{width:100%;background:#fff;border:1px solid #eaecf0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;z-index:10;max-height:300px;overflow-y:auto;padding:4px 0}.zen-groups-search{padding:8px 12px;border-bottom:1px solid #eaecf0}.zen-groups-tree .zen-groups-no-results{padding:10px 24px;color:#667085;font-size:14px;font-weight:400}.zen-groups-tree .select-all{font-weight:500}.zen-groups-tree .action-item-checkbox{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.zen-groups-tree .action-item-checkbox:hover{background:transparent}.zen-groups-tree .tree-item{display:flex;align-items:center;justify-content:space-between;position:relative}.zen-groups-tree .tree-item .tree-item-row{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.zen-groups-tree .tree-item .tree-item-badge{background:#f1f7fe;color:#105494;font-size:12px;font-weight:500;line-height:18px;padding:2px 8px;border-radius:16px;white-space:nowrap}.zen-groups-tree .tree-item .tree-connector{position:absolute;top:0;width:1px;background:#eaecf0;pointer-events:none}.zen-groups-tree .tree-item .tree-connector.tree-connector-through,.zen-groups-tree .tree-item .tree-connector.tree-connector-branch,.zen-groups-tree .tree-item .tree-connector.tree-connector-elbow{bottom:0}.zen-groups-tree .tree-item .tree-connector.tree-connector-none{display:none}.zen-groups-tree .tree-item .tree-item-toggle{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.zen-groups-tree .tree-item .tree-item-toggle .tree-toggle-icon{font-size:20px;color:#667085;transition:transform .2s;transform:rotate(-90deg)}.zen-groups-tree .tree-item .tree-item-toggle .tree-toggle-icon.open{transform:rotate(0)}.zen-groups-inline .zen-groups-tree .action-item-checkbox,.zen-groups-inline .zen-groups-tree .zen-groups-no-results{padding-left:0;padding-right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2515
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduGroupsComponent, isStandalone: false, selector: "zen-groups", inputs: { dataSource: "dataSource", filteredDataSource: "filteredDataSource", hideSelectAll: "hideSelectAll", isSelectedAll: "isSelectedAll", inline: "inline", width: "width", placeholder: "placeholder", hideSearch: "hideSearch", idProp: "idProp", displayProp: "displayProp" }, outputs: { isSelectedAllChange: "isSelectedAllChange", checkedChange: "checkedChange" }, host: { listeners: { "window:mousedown": "onOutsideClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Dropdown mode (default) -->\n@if (!inline) {\n <div class=\"zen-groups-dropdown\" [style.width]=\"width\">\n <button class=\"zen-groups-toggle\"\n (click)=\"toggleDropdown()\"\n [ngClass]=\"{'active': isOpen}\">\n <span class=\"zen-groups-toggle-label\">\n @if (!selectedLabel) {\n <span class=\"zen-groups-placeholder\">{{ placeholder | translate }}</span>\n }\n @if (selectedLabel) {\n <span class=\"zen-groups-value\">{{ selectedLabel }}</span>\n }\n </span>\n <i class=\"material-icons zen-groups-chevron\">expand_more</i>\n </button>\n @if (isOpen) {\n <div class=\"zen-groups-panel\" [class.open-upward]=\"openUpward\">\n @if (!hideSearch) {\n <div class=\"zen-groups-search\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"onSearchChange()\"></zen-search-box>\n </div>\n }\n <ng-container *ngTemplateOutlet=\"treeContent\"></ng-container>\n </div>\n }\n </div>\n}\n\n<!-- Inline mode (used inside zen-filter) -->\n@if (inline) {\n <div class=\"zen-groups-inline\">\n @if (!hideSearch) {\n <div class=\"zen-groups-search\">\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"onSearchChange()\"></zen-search-box>\n </div>\n }\n <ng-container *ngTemplateOutlet=\"treeContent\"></ng-container>\n </div>\n}\n\n<!-- Shared tree content -->\n<ng-template #treeContent>\n <div class=\"zen-groups-tree\">\n @if (!hideSelectAll) {\n <div class=\"action-item-checkbox select-all\">\n @if (dataSource.length === displayDataSource.length) {\n <zen-checkbox\n [(checked)]=\"isSelectedAll\"\n [indeterminate]=\"hasActiveItems && !isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll()\">\n </zen-checkbox>\n }\n </div>\n }\n\n @for (dsItem of displayDataSource; track dsItem) {\n @if (isTreeItemVisible(dsItem)) {\n <div\n class=\"action-item-checkbox tree-item\"\n [style.padding-left.px]=\"(inline ? 0 : 24) + (dsItem.level || 0) * 24\">\n @if (dsItem.level > 0) {\n @for (connector of getTreeConnectors(dsItem); track connector; let i = $index) {\n <div\n class=\"tree-connector\"\n [ngClass]=\"'tree-connector-' + connector\"\n [style.left.px]=\"(inline ? 8 : 32) + i * 24\">\n </div>\n }\n }\n <div class=\"tree-item-row\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [indeterminate]=\"isTreeItemIndeterminate(dsItem)\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"onCheckChanged(dsItem)\"\n [label]=\"dsItem[displayProp]?.toString() | translate\"></zen-checkbox>\n @if (hasChildren(dsItem)) {\n <span\n class=\"tree-item-badge\">{{ getChildCount(dsItem) }}</span>\n }\n </div>\n @if (hasChildren(dsItem)) {\n <button\n class=\"tree-item-toggle\"\n (click)=\"toggleTreeNode(dsItem)\">\n <i class=\"material-icons tree-toggle-icon\"\n [class.open]=\"dsItem.isOpen\">expand_more</i>\n </button>\n }\n </div>\n }\n }\n\n @if (searchText && displayDataSource.length === 0) {\n <div class=\"zen-groups-no-results\">\n {{ 'No Results Found' | translate }}\n </div>\n }\n </div>\n</ng-template>\n", styles: [".zen-groups-dropdown{position:relative;display:inline-block}.zen-groups-dropdown .zen-groups-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:#fff;border:1px solid #d0d5dd;border-radius:8px;padding:10px 14px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;color:#344054;transition:border-color .2s;appearance:none;outline:none}.zen-groups-dropdown .zen-groups-toggle:hover{border-color:#98a2b3}.zen-groups-dropdown .zen-groups-toggle:focus,.zen-groups-dropdown .zen-groups-toggle.active{border-color:var(--color-primary, #2188d9);box-shadow:0 0 0 3px rgba(var(--color-primary, #2188d9),.12)}.zen-groups-dropdown .zen-groups-toggle.active .zen-groups-chevron{transform:rotate(180deg);color:var(--color-primary, #2188d9)}.zen-groups-dropdown .zen-groups-toggle .zen-groups-toggle-label{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zen-groups-dropdown .zen-groups-toggle .zen-groups-placeholder{color:#667085}.zen-groups-dropdown .zen-groups-toggle .zen-groups-value{color:#344054}.zen-groups-dropdown .zen-groups-toggle .zen-groups-chevron{font-size:20px;color:#667085;transition:transform .2s,color .2s;flex-shrink:0;margin-left:8px}.zen-groups-dropdown .zen-groups-panel{position:absolute;top:calc(100% + 4px);left:0}.zen-groups-dropdown .zen-groups-panel.open-upward{top:auto;bottom:calc(100% + 4px)}.zen-groups-dropdown .zen-groups-panel{width:100%;background:#fff;border:1px solid #eaecf0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;z-index:10;max-height:300px;overflow-y:auto;padding:4px 0}.zen-groups-search{padding:8px 12px;border-bottom:1px solid #eaecf0}.zen-groups-tree .zen-groups-no-results{padding:10px 24px;color:#667085;font-size:14px;font-weight:400}.zen-groups-tree .select-all{font-weight:500}.zen-groups-tree .action-item-checkbox{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.zen-groups-tree .action-item-checkbox:hover{background:transparent}.zen-groups-tree .tree-item{display:flex;align-items:center;justify-content:space-between;position:relative}.zen-groups-tree .tree-item .tree-item-row{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.zen-groups-tree .tree-item .tree-item-badge{background:#f1f7fe;color:#105494;font-size:12px;font-weight:500;line-height:18px;padding:2px 8px;border-radius:16px;white-space:nowrap}.zen-groups-tree .tree-item .tree-connector{position:absolute;top:0;width:1px;background:#eaecf0;pointer-events:none}.zen-groups-tree .tree-item .tree-connector.tree-connector-through,.zen-groups-tree .tree-item .tree-connector.tree-connector-branch,.zen-groups-tree .tree-item .tree-connector.tree-connector-elbow{bottom:0}.zen-groups-tree .tree-item .tree-connector.tree-connector-none{display:none}.zen-groups-tree .tree-item .tree-item-toggle{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.zen-groups-tree .tree-item .tree-item-toggle .tree-toggle-icon{font-size:20px;color:#667085;transition:transform .2s;transform:rotate(-90deg)}.zen-groups-tree .tree-item .tree-item-toggle .tree-toggle-icon.open{transform:rotate(0)}.zen-groups-inline .zen-groups-tree .action-item-checkbox,.zen-groups-inline .zen-groups-tree .zen-groups-no-results{padding-left:0;padding-right:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2332
2516
|
}
|
|
2333
2517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduGroupsComponent, decorators: [{
|
|
2334
2518
|
type: Component,
|
|
@@ -2387,7 +2571,7 @@ class ZenduRadioButtonComponent {
|
|
|
2387
2571
|
this.radioChange.emit(event.target.value);
|
|
2388
2572
|
}
|
|
2389
2573
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2390
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduRadioButtonComponent, isStandalone: false, selector: "zen-radio", inputs: { selected: "selected", label: "label", value: "value", name: "name", disabled: "disabled", imageUrl: "imageUrl", size: "size", supportingText: "supportingText" }, outputs: { radioChange: "radioChange" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"radio-component\"\n [ngClass]=\"{'disabled-radio': disabled, 'radio-md': size === 'md'}\"\n for=\"{{value}}\">\n <input type=\"radio\"\n class=\"radio-input\"\n name=\"{{name}}\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n id=\"{{value}}\"\n [checked]=\"selectedRadio === value\"\n (change)=\"emitChange($event)\" />\n\n <span class=\"radio-indicator\"></span>\n\n @if (label || supportingText) {\n <div class=\"radio-text-wrap\"\n >\n <span class=\"app-radio-button-label\">\n @if (imageUrl) {\n <img class=\"radio-image\"\n [src]=\"imageUrl\"\n >\n }\n {{label | translate}}\n </span>\n @if (supportingText) {\n <span class=\"app-radio-supporting-text\"\n >\n {{supportingText}}\n </span>\n }\n </div>\n }\n</label>\n", styles: [".radio-component{display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:14px}.radio-component .radio-input{position:absolute;left:-9999px}.radio-component .radio-indicator{position:relative;width:16px;min-width:16px;height:16px;min-height:16px;border-radius:50%;border:1.6px solid #D0D5DD;background:#fff;box-sizing:border-box;margin-top:2px;transition:border-color .2s,background .2s}.radio-component .radio-indicator:after{content:\"\";background:#136ab6;width:6px;height:6px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2);opacity:0;transition:transform .3s linear,opacity .3s linear}.radio-component .radio-text-wrap{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.radio-component .app-radio-button-label{font-weight:500;font-size:14px;line-height:20px;color:#344054;display:flex;align-items:center}.radio-component .app-radio-supporting-text{font-weight:400;font-size:14px;line-height:20px;color:#667085}.radio-component .radio-image{margin-right:8px}.radio-component:hover .radio-indicator{background:#e3eefb;border-color:#136ab6}.radio-component .radio-input:focus~.radio-indicator{border-color:#88c1f1;box-shadow:0 0 0 4px #f4ebff}.radio-component .radio-input:checked~.radio-indicator{border-color:#136ab6;background:#f1f7fe}.radio-component .radio-input:checked~.radio-indicator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.radio-component:hover .radio-input:checked~.radio-indicator{background:#e3eefb;border-color:#136ab6}.radio-component.disabled-radio{cursor:not-allowed}.radio-component.disabled-radio .radio-indicator,.radio-component.disabled-radio:hover .radio-indicator{border-color:#eaecf0;background:#f2f4f7}.radio-component.disabled-radio .radio-input:checked~.radio-indicator{border-color:#eaecf0;background:#f2f4f7}.radio-component.disabled-radio .radio-input:checked~.radio-indicator:after{background:#eaecf0}.radio-component.disabled-radio:hover .radio-input:checked~.radio-indicator{border-color:#eaecf0;background:#f2f4f7}.radio-component.disabled-radio .app-radio-button-label,.radio-component.disabled-radio .app-radio-supporting-text{color:#d0d5dd}.radio-component.radio-md{gap:12px}.radio-component.radio-md .radio-indicator{width:20px;min-width:20px;height:20px;min-height:20px}.radio-component.radio-md .radio-indicator:after{width:8px;height:8px}.radio-component.radio-md .app-radio-button-label,.radio-component.radio-md .app-radio-supporting-text{font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2574
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduRadioButtonComponent, isStandalone: false, selector: "zen-radio", inputs: { selected: "selected", label: "label", value: "value", name: "name", disabled: "disabled", imageUrl: "imageUrl", size: "size", supportingText: "supportingText" }, outputs: { radioChange: "radioChange" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"radio-component\"\n [ngClass]=\"{'disabled-radio': disabled, 'radio-md': size === 'md'}\"\n for=\"{{value}}\">\n <input type=\"radio\"\n class=\"radio-input\"\n name=\"{{name}}\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n id=\"{{value}}\"\n [checked]=\"selectedRadio === value\"\n (change)=\"emitChange($event)\" />\n\n <span class=\"radio-indicator\"></span>\n\n @if (label || supportingText) {\n <div class=\"radio-text-wrap\"\n >\n <span class=\"app-radio-button-label\">\n @if (imageUrl) {\n <img class=\"radio-image\"\n [src]=\"imageUrl\"\n >\n }\n {{label | translate}}\n </span>\n @if (supportingText) {\n <span class=\"app-radio-supporting-text\"\n >\n {{supportingText}}\n </span>\n }\n </div>\n }\n</label>\n", styles: [".radio-component{display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:14px}.radio-component .radio-input{position:absolute;left:-9999px}.radio-component .radio-indicator{position:relative;width:16px;min-width:16px;height:16px;min-height:16px;border-radius:50%;border:1.6px solid #D0D5DD;background:#fff;box-sizing:border-box;margin-top:2px;transition:border-color .2s,background .2s}.radio-component .radio-indicator:after{content:\"\";background:#136ab6;width:6px;height:6px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2);opacity:0;transition:transform .3s linear,opacity .3s linear}.radio-component .radio-text-wrap{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.radio-component .app-radio-button-label{font-weight:500;font-size:14px;line-height:20px;color:#344054;display:flex;align-items:center}.radio-component .app-radio-supporting-text{font-weight:400;font-size:14px;line-height:20px;color:#667085}.radio-component .radio-image{margin-right:8px}.radio-component:hover .radio-indicator{background:#e3eefb;border-color:#136ab6}.radio-component .radio-input:focus~.radio-indicator{border-color:#88c1f1;box-shadow:0 0 0 4px #f4ebff}.radio-component .radio-input:checked~.radio-indicator{border-color:#136ab6;background:#f1f7fe}.radio-component .radio-input:checked~.radio-indicator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.radio-component:hover .radio-input:checked~.radio-indicator{background:#e3eefb;border-color:#136ab6}.radio-component.disabled-radio{cursor:not-allowed}.radio-component.disabled-radio .radio-indicator,.radio-component.disabled-radio:hover .radio-indicator{border-color:#eaecf0;background:#f2f4f7}.radio-component.disabled-radio .radio-input:checked~.radio-indicator{border-color:#eaecf0;background:#f2f4f7}.radio-component.disabled-radio .radio-input:checked~.radio-indicator:after{background:#eaecf0}.radio-component.disabled-radio:hover .radio-input:checked~.radio-indicator{border-color:#eaecf0;background:#f2f4f7}.radio-component.disabled-radio .app-radio-button-label,.radio-component.disabled-radio .app-radio-supporting-text{color:#d0d5dd}.radio-component.radio-md{gap:12px}.radio-component.radio-md .radio-indicator{width:20px;min-width:20px;height:20px;min-height:20px}.radio-component.radio-md .radio-indicator:after{width:8px;height:8px}.radio-component.radio-md .app-radio-button-label,.radio-component.radio-md .app-radio-supporting-text{font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2391
2575
|
}
|
|
2392
2576
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduRadioButtonComponent, decorators: [{
|
|
2393
2577
|
type: Component,
|
|
@@ -2429,6 +2613,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
2429
2613
|
const ZEN_DATE_PICKER_DEFAULT_PRESETS = new InjectionToken('ZEN_DATE_PICKER_DEFAULT_PRESETS');
|
|
2430
2614
|
|
|
2431
2615
|
const MOBILE_BREAKPOINT = 768;
|
|
2616
|
+
// Minimum viewport width needed to show the range picker's dual-calendar
|
|
2617
|
+
// desktop layout (presets sidebar ~192px + two 328px calendars + dividers,
|
|
2618
|
+
// plus viewport margins). Below this we collapse to the single-calendar compact
|
|
2619
|
+
// layout, so the panel stays usable at high OS zoom or in small windows — not
|
|
2620
|
+
// only below the mobile breakpoint.
|
|
2621
|
+
const RANGE_DESKTOP_MIN_WIDTH = 880;
|
|
2622
|
+
// Gap between the trigger and the panel, and the margin the panel is kept clear
|
|
2623
|
+
// of the viewport edges. The margin mirrors the SCSS max-height/max-width
|
|
2624
|
+
// fallback (`calc(100vh - 32px)`).
|
|
2625
|
+
const PANEL_GAP = 8;
|
|
2626
|
+
const VIEWPORT_MARGIN = 16;
|
|
2627
|
+
// Never clamp the scrollable panel below this — a shorter panel is unusable;
|
|
2628
|
+
// it scrolls internally instead (and the SCSS fallback still caps it to the
|
|
2629
|
+
// viewport).
|
|
2630
|
+
const MIN_PANEL_HEIGHT = 160;
|
|
2432
2631
|
class ZenduDatePickerDropdownComponent {
|
|
2433
2632
|
constructor(_element, _translate, globalPresets) {
|
|
2434
2633
|
this._element = _element;
|
|
@@ -2467,6 +2666,8 @@ class ZenduDatePickerDropdownComponent {
|
|
|
2467
2666
|
this.mobile = false;
|
|
2468
2667
|
this.isOpen = false;
|
|
2469
2668
|
this.dropdownStyle = {};
|
|
2669
|
+
// rAF handle used to throttle repositioning while the panel is open.
|
|
2670
|
+
this._positionRafId = null;
|
|
2470
2671
|
// Left calendar state
|
|
2471
2672
|
this.leftCurrentSlot = new Date();
|
|
2472
2673
|
this.leftDayRows = [];
|
|
@@ -2540,6 +2741,7 @@ class ZenduDatePickerDropdownComponent {
|
|
|
2540
2741
|
})
|
|
2541
2742
|
}
|
|
2542
2743
|
];
|
|
2744
|
+
this._onViewportChange = () => this.schedulePositionUpdate();
|
|
2543
2745
|
if (globalPresets && globalPresets.length) {
|
|
2544
2746
|
this.defaultPresets = globalPresets;
|
|
2545
2747
|
}
|
|
@@ -2549,9 +2751,18 @@ class ZenduDatePickerDropdownComponent {
|
|
|
2549
2751
|
}
|
|
2550
2752
|
onResize() {
|
|
2551
2753
|
this.checkMobile();
|
|
2754
|
+
if (this.isOpen) {
|
|
2755
|
+
this.schedulePositionUpdate();
|
|
2756
|
+
}
|
|
2552
2757
|
}
|
|
2553
2758
|
checkMobile() {
|
|
2554
|
-
|
|
2759
|
+
const width = window.innerWidth;
|
|
2760
|
+
// Space-aware: collapse the range layout to a single calendar when the
|
|
2761
|
+
// viewport is too narrow to fit the dual-calendar desktop panel — this
|
|
2762
|
+
// covers high OS zoom and small windows, not only widths below the
|
|
2763
|
+
// mobile breakpoint.
|
|
2764
|
+
const cannotFitDesktopRange = this.type === 'range' && width < RANGE_DESKTOP_MIN_WIDTH;
|
|
2765
|
+
this.mobile = width < this.mobileBreakpoint || cannotFitDesktopRange;
|
|
2555
2766
|
}
|
|
2556
2767
|
ngOnChanges(changes) {
|
|
2557
2768
|
if (changes['date'] && this.date) {
|
|
@@ -2563,8 +2774,14 @@ class ZenduDatePickerDropdownComponent {
|
|
|
2563
2774
|
if (changes['endDate'] && this.endDate) {
|
|
2564
2775
|
this._selectedEnd = new Date(this.endDate);
|
|
2565
2776
|
}
|
|
2777
|
+
// `type`/`mobileBreakpoint` feed the space-aware layout decision.
|
|
2778
|
+
if (changes['type'] || changes['mobileBreakpoint']) {
|
|
2779
|
+
this.checkMobile();
|
|
2780
|
+
}
|
|
2781
|
+
}
|
|
2782
|
+
ngOnDestroy() {
|
|
2783
|
+
this.removeRepositionListeners();
|
|
2566
2784
|
}
|
|
2567
|
-
ngOnDestroy() { }
|
|
2568
2785
|
outsideHandling(event) {
|
|
2569
2786
|
if (!this.isOpen)
|
|
2570
2787
|
return;
|
|
@@ -2663,6 +2880,9 @@ class ZenduDatePickerDropdownComponent {
|
|
|
2663
2880
|
}
|
|
2664
2881
|
}
|
|
2665
2882
|
open() {
|
|
2883
|
+
// Recompute the layout for the current viewport/zoom before rendering,
|
|
2884
|
+
// so the correct (desktop vs compact) branch is shown on open.
|
|
2885
|
+
this.checkMobile();
|
|
2666
2886
|
this.isOpen = true;
|
|
2667
2887
|
this._selectedDate = this.date ? new Date(this.date) : null;
|
|
2668
2888
|
this._selectedStart = this.startDate ? new Date(this.startDate) : null;
|
|
@@ -2689,56 +2909,106 @@ class ZenduDatePickerDropdownComponent {
|
|
|
2689
2909
|
this.rightCurrentSlot = moment(this.leftCurrentSlot).add(1, 'month').toDate();
|
|
2690
2910
|
}
|
|
2691
2911
|
this.updateCalendars();
|
|
2912
|
+
this.addRepositionListeners();
|
|
2692
2913
|
this.updateDropdownPosition();
|
|
2693
2914
|
}
|
|
2694
2915
|
updateDropdownPosition() {
|
|
2695
|
-
|
|
2696
|
-
// is hidden (external control drives the popup).
|
|
2697
|
-
const anchorEl = this.triggerBtn?.nativeElement
|
|
2698
|
-
?? this._element.nativeElement;
|
|
2916
|
+
const anchorEl = this.anchorElement();
|
|
2699
2917
|
if (!anchorEl)
|
|
2700
2918
|
return;
|
|
2701
|
-
//
|
|
2919
|
+
// Synchronous first placement so the panel opens without a flash. The
|
|
2920
|
+
// panel hasn't rendered yet (it renders this change-detection pass), so
|
|
2921
|
+
// we anchor it and cap its height to the space on the chosen side up
|
|
2922
|
+
// front — that way the footer can't be pushed off-screen even before we
|
|
2923
|
+
// measure the real panel. `clampToViewport()` then refines it once the
|
|
2924
|
+
// dual calendars have laid out.
|
|
2702
2925
|
const rect = anchorEl.getBoundingClientRect();
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
2711
|
-
|
|
2712
|
-
|
|
2713
|
-
|
|
2714
|
-
|
|
2715
|
-
|
|
2716
|
-
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2926
|
+
const viewportHeight = window.innerHeight;
|
|
2927
|
+
const spaceBelow = viewportHeight - rect.bottom - PANEL_GAP - VIEWPORT_MARGIN;
|
|
2928
|
+
const spaceAbove = rect.top - PANEL_GAP - VIEWPORT_MARGIN;
|
|
2929
|
+
this.dropdownStyle = spaceBelow >= spaceAbove
|
|
2930
|
+
? {
|
|
2931
|
+
left: `${rect.left}px`,
|
|
2932
|
+
top: `${rect.bottom + PANEL_GAP}px`,
|
|
2933
|
+
'max-height': `${Math.max(MIN_PANEL_HEIGHT, spaceBelow)}px`
|
|
2934
|
+
}
|
|
2935
|
+
: {
|
|
2936
|
+
left: `${rect.left}px`,
|
|
2937
|
+
bottom: `${viewportHeight - rect.top + PANEL_GAP}px`,
|
|
2938
|
+
'max-height': `${Math.max(MIN_PANEL_HEIGHT, spaceAbove)}px`
|
|
2939
|
+
};
|
|
2940
|
+
// Measure AFTER the calendars render. The dual-calendar range layout is
|
|
2941
|
+
// tall, and a single pre-render frame can mis-measure its height and
|
|
2942
|
+
// place the footer off-screen — so wait two frames, then clamp using the
|
|
2943
|
+
// real panel size.
|
|
2944
|
+
requestAnimationFrame(() => requestAnimationFrame(() => this.clampToViewport()));
|
|
2945
|
+
}
|
|
2946
|
+
/**
|
|
2947
|
+
* Re-clamp the open panel to the viewport using its real measured size.
|
|
2948
|
+
* Keeps the panel anchored to the trigger and guarantees the footer stays
|
|
2949
|
+
* reachable (the panel scrolls internally) at any viewport size or zoom.
|
|
2950
|
+
*/
|
|
2951
|
+
clampToViewport() {
|
|
2952
|
+
if (!this.isOpen)
|
|
2953
|
+
return;
|
|
2954
|
+
const anchorEl = this.anchorElement();
|
|
2955
|
+
const panelEl = this._element.nativeElement.querySelector('.dropdown-menu');
|
|
2956
|
+
if (!anchorEl || !panelEl)
|
|
2957
|
+
return;
|
|
2958
|
+
const rect = anchorEl.getBoundingClientRect();
|
|
2959
|
+
const viewportWidth = window.innerWidth;
|
|
2960
|
+
const viewportHeight = window.innerHeight;
|
|
2961
|
+
const panelWidth = panelEl.offsetWidth;
|
|
2962
|
+
const panelHeight = panelEl.scrollHeight;
|
|
2963
|
+
const spaceBelow = viewportHeight - rect.bottom - PANEL_GAP - VIEWPORT_MARGIN;
|
|
2964
|
+
const spaceAbove = rect.top - PANEL_GAP - VIEWPORT_MARGIN;
|
|
2965
|
+
const style = {};
|
|
2966
|
+
// Horizontal: keep the panel fully on-screen.
|
|
2967
|
+
style['left'] = `${Math.max(VIEWPORT_MARGIN, Math.min(rect.left, viewportWidth - panelWidth - VIEWPORT_MARGIN))}px`;
|
|
2968
|
+
// Vertical: open below when it fits or there is more room below,
|
|
2969
|
+
// otherwise above. Always cap max-height to the available space so the
|
|
2970
|
+
// footer stays reachable via the panel's internal scroll.
|
|
2971
|
+
if (panelHeight <= spaceBelow || spaceBelow >= spaceAbove) {
|
|
2972
|
+
style['top'] = `${rect.bottom + PANEL_GAP}px`;
|
|
2973
|
+
style['max-height'] = `${Math.max(MIN_PANEL_HEIGHT, spaceBelow)}px`;
|
|
2974
|
+
}
|
|
2975
|
+
else {
|
|
2976
|
+
style['bottom'] = `${viewportHeight - rect.top + PANEL_GAP}px`;
|
|
2977
|
+
style['max-height'] = `${Math.max(MIN_PANEL_HEIGHT, spaceAbove)}px`;
|
|
2978
|
+
}
|
|
2979
|
+
this.dropdownStyle = style;
|
|
2980
|
+
}
|
|
2981
|
+
/**
|
|
2982
|
+
* Anchor to the trigger button, or to the host element when the trigger is
|
|
2983
|
+
* hidden (an external control drives the popup).
|
|
2984
|
+
*/
|
|
2985
|
+
anchorElement() {
|
|
2986
|
+
return this.triggerBtn?.nativeElement ?? this._element.nativeElement ?? null;
|
|
2987
|
+
}
|
|
2988
|
+
addRepositionListeners() {
|
|
2989
|
+
// Capture phase so scrolls inside ANY ancestor (e.g. a dialog body) are
|
|
2990
|
+
// caught — `scroll` does not bubble, so a window:scroll listener alone
|
|
2991
|
+
// would miss them and the fixed panel would detach from its trigger.
|
|
2992
|
+
window.addEventListener('scroll', this._onViewportChange, true);
|
|
2993
|
+
}
|
|
2994
|
+
removeRepositionListeners() {
|
|
2995
|
+
window.removeEventListener('scroll', this._onViewportChange, true);
|
|
2996
|
+
if (this._positionRafId != null) {
|
|
2997
|
+
cancelAnimationFrame(this._positionRafId);
|
|
2998
|
+
this._positionRafId = null;
|
|
2999
|
+
}
|
|
3000
|
+
}
|
|
3001
|
+
schedulePositionUpdate() {
|
|
3002
|
+
if (this._positionRafId != null)
|
|
3003
|
+
return;
|
|
3004
|
+
this._positionRafId = requestAnimationFrame(() => {
|
|
3005
|
+
this._positionRafId = null;
|
|
3006
|
+
this.clampToViewport();
|
|
2738
3007
|
});
|
|
2739
3008
|
}
|
|
2740
3009
|
close() {
|
|
2741
3010
|
this.isOpen = false;
|
|
3011
|
+
this.removeRepositionListeners();
|
|
2742
3012
|
}
|
|
2743
3013
|
// Calendar navigation
|
|
2744
3014
|
leftPrevMonth() {
|
|
@@ -3167,11 +3437,11 @@ class ZenduDatePickerDropdownComponent {
|
|
|
3167
3437
|
return moment(day.date).isSame(moment(this._selectedEnd), 'day');
|
|
3168
3438
|
}
|
|
3169
3439
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatePickerDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i2.TranslateService }, { token: ZEN_DATE_PICKER_DEFAULT_PRESETS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDatePickerDropdownComponent, isStandalone: false, selector: "zen-date-picker-dropdown", inputs: { type: "type", date: "date", startDate: "startDate", endDate: "endDate", presets: "presets", minDate: "minDate", maxDate: "maxDate", disabled: "disabled", dateMarkers: "dateMarkers", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint", timePicker: "timePicker", autoApply: "autoApply", hideTrigger: "hideTrigger", label: "label", required: "required", size: "size" }, outputs: { dateChange: "dateChange", startDateChange: "startDateChange", endDateChange: "endDateChange", rangeChange: "rangeChange" }, host: { listeners: { "window:resize": "onResize()", "window:mousedown": "outsideHandling($event)" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-dpd\">\n <!-- Field label -->\n @if (label) {\n <label class=\"zen-dpd-label\">\n {{ label }}\n @if (required) {\n <span class=\"zen-dpd-required\">*</span>\n }\n </label>\n }\n\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [class.size-form]=\"size === 'form'\"\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">–</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">–</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n (input)=\"onHoursInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours(target)\"\n (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n (input)=\"onMinutesInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes(target)\"\n (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n (click)=\"setPeriod('AM', target)\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n (click)=\"setPeriod('PM', target)\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
3440
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDatePickerDropdownComponent, isStandalone: false, selector: "zen-date-picker-dropdown", inputs: { type: "type", date: "date", startDate: "startDate", endDate: "endDate", presets: "presets", minDate: "minDate", maxDate: "maxDate", disabled: "disabled", dateMarkers: "dateMarkers", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint", timePicker: "timePicker", autoApply: "autoApply", hideTrigger: "hideTrigger", label: "label", required: "required", size: "size" }, outputs: { dateChange: "dateChange", startDateChange: "startDateChange", endDateChange: "endDateChange", rangeChange: "rangeChange" }, host: { listeners: { "window:resize": "onResize()", "window:mousedown": "outsideHandling($event)" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-dpd\">\n <!-- Field label -->\n @if (label) {\n <label class=\"zen-dpd-label\">\n {{ label }}\n @if (required) {\n <span class=\"zen-dpd-required\">*</span>\n }\n </label>\n }\n\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [class.size-form]=\"size === 'form'\"\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">–</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">–</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n (input)=\"onHoursInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours(target)\"\n (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n (input)=\"onMinutesInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes(target)\"\n (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n (click)=\"setPeriod('AM', target)\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n (click)=\"setPeriod('PM', target)\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
3171
3441
|
}
|
|
3172
3442
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatePickerDropdownComponent, decorators: [{
|
|
3173
3443
|
type: Component,
|
|
3174
|
-
args: [{ selector: 'zen-date-picker-dropdown', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-dpd\">\n <!-- Field label -->\n @if (label) {\n <label class=\"zen-dpd-label\">\n {{ label }}\n @if (required) {\n <span class=\"zen-dpd-required\">*</span>\n }\n </label>\n }\n\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [class.size-form]=\"size === 'form'\"\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">–</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">–</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n (input)=\"onHoursInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours(target)\"\n (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n (input)=\"onMinutesInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes(target)\"\n (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n (click)=\"setPeriod('AM', target)\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n (click)=\"setPeriod('PM', target)\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"] }]
|
|
3444
|
+
args: [{ selector: 'zen-date-picker-dropdown', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-dpd\">\n <!-- Field label -->\n @if (label) {\n <label class=\"zen-dpd-label\">\n {{ label }}\n @if (required) {\n <span class=\"zen-dpd-required\">*</span>\n }\n </label>\n }\n\n <!-- Trigger Button -->\n @if (!hideTrigger) {\n <button class=\"dropdown-trigger\"\n #triggerBtn\n [class.size-form]=\"size === 'form'\"\n [disabled]=\"disabled\"\n [class.active]=\"isOpen\"\n [class.has-value]=\"hasValue\"\n (click)=\"toggle()\">\n <zen-icon class=\"trigger-icon\"\n src=\"assets/ng-zenduit/icons/calendar.svg\">\n </zen-icon>\n <span class=\"trigger-label\">{{ triggerLabel }}</span>\n </button>\n }\n\n <!-- Dropdown Panel -->\n @if (isOpen) {\n <div class=\"dropdown-menu\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n @if (type === 'range' && !mobile) {\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n @for (preset of activePresets; track preset) {\n <div class=\"preset-item\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n }\n </div>\n <div class=\"sidebar-divider\"></div>\n <!-- Calendars + bottom panel -->\n <div class=\"calendars-container\">\n <div class=\"dual-calendars\">\n <!-- Left calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n </div>\n <div class=\"calendar-divider\"></div>\n <!-- Right calendar -->\n <div class=\"calendar-panel\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ rightDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n </div>\n </div>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n @if (legendMarkers.length) {\n <div class=\"marker-legend\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"input-fields\">\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">–</span>\n <div class=\"date-input\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('End date' | translate) }}\n </span>\n </div>\n </div>\n }\n <div class=\"actions\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n @if (type === 'range' && mobile) {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Range inputs -->\n <div class=\"mobile-range-inputs\">\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n </span>\n </div>\n <span class=\"date-separator\">–</span>\n <div class=\"date-input compact\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedEnd\">\n {{ _selectedEnd ? formattedEndDate : ('Select date' | translate) }}\n </span>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker (start + end, side by side) -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <div class=\"time-pickers-dual\">\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start', label: 'Start time' }\"></ng-container>\n <div class=\"time-pickers-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'end', label: 'End time' }\"></ng-container>\n </div>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n </div>\n }\n <!-- SINGLE DATE: single calendar + input + today button -->\n @if (type === 'single') {\n <div class=\"single-calendar-container\">\n <div class=\"calendar-content\">\n <div class=\"month-header\">\n <button class=\"nav-btn\" (click)=\"prevMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n </button>\n <span class=\"month-title\">{{ leftDaysTitle }}</span>\n <button class=\"nav-btn\" (click)=\"nextMonth()\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n </div>\n <!-- Date input + Today button -->\n <div class=\"single-actions-row\">\n <div class=\"date-input flex-1\">\n <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n </span>\n </div>\n <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n </div>\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n <!-- Time Picker -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection; context: { target: 'start' }\"></ng-container>\n }\n @if (legendMarkers.length) {\n <div class=\"marker-legend standalone single\">\n @for (m of legendMarkers; track m) {\n <div class=\"legend-item\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n }\n </div>\n }\n @if (!autoApply) {\n <div class=\"bottom-divider\"></div>\n <div class=\"bottom-panel compact\">\n <div class=\"actions full-width\">\n <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection let-target=\"target\" let-label=\"label\">\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-label\">{{ (label || 'Select a time') | translate }}</span>\n <div class=\"time-picker-row\">\n <div class=\"time-fields\">\n <!-- Hours -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endHoursDisplay : _hoursDisplay\"\n (input)=\"onHoursInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours(target)\"\n (keydown)=\"onTimeKeydown($event, 'hours', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n </div>\n\n <!-- Colon separator -->\n <div class=\"time-colon\">:</div>\n\n <!-- Minutes -->\n <div class=\"time-input-group\">\n <div class=\"time-input-box\">\n <input class=\"time-input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"target === 'end' ? _endMinutesDisplay : _minutesDisplay\"\n (input)=\"onMinutesInput($event, target)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes(target)\"\n (keydown)=\"onTimeKeydown($event, 'minutes', target)\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n </button>\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes(target)\">\n <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n </button>\n </div>\n </div>\n <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n </div>\n </div>\n\n <!-- AM/PM toggle -->\n <div class=\"time-period-toggle\">\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'AM'\"\n (click)=\"setPeriod('AM', target)\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"(target === 'end' ? _endPeriod : _period) === 'PM'\"\n (click)=\"setPeriod('PM', target)\">\n PM\n </button>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n <div class=\"dates-grid\">\n <!-- Week day headers -->\n <div class=\"week-header\">\n @for (wd of weekDays; track wd) {\n <div class=\"cell header-cell\">{{ wd | translate }}</div>\n }\n </div>\n <!-- Day rows -->\n @for (row of dayRows; track row) {\n <div class=\"day-row\">\n @for (day of row.days; track day) {\n <div class=\"cell day-cell\"\n [class.outside]=\"day.isOutside\"\n [class.selected]=\"day.selected\"\n [class.today]=\"isToday(day)\"\n [class.disabled]=\"day.isDisabled\"\n [class.in-range]=\"isInRange(day)\"\n [class.range-start]=\"isRangeStart(day)\"\n [class.range-end]=\"isRangeEnd(day)\"\n (click)=\"selectDay(day)\">\n <span class=\"day-number\">{{ day.lbl }}</span>\n @if (day.markerColors?.length) {\n <div class=\"marker-dots\">\n @for (c of day.markerColors; track c) {\n <span class=\"marker-dot\"\n [style.background]=\"c || null\"></span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.zen-dpd-label{display:block;margin-bottom:6px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054}.zen-dpd-label .zen-dpd-required{color:#f04438}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px}.dropdown-trigger.size-form{height:46px}.dropdown-trigger{box-shadow:0 1px 2px #1018280d;cursor:pointer;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#667085;white-space:nowrap;transition:.2s;appearance:none;outline:none}.dropdown-trigger:hover{border-color:#98a2b3}.dropdown-trigger.active{box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.dropdown-trigger.has-value{color:#344054}.dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.dropdown-trigger .trigger-icon{width:20px;height:20px;background-color:#667085}.dropdown-trigger.has-value .trigger-icon{background-color:#344054}.dropdown-menu{position:fixed;z-index:1200;display:inline-flex;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 20px 24px -4px #10182814,0 8px 8px -4px #10182808;font-family:Inter,sans-serif;overflow-y:auto;overflow-x:hidden;width:max-content;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#f1f7fe;color:#105494}.presets-sidebar .preset-item.active{background:#f1f7fe;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#eaecf0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;transition:.15s}.nav-btn:hover{background:#f9fafb}.nav-btn zen-icon{width:20px;height:20px;background-color:#344054}.month-title{font-size:16px;font-weight:500;line-height:24px;color:#344054;text-align:center}.single-actions-row{display:flex;gap:12px;align-items:flex-start;width:280px}.flex-1{flex:1}.btn-today{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;appearance:none;outline:none;transition:.15s}.btn-today:hover{background:#f9fafb}.mobile-range-inputs{display:flex;align-items:center;gap:8px;height:40px;width:280px}.date-input{display:flex;align-items:center;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;min-width:0}.date-input.compact{flex:1}.date-input .date-input-text{font-size:16px;font-weight:400;line-height:24px;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-input .date-input-text.placeholder{color:#667085}.date-separator{font-size:16px;font-weight:400;line-height:24px;color:#667085}.dates-grid{display:flex;flex-direction:column;gap:4px}.week-header{display:flex;width:280px}.day-row{display:flex;border-radius:20px;overflow:hidden}.cell{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:20px}.cell .day-number{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#344054;width:24px}.cell.header-cell .day-number{font-weight:500}.header-cell{font-size:14px;font-weight:500;line-height:20px;color:#344054}.day-cell{cursor:pointer;transition:.1s}.day-cell:hover:not(.disabled):not(.selected){background:#f1f7fe}.day-cell:hover:not(.disabled):not(.selected) .day-number{color:#105494;font-weight:500}.day-cell.outside{cursor:default;pointer-events:none}.day-cell.today{background:#f2f4f7}.day-cell.today .day-number{font-weight:500}.day-cell.selected{background:#136ab6}.day-cell.selected .day-number{color:#fff;font-weight:500}.day-cell.in-range{background:#f1f7fe;border-radius:0}.day-cell.in-range .day-number{color:#105494}.day-cell.range-start{border-radius:20px 0 0 20px}.day-cell.range-end{border-radius:0 20px 20px 0}.day-cell.range-start.range-end{border-radius:20px}.day-cell.disabled{cursor:not-allowed}.day-cell.disabled .day-number{color:#d0d5dd}.day-cell .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#fff!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#fff;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-pickers-dual{display:flex;align-items:stretch}.time-pickers-dual>.time-picker-container{box-sizing:border-box;min-width:0}.time-pickers-dual>.time-picker-container:first-child{flex:0 0 328px;width:328px}.time-pickers-dual>.time-picker-container:last-child{flex:1 1 auto}.time-pickers-divider{width:1px;min-width:1px;background:#eaecf0;align-self:stretch;flex-shrink:0}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:#6670851f}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#fff;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#f9fafb}.bottom-divider{height:1px;min-height:1px;background:#eaecf0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.calendars-container:has(.time-pickers-dual) .bottom-panel{column-gap:16px}.calendars-container:has(.time-pickers-dual) .bottom-panel .input-fields,.calendars-container:has(.time-pickers-dual) .bottom-panel .actions{flex-shrink:0}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:auto;min-width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#344054;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-cancel:hover{background:#f9fafb}.btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#136ab6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#fff;cursor:pointer;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"] }]
|
|
3175
3445
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.TranslateService }, { type: undefined, decorators: [{
|
|
3176
3446
|
type: Optional
|
|
3177
3447
|
}, {
|
|
@@ -4280,7 +4550,7 @@ class ZenduFilterComponent {
|
|
|
4280
4550
|
return count;
|
|
4281
4551
|
}
|
|
4282
4552
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4283
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFilterComponent, isStandalone: false, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", defaultFilter: "defaultFilter", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", triggerVariant: "triggerVariant", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:resize": "windowSizeHandling()", "window:scroll": "windowScroll()", "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n @if (!customTrigger) {\n <zen-button (click)=\"toggle()\"\n [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <zen-icon class=\"filter-icon\"\n name=\"filter\"></zen-icon>\n }\n @if (triggerVariant !== 'icon-only') {\n <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n @if (appliedCount > 0) {\n <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n }\n }\n </zen-button>\n <!-- Icon-only mode: count rendered as a corner badge overlapping the\n button's top-right (sibling of the button so it isn't clipped). -->\n @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n }\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <div [hidden]=\"!isVisible\"\n class=\"filter-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom, 'max-height': menuMaxHeight }\">\n <div class=\"filter-menu__header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"filter-menu__body\"\n ngClass=\"{{wrapperBodyClass}}\">\n @if (errorMessage.length) {\n @for (item of errorMessage; track item) {\n <li\n class=\"error-msg\">{{item | translate }}</li>\n }\n }\n\n @for (item of config.items; track item) {\n @if (isMenuIsVisible(item)) {\n <div [class]=\"'menu-item menu-item--' + item.type\">\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <p class=\"filter-divider\"></p>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\"\n (click)=\"toggleEnabled(item)\">\n <div>{{item.title | translate}}</div>\n <zen-toggle [(enabled)]=\"item.enabled\"\n (click)=\"$event.stopPropagation()\"></zen-toggle>\n </div>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n <button class=\"action-item expander-item\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <span class=\"expander-indicator\">\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n <zen-icon class=\"expand-icon\"\n name=\"chevron-down\"\n [class.active]=\"item.expanded\"></zen-icon>\n </span>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n <span class=\"expander-title\">{{item.title | translate}}</span>\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div class=\"menu-item__content\">\n <!-- Lazy loading mode -->\n @if (item.isLazyLoading) {\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n (click)=\"$event.stopPropagation()\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n @if (item.canLoadMore && !item.isLoadingNow) {\n <div\n class=\"action-item\">\n <zen-button variant=\"secondary-gray\"\n size=\"sm\"\n [fullWidth]=\"true\"\n (click)=\"loadMore(item, false)\">\n {{'Load More' | translate}}\n </zen-button>\n </div>\n }\n @if (item.isLoadingNow) {\n <div\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n }\n @if (!item.isLazyLoading && !hasTreeData(item)) {\n @if (!item.hideSelectAll) {\n <div class=\"action-item-checkbox ds-item select-all\">\n @if (item.dataSource.length === item.filteredDataSource.length) {\n <zen-checkbox\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n }\n </div>\n }\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n (click)=\"$event.stopPropagation()\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n }\n <!-- Tree view mode -->\n @if (!item.isLazyLoading && hasTreeData(item)) {\n <zen-groups\n [dataSource]=\"item.dataSource\"\n [filteredDataSource]=\"item.filteredDataSource\"\n [hideSelectAll]=\"item.hideSelectAll\"\n [inline]=\"true\"\n [hideSearch]=\"true\"\n [(isSelectedAll)]=\"item.isSelectedAll\"\n (checkedChange)=\"checkChanged($event, item)\">\n </zen-groups>\n }\n </div>\n }\n <!-- Date range picker -->\n @case ('dateRange') {\n <div class=\"menu-item__content\">\n <!-- Options date range view -->\n @if (item.dateRangeOptions?.length) {\n @for (option of item.dateRangeOptions; track option) {\n <div class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"option.name\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === option.name\"\n (radioChange)=\"handleDateRangeOptionClick(item, option)\"></zen-radio>\n </div>\n }\n <div class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"'Custom'\"\n [label]=\"'Custom' | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n </div>\n @if (selectedDateRangeOptions[item.key] === 'Custom') {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div class=\"filter-row menu-item__content\">\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.date\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row menu-item__content\">\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Min' | translate\"\n [(ngModel)]=\"item.numberRange.from\"></zen-input>\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Max' | translate\"\n [(ngModel)]=\"item.numberRange.to\"></zen-input>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div class=\"menu-item__content\">\n @for (option of item.radioOptions; track option) {\n <div\n class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"option.id\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [imageUrl]=\"option.imageUrl\"\n [selected]=\"option.selected\"\n (radioChange)=\"radioChanged($event, item)\"\n [disabled]=\"option.disabled\"></zen-radio>\n </div>\n }\n </div>\n }\n }\n }\n </div>\n }\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"filter-menu__footer\">\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <zen-button variant=\"secondary-gray\"\n [destructive]=\"true\"\n [disabled]=\"resetDisabled\"\n (click)=\"reset()\">\n {{ (defaultFilter ? 'Reset Default' : 'Clear All') | translate }}\n </zen-button>\n <zen-button variant=\"primary\"\n (click)=\"apply()\">\n {{'Apply' | translate}}\n </zen-button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:400px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:12px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:12px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .filter-menu{display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filters-component .filter-menu[hidden]{display:none}.filters-component .filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filters-component .filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filters-component .filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filters-component .filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .menu-item.menu-item--multiselect,.filters-component .filter-menu__body .menu-item.menu-item--radio{gap:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filters-component .filter-menu__body .menu-item__content{padding-left:8px}.filters-component .filter-menu__body .action-item,.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filters-component .filter-menu__body .action-item:focus-within,.filters-component .filter-menu__body .action-item-checkbox:focus-within,.filters-component .filter-menu__body .action-item-radio:focus-within{background:transparent}.filters-component .filter-menu__body .action-item:hover{background:transparent}.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{margin-left:-8px;margin-right:0;padding-left:8px;padding-right:8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .action-item-checkbox:hover,.filters-component .filter-menu__body .action-item-radio:hover{background:#f9fafb}.filters-component .filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filters-component .filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filters-component .filter-menu__body .action-item-checkbox:first-child,.filters-component .filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filters-component .filter-menu__body .action-item-checkbox:last-child,.filters-component .filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.filters-component .filter-menu__body .expander-item{outline:none;border:none;display:flex;width:auto;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filters-component .filter-menu__body .expander-item.expanded,.filters-component .filter-menu__body .expander-item.active{background:transparent;color:#344054}.filters-component .filter-menu__body .expander-item:hover{background:#f9fafb}.filters-component .filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filters-component .filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filters-component .filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filters-component .filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filters-component .filter-menu__body .no-item,.filters-component .filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filters-component .filter-menu__body .select-all{font-weight:500}.filters-component .filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .number-range-row{display:flex;gap:16px}.filters-component .filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filters-component .filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filters-component .filter-menu__body .toggle-row:hover{background:#f9fafb}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filters-component .filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filters-component .filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;margin:0 -16px;padding:10px 16px;transition:background-color .15s ease}.filters-component .filter-menu__body .section-title:hover{background:#f9fafb}.filters-component .filter-menu__body .has-badge zen-checkbox{width:auto}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filters-component .filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduToggleComponent, selector: "zen-toggle", inputs: ["enabled", "size", "disabled", "label", "supportingText"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "component", type: ZenduDatePickerDropdownComponent, selector: "zen-date-picker-dropdown", inputs: ["type", "date", "startDate", "endDate", "presets", "minDate", "maxDate", "disabled", "dateMarkers", "placeholder", "mobileBreakpoint", "timePicker", "autoApply", "hideTrigger", "label", "required", "size"], outputs: ["dateChange", "startDateChange", "endDateChange", "rangeChange"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "min", "max", "step", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "component", type: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "iconRotated", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4553
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFilterComponent, isStandalone: false, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", defaultFilter: "defaultFilter", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", triggerVariant: "triggerVariant", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:resize": "windowSizeHandling()", "window:scroll": "windowScroll()", "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }, { propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n @if (!customTrigger) {\n <zen-button (click)=\"toggle()\"\n [variant]=\"hasActiveFilters ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{hasActiveFilters ? 'applied' : ''}} {{triggerVariant === 'icon-only' ? 'icon-only' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <zen-icon class=\"filter-icon\"\n name=\"filter\"></zen-icon>\n }\n @if (triggerVariant !== 'icon-only') {\n <span class=\"filter-label\">{{ (label || 'Filter') | translate }}</span>\n @if (appliedCount > 0) {\n <span class=\"filter-count-badge\">{{ appliedCount }}</span>\n }\n }\n </zen-button>\n <!-- Icon-only mode: count rendered as a corner badge overlapping the\n button's top-right (sibling of the button so it isn't clipped). -->\n @if (triggerVariant === 'icon-only' && appliedCount > 0) {\n <span class=\"filter-icon-badge\">{{ appliedCount }}</span>\n }\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <div [hidden]=\"!isVisible\"\n class=\"filter-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom, 'max-height': menuMaxHeight }\">\n <div class=\"filter-menu__header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"filter-menu__body\"\n ngClass=\"{{wrapperBodyClass}}\">\n @if (errorMessage.length) {\n @for (item of errorMessage; track item) {\n <li\n class=\"error-msg\">{{item | translate }}</li>\n }\n }\n\n @for (item of config.items; track item) {\n @if (isMenuIsVisible(item)) {\n <div [class]=\"'menu-item menu-item--' + item.type\">\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <p class=\"filter-divider\"></p>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\"\n (click)=\"toggleEnabled(item)\">\n <div>{{item.title | translate}}</div>\n <zen-toggle [(enabled)]=\"item.enabled\"\n (click)=\"$event.stopPropagation()\"></zen-toggle>\n </div>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse) {\n <button class=\"action-item expander-item\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <span class=\"expander-indicator\">\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n <zen-icon class=\"expand-icon\"\n name=\"chevron-down\"\n [class.active]=\"item.expanded\"></zen-icon>\n </span>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n <span class=\"expander-title\">{{item.title | translate}}</span>\n @if (isItemFiltered(item)) {\n <span class=\"filter-section-dot\"></span>\n }\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div class=\"menu-item__content\">\n <!-- Lazy loading mode -->\n @if (item.isLazyLoading) {\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n (click)=\"$event.stopPropagation()\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n @if (item.canLoadMore && !item.isLoadingNow) {\n <div\n class=\"action-item\">\n <zen-button variant=\"secondary-gray\"\n size=\"sm\"\n [fullWidth]=\"true\"\n (click)=\"loadMore(item, false)\">\n {{'Load More' | translate}}\n </zen-button>\n </div>\n }\n @if (item.isLoadingNow) {\n <div\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n }\n @if (!item.isLazyLoading && !hasTreeData(item)) {\n @if (!item.hideSelectAll) {\n <div class=\"action-item-checkbox ds-item select-all\">\n @if (item.dataSource.length === item.filteredDataSource.length) {\n <zen-checkbox\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n }\n </div>\n }\n @for (dsItem of item.filteredDataSource; track dsItem) {\n <div\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\"\n (click)=\"toggleDsItem(dsItem, item)\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n (click)=\"$event.stopPropagation()\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n @if (dsItem.badgeBgColor) {\n <span\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n }\n </div>\n }\n }\n <!-- Tree view mode -->\n @if (!item.isLazyLoading && hasTreeData(item)) {\n <zen-groups\n [dataSource]=\"item.dataSource\"\n [filteredDataSource]=\"item.filteredDataSource\"\n [hideSelectAll]=\"item.hideSelectAll\"\n [inline]=\"true\"\n [hideSearch]=\"true\"\n [(isSelectedAll)]=\"item.isSelectedAll\"\n (checkedChange)=\"checkChanged($event, item)\">\n </zen-groups>\n }\n </div>\n }\n <!-- Date range picker -->\n @case ('dateRange') {\n <div class=\"menu-item__content\">\n <!-- Options date range view -->\n @if (item.dateRangeOptions?.length) {\n @for (option of item.dateRangeOptions; track option) {\n <div class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"option.name\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === option.name\"\n (radioChange)=\"handleDateRangeOptionClick(item, option)\"></zen-radio>\n </div>\n }\n <div class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"'Custom'\"\n [label]=\"'Custom' | translate\"\n [name]=\"item.key\"\n [selected]=\"selectedDateRangeOptions[item.key] === 'Custom'\"\n (radioChange)=\"handleCustomDateRangeClick(item)\"></zen-radio>\n </div>\n @if (selectedDateRangeOptions[item.key] === 'Custom') {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"filter-date-fields\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.dateRange.start\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-date-picker-dropdown\n type=\"single\"\n [date]=\"item.dateRange.end\"\n [timePicker]=\"item.showTime\"\n (dateChange)=\"handleEndDateChange(item, $event)\">\n </zen-date-picker-dropdown>\n </div>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div class=\"filter-row menu-item__content\">\n <zen-date-picker-dropdown\n type=\"single\"\n [(date)]=\"item.date\"\n [timePicker]=\"item.showTime\">\n </zen-date-picker-dropdown>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row menu-item__content\">\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Min' | translate\"\n [(ngModel)]=\"item.numberRange.from\"></zen-input>\n <zen-input type=\"number\"\n size=\"sm\"\n [label]=\"'Max' | translate\"\n [(ngModel)]=\"item.numberRange.to\"></zen-input>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div class=\"menu-item__content\">\n @for (option of item.radioOptions; track option) {\n <div\n class=\"action-item-radio ds-item\">\n <zen-radio [value]=\"option.id\"\n [label]=\"option.name | translate\"\n [name]=\"item.key\"\n [imageUrl]=\"option.imageUrl\"\n [selected]=\"option.selected\"\n (radioChange)=\"radioChanged($event, item)\"\n [disabled]=\"option.disabled\"></zen-radio>\n </div>\n }\n </div>\n }\n }\n }\n </div>\n }\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"filter-menu__footer\">\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <zen-button variant=\"secondary-gray\"\n [destructive]=\"true\"\n [disabled]=\"resetDisabled\"\n (click)=\"reset()\">\n {{ (defaultFilter ? 'Reset Default' : 'Clear All') | translate }}\n </zen-button>\n <zen-button variant=\"primary\"\n (click)=\"apply()\">\n {{'Apply' | translate}}\n </zen-button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:400px;white-space:initial;position:fixed}.filters-component .menu-content.absolute{position:absolute;inset:auto}.filters-component .menu-content.dropdown-left{right:0}.filters-component .menu-content.dropdown-right{left:0}.filters-component .menu-content.dropdown-top{bottom:100%;margin-bottom:12px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:12px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .filter-menu{display:flex;flex-direction:column;background:#fff;border-radius:8px;border:1px solid #eaecf0;overflow:hidden;z-index:10;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814}.filters-component .filter-menu[hidden]{display:none}.filters-component .filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filters-component .filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filters-component .filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filters-component .filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .menu-item.menu-item--multiselect,.filters-component .filter-menu__body .menu-item.menu-item--radio{gap:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filters-component .filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filters-component .filter-menu__body .menu-item__content{padding-left:8px}.filters-component .filter-menu__body .action-item,.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filters-component .filter-menu__body .action-item:focus-within,.filters-component .filter-menu__body .action-item-checkbox:focus-within,.filters-component .filter-menu__body .action-item-radio:focus-within{background:transparent}.filters-component .filter-menu__body .action-item:hover{background:transparent}.filters-component .filter-menu__body .action-item-checkbox,.filters-component .filter-menu__body .action-item-radio{margin-left:-8px;margin-right:0;padding-left:8px;padding-right:8px;border-radius:6px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .action-item-checkbox:hover,.filters-component .filter-menu__body .action-item-radio:hover{background:#f9fafb}.filters-component .filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filters-component .filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filters-component .filter-menu__body .action-item-checkbox:first-child,.filters-component .filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filters-component .filter-menu__body .action-item-checkbox:last-child,.filters-component .filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.filters-component .filter-menu__body .expander-item{outline:none;border:none;display:flex;width:auto;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filters-component .filter-menu__body .expander-item.expanded,.filters-component .filter-menu__body .expander-item.active{background:transparent;color:#344054}.filters-component .filter-menu__body .expander-item:hover{background:#f9fafb}.filters-component .filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filters-component .filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filters-component .filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filters-component .filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filters-component .filter-menu__body .no-item,.filters-component .filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filters-component .filter-menu__body .select-all{font-weight:500}.filters-component .filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filters-component .filter-menu__body .number-range-row{display:flex;gap:16px}.filters-component .filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filters-component .filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filters-component .filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filters-component .filter-menu__body .toggle-row:hover{background:#f9fafb}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filters-component .filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filters-component .filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.filters-component .filter-menu__body .section-title{display:flex;align-items:center;gap:6px;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;margin:0 -16px;padding:10px 16px;transition:background-color .15s ease}.filters-component .filter-menu__body .section-title:hover{background:#f9fafb}.filters-component .filter-menu__body .has-badge zen-checkbox{width:auto}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filters-component .filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filters-component .filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .filter-menu__body .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.filters-component .filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:2px 8px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:12px;line-height:18px;white-space:nowrap;box-sizing:border-box}.filters-component .filter-icon-badge{position:absolute;top:-4px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:1.5px 6px;border-radius:16px;background:#136ab6;color:#fff;font-weight:500;font-size:9px;line-height:13.5px;text-align:center;white-space:nowrap;box-sizing:border-box;pointer-events:none}.filters-component .filter zen-icon{width:20px;height:20px;background-color:#344054}.filters-component .filter.applied zen-icon{background-color:#136ab6}.filters-component .filter.applied .filter-label{color:#136ab6}.hidden{display:none}:host ::ng-deep .filter.applied button{border-color:#88c1f1!important}:host ::ng-deep .filter.icon-only button{padding:10px!important}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduToggleComponent, selector: "zen-toggle", inputs: ["enabled", "size", "disabled", "label", "supportingText"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduRadioButtonComponent, selector: "zen-radio", inputs: ["selected", "label", "value", "name", "disabled", "imageUrl", "size", "supportingText"], outputs: ["radioChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "component", type: ZenduDatePickerDropdownComponent, selector: "zen-date-picker-dropdown", inputs: ["type", "date", "startDate", "endDate", "presets", "minDate", "maxDate", "disabled", "dateMarkers", "placeholder", "mobileBreakpoint", "timePicker", "autoApply", "hideTrigger", "label", "required", "size"], outputs: ["dateChange", "startDateChange", "endDateChange", "rangeChange"] }, { kind: "component", type: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "min", "max", "step", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "multiline", "rows", "resizable", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "component", type: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "iconRotated", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4284
4554
|
}
|
|
4285
4555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, decorators: [{
|
|
4286
4556
|
type: Component,
|
|
@@ -4392,8 +4662,24 @@ class ZenduSelectComponent {
|
|
|
4392
4662
|
get multiselect() {
|
|
4393
4663
|
return this.isMultiselect;
|
|
4394
4664
|
}
|
|
4395
|
-
|
|
4665
|
+
get isOpen() {
|
|
4666
|
+
return this._isOpen;
|
|
4667
|
+
}
|
|
4668
|
+
set isOpen(open) {
|
|
4669
|
+
if (open === this._isOpen)
|
|
4670
|
+
return;
|
|
4671
|
+
this._isOpen = open;
|
|
4672
|
+
if (open) {
|
|
4673
|
+
this._openOverlay();
|
|
4674
|
+
}
|
|
4675
|
+
else {
|
|
4676
|
+
this._closeOverlay();
|
|
4677
|
+
}
|
|
4678
|
+
}
|
|
4679
|
+
constructor(elementRef, overlay, viewContainerRef) {
|
|
4396
4680
|
this.elementRef = elementRef;
|
|
4681
|
+
this.overlay = overlay;
|
|
4682
|
+
this.viewContainerRef = viewContainerRef;
|
|
4397
4683
|
/**
|
|
4398
4684
|
* callback to emit changes for parent component
|
|
4399
4685
|
*/
|
|
@@ -4514,9 +4800,12 @@ class ZenduSelectComponent {
|
|
|
4514
4800
|
*/
|
|
4515
4801
|
this.closed = new EventEmitter();
|
|
4516
4802
|
/**
|
|
4517
|
-
* State tracking
|
|
4803
|
+
* State tracking. `isOpen` is the single source of truth — assigning it
|
|
4804
|
+
* attaches/detaches the CDK overlay panel, so every existing open/close path
|
|
4805
|
+
* (toggle, search focus/typing, option select, hideDropDown) stays correct
|
|
4806
|
+
* without touching each call site.
|
|
4518
4807
|
*/
|
|
4519
|
-
this.
|
|
4808
|
+
this._isOpen = false;
|
|
4520
4809
|
this.helpTooltipAlign = 'center';
|
|
4521
4810
|
this.helpTooltipPlacement = 'above';
|
|
4522
4811
|
this.searchText = '';
|
|
@@ -4531,24 +4820,33 @@ class ZenduSelectComponent {
|
|
|
4531
4820
|
// Tree mode properties
|
|
4532
4821
|
this.treeFilteredDataSource = [];
|
|
4533
4822
|
this.isSelectedAll = false;
|
|
4823
|
+
this._panelRef = null;
|
|
4824
|
+
}
|
|
4825
|
+
ngOnDestroy() {
|
|
4826
|
+
this._closeOverlay();
|
|
4534
4827
|
}
|
|
4535
4828
|
/**
|
|
4536
|
-
*
|
|
4829
|
+
* Open the dropdown panel in a CDK overlay anchored to the trigger. The
|
|
4830
|
+
* overlay handles viewport-aware positioning (flip up/down, push into view,
|
|
4831
|
+
* clamp + internal scroll) and renders at the body level, so the panel is
|
|
4832
|
+
* never clipped by an ancestor's `overflow` or by the viewport edge.
|
|
4537
4833
|
*/
|
|
4538
|
-
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
|
|
4542
|
-
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
|
|
4546
|
-
|
|
4547
|
-
}
|
|
4834
|
+
_openOverlay() {
|
|
4835
|
+
if (this._panelRef || !this.selectWrapper || !this.dropdownPanel)
|
|
4836
|
+
return;
|
|
4837
|
+
this._panelRef = this.overlay.openConnectedPanel({
|
|
4838
|
+
origin: this.selectWrapper,
|
|
4839
|
+
content: this.dropdownPanel,
|
|
4840
|
+
viewContainerRef: this.viewContainerRef,
|
|
4841
|
+
width: 'origin',
|
|
4842
|
+
scrollBehavior: 'reposition'
|
|
4843
|
+
});
|
|
4844
|
+
// Outside click / Escape / detach → close (and emit, as a user action).
|
|
4845
|
+
this._panelRef.closed.subscribe(() => this.hideDropDown(true));
|
|
4548
4846
|
}
|
|
4549
|
-
|
|
4550
|
-
|
|
4551
|
-
|
|
4847
|
+
_closeOverlay() {
|
|
4848
|
+
this._panelRef?.close();
|
|
4849
|
+
this._panelRef = null;
|
|
4552
4850
|
}
|
|
4553
4851
|
/**
|
|
4554
4852
|
* Resolve icon path with fallback to assets folder
|
|
@@ -5071,14 +5369,6 @@ class ZenduSelectComponent {
|
|
|
5071
5369
|
const option = this.findOptionByValue(this.selectModel);
|
|
5072
5370
|
return option?.secondaryText || null;
|
|
5073
5371
|
}
|
|
5074
|
-
/**
|
|
5075
|
-
* Close dropdown on outside click
|
|
5076
|
-
*/
|
|
5077
|
-
onDocumentClick(event) {
|
|
5078
|
-
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
5079
|
-
this.hideDropDown(true);
|
|
5080
|
-
}
|
|
5081
|
-
}
|
|
5082
5372
|
/**
|
|
5083
5373
|
* Hide dropdown
|
|
5084
5374
|
*/
|
|
@@ -5220,13 +5510,13 @@ class ZenduSelectComponent {
|
|
|
5220
5510
|
return;
|
|
5221
5511
|
this.isSelectedAll = this.options.every(opt => opt.checked);
|
|
5222
5512
|
}
|
|
5223
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSelectComponent, isStandalone: false, selector: "zen-select", inputs: { selectModel: "selectModel", options: "options", label: "label", helpIcon: "helpIcon", helpTooltip: "helpTooltip", supportingText: "supportingText", hintText: "hintText", placeholder: "placeholder", leadingType: "leadingType", leadingIcon: "leadingIcon", leadingAvatar: "leadingAvatar", leadingDotColor: "leadingDotColor", displayProp: "displayProp", idProp: "idProp", hasSearch: "hasSearch", isMultiselect: "isMultiselect", multiselect: "multiselect", hideSelectAll: "hideSelectAll", hideTreeSearch: "hideTreeSearch", required: "required", disabled: "disabled", error: "error", errorMessage: "errorMessage", destructive: "destructive", size: "size", returnOption: "returnOption", isTruncate: "isTruncate", enableAddNewOption: "enableAddNewOption", showDefaultAddOption: "showDefaultAddOption", newOptionText: "newOptionText", enableRemoveOption: "enableRemoveOption", removeOptionText: "removeOptionText", isLazyLoading: "isLazyLoading", lazyLoader: "lazyLoader", preferredOpenDirection: "preferredOpenDirection" }, outputs: { selectModelChange: "selectModelChange", addNewOption: "addNewOption", removeOption: "removeOption", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ZenduSelectOptionDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ZenduSelectValueDirective, descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ZenduSelectButtonDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getStateClasses()\">\n <!-- Label -->\n @if (label) {\n <label class=\"app-select-label text text-sm text-weight-medium\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n @if (required) {\n <span class=\"required-indicator\">*</span>\n }\n @if (helpIcon) {\n <span\n class=\"zen-help-icon\"\n role=\"img\"\n [class.disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-label]=\"helpTooltip | translate\"\n (mouseenter)=\"updateHelpTooltipPlacement($event)\"\n (focus)=\"updateHelpTooltipPlacement($event)\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <!-- Shown on hover/focus via CSS \u2014 no click state. -->\n <div\n class=\"zen-help-tooltip\"\n [class.align-start]=\"helpTooltipAlign === 'start'\"\n [class.align-end]=\"helpTooltipAlign === 'end'\"\n [class.place-below]=\"helpTooltipPlacement === 'below'\">\n <div class=\"tooltip-content\">{{ helpTooltip | translate }}</div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n </span>\n }\n </label>\n }\n\n <!-- Select Input -->\n <div class=\"app-select-wrapper\">\n <!-- Custom Trigger Template (overrides built-in trigger) -->\n @if (buttonTemplate) {\n <div\n class=\"app-select-custom-trigger\"\n (click)=\"toggleDropdown()\">\n <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n </ng-template>\n </div>\n }\n\n <!-- Built-in Trigger (when no custom button template provided) -->\n @if (!buttonTemplate) {\n @switch (leadingType) {\n <!-- Default Select (no leading element) -->\n @case ('default') {\n <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n }\n <!-- Icon Leading Select -->\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n }\n <!-- Avatar Leading Select -->\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n }\n <!-- Dot Leading Select -->\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n }\n <!-- Search Input Select -->\n @case ('search') {\n <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n }\n }\n }\n\n <!-- Dropdown Menu -->\n @if (isOpen) {\n <div class=\"app-select-dropdown\"\n [ngClass]=\"getDropdownDirectionClass()\"\n >\n <!-- Tree Mode: embed zen-groups inline -->\n @if (isTreeMode && isMultiselect) {\n <zen-groups [inline]=\"true\"\n [dataSource]=\"$any(options)\"\n [filteredDataSource]=\"treeFilteredDataSource\"\n [hideSelectAll]=\"hideSelectAll\"\n [hideSearch]=\"hideTreeSearch\"\n [idProp]=\"idProp\"\n [displayProp]=\"displayProp\"\n [(isSelectedAll)]=\"isSelectedAll\"\n (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n (checkedChange)=\"onTreeCheckedChange($event)\">\n </zen-groups>\n } @else {\n <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n @if (leadingType !== 'search' && hasSearch && !disabled) {\n <div class=\"app-select-search\">\n <zen-icon [name]=\"'search'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"onSearchChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n placeholder=\"Search\"\n class=\"app-select-search-input\">\n @if (searchText) {\n <zen-icon\n class=\"app-select-search-clear\"\n [name]=\"'x'\"\n [customColor]=\"'#667085'\"\n (click)=\"clearSearch(); $event.stopPropagation()\">\n </zen-icon>\n }\n </div>\n }\n <!-- Options List -->\n <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n <!-- Select All Option for Multiselect -->\n @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n <button\n class=\"app-select-option select-all\"\n (click)=\"toggleSelectAll()\">\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isAllSelected()\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n <span class=\"app-select-option-text\">\n Select All\n </span>\n </button>\n }\n <!-- Add New Option -->\n @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n <button\n class=\"app-select-option add-new-option\"\n (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n </span>\n </button>\n }\n <!-- Remove Option -->\n @if (enableRemoveOption) {\n <button\n class=\"app-select-option remove-option\"\n (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ removeOptionText || 'Remove' }}\n </span>\n </button>\n }\n @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n <div class=\"app-select-no-options\">\n No matching options found\n </div>\n }\n @for (option of filteredOptions; track option) {\n <button\n class=\"app-select-option\"\n [class.selected]=\"isSelected(option)\"\n (click)=\"selectOption(option)\">\n <!-- Checkbox for Multiselect -->\n @if (isMultiselect) {\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isSelected(option)\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n }\n <!-- Option Leading Element -->\n @if (leadingType !== 'default') {\n <div class=\"app-select-option-leading\">\n @switch (leadingType) {\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n }\n }\n </div>\n }\n <!-- Option Text -->\n <div class=\"app-select-option-text-wrapper\">\n <!-- Use custom template if provided -->\n @if (!isMultiselect && optionTemplate) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n } @else {\n <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n {{ getName(option) | translate }}\n </span>\n @if (option.secondaryText) {\n <span class=\"app-select-option-secondary\">\n {{ option.secondaryText }}\n </span>\n }\n }\n </div>\n <!-- Check Icon for Single Select -->\n @if (!isMultiselect && isSelected(option)) {\n <zen-icon\n class=\"app-select-option-check\"\n [name]=\"'check'\"\n [customColor]=\"'#136AB6'\">\n </zen-icon>\n }\n </button>\n }\n <!-- Lazy loading spinner -->\n @if (isLazyLoading && isLoadingNow) {\n <div class=\"app-select-loading\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n </div>\n }\n <!-- Flat List Mode (default) -->\n </div>\n }\n </div>\n\n <!-- Hint text / Error message -->\n @if ((destructive && errorMessage) || hintText) {\n <div\n class=\"app-select-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n @if (destructive) {\n <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n }\n <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n </div>\n }\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n <div class=\"app-select-input app-select-search-input\"\n [class.focused]=\"isOpen || searchFocused\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <!-- Search Icon -->\n <zen-icon [name]=\"'search'\"\n [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n </zen-icon>\n\n <!-- Search Input Field -->\n <input type=\"text\"\n class=\"app-select-search-field\"\n [(ngModel)]=\"searchInputValue\"\n (ngModelChange)=\"onSearchInputChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur($event)\"\n [placeholder]=\"selectedDisplay || placeholder\"\n [disabled]=\"disabled\">\n </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n <div class=\"app-select-value-wrapper\">\n @if (valueTemplate && !isModelEmpty()) {\n <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n </ng-template>\n } @else {\n <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n {{ selectedDisplay || placeholder | translate }}\n </span>\n @if (getSelectedSecondaryText() && !isModelEmpty()) {\n <span class=\"app-select-secondary\">\n {{ getSelectedSecondaryText() }}\n </span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n <zen-icon class=\"app-select-arrow\"\n [class.rotated]=\"isOpen\"\n [name]=\"'chevron-down'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n @if (icon || option?.icon || option?.iconName) {\n @if (getIconPath(option, icon); as iconPath) {\n <!-- If icon contains / or . treat as SVG path -->\n @if ((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))) {\n <!-- Use img tag for Excel to preserve colors -->\n @if (iconPath.includes('excel')) {\n <img\n [src]=\"iconPath\"\n alt=\"\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Use zen-icon with src for other SVG files -->\n @if (!iconPath.includes('excel')) {\n <zen-icon\n [src]=\"iconPath\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n <!-- Otherwise treat as Material icon name or special cases -->\n @if (!((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))) {\n <!-- Special case for Excel icon - use img to preserve colors -->\n @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n <img\n src=\"assets/ng-zenduit/icons/excel.svg\"\n alt=\"Excel\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Material icon names -->\n @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n <zen-icon\n [name]=\"icon || option?.icon || option?.iconName\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n }\n }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n @if (avatar || option?.avatar) {\n <div class=\"app-select-avatar\" >\n <img [src]=\"avatar || option?.avatar\" alt=\"\">\n </div>\n }\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n <div class=\"app-select-dot\"\n [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-label .zen-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:help;outline:none}.app-select-label .zen-help-icon i{font-size:20px;color:#98a2b3}.app-select-label .zen-help-icon:not(.disabled):hover i,.app-select-label .zen-help-icon:not(.disabled):focus-visible i{color:#475467}.app-select-label .zen-help-icon.disabled{cursor:not-allowed}.app-select-label .zen-help-icon.disabled i{color:#d0d5dd}.app-select-label .zen-help-icon:not(.disabled):hover .zen-help-tooltip,.app-select-label .zen-help-icon:not(.disabled):focus-visible .zen-help-tooltip{display:block}.app-select-label .zen-help-icon .zen-help-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.app-select-label .zen-help-icon .zen-help-tooltip.align-start{left:-6px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-start .tooltip-arrow{left:8px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end{left:auto;right:-6px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end .tooltip-arrow{left:auto;right:8px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.place-below{top:calc(100% + 8px);bottom:auto}.app-select-label .zen-help-icon .zen-help-tooltip.place-below .tooltip-arrow{top:-6px;bottom:auto;border-top:none;border-bottom:6px solid #101828}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:6px 10px;border-radius:6px;font-family:Inter,sans-serif;font-size:12px;line-height:16px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;width:max-content;max-width:260px;white-space:normal;text-align:left}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #101828}.app-select-wrapper{position:relative;width:100%}.app-select-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#98a2b3}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#f2f4f7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search zen-icon{flex-shrink:0;width:20px;height:20px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.size-sm .app-select-option{padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-dot{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#f9fafb;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#eff8ff}.app-select-option.remove-option{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#f9fafb;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 14px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 0;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#f9fafb}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 0;text-align:center;color:#667085}@media(max-width:640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, deps: [{ token: i0.ElementRef }, { token: ZenduOverlayService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSelectComponent, isStandalone: false, selector: "zen-select", inputs: { selectModel: "selectModel", options: "options", label: "label", helpIcon: "helpIcon", helpTooltip: "helpTooltip", supportingText: "supportingText", hintText: "hintText", placeholder: "placeholder", leadingType: "leadingType", leadingIcon: "leadingIcon", leadingAvatar: "leadingAvatar", leadingDotColor: "leadingDotColor", displayProp: "displayProp", idProp: "idProp", hasSearch: "hasSearch", isMultiselect: "isMultiselect", multiselect: "multiselect", hideSelectAll: "hideSelectAll", hideTreeSearch: "hideTreeSearch", required: "required", disabled: "disabled", error: "error", errorMessage: "errorMessage", destructive: "destructive", size: "size", returnOption: "returnOption", isTruncate: "isTruncate", enableAddNewOption: "enableAddNewOption", showDefaultAddOption: "showDefaultAddOption", newOptionText: "newOptionText", enableRemoveOption: "enableRemoveOption", removeOptionText: "removeOptionText", isLazyLoading: "isLazyLoading", lazyLoader: "lazyLoader", preferredOpenDirection: "preferredOpenDirection" }, outputs: { selectModelChange: "selectModelChange", addNewOption: "addNewOption", removeOption: "removeOption", closed: "closed" }, queries: [{ propertyName: "optionTemplate", first: true, predicate: ZenduSelectOptionDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ZenduSelectValueDirective, descendants: true }, { propertyName: "buttonTemplate", first: true, predicate: ZenduSelectButtonDirective, descendants: true }], viewQueries: [{ propertyName: "selectWrapper", first: true, predicate: ["selectWrapper"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getStateClasses()\">\n <!-- Label -->\n @if (label) {\n <label class=\"app-select-label text text-sm text-weight-medium\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n @if (required) {\n <span class=\"required-indicator\">*</span>\n }\n @if (helpIcon) {\n <span\n class=\"zen-help-icon\"\n role=\"img\"\n [class.disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-label]=\"helpTooltip | translate\"\n (mouseenter)=\"updateHelpTooltipPlacement($event)\"\n (focus)=\"updateHelpTooltipPlacement($event)\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <!-- Shown on hover/focus via CSS \u2014 no click state. -->\n <div\n class=\"zen-help-tooltip\"\n [class.align-start]=\"helpTooltipAlign === 'start'\"\n [class.align-end]=\"helpTooltipAlign === 'end'\"\n [class.place-below]=\"helpTooltipPlacement === 'below'\">\n <div class=\"tooltip-content\">{{ helpTooltip | translate }}</div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n </span>\n }\n </label>\n }\n\n <!-- Select Input -->\n <div class=\"app-select-wrapper\" #selectWrapper>\n <!-- Custom Trigger Template (overrides built-in trigger) -->\n @if (buttonTemplate) {\n <div\n class=\"app-select-custom-trigger\"\n (click)=\"toggleDropdown()\">\n <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n </ng-template>\n </div>\n }\n\n <!-- Built-in Trigger (when no custom button template provided) -->\n @if (!buttonTemplate) {\n @switch (leadingType) {\n <!-- Default Select (no leading element) -->\n @case ('default') {\n <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n }\n <!-- Icon Leading Select -->\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n }\n <!-- Avatar Leading Select -->\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n }\n <!-- Dot Leading Select -->\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n }\n <!-- Search Input Select -->\n @case ('search') {\n <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n }\n }\n }\n\n <!-- Dropdown Menu (rendered into a CDK overlay via ZenduOverlayService;\n positioning/flip/clamping is handled there, not with absolute CSS) -->\n <ng-template #dropdownPanel>\n <div class=\"app-select-dropdown\">\n <!-- Tree Mode: embed zen-groups inline -->\n @if (isTreeMode && isMultiselect) {\n <zen-groups [inline]=\"true\"\n [dataSource]=\"$any(options)\"\n [filteredDataSource]=\"treeFilteredDataSource\"\n [hideSelectAll]=\"hideSelectAll\"\n [hideSearch]=\"hideTreeSearch\"\n [idProp]=\"idProp\"\n [displayProp]=\"displayProp\"\n [(isSelectedAll)]=\"isSelectedAll\"\n (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n (checkedChange)=\"onTreeCheckedChange($event)\">\n </zen-groups>\n } @else {\n <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n @if (leadingType !== 'search' && hasSearch && !disabled) {\n <div class=\"app-select-search\">\n <zen-icon [name]=\"'search'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"onSearchChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n placeholder=\"Search\"\n class=\"app-select-search-input\">\n @if (searchText) {\n <zen-icon\n class=\"app-select-search-clear\"\n [name]=\"'x'\"\n [customColor]=\"'#667085'\"\n (click)=\"clearSearch(); $event.stopPropagation()\">\n </zen-icon>\n }\n </div>\n }\n <!-- Options List -->\n <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n <!-- Select All Option for Multiselect -->\n @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n <button\n class=\"app-select-option select-all\"\n (click)=\"toggleSelectAll()\">\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isAllSelected()\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n <span class=\"app-select-option-text\">\n Select All\n </span>\n </button>\n }\n <!-- Add New Option -->\n @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n <button\n class=\"app-select-option add-new-option\"\n (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n </span>\n </button>\n }\n <!-- Remove Option -->\n @if (enableRemoveOption) {\n <button\n class=\"app-select-option remove-option\"\n (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ removeOptionText || 'Remove' }}\n </span>\n </button>\n }\n @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n <div class=\"app-select-no-options\">\n No matching options found\n </div>\n }\n @for (option of filteredOptions; track option) {\n <button\n class=\"app-select-option\"\n [class.selected]=\"isSelected(option)\"\n (click)=\"selectOption(option)\">\n <!-- Checkbox for Multiselect -->\n @if (isMultiselect) {\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isSelected(option)\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n }\n <!-- Option Leading Element -->\n @if (leadingType !== 'default') {\n <div class=\"app-select-option-leading\">\n @switch (leadingType) {\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n }\n }\n </div>\n }\n <!-- Option Text -->\n <div class=\"app-select-option-text-wrapper\">\n <!-- Use custom template if provided -->\n @if (!isMultiselect && optionTemplate) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n } @else {\n <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n {{ getName(option) | translate }}\n </span>\n @if (option.secondaryText) {\n <span class=\"app-select-option-secondary\">\n {{ option.secondaryText }}\n </span>\n }\n }\n </div>\n <!-- Check Icon for Single Select -->\n @if (!isMultiselect && isSelected(option)) {\n <zen-icon\n class=\"app-select-option-check\"\n [name]=\"'check'\"\n [customColor]=\"'#136AB6'\">\n </zen-icon>\n }\n </button>\n }\n <!-- Lazy loading spinner -->\n @if (isLazyLoading && isLoadingNow) {\n <div class=\"app-select-loading\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n </div>\n }\n <!-- Flat List Mode (default) -->\n </div>\n </ng-template>\n </div>\n\n <!-- Hint text / Error message -->\n @if ((destructive && errorMessage) || hintText) {\n <div\n class=\"app-select-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n @if (destructive) {\n <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n }\n <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n </div>\n }\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n <div class=\"app-select-input app-select-search-input\"\n [class.focused]=\"isOpen || searchFocused\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <!-- Search Icon -->\n <zen-icon [name]=\"'search'\"\n [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n </zen-icon>\n\n <!-- Search Input Field -->\n <input type=\"text\"\n class=\"app-select-search-field\"\n [(ngModel)]=\"searchInputValue\"\n (ngModelChange)=\"onSearchInputChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur($event)\"\n [placeholder]=\"selectedDisplay || placeholder\"\n [disabled]=\"disabled\">\n </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n <div class=\"app-select-value-wrapper\">\n @if (valueTemplate && !isModelEmpty()) {\n <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n </ng-template>\n } @else {\n <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n {{ selectedDisplay || placeholder | translate }}\n </span>\n @if (getSelectedSecondaryText() && !isModelEmpty()) {\n <span class=\"app-select-secondary\">\n {{ getSelectedSecondaryText() }}\n </span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n <zen-icon class=\"app-select-arrow\"\n [class.rotated]=\"isOpen\"\n [name]=\"'chevron-down'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n @if (icon || option?.icon || option?.iconName) {\n @if (getIconPath(option, icon); as iconPath) {\n <!-- If icon contains / or . treat as SVG path -->\n @if ((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))) {\n <!-- Use img tag for Excel to preserve colors -->\n @if (iconPath.includes('excel')) {\n <img\n [src]=\"iconPath\"\n alt=\"\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Use zen-icon with src for other SVG files -->\n @if (!iconPath.includes('excel')) {\n <zen-icon\n [src]=\"iconPath\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n <!-- Otherwise treat as Material icon name or special cases -->\n @if (!((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))) {\n <!-- Special case for Excel icon - use img to preserve colors -->\n @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n <img\n src=\"assets/ng-zenduit/icons/excel.svg\"\n alt=\"Excel\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Material icon names -->\n @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n <zen-icon\n [name]=\"icon || option?.icon || option?.iconName\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n }\n }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n @if (avatar || option?.avatar) {\n <div class=\"app-select-avatar\" >\n <img [src]=\"avatar || option?.avatar\" alt=\"\">\n </div>\n }\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n <div class=\"app-select-dot\"\n [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-label .zen-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:help;outline:none}.app-select-label .zen-help-icon i{font-size:20px;color:#98a2b3}.app-select-label .zen-help-icon:not(.disabled):hover i,.app-select-label .zen-help-icon:not(.disabled):focus-visible i{color:#475467}.app-select-label .zen-help-icon.disabled{cursor:not-allowed}.app-select-label .zen-help-icon.disabled i{color:#d0d5dd}.app-select-label .zen-help-icon:not(.disabled):hover .zen-help-tooltip,.app-select-label .zen-help-icon:not(.disabled):focus-visible .zen-help-tooltip{display:block}.app-select-label .zen-help-icon .zen-help-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.app-select-label .zen-help-icon .zen-help-tooltip.align-start{left:-6px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-start .tooltip-arrow{left:8px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end{left:auto;right:-6px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end .tooltip-arrow{left:auto;right:8px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.place-below{top:calc(100% + 8px);bottom:auto}.app-select-label .zen-help-icon .zen-help-tooltip.place-below .tooltip-arrow{top:-6px;bottom:auto;border-top:none;border-bottom:6px solid #101828}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:6px 10px;border-radius:6px;font-family:Inter,sans-serif;font-size:12px;line-height:16px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;width:max-content;max-width:260px;white-space:normal;text-align:left}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #101828}.app-select-wrapper{position:relative;width:100%}.app-select-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#98a2b3}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#f2f4f7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{width:100%;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search zen-icon{flex-shrink:0;width:20px;height:20px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.app-select-options{flex:1;min-height:0;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.size-sm .app-select-option{padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-dot{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#f9fafb;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#eff8ff}.app-select-option.remove-option{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#f9fafb;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 14px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 0;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#f9fafb}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 0;text-align:center;color:#667085}@media(max-width:640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduGroupsComponent, selector: "zen-groups", inputs: ["dataSource", "filteredDataSource", "hideSelectAll", "isSelectedAll", "inline", "width", "placeholder", "hideSearch", "idProp", "displayProp"], outputs: ["isSelectedAllChange", "checkedChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5225
5515
|
}
|
|
5226
5516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, decorators: [{
|
|
5227
5517
|
type: Component,
|
|
5228
|
-
args: [{ selector: 'zen-select', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"getStateClasses()\">\n <!-- Label -->\n @if (label) {\n <label class=\"app-select-label text text-sm text-weight-medium\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n @if (required) {\n <span class=\"required-indicator\">*</span>\n }\n @if (helpIcon) {\n <span\n class=\"zen-help-icon\"\n role=\"img\"\n [class.disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-label]=\"helpTooltip | translate\"\n (mouseenter)=\"updateHelpTooltipPlacement($event)\"\n (focus)=\"updateHelpTooltipPlacement($event)\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <!-- Shown on hover/focus via CSS \u2014 no click state. -->\n <div\n class=\"zen-help-tooltip\"\n [class.align-start]=\"helpTooltipAlign === 'start'\"\n [class.align-end]=\"helpTooltipAlign === 'end'\"\n [class.place-below]=\"helpTooltipPlacement === 'below'\">\n <div class=\"tooltip-content\">{{ helpTooltip | translate }}</div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n </span>\n }\n </label>\n }\n\n <!-- Select Input -->\n <div class=\"app-select-wrapper\">\n <!-- Custom Trigger Template (overrides built-in trigger) -->\n @if (buttonTemplate) {\n <div\n class=\"app-select-custom-trigger\"\n (click)=\"toggleDropdown()\">\n <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n </ng-template>\n </div>\n }\n\n <!-- Built-in Trigger (when no custom button template provided) -->\n @if (!buttonTemplate) {\n @switch (leadingType) {\n <!-- Default Select (no leading element) -->\n @case ('default') {\n <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n }\n <!-- Icon Leading Select -->\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n }\n <!-- Avatar Leading Select -->\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n }\n <!-- Dot Leading Select -->\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n }\n <!-- Search Input Select -->\n @case ('search') {\n <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n }\n }\n }\n\n <!-- Dropdown Menu -->\n @if (isOpen) {\n <div class=\"app-select-dropdown\"\n [ngClass]=\"getDropdownDirectionClass()\"\n >\n <!-- Tree Mode: embed zen-groups inline -->\n @if (isTreeMode && isMultiselect) {\n <zen-groups [inline]=\"true\"\n [dataSource]=\"$any(options)\"\n [filteredDataSource]=\"treeFilteredDataSource\"\n [hideSelectAll]=\"hideSelectAll\"\n [hideSearch]=\"hideTreeSearch\"\n [idProp]=\"idProp\"\n [displayProp]=\"displayProp\"\n [(isSelectedAll)]=\"isSelectedAll\"\n (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n (checkedChange)=\"onTreeCheckedChange($event)\">\n </zen-groups>\n } @else {\n <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n @if (leadingType !== 'search' && hasSearch && !disabled) {\n <div class=\"app-select-search\">\n <zen-icon [name]=\"'search'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"onSearchChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n placeholder=\"Search\"\n class=\"app-select-search-input\">\n @if (searchText) {\n <zen-icon\n class=\"app-select-search-clear\"\n [name]=\"'x'\"\n [customColor]=\"'#667085'\"\n (click)=\"clearSearch(); $event.stopPropagation()\">\n </zen-icon>\n }\n </div>\n }\n <!-- Options List -->\n <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n <!-- Select All Option for Multiselect -->\n @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n <button\n class=\"app-select-option select-all\"\n (click)=\"toggleSelectAll()\">\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isAllSelected()\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n <span class=\"app-select-option-text\">\n Select All\n </span>\n </button>\n }\n <!-- Add New Option -->\n @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n <button\n class=\"app-select-option add-new-option\"\n (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n </span>\n </button>\n }\n <!-- Remove Option -->\n @if (enableRemoveOption) {\n <button\n class=\"app-select-option remove-option\"\n (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ removeOptionText || 'Remove' }}\n </span>\n </button>\n }\n @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n <div class=\"app-select-no-options\">\n No matching options found\n </div>\n }\n @for (option of filteredOptions; track option) {\n <button\n class=\"app-select-option\"\n [class.selected]=\"isSelected(option)\"\n (click)=\"selectOption(option)\">\n <!-- Checkbox for Multiselect -->\n @if (isMultiselect) {\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isSelected(option)\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n }\n <!-- Option Leading Element -->\n @if (leadingType !== 'default') {\n <div class=\"app-select-option-leading\">\n @switch (leadingType) {\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n }\n }\n </div>\n }\n <!-- Option Text -->\n <div class=\"app-select-option-text-wrapper\">\n <!-- Use custom template if provided -->\n @if (!isMultiselect && optionTemplate) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n } @else {\n <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n {{ getName(option) | translate }}\n </span>\n @if (option.secondaryText) {\n <span class=\"app-select-option-secondary\">\n {{ option.secondaryText }}\n </span>\n }\n }\n </div>\n <!-- Check Icon for Single Select -->\n @if (!isMultiselect && isSelected(option)) {\n <zen-icon\n class=\"app-select-option-check\"\n [name]=\"'check'\"\n [customColor]=\"'#136AB6'\">\n </zen-icon>\n }\n </button>\n }\n <!-- Lazy loading spinner -->\n @if (isLazyLoading && isLoadingNow) {\n <div class=\"app-select-loading\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n </div>\n }\n <!-- Flat List Mode (default) -->\n </div>\n }\n </div>\n\n <!-- Hint text / Error message -->\n @if ((destructive && errorMessage) || hintText) {\n <div\n class=\"app-select-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n @if (destructive) {\n <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n }\n <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n </div>\n }\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n <div class=\"app-select-input app-select-search-input\"\n [class.focused]=\"isOpen || searchFocused\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <!-- Search Icon -->\n <zen-icon [name]=\"'search'\"\n [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n </zen-icon>\n\n <!-- Search Input Field -->\n <input type=\"text\"\n class=\"app-select-search-field\"\n [(ngModel)]=\"searchInputValue\"\n (ngModelChange)=\"onSearchInputChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur($event)\"\n [placeholder]=\"selectedDisplay || placeholder\"\n [disabled]=\"disabled\">\n </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n <div class=\"app-select-value-wrapper\">\n @if (valueTemplate && !isModelEmpty()) {\n <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n </ng-template>\n } @else {\n <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n {{ selectedDisplay || placeholder | translate }}\n </span>\n @if (getSelectedSecondaryText() && !isModelEmpty()) {\n <span class=\"app-select-secondary\">\n {{ getSelectedSecondaryText() }}\n </span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n <zen-icon class=\"app-select-arrow\"\n [class.rotated]=\"isOpen\"\n [name]=\"'chevron-down'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n @if (icon || option?.icon || option?.iconName) {\n @if (getIconPath(option, icon); as iconPath) {\n <!-- If icon contains / or . treat as SVG path -->\n @if ((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))) {\n <!-- Use img tag for Excel to preserve colors -->\n @if (iconPath.includes('excel')) {\n <img\n [src]=\"iconPath\"\n alt=\"\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Use zen-icon with src for other SVG files -->\n @if (!iconPath.includes('excel')) {\n <zen-icon\n [src]=\"iconPath\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n <!-- Otherwise treat as Material icon name or special cases -->\n @if (!((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))) {\n <!-- Special case for Excel icon - use img to preserve colors -->\n @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n <img\n src=\"assets/ng-zenduit/icons/excel.svg\"\n alt=\"Excel\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Material icon names -->\n @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n <zen-icon\n [name]=\"icon || option?.icon || option?.iconName\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n }\n }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n @if (avatar || option?.avatar) {\n <div class=\"app-select-avatar\" >\n <img [src]=\"avatar || option?.avatar\" alt=\"\">\n </div>\n }\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n <div class=\"app-select-dot\"\n [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-label .zen-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:help;outline:none}.app-select-label .zen-help-icon i{font-size:20px;color:#98a2b3}.app-select-label .zen-help-icon:not(.disabled):hover i,.app-select-label .zen-help-icon:not(.disabled):focus-visible i{color:#475467}.app-select-label .zen-help-icon.disabled{cursor:not-allowed}.app-select-label .zen-help-icon.disabled i{color:#d0d5dd}.app-select-label .zen-help-icon:not(.disabled):hover .zen-help-tooltip,.app-select-label .zen-help-icon:not(.disabled):focus-visible .zen-help-tooltip{display:block}.app-select-label .zen-help-icon .zen-help-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.app-select-label .zen-help-icon .zen-help-tooltip.align-start{left:-6px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-start .tooltip-arrow{left:8px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end{left:auto;right:-6px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end .tooltip-arrow{left:auto;right:8px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.place-below{top:calc(100% + 8px);bottom:auto}.app-select-label .zen-help-icon .zen-help-tooltip.place-below .tooltip-arrow{top:-6px;bottom:auto;border-top:none;border-bottom:6px solid #101828}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:6px 10px;border-radius:6px;font-family:Inter,sans-serif;font-size:12px;line-height:16px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;width:max-content;max-width:260px;white-space:normal;text-align:left}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #101828}.app-select-wrapper{position:relative;width:100%}.app-select-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#98a2b3}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#f2f4f7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-dropdown.dropdown-up{top:auto;bottom:calc(100% + 4px)}.app-select-dropdown.dropdown-down,.app-select-dropdown.dropdown-auto{top:calc(100% + 4px);bottom:auto}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search zen-icon{flex-shrink:0;width:20px;height:20px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.app-select-options{flex:1;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.size-sm .app-select-option{padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-dot{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#f9fafb;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#eff8ff}.app-select-option.remove-option{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#f9fafb;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 14px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 0;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#f9fafb}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 0;text-align:center;color:#667085}@media(max-width:640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"] }]
|
|
5229
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectModel: [{
|
|
5518
|
+
args: [{ selector: 'zen-select', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"getStateClasses()\">\n <!-- Label -->\n @if (label) {\n <label class=\"app-select-label text text-sm text-weight-medium\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n @if (required) {\n <span class=\"required-indicator\">*</span>\n }\n @if (helpIcon) {\n <span\n class=\"zen-help-icon\"\n role=\"img\"\n [class.disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? -1 : 0\"\n [attr.aria-label]=\"helpTooltip | translate\"\n (mouseenter)=\"updateHelpTooltipPlacement($event)\"\n (focus)=\"updateHelpTooltipPlacement($event)\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <!-- Shown on hover/focus via CSS \u2014 no click state. -->\n <div\n class=\"zen-help-tooltip\"\n [class.align-start]=\"helpTooltipAlign === 'start'\"\n [class.align-end]=\"helpTooltipAlign === 'end'\"\n [class.place-below]=\"helpTooltipPlacement === 'below'\">\n <div class=\"tooltip-content\">{{ helpTooltip | translate }}</div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n </span>\n }\n </label>\n }\n\n <!-- Select Input -->\n <div class=\"app-select-wrapper\" #selectWrapper>\n <!-- Custom Trigger Template (overrides built-in trigger) -->\n @if (buttonTemplate) {\n <div\n class=\"app-select-custom-trigger\"\n (click)=\"toggleDropdown()\">\n <ng-template [ngTemplateOutlet]=\"buttonTemplate.template\"\n [ngTemplateOutletContext]=\"{ isOpen: isOpen, selected: getSelectedOption(), display: selectedDisplay, disabled: disabled }\">\n </ng-template>\n </div>\n }\n\n <!-- Built-in Trigger (when no custom button template provided) -->\n @if (!buttonTemplate) {\n @switch (leadingType) {\n <!-- Default Select (no leading element) -->\n @case ('default') {\n <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n }\n <!-- Icon Leading Select -->\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n }\n <!-- Avatar Leading Select -->\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n }\n <!-- Dot Leading Select -->\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n }\n <!-- Search Input Select -->\n @case ('search') {\n <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n }\n }\n }\n\n <!-- Dropdown Menu (rendered into a CDK overlay via ZenduOverlayService;\n positioning/flip/clamping is handled there, not with absolute CSS) -->\n <ng-template #dropdownPanel>\n <div class=\"app-select-dropdown\">\n <!-- Tree Mode: embed zen-groups inline -->\n @if (isTreeMode && isMultiselect) {\n <zen-groups [inline]=\"true\"\n [dataSource]=\"$any(options)\"\n [filteredDataSource]=\"treeFilteredDataSource\"\n [hideSelectAll]=\"hideSelectAll\"\n [hideSearch]=\"hideTreeSearch\"\n [idProp]=\"idProp\"\n [displayProp]=\"displayProp\"\n [(isSelectedAll)]=\"isSelectedAll\"\n (isSelectedAllChange)=\"onTreeSelectAllChange($event)\"\n (checkedChange)=\"onTreeCheckedChange($event)\">\n </zen-groups>\n } @else {\n <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n @if (leadingType !== 'search' && hasSearch && !disabled) {\n <div class=\"app-select-search\">\n <zen-icon [name]=\"'search'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n <input type=\"text\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"onSearchChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n placeholder=\"Search\"\n class=\"app-select-search-input\">\n @if (searchText) {\n <zen-icon\n class=\"app-select-search-clear\"\n [name]=\"'x'\"\n [customColor]=\"'#667085'\"\n (click)=\"clearSearch(); $event.stopPropagation()\">\n </zen-icon>\n }\n </div>\n }\n <!-- Options List -->\n <div class=\"app-select-options\" (scroll)=\"onOptionsScroll($event)\">\n <!-- Select All Option for Multiselect -->\n @if (isMultiselect && !hideSelectAll && !isLazyLoading && filteredOptions.length > 0) {\n <button\n class=\"app-select-option select-all\"\n (click)=\"toggleSelectAll()\">\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isAllSelected()\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n <span class=\"app-select-option-text\">\n Select All\n </span>\n </button>\n }\n <!-- Add New Option -->\n @if (enableAddNewOption && (showDefaultAddOption || searchText)) {\n <button\n class=\"app-select-option add-new-option\"\n (click)=\"handleAddNewOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'plus'\" [customColor]=\"'#136AB6'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ (newOptionText || 'Add New Option') + (searchText ? ': \"' + searchText + '\"' : '') }}\n </span>\n </button>\n }\n <!-- Remove Option -->\n @if (enableRemoveOption) {\n <button\n class=\"app-select-option remove-option\"\n (click)=\"handleRemoveOption(); $event.stopPropagation()\">\n <zen-icon [name]=\"'user-x'\" [customColor]=\"'#344054'\"></zen-icon>\n <span class=\"app-select-option-text\">\n {{ removeOptionText || 'Remove' }}\n </span>\n </button>\n }\n @if (filteredOptions.length === 0 && !enableAddNewOption && !isLoadingNow) {\n <div class=\"app-select-no-options\">\n No matching options found\n </div>\n }\n @for (option of filteredOptions; track option) {\n <button\n class=\"app-select-option\"\n [class.selected]=\"isSelected(option)\"\n (click)=\"selectOption(option)\">\n <!-- Checkbox for Multiselect -->\n @if (isMultiselect) {\n <zen-checkbox class=\"app-select-checkbox\"\n [checked]=\"isSelected(option)\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n }\n <!-- Option Leading Element -->\n @if (leadingType !== 'default') {\n <div class=\"app-select-option-leading\">\n @switch (leadingType) {\n @case ('icon') {\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('avatar') {\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n }\n @case ('dot') {\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n }\n }\n </div>\n }\n <!-- Option Text -->\n <div class=\"app-select-option-text-wrapper\">\n <!-- Use custom template if provided -->\n @if (!isMultiselect && optionTemplate) {\n <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n } @else {\n <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n {{ getName(option) | translate }}\n </span>\n @if (option.secondaryText) {\n <span class=\"app-select-option-secondary\">\n {{ option.secondaryText }}\n </span>\n }\n }\n </div>\n <!-- Check Icon for Single Select -->\n @if (!isMultiselect && isSelected(option)) {\n <zen-icon\n class=\"app-select-option-check\"\n [name]=\"'check'\"\n [customColor]=\"'#136AB6'\">\n </zen-icon>\n }\n </button>\n }\n <!-- Lazy loading spinner -->\n @if (isLazyLoading && isLoadingNow) {\n <div class=\"app-select-loading\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n }\n </div>\n }\n <!-- Flat List Mode (default) -->\n </div>\n </ng-template>\n </div>\n\n <!-- Hint text / Error message -->\n @if ((destructive && errorMessage) || hintText) {\n <div\n class=\"app-select-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n @if (destructive) {\n <i class=\"material-icons-outlined hint-icon\">error_outline</i>\n }\n <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n </div>\n }\n</div>\n\n<!-- ============================================= -->\n<!-- MAIN SELECT INPUT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Default Select Template (No Leading Element) -->\n<ng-template #defaultSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Icon Select Template -->\n<ng-template #iconSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: getSelectedOption(), icon: leadingIcon }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Avatar Select Template -->\n<ng-template #avatarSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: getSelectedOption(), avatar: leadingAvatar }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Dot Select Template -->\n<ng-template #dotSelectTemplate>\n <button class=\"app-select-input\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n [class.focused]=\"isOpen\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <div class=\"app-select-leading\">\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: getSelectedOption(), color: leadingDotColor }\"></ng-container>\n </div>\n\n <ng-container *ngTemplateOutlet=\"selectValueDisplay\"></ng-container>\n <ng-container *ngTemplateOutlet=\"dropdownArrow\"></ng-container>\n </button>\n</ng-template>\n\n<!-- Search Input Template -->\n<ng-template #searchInputTemplate>\n <div class=\"app-select-input app-select-search-input\"\n [class.focused]=\"isOpen || searchFocused\"\n [class.has-value]=\"!isModelEmpty()\">\n\n <!-- Search Icon -->\n <zen-icon [name]=\"'search'\"\n [customColor]=\"disabled ? '#9CA3AF' : '#667085'\">\n </zen-icon>\n\n <!-- Search Input Field -->\n <input type=\"text\"\n class=\"app-select-search-field\"\n [(ngModel)]=\"searchInputValue\"\n (ngModelChange)=\"onSearchInputChange()\"\n (keydown.enter)=\"onSearchEnter($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur($event)\"\n [placeholder]=\"selectedDisplay || placeholder\"\n [disabled]=\"disabled\">\n </div>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- SHARED COMPONENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Select Value Display -->\n<ng-template #selectValueDisplay>\n <div class=\"app-select-value-wrapper\">\n @if (valueTemplate && !isModelEmpty()) {\n <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n </ng-template>\n } @else {\n <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n {{ selectedDisplay || placeholder | translate }}\n </span>\n @if (getSelectedSecondaryText() && !isModelEmpty()) {\n <span class=\"app-select-secondary\">\n {{ getSelectedSecondaryText() }}\n </span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Dropdown Arrow -->\n<ng-template #dropdownArrow>\n <zen-icon class=\"app-select-arrow\"\n [class.rotated]=\"isOpen\"\n [name]=\"'chevron-down'\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n</ng-template>\n\n<!-- ============================================= -->\n<!-- LEADING ELEMENT TEMPLATES -->\n<!-- ============================================= -->\n\n<!-- Icon Leading Element (with smart resolution) -->\n<ng-template #iconLeadingElement let-option=\"option\" let-icon=\"icon\">\n @if (icon || option?.icon || option?.iconName) {\n @if (getIconPath(option, icon); as iconPath) {\n <!-- If icon contains / or . treat as SVG path -->\n @if ((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.')))) {\n <!-- Use img tag for Excel to preserve colors -->\n @if (iconPath.includes('excel')) {\n <img\n [src]=\"iconPath\"\n alt=\"\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Use zen-icon with src for other SVG files -->\n @if (!iconPath.includes('excel')) {\n <zen-icon\n [src]=\"iconPath\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n <!-- Otherwise treat as Material icon name or special cases -->\n @if (!((icon && (icon.includes('/') || icon.includes('.'))) ||\n (option?.icon && (option.icon.includes('/') || option.icon.includes('.'))) ||\n (option?.iconName && (option.iconName.includes('/') || option.iconName.includes('.'))))) {\n <!-- Special case for Excel icon - use img to preserve colors -->\n @if ((icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')) {\n <img\n src=\"assets/ng-zenduit/icons/excel.svg\"\n alt=\"Excel\"\n style=\"width: 20px; height: 20px;\">\n }\n <!-- Material icon names -->\n @if ((icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')) {\n <zen-icon\n [name]=\"icon || option?.icon || option?.iconName\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n }\n }\n }\n }\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n @if (avatar || option?.avatar) {\n <div class=\"app-select-avatar\" >\n <img [src]=\"avatar || option?.avatar\" alt=\"\">\n </div>\n }\n</ng-template>\n\n<!-- Dot Leading Element -->\n<ng-template #dotLeadingElement let-option=\"option\" let-color=\"color\">\n <div class=\"app-select-dot\"\n [style.background-color]=\"color || option?.dotColor || '#10B981'\">\n </div>\n</ng-template>", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}.app-select-container{width:100%;position:relative}.app-select-label{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.app-select-label .zen-help-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:help;outline:none}.app-select-label .zen-help-icon i{font-size:20px;color:#98a2b3}.app-select-label .zen-help-icon:not(.disabled):hover i,.app-select-label .zen-help-icon:not(.disabled):focus-visible i{color:#475467}.app-select-label .zen-help-icon.disabled{cursor:not-allowed}.app-select-label .zen-help-icon.disabled i{color:#d0d5dd}.app-select-label .zen-help-icon:not(.disabled):hover .zen-help-tooltip,.app-select-label .zen-help-icon:not(.disabled):focus-visible .zen-help-tooltip{display:block}.app-select-label .zen-help-icon .zen-help-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:50%;transform:translate(50%);z-index:1000;white-space:nowrap}.app-select-label .zen-help-icon .zen-help-tooltip.align-start{left:-6px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-start .tooltip-arrow{left:8px;right:auto;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end{left:auto;right:-6px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.align-end .tooltip-arrow{left:auto;right:8px;transform:none}.app-select-label .zen-help-icon .zen-help-tooltip.place-below{top:calc(100% + 8px);bottom:auto}.app-select-label .zen-help-icon .zen-help-tooltip.place-below .tooltip-arrow{top:-6px;bottom:auto;border-top:none;border-bottom:6px solid #101828}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-content{background:#101828;color:#fff;padding:6px 10px;border-radius:6px;font-family:Inter,sans-serif;font-size:12px;line-height:16px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;width:max-content;max-width:260px;white-space:normal;text-align:left}.app-select-label .zen-help-icon .zen-help-tooltip .tooltip-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #101828}.app-select-wrapper{position:relative;width:100%}.app-select-custom-trigger{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none}.app-select-input{width:100%;min-height:44px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;color:#101828;text-align:left;cursor:pointer;transition:all .2s ease}.app-select-input.app-select-search-input{cursor:text}.app-select-input.app-select-search-input .app-select-search-field{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;background:transparent;color:#101828;min-width:0}.app-select-input.app-select-search-input .app-select-search-field::placeholder{color:#667085}.app-select-input.app-select-search-input .app-select-search-field:disabled{cursor:not-allowed;color:#667085}.app-select-input:hover:not(:disabled){border-color:#98a2b3}.app-select-input.focused,.app-select-input:focus{outline:none;border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.app-select-input:disabled{background:#f9fafb;border-color:#d0d5dd;cursor:not-allowed}.app-select-container.error .app-select-input:hover:not(:disabled){border-color:#f97066}.app-select-container.error .app-select-input:focus{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-leading,.app-select-option-leading{display:flex;align-items:center;flex-shrink:0}.app-select-avatar,.app-select-option-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}.app-select-avatar img,.app-select-option-avatar img{width:100%;height:100%;object-fit:cover}.app-select-avatar .avatar-placeholder,.app-select-option-avatar .avatar-placeholder{width:100%;height:100%;background:#f2f4f7;color:#667085;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0;font-weight:600;font-style:normal}.app-select-dot,.app-select-option-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.app-select-value-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-value-wrapper .app-select-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085}.app-select-value{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-value.placeholder{color:#667085}.app-select-secondary,.app-select-option-secondary{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#667085;white-space:nowrap;flex-shrink:0}.app-select-arrow{margin-left:auto;flex-shrink:0;transition:transform .2s ease}.app-select-arrow.rotated{transform:rotate(180deg)}.app-select-dropdown{width:100%;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814;overflow:hidden;max-height:320px;display:flex;flex-direction:column}.app-select-search{padding:12px;border-bottom:1px solid #EAECF0;display:flex;align-items:center;gap:8px}.app-select-search zen-icon{flex-shrink:0;width:20px;height:20px}.app-select-search .app-select-search-input{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;flex:1;border:none;outline:none;color:#101828}.app-select-search .app-select-search-input::placeholder{color:#667085}.app-select-search .app-select-search-clear{cursor:pointer}.app-select-loading{display:flex;justify-content:center;align-items:center;padding:8px 0}.app-select-options{flex:1;min-height:0;overflow-y:auto;padding:4px 0}.app-select-options::-webkit-scrollbar{width:6px}.app-select-options::-webkit-scrollbar-track{background:transparent}.app-select-options::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-no-options{padding:32px 24px;text-align:center;color:#667085;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.app-select-option{width:100%;padding:10px 14px;display:flex;align-items:center;gap:8px;background:transparent;border:none;text-align:left;cursor:pointer;transition:background .15s ease}.app-select-option:hover,.app-select-option.selected{background:#f9fafb}.app-select-option-text-wrapper{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden}.app-select-option-text{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;font-style:normal;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-select-option-text.app-select-option-truncate{max-width:200px}.app-select-option-check{margin-left:auto;flex-shrink:0}.app-select-checkbox{display:flex;align-items:center;flex-shrink:0;margin-right:8px}.app-select-checkbox .checkbox-wrapper{margin-bottom:0}.app-select-checkbox .checkbox-content{display:none}.app-select-checkbox .checkbox-input{margin-right:0}.app-select-supporting{margin-top:6px;color:#667085}.app-select-supporting .error-text{color:#f04438}.app-select-container.size-sm .app-select-input{min-height:36px;padding:8px 12px}.app-select-container.size-sm .app-select-option{padding:8px 12px}.app-select-container.error .app-select-input{border-color:#fda29b}.app-select-container.error .app-select-supporting{color:#f04438}.app-select-container.destructive .app-select-input{border-color:#fda29b}.app-select-container.destructive .app-select-input:focus,.app-select-container.destructive .app-select-input.focused{box-shadow:0 1px 2px #1018280d,0 0 0 4px #fee4e2}.app-select-container.disabled .app-select-label,.app-select-container.disabled .app-select-value,.app-select-container.disabled .app-select-secondary,.app-select-container.disabled .app-select-search-field{color:#667085}.app-select-container.disabled .app-select-arrow,.app-select-container.disabled .app-select-leading zen-icon,.app-select-container.disabled .app-select-search-input zen-icon,.app-select-container.disabled .app-select-dot{opacity:.6}.app-select-container.disabled .app-select-input,.app-select-container.disabled .app-select-search-input{background:#f9fafb;cursor:not-allowed}.app-select-hint{display:flex;align-items:center;gap:4px;margin-top:6px;color:#667085}.app-select-hint .hint-icon{font-size:16px;color:#f04438}.app-select-hint.destructive{color:#f04438}.app-select-option.select-all{border-bottom:1px solid #F2F4F7;margin-bottom:4px;padding-bottom:14px}.app-select-option.add-new-option{color:#136ab6;font-weight:500}.app-select-option.add-new-option:hover{background:#eff8ff}.app-select-option.remove-option{background:#f9fafb;color:#344054}.app-select-option.remove-option .app-select-option-text{color:#344054}.app-select-spinner{display:flex;justify-content:center;padding:16px}.app-select-spinner .spinner-small{width:20px;height:20px;border:2px solid #F2F4F7;border-top-color:#136ab6;border-radius:50%;animation:spin .6s linear infinite}.app-select-load-more{padding:8px 14px}.app-select-load-more .app-select-load-more-btn{width:100%;padding:8px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:6px;color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0;font-weight:500;font-style:normal;cursor:pointer;transition:all .15s ease}.app-select-load-more .app-select-load-more-btn:hover{background:#f9fafb;border-color:#667085}@keyframes spin{to{transform:rotate(360deg)}}.app-select-dropdown ::ng-deep zen-groups .zen-groups-inline{display:flex;flex-direction:column;max-height:310px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree{flex:1;overflow-y:auto;padding:4px 14px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar{width:6px}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-track{background:transparent}.app-select-dropdown ::ng-deep zen-groups .zen-groups-tree::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox{padding:10px 0;font-weight:400;font-size:14px;line-height:20px;color:#344054}.app-select-dropdown ::ng-deep zen-groups .action-item-checkbox:hover{background:#f9fafb}.app-select-dropdown ::ng-deep zen-groups .select-all{border-bottom:none;margin-bottom:0;font-weight:500}.app-select-dropdown ::ng-deep zen-groups .tree-item-badge{background:#f1f7fe;color:#105494}.app-select-dropdown ::ng-deep zen-groups .checkbox-component .app-checkbox-label{font-weight:400;color:#344054}.app-select-dropdown ::ng-deep zen-groups .zen-groups-no-results{padding:32px 0;text-align:center;color:#667085}@media(max-width:640px){.app-select-dropdown{position:fixed;inset:auto 0 0;max-height:70vh;border-radius:16px 16px 0 0}}\n"] }]
|
|
5519
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: ZenduOverlayService }, { type: i0.ViewContainerRef }], propDecorators: { selectModel: [{
|
|
5230
5520
|
type: Input
|
|
5231
5521
|
}], selectModelChange: [{
|
|
5232
5522
|
type: Output
|
|
@@ -5313,9 +5603,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
5313
5603
|
}], buttonTemplate: [{
|
|
5314
5604
|
type: ContentChild,
|
|
5315
5605
|
args: [ZenduSelectButtonDirective]
|
|
5316
|
-
}],
|
|
5317
|
-
type:
|
|
5318
|
-
args: ['
|
|
5606
|
+
}], selectWrapper: [{
|
|
5607
|
+
type: ViewChild,
|
|
5608
|
+
args: ['selectWrapper']
|
|
5609
|
+
}], dropdownPanel: [{
|
|
5610
|
+
type: ViewChild,
|
|
5611
|
+
args: ['dropdownPanel']
|
|
5319
5612
|
}] } });
|
|
5320
5613
|
|
|
5321
5614
|
class ZenduPaginationBarComponent {
|
|
@@ -5531,7 +5824,7 @@ class ZenduPhoneInputComponent {
|
|
|
5531
5824
|
}
|
|
5532
5825
|
}
|
|
5533
5826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5534
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPhoneInputComponent, isStandalone: false, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled", width: "width" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n <!-- Leading dropdown: Country selector -->\n <div class=\"zen-input-leading-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggle(); $event.stopPropagation()\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"selectedCountry.flag\"\n [alt]=\"selectedCountry.countryName\">\n <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n <i class=\"material-icons dropdown-icon\"\n [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n </button>\n </div>\n\n <!-- Phone input field -->\n <input #input\n class=\"zen-input-field text text-md text-weight-regular\"\n type=\"text\"\n [(ngModel)]=\"phoneText\"\n (ngModelChange)=\"phoneChanged(input)\"\n (click)=\"isExpanded = false\"\n [disabled]=\"disabled\"\n country-code=\"selectedCountry.countryCode\"\n [maxlength]=\"maxLength\">\n </div>\n\n <!-- Country dropdown menu -->\n @if (isExpanded) {\n <div class=\"zen-dropdown-menu\"\n [ngClass]=\"{'open': isExpanded}\">\n <!-- Countries List -->\n @for (country of countryList; track country) {\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n (click)=\"countryChanged(country)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"country.flag\"\n [alt]=\"country.countryName\">\n <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n </button>\n }\n <!-- Custom Country -->\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n (click)=\"countryChanged(customCountry)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"customCountry.flag\"\n [alt]=\"customCountry.countryName\">\n <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n </button>\n </div>\n }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n <div\n class=\"zen-dropdown-backdrop\"\n (click)=\"hideDropDown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPhoneInputComponent, isStandalone: false, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled", width: "width" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n\n <!-- Leading dropdown: Country selector -->\n <div class=\"zen-input-leading-dropdown\">\n <button type=\"button\"\n class=\"zen-dropdown-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggle(); $event.stopPropagation()\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"selectedCountry.flag\"\n [alt]=\"selectedCountry.countryName\">\n <span class=\"dropdown-label\">{{ selectedCountry.countryCallingCode }}</span>\n <i class=\"material-icons dropdown-icon\"\n [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n </button>\n </div>\n\n <!-- Phone input field -->\n <input #input\n class=\"zen-input-field text text-md text-weight-regular\"\n type=\"text\"\n [(ngModel)]=\"phoneText\"\n (ngModelChange)=\"phoneChanged(input)\"\n (click)=\"isExpanded = false\"\n [disabled]=\"disabled\"\n country-code=\"selectedCountry.countryCode\"\n [maxlength]=\"maxLength\">\n </div>\n\n <!-- Country dropdown menu -->\n @if (isExpanded) {\n <div class=\"zen-dropdown-menu\"\n [ngClass]=\"{'open': isExpanded}\">\n <!-- Countries List -->\n @for (country of countryList; track country) {\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === country.countryName}\"\n (click)=\"countryChanged(country)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"country.flag\"\n [alt]=\"country.countryName\">\n <span class=\"zen-phone-country-name\">{{ country.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ country.countryCallingCode }}</span>\n </button>\n }\n <!-- Custom Country -->\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': selectedCountry.countryName === customCountry.countryName}\"\n (click)=\"countryChanged(customCountry)\">\n <img class=\"zen-phone-country-flag\"\n [src]=\"customCountry.flag\"\n [alt]=\"customCountry.countryName\">\n <span class=\"zen-phone-country-name\">{{ customCountry.countryName }}</span>\n <span class=\"zen-phone-country-code\">{{ customCountry.countryCallingCode }}</span>\n </button>\n </div>\n }\n</div>\n\n<!-- Click outside handler for dropdown -->\n@if (isExpanded) {\n <div\n class=\"zen-dropdown-backdrop\"\n (click)=\"hideDropDown()\"></div>\n}\n", styles: [".text{margin:0;padding:0;color:#101828}.text-display-2xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:72px;line-height:90px;letter-spacing:-.02em}.text-display-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:60px;line-height:72px;letter-spacing:-.02em}.text-display-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:48px;line-height:60px;letter-spacing:-.02em}.text-display-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:36px;line-height:44px;letter-spacing:-.02em}.text-display-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:30px;line-height:38px;letter-spacing:0}.text-display-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:24px;line-height:32px;letter-spacing:0}.text-xl{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:30px;letter-spacing:0}.text-lg{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;line-height:28px;letter-spacing:0}.text-md{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:24px;letter-spacing:0}.text-sm{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:20px;letter-spacing:0}.text-xs{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:18px;letter-spacing:0}.text-weight-regular{font-weight:400;font-style:normal}.text-weight-medium{font-weight:500;font-style:normal}.text-weight-semibold{font-weight:600;font-style:normal}.text-weight-bold{font-weight:700;font-style:normal}@media(max-width:768px){.text-display-2xl{font-size:48px;line-height:56px}.text-display-xl{font-size:40px;line-height:48px}.text-display-lg{font-size:32px;line-height:40px}}:host{display:block;width:100%}.zen-input-container{display:flex;flex-direction:column;gap:6px;width:100%;position:relative}.zen-input-container .zen-input-field-wrapper{display:flex;align-items:center;background:#fff;border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px;min-height:44px;box-sizing:border-box;transition:all .2s ease;cursor:text;position:relative;box-shadow:0 1px 2px #1018280d}.zen-input-container .zen-input-field-wrapper:hover{border-color:#98a2b3}.zen-input-container .zen-input-field-wrapper:focus-within{border-color:#88c1f1;box-shadow:0 1px 2px #1018280d,0 0 0 4px #e3eefb}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-right:8px;border-right:1px solid #D0D5DD;margin-right:8px;position:relative}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer;font-family:Inter,sans-serif;font-size:16px;color:#344054}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-label{font-weight:500;font-size:14px;min-width:max-content}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon{font-size:16px;color:#98a2b3;transition:transform .2s ease,color .2s ease}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger .dropdown-icon.active{transform:rotate(180deg)}.zen-input-container .zen-input-field-wrapper .zen-input-leading-dropdown .zen-dropdown-trigger:hover:not(:disabled) .dropdown-icon{color:#475467}.zen-input-container .zen-input-field-wrapper .zen-input-field{flex:1;border:none;outline:none;background:transparent;color:#101828;padding:0;min-width:0}.zen-input-container .zen-input-field-wrapper .zen-input-field::placeholder{color:#667085}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled{cursor:not-allowed;color:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.zen-input-container .zen-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #EAECF0;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;min-width:280px;max-height:240px;overflow-y:auto;z-index:100;padding:4px;width:100%;box-sizing:border-box}.zen-input-container .zen-dropdown-menu .zen-dropdown-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:6px;font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#344054;text-align:left;cursor:pointer;transition:background-color .2s ease}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-name{flex:1;min-width:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option .zen-phone-country-code{color:#667085;font-size:13px;flex-shrink:0}.zen-input-container .zen-dropdown-menu .zen-dropdown-option:hover{background:#f9fafb}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected{background:#f1f7fe;color:#105494}.zen-input-container .zen-dropdown-menu .zen-dropdown-option.selected .zen-phone-country-code{color:#136ab6}.zen-dropdown-backdrop{position:fixed;inset:0;z-index:99;background:transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5535
5828
|
}
|
|
5536
5829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, decorators: [{
|
|
5537
5830
|
type: Component,
|
|
@@ -5642,7 +5935,7 @@ class ZenduMapPreviewComponent {
|
|
|
5642
5935
|
}
|
|
5643
5936
|
}
|
|
5644
5937
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduMapPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5645
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenduMapPreviewComponent, isStandalone: false, selector: "zen-map-preview", inputs: { lat: "lat", lng: "lng", apiKey: "apiKey" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"component\"\n [ngStyle]=\"{ 'background-image': 'url('+source+')' }\">\n</div>\n", styles: [".component{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5938
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenduMapPreviewComponent, isStandalone: false, selector: "zen-map-preview", inputs: { lat: "lat", lng: "lng", apiKey: "apiKey" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"component\"\n [ngStyle]=\"{ 'background-image': 'url('+source+')' }\">\n</div>\n", styles: [".component{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5646
5939
|
}
|
|
5647
5940
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduMapPreviewComponent, decorators: [{
|
|
5648
5941
|
type: Component,
|
|
@@ -6500,7 +6793,7 @@ class ZenduDocScanner {
|
|
|
6500
6793
|
this._canvas.renderAll();
|
|
6501
6794
|
}
|
|
6502
6795
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDocScanner, deps: [{ token: OpenCVService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6503
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDocScanner, isStandalone: false, selector: "zen-doc-scanner", inputs: { src: "src", width: "width", height: "height", isScanStart: "isScanStart", canAddText: "canAddText", canDoodle: "canDoodle", isRedoing: "isRedoing", isUndoing: "isUndoing", expandIconSrc: "expandIconSrc", rotateIconSrc: "rotateIconSrc", crossIconSrc: "crossIconSrc", done: "done" }, outputs: { extracted: "extracted", cornersChanged: "cornersChanged", getUndoingChange: "getUndoingChange", getRedoingChange: "getRedoingChange", canAddTextOrDoole: "canAddTextOrDoole", canRedoOrUndo: "canRedoOrUndo" }, viewQueries: [{ propertyName: "_canvasElement", first: true, predicate: ["drawCanas"], descendants: true }, { propertyName: "_component", first: true, predicate: ["componentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #componentWrapper\n class=\"component\">\n <canvas #drawCanas [ngClass]=\"{display: !(isLoading | async) ? 'blurred' : null}\"></canvas>\n <div class=\"loading-overlay\" [ngStyle]=\"{display: !(isLoading | async) ? 'none' : 'block'}\">\n <!-- Add your loading message or spinner here -->\n Scaning...\n </div>\n @if (canDoodle || canAddText) {\n <div class=\"colors-container\">\n @for (color of colors; track color) {\n <div class=\"colors\" [ngStyle]=\"{'background': color.hexCode, 'border':color.selected ? '1.6px solid white' : 'none'}\" (click)=\"chngClrTextOrBrush(color.hexCode, canAddText ? 'text': 'doodle')\"></div>\n }\n </div>\n }\n</div>\n", styles: [".component{position:relative;width:100%;height:100%}.component.blurred{filter:blur(20px)}.component .loading-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.colors-container{display:flex;height:20px;gap:16px;padding:8px 62px;justify-content:space-between;background:#262626}.colors-container .colors{width:20px;height:20px;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
6796
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduDocScanner, isStandalone: false, selector: "zen-doc-scanner", inputs: { src: "src", width: "width", height: "height", isScanStart: "isScanStart", canAddText: "canAddText", canDoodle: "canDoodle", isRedoing: "isRedoing", isUndoing: "isUndoing", expandIconSrc: "expandIconSrc", rotateIconSrc: "rotateIconSrc", crossIconSrc: "crossIconSrc", done: "done" }, outputs: { extracted: "extracted", cornersChanged: "cornersChanged", getUndoingChange: "getUndoingChange", getRedoingChange: "getRedoingChange", canAddTextOrDoole: "canAddTextOrDoole", canRedoOrUndo: "canRedoOrUndo" }, viewQueries: [{ propertyName: "_canvasElement", first: true, predicate: ["drawCanas"], descendants: true }, { propertyName: "_component", first: true, predicate: ["componentWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #componentWrapper\n class=\"component\">\n <canvas #drawCanas [ngClass]=\"{display: !(isLoading | async) ? 'blurred' : null}\"></canvas>\n <div class=\"loading-overlay\" [ngStyle]=\"{display: !(isLoading | async) ? 'none' : 'block'}\">\n <!-- Add your loading message or spinner here -->\n Scaning...\n </div>\n @if (canDoodle || canAddText) {\n <div class=\"colors-container\">\n @for (color of colors; track color) {\n <div class=\"colors\" [ngStyle]=\"{'background': color.hexCode, 'border':color.selected ? '1.6px solid white' : 'none'}\" (click)=\"chngClrTextOrBrush(color.hexCode, canAddText ? 'text': 'doodle')\"></div>\n }\n </div>\n }\n</div>\n", styles: [".component{position:relative;width:100%;height:100%}.component.blurred{filter:blur(20px)}.component .loading-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.colors-container{display:flex;height:20px;gap:16px;padding:8px 62px;justify-content:space-between;background:#262626}.colors-container .colors{width:20px;height:20px;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
6504
6797
|
}
|
|
6505
6798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDocScanner, decorators: [{
|
|
6506
6799
|
type: Component,
|
|
@@ -7017,7 +7310,7 @@ class ZenduProgress {
|
|
|
7017
7310
|
return this.sizeConfig.containerSize / 2 + this.sizeConfig.strokeWidth;
|
|
7018
7311
|
}
|
|
7019
7312
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduProgress, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7020
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduProgress, isStandalone: false, selector: "zen-progress", inputs: { type: "type", label: "label", size: "size", value: "value", text: "text", color: "color", trackColor: "trackColor" }, ngImport: i0, template: "<div class=\"component\">\n <!-- Progress bar -->\n @if (type == 'bar') {\n <div class=\"bar-wrapper\"\n [class.bar-label-right]=\"label === 'right'\"\n [class.bar-label-bottom]=\"label === 'bottom'\"\n [class.bar-label-top-floating]=\"label === 'top-floating'\"\n [class.bar-label-bottom-floating]=\"label === 'bottom-floating'\">\n <div class=\"progress-bar\">\n <div class=\"progress-bar-bg\" [ngStyle]=\"trackColor ? { 'background-color': trackColor } : {}\"></div>\n <div class=\"progress-bar-fill\" [ngStyle]=\"{ 'width': value + '%', 'background-color': color || null }\">\n <!-- Top floating tooltip -->\n @if (label === 'top-floating') {\n <div class=\"floating-tooltip floating-tooltip-top\">\n <div class=\"tooltip-content\">\n <span class=\"tooltip-text\">{{value}}%</span>\n </div>\n <div class=\"tooltip-arrow tooltip-arrow-down\">\n <svg width=\"16\" height=\"6\" viewBox=\"0 0 16 6\" fill=\"none\">\n <path d=\"M6.58579 4.41421L2.34315 0.171573C1.41421 -0.757359 0 0 0 0H16C16 0 14.5858 -0.757359 13.6569 0.171573L9.41421 4.41421C8.63316 5.19527 7.36684 5.19527 6.58579 4.41421Z\" fill=\"white\"/>\n </svg>\n </div>\n </div>\n }\n <!-- Bottom floating tooltip -->\n @if (label === 'bottom-floating') {\n <div class=\"floating-tooltip floating-tooltip-bottom\">\n <div class=\"tooltip-arrow tooltip-arrow-up\">\n <svg width=\"16\" height=\"6\" viewBox=\"0 0 16 6\" fill=\"none\">\n <path d=\"M9.41421 1.58579L13.6569 5.82843C14.5858 6.75736 16 6 16 6H0C0 6 1.41421 6.75736 2.34315 5.82843L6.58579 1.58579C7.36684 0.804738 8.63316 0.804738 9.41421 1.58579Z\" fill=\"white\"/>\n </svg>\n </div>\n <div class=\"tooltip-content\">\n <span class=\"tooltip-text\">{{value}}%</span>\n </div>\n </div>\n }\n </div>\n </div>\n <!-- Right label -->\n @if (label === 'right') {\n <span class=\"bar-label\">{{value}}%</span>\n }\n <!-- Bottom label -->\n @if (label === 'bottom') {\n <span class=\"bar-label\">{{value}}%</span>\n }\n <!-- Text description (legacy support) -->\n @if (text && (label === 'none')) {\n <div class=\"progress-text\">{{text}}</div>\n }\n </div>\n }\n\n <!-- Circle progress -->\n @if (type == 'circle') {\n <div class=\"circle-wrapper\"\n [ngStyle]=\"{\n 'width.px': sizeConfig.containerSize,\n 'height.px': sizeConfig.containerSize\n }\">\n <svg class=\"circle-svg\"\n [attr.width]=\"sizeConfig.containerSize\"\n [attr.height]=\"sizeConfig.containerSize\"\n [attr.viewBox]=\"'0 0 ' + sizeConfig.containerSize + ' ' + sizeConfig.containerSize\">\n <!-- Background ring -->\n <circle class=\"circle-bg\"\n [attr.cx]=\"circleCenter\"\n [attr.cy]=\"circleCenter\"\n [attr.r]=\"sizeConfig.radius\"\n [attr.stroke-width]=\"sizeConfig.strokeWidth\"\n [style.stroke]=\"trackColor || null\"\n fill=\"none\" />\n <!-- Progress ring -->\n <circle class=\"circle-progress\"\n [attr.cx]=\"circleCenter\"\n [attr.cy]=\"circleCenter\"\n [attr.r]=\"sizeConfig.radius\"\n [attr.stroke-width]=\"sizeConfig.strokeWidth\"\n [attr.stroke-dasharray]=\"circumference\"\n [attr.stroke-dashoffset]=\"circleOffset\"\n [style.stroke]=\"color || null\"\n fill=\"none\"\n stroke-linecap=\"round\" />\n </svg>\n <div class=\"circle-label\">\n @if (text) {\n <span class=\"circle-label-text\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.labelFontSize\n }\">{{text}}</span>\n }\n <span class=\"circle-value\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.fontSize,\n 'letter-spacing.px': sizeConfig.letterSpacing\n }\">{{value}}%</span>\n </div>\n </div>\n }\n\n <!-- Half-Circle progress -->\n @if (type == 'half-circle') {\n <div class=\"half-circle-wrapper\"\n [ngStyle]=\"{\n 'width.px': sizeConfig.containerSize,\n 'height.px': halfCircleContainerHeight\n }\">\n <svg class=\"circle-svg\"\n [attr.width]=\"sizeConfig.containerSize\"\n [attr.height]=\"sizeConfig.containerSize\"\n [attr.viewBox]=\"'0 0 ' + sizeConfig.containerSize + ' ' + sizeConfig.containerSize\">\n <!-- Background arc (bottom half) -->\n <circle class=\"circle-bg half-circle-ring\"\n [attr.cx]=\"circleCenter\"\n [attr.cy]=\"circleCenter\"\n [attr.r]=\"sizeConfig.radius\"\n [attr.stroke-width]=\"sizeConfig.strokeWidth\"\n [attr.stroke-dasharray]=\"circumference\"\n [attr.stroke-dashoffset]=\"circumference / 2\"\n [style.stroke]=\"trackColor || null\"\n fill=\"none\" />\n <!-- Progress arc -->\n <circle class=\"circle-progress half-circle-ring\"\n [attr.cx]=\"circleCenter\"\n [attr.cy]=\"circleCenter\"\n [attr.r]=\"sizeConfig.radius\"\n [attr.stroke-width]=\"sizeConfig.strokeWidth\"\n [attr.stroke-dasharray]=\"halfCircumference + ' ' + circumference\"\n [attr.stroke-dashoffset]=\"halfCircleOffset\"\n [style.stroke]=\"color || null\"\n fill=\"none\"\n stroke-linecap=\"round\" />\n </svg>\n <div class=\"half-circle-label\">\n @if (text) {\n <span class=\"circle-label-text\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.labelFontSize\n }\">{{text}}</span>\n }\n <span class=\"circle-value\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.fontSize,\n 'letter-spacing.px': sizeConfig.letterSpacing\n }\">{{value}}%</span>\n </div>\n </div>\n }\n</div>\n", styles: [".component{font-family:Inter,sans-serif}.component .bar-wrapper{width:100%}.component .bar-wrapper .progress-bar{position:relative;width:100%;height:8px;border-radius:8px}.component .bar-wrapper .progress-bar .progress-bar-bg{position:absolute;top:0;left:0;right:0;height:8px;border-radius:4px;background-color:#f1f7fe}.component .bar-wrapper .progress-bar .progress-bar-fill{position:absolute;top:0;left:0;height:8px;border-radius:4px;background-color:#136ab6;transition:width .3s ease;min-width:0}.component .bar-wrapper .bar-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap}.component .bar-wrapper .progress-text{color:#667085;font-size:14px;font-weight:400;margin-top:8px}.component .bar-wrapper.bar-label-right{display:flex;align-items:center;gap:12px}.component .bar-wrapper.bar-label-right .progress-bar{flex:1 0 0;min-width:0}.component .bar-wrapper.bar-label-bottom{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.component .bar-wrapper.bar-label-top-floating .progress-bar{overflow:visible}.component .bar-wrapper.bar-label-top-floating .progress-bar-fill{overflow:visible;position:relative}.component .bar-wrapper.bar-label-top-floating .floating-tooltip{position:absolute;right:0;transform:translate(50%);display:flex;flex-direction:column;align-items:center}.component .bar-wrapper.bar-label-top-floating .floating-tooltip-top{bottom:calc(100% + 4px)}.component .bar-wrapper.bar-label-top-floating .tooltip-content{background:#fff;border-radius:8px;padding:8px 12px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814}.component .bar-wrapper.bar-label-top-floating .tooltip-text{font-size:12px;font-weight:500;line-height:18px;color:#344054;white-space:nowrap;text-align:center}.component .bar-wrapper.bar-label-top-floating .tooltip-arrow-down{display:flex;justify-content:center;line-height:0}.component .bar-wrapper.bar-label-top-floating .tooltip-arrow-up{display:none}.component .bar-wrapper.bar-label-bottom-floating .progress-bar{overflow:visible}.component .bar-wrapper.bar-label-bottom-floating .progress-bar-fill{overflow:visible;position:relative}.component .bar-wrapper.bar-label-bottom-floating .floating-tooltip{position:absolute;right:0;transform:translate(50%);display:flex;flex-direction:column;align-items:center}.component .bar-wrapper.bar-label-bottom-floating .floating-tooltip-bottom{top:calc(100% + 4px)}.component .bar-wrapper.bar-label-bottom-floating .tooltip-content{background:#fff;border-radius:8px;padding:8px 12px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814}.component .bar-wrapper.bar-label-bottom-floating .tooltip-text{font-size:12px;font-weight:500;line-height:18px;color:#344054;white-space:nowrap;text-align:center}.component .bar-wrapper.bar-label-bottom-floating .tooltip-arrow-up{display:flex;justify-content:center;line-height:0}.component .bar-wrapper.bar-label-bottom-floating .tooltip-arrow-down{display:none}.component .circle-wrapper{position:relative;display:inline-block}.component .circle-wrapper .circle-svg{display:block;transform:rotate(-90deg)}.component .circle-wrapper .circle-bg{stroke:#f1f7fe}.component .circle-wrapper .circle-progress{stroke:#136ab6;transition:stroke-dashoffset .3s ease}.component .circle-wrapper .circle-label{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.component .circle-wrapper .circle-label .circle-label-text{font-weight:500;color:#667085;line-height:1.5;text-align:center}.component .circle-wrapper .circle-label .circle-value{font-weight:500;color:#101828;line-height:1.2;text-align:center}.component .half-circle-wrapper{position:relative;display:inline-block;overflow:hidden}.component .half-circle-wrapper .circle-svg{display:block;transform:rotate(180deg)}.component .half-circle-wrapper .circle-bg{stroke:#f1f7fe}.component .half-circle-wrapper .circle-progress{stroke:#136ab6;transition:stroke-dashoffset .3s ease}.component .half-circle-wrapper .half-circle-ring{stroke-linecap:round}.component .half-circle-wrapper .half-circle-label{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4px}.component .half-circle-wrapper .half-circle-label .circle-label-text{font-weight:500;color:#667085;line-height:1.5;text-align:center}.component .half-circle-wrapper .half-circle-label .circle-value{font-weight:500;color:#101828;line-height:1.2;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
7313
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduProgress, isStandalone: false, selector: "zen-progress", inputs: { type: "type", label: "label", size: "size", value: "value", text: "text", color: "color", trackColor: "trackColor" }, ngImport: i0, template: "<div class=\"component\">\n <!-- Progress bar -->\n @if (type == 'bar') {\n <div class=\"bar-wrapper\"\n [class.bar-label-right]=\"label === 'right'\"\n [class.bar-label-bottom]=\"label === 'bottom'\"\n [class.bar-label-top-floating]=\"label === 'top-floating'\"\n [class.bar-label-bottom-floating]=\"label === 'bottom-floating'\">\n <div class=\"progress-bar\">\n <div class=\"progress-bar-bg\" [ngStyle]=\"trackColor ? { 'background-color': trackColor } : {}\"></div>\n <div class=\"progress-bar-fill\" [ngStyle]=\"{ 'width': value + '%', 'background-color': color || null }\">\n <!-- Top floating tooltip -->\n @if (label === 'top-floating') {\n <div class=\"floating-tooltip floating-tooltip-top\">\n <div class=\"tooltip-content\">\n <span class=\"tooltip-text\">{{value}}%</span>\n </div>\n <div class=\"tooltip-arrow tooltip-arrow-down\">\n <svg width=\"16\" height=\"6\" viewBox=\"0 0 16 6\" fill=\"none\">\n <path d=\"M6.58579 4.41421L2.34315 0.171573C1.41421 -0.757359 0 0 0 0H16C16 0 14.5858 -0.757359 13.6569 0.171573L9.41421 4.41421C8.63316 5.19527 7.36684 5.19527 6.58579 4.41421Z\" fill=\"white\"/>\n </svg>\n </div>\n </div>\n }\n <!-- Bottom floating tooltip -->\n @if (label === 'bottom-floating') {\n <div class=\"floating-tooltip floating-tooltip-bottom\">\n <div class=\"tooltip-arrow tooltip-arrow-up\">\n <svg width=\"16\" height=\"6\" viewBox=\"0 0 16 6\" fill=\"none\">\n <path d=\"M9.41421 1.58579L13.6569 5.82843C14.5858 6.75736 16 6 16 6H0C0 6 1.41421 6.75736 2.34315 5.82843L6.58579 1.58579C7.36684 0.804738 8.63316 0.804738 9.41421 1.58579Z\" fill=\"white\"/>\n </svg>\n </div>\n <div class=\"tooltip-content\">\n <span class=\"tooltip-text\">{{value}}%</span>\n </div>\n </div>\n }\n </div>\n </div>\n <!-- Right label -->\n @if (label === 'right') {\n <span class=\"bar-label\">{{value}}%</span>\n }\n <!-- Bottom label -->\n @if (label === 'bottom') {\n <span class=\"bar-label\">{{value}}%</span>\n }\n <!-- Text description (legacy support) -->\n @if (text && (label === 'none')) {\n <div class=\"progress-text\">{{text}}</div>\n }\n </div>\n }\n\n <!-- Circle progress -->\n @if (type == 'circle') {\n <div class=\"circle-wrapper\"\n [ngStyle]=\"{\n 'width.px': sizeConfig.containerSize,\n 'height.px': sizeConfig.containerSize\n }\">\n <svg class=\"circle-svg\"\n [attr.width]=\"sizeConfig.containerSize\"\n [attr.height]=\"sizeConfig.containerSize\"\n [attr.viewBox]=\"'0 0 ' + sizeConfig.containerSize + ' ' + sizeConfig.containerSize\">\n <!-- Background ring -->\n <circle class=\"circle-bg\"\n [attr.cx]=\"circleCenter\"\n [attr.cy]=\"circleCenter\"\n [attr.r]=\"sizeConfig.radius\"\n [attr.stroke-width]=\"sizeConfig.strokeWidth\"\n [style.stroke]=\"trackColor || null\"\n fill=\"none\" />\n <!-- Progress ring -->\n <circle class=\"circle-progress\"\n [attr.cx]=\"circleCenter\"\n [attr.cy]=\"circleCenter\"\n [attr.r]=\"sizeConfig.radius\"\n [attr.stroke-width]=\"sizeConfig.strokeWidth\"\n [attr.stroke-dasharray]=\"circumference\"\n [attr.stroke-dashoffset]=\"circleOffset\"\n [style.stroke]=\"color || null\"\n fill=\"none\"\n stroke-linecap=\"round\" />\n </svg>\n <div class=\"circle-label\">\n @if (text) {\n <span class=\"circle-label-text\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.labelFontSize\n }\">{{text}}</span>\n }\n <span class=\"circle-value\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.fontSize,\n 'letter-spacing.px': sizeConfig.letterSpacing\n }\">{{value}}%</span>\n </div>\n </div>\n }\n\n <!-- Half-Circle progress -->\n @if (type == 'half-circle') {\n <div class=\"half-circle-wrapper\"\n [ngStyle]=\"{\n 'width.px': sizeConfig.containerSize,\n 'height.px': halfCircleContainerHeight\n }\">\n <svg class=\"circle-svg\"\n [attr.width]=\"sizeConfig.containerSize\"\n [attr.height]=\"sizeConfig.containerSize\"\n [attr.viewBox]=\"'0 0 ' + sizeConfig.containerSize + ' ' + sizeConfig.containerSize\">\n <!-- Background arc (bottom half) -->\n <circle class=\"circle-bg half-circle-ring\"\n [attr.cx]=\"circleCenter\"\n [attr.cy]=\"circleCenter\"\n [attr.r]=\"sizeConfig.radius\"\n [attr.stroke-width]=\"sizeConfig.strokeWidth\"\n [attr.stroke-dasharray]=\"circumference\"\n [attr.stroke-dashoffset]=\"circumference / 2\"\n [style.stroke]=\"trackColor || null\"\n fill=\"none\" />\n <!-- Progress arc -->\n <circle class=\"circle-progress half-circle-ring\"\n [attr.cx]=\"circleCenter\"\n [attr.cy]=\"circleCenter\"\n [attr.r]=\"sizeConfig.radius\"\n [attr.stroke-width]=\"sizeConfig.strokeWidth\"\n [attr.stroke-dasharray]=\"halfCircumference + ' ' + circumference\"\n [attr.stroke-dashoffset]=\"halfCircleOffset\"\n [style.stroke]=\"color || null\"\n fill=\"none\"\n stroke-linecap=\"round\" />\n </svg>\n <div class=\"half-circle-label\">\n @if (text) {\n <span class=\"circle-label-text\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.labelFontSize\n }\">{{text}}</span>\n }\n <span class=\"circle-value\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.fontSize,\n 'letter-spacing.px': sizeConfig.letterSpacing\n }\">{{value}}%</span>\n </div>\n </div>\n }\n</div>\n", styles: [".component{font-family:Inter,sans-serif}.component .bar-wrapper{width:100%}.component .bar-wrapper .progress-bar{position:relative;width:100%;height:8px;border-radius:8px}.component .bar-wrapper .progress-bar .progress-bar-bg{position:absolute;top:0;left:0;right:0;height:8px;border-radius:4px;background-color:#f1f7fe}.component .bar-wrapper .progress-bar .progress-bar-fill{position:absolute;top:0;left:0;height:8px;border-radius:4px;background-color:#136ab6;transition:width .3s ease;min-width:0}.component .bar-wrapper .bar-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap}.component .bar-wrapper .progress-text{color:#667085;font-size:14px;font-weight:400;margin-top:8px}.component .bar-wrapper.bar-label-right{display:flex;align-items:center;gap:12px}.component .bar-wrapper.bar-label-right .progress-bar{flex:1 0 0;min-width:0}.component .bar-wrapper.bar-label-bottom{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.component .bar-wrapper.bar-label-top-floating .progress-bar{overflow:visible}.component .bar-wrapper.bar-label-top-floating .progress-bar-fill{overflow:visible;position:relative}.component .bar-wrapper.bar-label-top-floating .floating-tooltip{position:absolute;right:0;transform:translate(50%);display:flex;flex-direction:column;align-items:center}.component .bar-wrapper.bar-label-top-floating .floating-tooltip-top{bottom:calc(100% + 4px)}.component .bar-wrapper.bar-label-top-floating .tooltip-content{background:#fff;border-radius:8px;padding:8px 12px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814}.component .bar-wrapper.bar-label-top-floating .tooltip-text{font-size:12px;font-weight:500;line-height:18px;color:#344054;white-space:nowrap;text-align:center}.component .bar-wrapper.bar-label-top-floating .tooltip-arrow-down{display:flex;justify-content:center;line-height:0}.component .bar-wrapper.bar-label-top-floating .tooltip-arrow-up{display:none}.component .bar-wrapper.bar-label-bottom-floating .progress-bar{overflow:visible}.component .bar-wrapper.bar-label-bottom-floating .progress-bar-fill{overflow:visible;position:relative}.component .bar-wrapper.bar-label-bottom-floating .floating-tooltip{position:absolute;right:0;transform:translate(50%);display:flex;flex-direction:column;align-items:center}.component .bar-wrapper.bar-label-bottom-floating .floating-tooltip-bottom{top:calc(100% + 4px)}.component .bar-wrapper.bar-label-bottom-floating .tooltip-content{background:#fff;border-radius:8px;padding:8px 12px;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814}.component .bar-wrapper.bar-label-bottom-floating .tooltip-text{font-size:12px;font-weight:500;line-height:18px;color:#344054;white-space:nowrap;text-align:center}.component .bar-wrapper.bar-label-bottom-floating .tooltip-arrow-up{display:flex;justify-content:center;line-height:0}.component .bar-wrapper.bar-label-bottom-floating .tooltip-arrow-down{display:none}.component .circle-wrapper{position:relative;display:inline-block}.component .circle-wrapper .circle-svg{display:block;transform:rotate(-90deg)}.component .circle-wrapper .circle-bg{stroke:#f1f7fe}.component .circle-wrapper .circle-progress{stroke:#136ab6;transition:stroke-dashoffset .3s ease}.component .circle-wrapper .circle-label{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.component .circle-wrapper .circle-label .circle-label-text{font-weight:500;color:#667085;line-height:1.5;text-align:center}.component .circle-wrapper .circle-label .circle-value{font-weight:500;color:#101828;line-height:1.2;text-align:center}.component .half-circle-wrapper{position:relative;display:inline-block;overflow:hidden}.component .half-circle-wrapper .circle-svg{display:block;transform:rotate(180deg)}.component .half-circle-wrapper .circle-bg{stroke:#f1f7fe}.component .half-circle-wrapper .circle-progress{stroke:#136ab6;transition:stroke-dashoffset .3s ease}.component .half-circle-wrapper .half-circle-ring{stroke-linecap:round}.component .half-circle-wrapper .half-circle-label{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4px}.component .half-circle-wrapper .half-circle-label .circle-label-text{font-weight:500;color:#667085;line-height:1.5;text-align:center}.component .half-circle-wrapper .half-circle-label .circle-value{font-weight:500;color:#101828;line-height:1.2;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
7021
7314
|
}
|
|
7022
7315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduProgress, decorators: [{
|
|
7023
7316
|
type: Component,
|
|
@@ -7194,7 +7487,7 @@ class ZenduLocationSearch {
|
|
|
7194
7487
|
}
|
|
7195
7488
|
}
|
|
7196
7489
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduLocationSearch, deps: [{ token: GeocodingService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduLocationSearch, isStandalone: false, selector: "zen-location-search", inputs: { apiKey: "apiKey", address: "address", displaySearchIcon: "displaySearchIcon", materialStyle: "materialStyle", placeholder: "placeholder", disabled: "disabled", customStyles: "customStyles" }, outputs: { addressChange: "addressChange", onSelect: "onSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"component\">\n\n <div class=\"search-input-wrapper\"\n [class.boundaries]=\"!materialStyle\">\n @if (displaySearchIcon) {\n <zen-icon src=\"https://storage.googleapis.com/ng-zenduit/icon/search.svg\"\n class=\"search-icon\"\n [style]=\"{'background-color': customStyles.color}\"></zen-icon>\n }\n\n <input type=\"text\"\n class=\"material-input\"\n [style]=\"customStyles\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"address\"\n [ngClass]=\"{'no-icon': !displaySearchIcon}\"\n (ngModelChange)='addressChanged($event)'>\n </div>\n\n @if (address) {\n <div class=\"search-list\"\n [class.boundaries]=\"!materialStyle\"\n appClickOutside\n (clickOutside)=\"addressList = [];\">\n @if (addressList.length || isSearching) {\n <ul class=\"search-item-list\"\n >\n @if (isSearching) {\n <li>Searching</li>\n }\n @if (!isSearching) {\n <div>\n @for (address of addressList; track address) {\n <li\n (click)=\"selectAddress(address)\">\n {{address.name}}\n </li>\n }\n </div>\n }\n </ul>\n }\n </div>\n }\n</div>\n", styles: [".component,.component .search-input-wrapper{position:relative}.component .search-input-wrapper .search-icon{position:absolute;left:4px;background-color:var(--color-white-tint-6, #bebebe)}.component .search-input-wrapper .material-input{padding-left:38px}.component .search-input-wrapper .material-input.no-icon{padding-left:8px}.component .search-input-wrapper .material-input.no-icon::placeholder{font-size:14px}.component .search-input-wrapper.boundaries .material-input{border:1px solid var(--color-white-tint-4, #d6d6d8);padding-top:8px;border-radius:4px;height:40px;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.component .search-input-wrapper.boundaries .material-input:hover{border-color:#b8b9bc}.component .search-input-wrapper.boundaries .material-input:focus-within{box-shadow:0 0 2px 2px #2188d94d}.component .search-input-wrapper.boundaries .search-icon{top:8px;left:8px}.component .search-list{position:absolute;top:40px;left:16px;z-index:1;min-width:278px;max-width:420px;box-shadow:0 4px 10px #060c1b26;background:#fff}.component .search-list.boundaries{top:45px}.component .search-list ul.search-item-list{list-style-type:none;max-width:420px;max-height:30vh;overflow-y:scroll;overflow-x:inherit;margin:0;padding:5px 10px}.component .search-list ul.search-item-list li{background-color:#fff;padding:5px 10px;align-items:flex-start;color:#828282;cursor:pointer;width:100%;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px}.component .search-list ul.search-item-list li:hover{text-decoration:none;background-color:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
7490
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduLocationSearch, isStandalone: false, selector: "zen-location-search", inputs: { apiKey: "apiKey", address: "address", displaySearchIcon: "displaySearchIcon", materialStyle: "materialStyle", placeholder: "placeholder", disabled: "disabled", customStyles: "customStyles" }, outputs: { addressChange: "addressChange", onSelect: "onSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"component\">\n\n <div class=\"search-input-wrapper\"\n [class.boundaries]=\"!materialStyle\">\n @if (displaySearchIcon) {\n <zen-icon src=\"https://storage.googleapis.com/ng-zenduit/icon/search.svg\"\n class=\"search-icon\"\n [style]=\"{'background-color': customStyles.color}\"></zen-icon>\n }\n\n <input type=\"text\"\n class=\"material-input\"\n [style]=\"customStyles\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"address\"\n [ngClass]=\"{'no-icon': !displaySearchIcon}\"\n (ngModelChange)='addressChanged($event)'>\n </div>\n\n @if (address) {\n <div class=\"search-list\"\n [class.boundaries]=\"!materialStyle\"\n appClickOutside\n (clickOutside)=\"addressList = [];\">\n @if (addressList.length || isSearching) {\n <ul class=\"search-item-list\"\n >\n @if (isSearching) {\n <li>Searching</li>\n }\n @if (!isSearching) {\n <div>\n @for (address of addressList; track address) {\n <li\n (click)=\"selectAddress(address)\">\n {{address.name}}\n </li>\n }\n </div>\n }\n </ul>\n }\n </div>\n }\n</div>\n", styles: [".component,.component .search-input-wrapper{position:relative}.component .search-input-wrapper .search-icon{position:absolute;left:4px;background-color:var(--color-white-tint-6, #bebebe)}.component .search-input-wrapper .material-input{padding-left:38px}.component .search-input-wrapper .material-input.no-icon{padding-left:8px}.component .search-input-wrapper .material-input.no-icon::placeholder{font-size:14px}.component .search-input-wrapper.boundaries .material-input{border:1px solid var(--color-white-tint-4, #d6d6d8);padding-top:8px;border-radius:4px;height:40px;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.component .search-input-wrapper.boundaries .material-input:hover{border-color:#b8b9bc}.component .search-input-wrapper.boundaries .material-input:focus-within{box-shadow:0 0 2px 2px #2188d94d}.component .search-input-wrapper.boundaries .search-icon{top:8px;left:8px}.component .search-list{position:absolute;top:40px;left:16px;z-index:1;min-width:278px;max-width:420px;box-shadow:0 4px 10px #060c1b26;background:#fff}.component .search-list.boundaries{top:45px}.component .search-list ul.search-item-list{list-style-type:none;max-width:420px;max-height:30vh;overflow-y:scroll;overflow-x:inherit;margin:0;padding:5px 10px}.component .search-list ul.search-item-list li{background-color:#fff;padding:5px 10px;align-items:flex-start;color:#828282;cursor:pointer;width:100%;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px}.component .search-list ul.search-item-list li:hover{text-decoration:none;background-color:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
7198
7491
|
}
|
|
7199
7492
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduLocationSearch, decorators: [{
|
|
7200
7493
|
type: Component,
|
|
@@ -7749,7 +8042,7 @@ class ZenSnapshotPlayerComponent {
|
|
|
7749
8042
|
clearTimeout(this._timer);
|
|
7750
8043
|
}
|
|
7751
8044
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSnapshotPlayerComponent, deps: [{ token: ZenHttpService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7752
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenSnapshotPlayerComponent, isStandalone: false, selector: "zen-snapshot-player", inputs: { source: "source", channel: "channel", control: "control", interval: "interval" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"snapshot-player-component\">\n <div class=\"image\"\n [ngStyle]=\"{ 'background-image': snapshot }\"></div>\n\n</div>\n", styles: [".snapshot-player-component{width:100%;height:100%;position:relative}.snapshot-player-component .image{width:100%;height:100%;background-color:#000;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:4px}.snapshot-player-component .video-settings{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.snapshot-player-component>.video-filter{position:absolute;right:20px;top:50px;z-index:1000;display:none}.snapshot-player-component>.video-filter.active{display:block}.snapshot-player-component .full-screen{position:absolute;bottom:20px;right:20px;width:16px;height:16px;cursor:pointer;top:auto;background:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8045
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenSnapshotPlayerComponent, isStandalone: false, selector: "zen-snapshot-player", inputs: { source: "source", channel: "channel", control: "control", interval: "interval" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"snapshot-player-component\">\n <div class=\"image\"\n [ngStyle]=\"{ 'background-image': snapshot }\"></div>\n\n</div>\n", styles: [".snapshot-player-component{width:100%;height:100%;position:relative}.snapshot-player-component .image{width:100%;height:100%;background-color:#000;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:4px}.snapshot-player-component .video-settings{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.snapshot-player-component>.video-filter{position:absolute;right:20px;top:50px;z-index:1000;display:none}.snapshot-player-component>.video-filter.active{display:block}.snapshot-player-component .full-screen{position:absolute;bottom:20px;right:20px;width:16px;height:16px;cursor:pointer;top:auto;background:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
7753
8046
|
}
|
|
7754
8047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSnapshotPlayerComponent, decorators: [{
|
|
7755
8048
|
type: Component,
|
|
@@ -8669,7 +8962,7 @@ class ZenduAvatarComponent {
|
|
|
8669
8962
|
};
|
|
8670
8963
|
}
|
|
8671
8964
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8672
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduAvatarComponent, isStandalone: false, selector: "zendu-avatar", inputs: { size: "size", src: "src", text: "text", statusIcon: "statusIcon", companyImgSrc: "companyImgSrc", focused: "focused" }, ngImport: i0, template: "<div class=\"zendu-avatar\" [ngClass]=\"cssClasses\">\n <!-- Image avatar -->\n @if (showImage) {\n <img [src]=\"src\" class=\"zendu-avatar__img\" alt=\"\" />\n }\n\n <!-- Text initials -->\n @if (showText) {\n <span class=\"zendu-avatar__text\">{{ text }}</span>\n }\n\n <!-- Placeholder user icon -->\n @if (showPlaceholder) {\n <div class=\"zendu-avatar__placeholder\">\n <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.6666 17.5C16.6666 16.337 16.6666 15.7555 16.4942 15.2824C16.1544 14.3491 15.4008 13.5955 14.4675 13.2558C13.9944 13.0833 13.4129 13.0833 12.2499 13.0833H7.74992C6.58694 13.0833 6.00545 13.0833 5.53237 13.2558C4.59907 13.5955 3.84542 14.3491 3.50567 15.2824C3.33325 15.7555 3.33325 16.337 3.33325 17.5M13.7499 6.25C13.7499 8.32107 12.0710 10 9.99992 10C7.92885 10 6.24992 8.32107 6.24992 6.25C6.24992 4.17893 7.92885 2.5 9.99992 2.5C12.0710 2.5 13.7499 4.17893 13.7499 6.25Z\" stroke=\"currentColor\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n <!-- Online indicator -->\n @if (statusIcon === 'online') {\n <div class=\"zendu-avatar__online-dot\"></div>\n }\n\n <!-- Company icon -->\n @if (statusIcon === 'company') {\n <div class=\"zendu-avatar__company-icon\">\n @if (companyImgSrc) {\n <img [src]=\"companyImgSrc\" alt=\"\" />\n }\n </div>\n }\n</div>\n", styles: [".zendu-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:#f9fafb;overflow:visible;box-sizing:border-box}.zendu-avatar--focused{border:4px solid #F2F4F7}.zendu-avatar__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none}.zendu-avatar__text{font-family:Inter,sans-serif;font-weight:500;color:#475467;text-align:center;white-space:nowrap}.zendu-avatar__placeholder{display:flex;align-items:center;justify-content:center;color:#475467}.zendu-avatar__placeholder svg{width:100%;height:100%}.zendu-avatar__online-dot{position:absolute;bottom:0;right:0;background-color:#12b76a;border:1.5px solid #FFFFFF;border-radius:50%;box-sizing:border-box}.zendu-avatar__company-icon{position:absolute;bottom:0;right:0;border:1.5px solid #FFFFFF;border-radius:25%;overflow:hidden;box-sizing:border-box}.zendu-avatar__company-icon img{width:100%;height:100%;object-fit:cover;display:block}.zendu-avatar--xs{width:24px;height:24px}.zendu-avatar--xs .zendu-avatar__text{font-size:12px;line-height:18px}.zendu-avatar--xs .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--xs .zendu-avatar__online-dot{width:6px;height:6px}.zendu-avatar--xs .zendu-avatar__company-icon{width:10px;height:10px}.zendu-avatar--sm{width:32px;height:32px}.zendu-avatar--sm .zendu-avatar__text{font-size:14px;line-height:20px}.zendu-avatar--sm .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--sm .zendu-avatar__online-dot{width:8px;height:8px}.zendu-avatar--sm .zendu-avatar__company-icon{width:12px;height:12px}.zendu-avatar--md{width:40px;height:40px}.zendu-avatar--md .zendu-avatar__text{font-size:16px;line-height:24px}.zendu-avatar--md .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--md .zendu-avatar__online-dot{width:10px;height:10px}.zendu-avatar--md .zendu-avatar__company-icon{width:14px;height:14px}.zendu-avatar--lg{width:48px;height:48px}.zendu-avatar--lg .zendu-avatar__text{font-size:18px;line-height:28px}.zendu-avatar--lg .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--lg .zendu-avatar__online-dot{width:12px;height:12px}.zendu-avatar--lg .zendu-avatar__company-icon{width:16px;height:16px}.zendu-avatar--xl{width:56px;height:56px}.zendu-avatar--xl .zendu-avatar__text{font-size:20px;line-height:30px}.zendu-avatar--xl .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--xl .zendu-avatar__online-dot{width:14px;height:14px}.zendu-avatar--xl .zendu-avatar__company-icon{width:18px;height:18px}.zendu-avatar--2xl{width:64px;height:64px}.zendu-avatar--2xl .zendu-avatar__text{font-size:24px;line-height:32px}.zendu-avatar--2xl .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--2xl .zendu-avatar__online-dot{width:16px;height:16px}.zendu-avatar--2xl .zendu-avatar__company-icon{width:20px;height:20px;border-width:1.667px;border-radius:30%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8965
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduAvatarComponent, isStandalone: false, selector: "zendu-avatar", inputs: { size: "size", src: "src", text: "text", statusIcon: "statusIcon", companyImgSrc: "companyImgSrc", focused: "focused" }, ngImport: i0, template: "<div class=\"zendu-avatar\" [ngClass]=\"cssClasses\">\n <!-- Image avatar -->\n @if (showImage) {\n <img [src]=\"src\" class=\"zendu-avatar__img\" alt=\"\" />\n }\n\n <!-- Text initials -->\n @if (showText) {\n <span class=\"zendu-avatar__text\">{{ text }}</span>\n }\n\n <!-- Placeholder user icon -->\n @if (showPlaceholder) {\n <div class=\"zendu-avatar__placeholder\">\n <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.6666 17.5C16.6666 16.337 16.6666 15.7555 16.4942 15.2824C16.1544 14.3491 15.4008 13.5955 14.4675 13.2558C13.9944 13.0833 13.4129 13.0833 12.2499 13.0833H7.74992C6.58694 13.0833 6.00545 13.0833 5.53237 13.2558C4.59907 13.5955 3.84542 14.3491 3.50567 15.2824C3.33325 15.7555 3.33325 16.337 3.33325 17.5M13.7499 6.25C13.7499 8.32107 12.0710 10 9.99992 10C7.92885 10 6.24992 8.32107 6.24992 6.25C6.24992 4.17893 7.92885 2.5 9.99992 2.5C12.0710 2.5 13.7499 4.17893 13.7499 6.25Z\" stroke=\"currentColor\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n <!-- Online indicator -->\n @if (statusIcon === 'online') {\n <div class=\"zendu-avatar__online-dot\"></div>\n }\n\n <!-- Company icon -->\n @if (statusIcon === 'company') {\n <div class=\"zendu-avatar__company-icon\">\n @if (companyImgSrc) {\n <img [src]=\"companyImgSrc\" alt=\"\" />\n }\n </div>\n }\n</div>\n", styles: [".zendu-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:#f9fafb;overflow:visible;box-sizing:border-box}.zendu-avatar--focused{border:4px solid #F2F4F7}.zendu-avatar__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none}.zendu-avatar__text{font-family:Inter,sans-serif;font-weight:500;color:#475467;text-align:center;white-space:nowrap}.zendu-avatar__placeholder{display:flex;align-items:center;justify-content:center;color:#475467}.zendu-avatar__placeholder svg{width:100%;height:100%}.zendu-avatar__online-dot{position:absolute;bottom:0;right:0;background-color:#12b76a;border:1.5px solid #FFFFFF;border-radius:50%;box-sizing:border-box}.zendu-avatar__company-icon{position:absolute;bottom:0;right:0;border:1.5px solid #FFFFFF;border-radius:25%;overflow:hidden;box-sizing:border-box}.zendu-avatar__company-icon img{width:100%;height:100%;object-fit:cover;display:block}.zendu-avatar--xs{width:24px;height:24px}.zendu-avatar--xs .zendu-avatar__text{font-size:12px;line-height:18px}.zendu-avatar--xs .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--xs .zendu-avatar__online-dot{width:6px;height:6px}.zendu-avatar--xs .zendu-avatar__company-icon{width:10px;height:10px}.zendu-avatar--sm{width:32px;height:32px}.zendu-avatar--sm .zendu-avatar__text{font-size:14px;line-height:20px}.zendu-avatar--sm .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--sm .zendu-avatar__online-dot{width:8px;height:8px}.zendu-avatar--sm .zendu-avatar__company-icon{width:12px;height:12px}.zendu-avatar--md{width:40px;height:40px}.zendu-avatar--md .zendu-avatar__text{font-size:16px;line-height:24px}.zendu-avatar--md .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--md .zendu-avatar__online-dot{width:10px;height:10px}.zendu-avatar--md .zendu-avatar__company-icon{width:14px;height:14px}.zendu-avatar--lg{width:48px;height:48px}.zendu-avatar--lg .zendu-avatar__text{font-size:18px;line-height:28px}.zendu-avatar--lg .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--lg .zendu-avatar__online-dot{width:12px;height:12px}.zendu-avatar--lg .zendu-avatar__company-icon{width:16px;height:16px}.zendu-avatar--xl{width:56px;height:56px}.zendu-avatar--xl .zendu-avatar__text{font-size:20px;line-height:30px}.zendu-avatar--xl .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--xl .zendu-avatar__online-dot{width:14px;height:14px}.zendu-avatar--xl .zendu-avatar__company-icon{width:18px;height:18px}.zendu-avatar--2xl{width:64px;height:64px}.zendu-avatar--2xl .zendu-avatar__text{font-size:24px;line-height:32px}.zendu-avatar--2xl .zendu-avatar__placeholder{width:57.14%;height:57.14%}.zendu-avatar--2xl .zendu-avatar__online-dot{width:16px;height:16px}.zendu-avatar--2xl .zendu-avatar__company-icon{width:20px;height:20px;border-width:1.667px;border-radius:30%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8673
8966
|
}
|
|
8674
8967
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarComponent, decorators: [{
|
|
8675
8968
|
type: Component,
|
|
@@ -8696,7 +8989,7 @@ class ZenduAvatarGroupComponent {
|
|
|
8696
8989
|
this.showAddButton = false;
|
|
8697
8990
|
}
|
|
8698
8991
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8699
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduAvatarGroupComponent, isStandalone: false, selector: "zendu-avatar-group", inputs: { size: "size", images: "images", moreCount: "moreCount", showAddButton: "showAddButton" }, ngImport: i0, template: "<div class=\"zendu-avatar-group\" [ngClass]=\"'zendu-avatar-group--' + size\">\n <div class=\"zendu-avatar-group__avatars\">\n @for (img of images; track img) {\n <div class=\"zendu-avatar-group__wrap\">\n <div class=\"zendu-avatar-group__avatar\">\n <img [src]=\"img\" alt=\"\" />\n </div>\n </div>\n }\n\n @if (moreCount > 0) {\n <div class=\"zendu-avatar-group__more\">\n <span>+{{ moreCount }}</span>\n </div>\n }\n </div>\n\n @if (showAddButton) {\n <div class=\"zendu-avatar-group__add-btn\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.333v9.334M3.333 8h9.334\" stroke=\"currentColor\" stroke-width=\"1.33\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n</div>\n", styles: [".zendu-avatar-group{display:inline-flex;align-items:flex-start}.zendu-avatar-group__avatars{display:flex;align-items:flex-start}.zendu-avatar-group__wrap{flex-shrink:0}.zendu-avatar-group__avatar{position:absolute;left:0;top:0;border:1.5px solid #FFFFFF;border-radius:50%;overflow:hidden;box-sizing:border-box}.zendu-avatar-group__avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}.zendu-avatar-group__more{background-color:#f9fafb;border:2px solid #FFFFFF;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}.zendu-avatar-group__more span{font-family:Inter,sans-serif;font-weight:500;color:#475467;text-align:center}.zendu-avatar-group__add-btn{background-color:#fff;border:1px dashed #D0D5DD;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:#98a2b3;cursor:pointer}.zendu-avatar-group__add-btn svg{width:16px;height:16px}.zendu-avatar-group--xs{gap:12px}.zendu-avatar-group--xs .zendu-avatar-group__wrap{position:relative;width:20px;height:24px}.zendu-avatar-group--xs .zendu-avatar-group__avatar,.zendu-avatar-group--xs .zendu-avatar-group__more{width:24px;height:24px}.zendu-avatar-group--xs .zendu-avatar-group__more span{font-size:12px;line-height:18px}.zendu-avatar-group--xs .zendu-avatar-group__add-btn{width:24px;height:24px;border-radius:12px}.zendu-avatar-group--sm{gap:16px}.zendu-avatar-group--sm .zendu-avatar-group__wrap{position:relative;width:24px;height:32px}.zendu-avatar-group--sm .zendu-avatar-group__avatar,.zendu-avatar-group--sm .zendu-avatar-group__more{width:32px;height:32px}.zendu-avatar-group--sm .zendu-avatar-group__more span{font-size:14px;line-height:20px}.zendu-avatar-group--sm .zendu-avatar-group__add-btn{width:32px;height:32px;border-radius:16px}.zendu-avatar-group--md{gap:20px}.zendu-avatar-group--md .zendu-avatar-group__wrap{position:relative;width:28px;height:40px}.zendu-avatar-group--md .zendu-avatar-group__avatar,.zendu-avatar-group--md .zendu-avatar-group__more{width:40px;height:40px}.zendu-avatar-group--md .zendu-avatar-group__more span{font-size:16px;line-height:24px}.zendu-avatar-group--md .zendu-avatar-group__add-btn{width:40px;height:40px;border-radius:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8992
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduAvatarGroupComponent, isStandalone: false, selector: "zendu-avatar-group", inputs: { size: "size", images: "images", moreCount: "moreCount", showAddButton: "showAddButton" }, ngImport: i0, template: "<div class=\"zendu-avatar-group\" [ngClass]=\"'zendu-avatar-group--' + size\">\n <div class=\"zendu-avatar-group__avatars\">\n @for (img of images; track img) {\n <div class=\"zendu-avatar-group__wrap\">\n <div class=\"zendu-avatar-group__avatar\">\n <img [src]=\"img\" alt=\"\" />\n </div>\n </div>\n }\n\n @if (moreCount > 0) {\n <div class=\"zendu-avatar-group__more\">\n <span>+{{ moreCount }}</span>\n </div>\n }\n </div>\n\n @if (showAddButton) {\n <div class=\"zendu-avatar-group__add-btn\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 3.333v9.334M3.333 8h9.334\" stroke=\"currentColor\" stroke-width=\"1.33\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n</div>\n", styles: [".zendu-avatar-group{display:inline-flex;align-items:flex-start}.zendu-avatar-group__avatars{display:flex;align-items:flex-start}.zendu-avatar-group__wrap{flex-shrink:0}.zendu-avatar-group__avatar{position:absolute;left:0;top:0;border:1.5px solid #FFFFFF;border-radius:50%;overflow:hidden;box-sizing:border-box}.zendu-avatar-group__avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}.zendu-avatar-group__more{background-color:#f9fafb;border:2px solid #FFFFFF;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}.zendu-avatar-group__more span{font-family:Inter,sans-serif;font-weight:500;color:#475467;text-align:center}.zendu-avatar-group__add-btn{background-color:#fff;border:1px dashed #D0D5DD;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:#98a2b3;cursor:pointer}.zendu-avatar-group__add-btn svg{width:16px;height:16px}.zendu-avatar-group--xs{gap:12px}.zendu-avatar-group--xs .zendu-avatar-group__wrap{position:relative;width:20px;height:24px}.zendu-avatar-group--xs .zendu-avatar-group__avatar,.zendu-avatar-group--xs .zendu-avatar-group__more{width:24px;height:24px}.zendu-avatar-group--xs .zendu-avatar-group__more span{font-size:12px;line-height:18px}.zendu-avatar-group--xs .zendu-avatar-group__add-btn{width:24px;height:24px;border-radius:12px}.zendu-avatar-group--sm{gap:16px}.zendu-avatar-group--sm .zendu-avatar-group__wrap{position:relative;width:24px;height:32px}.zendu-avatar-group--sm .zendu-avatar-group__avatar,.zendu-avatar-group--sm .zendu-avatar-group__more{width:32px;height:32px}.zendu-avatar-group--sm .zendu-avatar-group__more span{font-size:14px;line-height:20px}.zendu-avatar-group--sm .zendu-avatar-group__add-btn{width:32px;height:32px;border-radius:16px}.zendu-avatar-group--md{gap:20px}.zendu-avatar-group--md .zendu-avatar-group__wrap{position:relative;width:28px;height:40px}.zendu-avatar-group--md .zendu-avatar-group__avatar,.zendu-avatar-group--md .zendu-avatar-group__more{width:40px;height:40px}.zendu-avatar-group--md .zendu-avatar-group__more span{font-size:16px;line-height:24px}.zendu-avatar-group--md .zendu-avatar-group__add-btn{width:40px;height:40px;border-radius:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8700
8993
|
}
|
|
8701
8994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarGroupComponent, decorators: [{
|
|
8702
8995
|
type: Component,
|
|
@@ -8721,7 +9014,7 @@ class ZenduAvatarLabelGroupComponent {
|
|
|
8721
9014
|
return this.size;
|
|
8722
9015
|
}
|
|
8723
9016
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarLabelGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8724
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduAvatarLabelGroupComponent, isStandalone: false, selector: "zendu-avatar-label-group", inputs: { size: "size", src: "src", text: "text", name: "name", subtitle: "subtitle", statusIcon: "statusIcon", companyImgSrc: "companyImgSrc", focused: "focused" }, ngImport: i0, template: "<div class=\"zendu-avatar-label-group\" [ngClass]=\"'zendu-avatar-label-group--' + size\">\n <zendu-avatar\n [size]=\"avatarSize\"\n [src]=\"src\"\n [text]=\"text\"\n [statusIcon]=\"statusIcon\"\n [companyImgSrc]=\"companyImgSrc\"\n [focused]=\"focused\">\n </zendu-avatar>\n\n <div class=\"zendu-avatar-label-group__text\">\n <span class=\"zendu-avatar-label-group__name\">{{ name }}</span>\n @if (subtitle) {\n <span class=\"zendu-avatar-label-group__subtitle\">{{ subtitle }}</span>\n }\n </div>\n</div>\n", styles: [".zendu-avatar-label-group{display:inline-flex;align-items:center}.zendu-avatar-label-group__text{display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap}.zendu-avatar-label-group__name{font-family:Inter,sans-serif;font-weight:500;color:#344054}.zendu-avatar-label-group__subtitle{font-family:Inter,sans-serif;font-weight:400;color:#667085}.zendu-avatar-label-group--sm{gap:10px}.zendu-avatar-label-group--sm .zendu-avatar-label-group__name{font-size:14px;line-height:20px}.zendu-avatar-label-group--sm .zendu-avatar-label-group__subtitle{font-size:12px;line-height:18px}.zendu-avatar-label-group--md{gap:12px}.zendu-avatar-label-group--md .zendu-avatar-label-group__name,.zendu-avatar-label-group--md .zendu-avatar-label-group__subtitle{font-size:14px;line-height:20px}.zendu-avatar-label-group--lg{gap:12px}.zendu-avatar-label-group--lg .zendu-avatar-label-group__name,.zendu-avatar-label-group--lg .zendu-avatar-label-group__subtitle{font-size:16px;line-height:24px}.zendu-avatar-label-group--xl{gap:16px}.zendu-avatar-label-group--xl .zendu-avatar-label-group__name{font-size:18px;line-height:28px}.zendu-avatar-label-group--xl .zendu-avatar-label-group__subtitle{font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZenduAvatarComponent, selector: "zendu-avatar", inputs: ["size", "src", "text", "statusIcon", "companyImgSrc", "focused"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
9017
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduAvatarLabelGroupComponent, isStandalone: false, selector: "zendu-avatar-label-group", inputs: { size: "size", src: "src", text: "text", name: "name", subtitle: "subtitle", statusIcon: "statusIcon", companyImgSrc: "companyImgSrc", focused: "focused" }, ngImport: i0, template: "<div class=\"zendu-avatar-label-group\" [ngClass]=\"'zendu-avatar-label-group--' + size\">\n <zendu-avatar\n [size]=\"avatarSize\"\n [src]=\"src\"\n [text]=\"text\"\n [statusIcon]=\"statusIcon\"\n [companyImgSrc]=\"companyImgSrc\"\n [focused]=\"focused\">\n </zendu-avatar>\n\n <div class=\"zendu-avatar-label-group__text\">\n <span class=\"zendu-avatar-label-group__name\">{{ name }}</span>\n @if (subtitle) {\n <span class=\"zendu-avatar-label-group__subtitle\">{{ subtitle }}</span>\n }\n </div>\n</div>\n", styles: [".zendu-avatar-label-group{display:inline-flex;align-items:center}.zendu-avatar-label-group__text{display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap}.zendu-avatar-label-group__name{font-family:Inter,sans-serif;font-weight:500;color:#344054}.zendu-avatar-label-group__subtitle{font-family:Inter,sans-serif;font-weight:400;color:#667085}.zendu-avatar-label-group--sm{gap:10px}.zendu-avatar-label-group--sm .zendu-avatar-label-group__name{font-size:14px;line-height:20px}.zendu-avatar-label-group--sm .zendu-avatar-label-group__subtitle{font-size:12px;line-height:18px}.zendu-avatar-label-group--md{gap:12px}.zendu-avatar-label-group--md .zendu-avatar-label-group__name,.zendu-avatar-label-group--md .zendu-avatar-label-group__subtitle{font-size:14px;line-height:20px}.zendu-avatar-label-group--lg{gap:12px}.zendu-avatar-label-group--lg .zendu-avatar-label-group__name,.zendu-avatar-label-group--lg .zendu-avatar-label-group__subtitle{font-size:16px;line-height:24px}.zendu-avatar-label-group--xl{gap:16px}.zendu-avatar-label-group--xl .zendu-avatar-label-group__name{font-size:18px;line-height:28px}.zendu-avatar-label-group--xl .zendu-avatar-label-group__subtitle{font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZenduAvatarComponent, selector: "zendu-avatar", inputs: ["size", "src", "text", "statusIcon", "companyImgSrc", "focused"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8725
9018
|
}
|
|
8726
9019
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarLabelGroupComponent, decorators: [{
|
|
8727
9020
|
type: Component,
|
|
@@ -8758,7 +9051,7 @@ class ZenduAvatarProfilePhotoComponent {
|
|
|
8758
9051
|
return !this.src && !this.text;
|
|
8759
9052
|
}
|
|
8760
9053
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarProfilePhotoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8761
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduAvatarProfilePhotoComponent, isStandalone: false, selector: "zendu-avatar-profile-photo", inputs: { size: "size", src: "src", text: "text" }, ngImport: i0, template: "<div class=\"zendu-avatar-profile-photo\" [ngClass]=\"'zendu-avatar-profile-photo--' + size\">\n <!-- Image -->\n @if (showImage) {\n <img [src]=\"src\" class=\"zendu-avatar-profile-photo__img\" alt=\"\" />\n }\n\n <!-- Placeholder icon -->\n @if (showPlaceholder) {\n <div class=\"zendu-avatar-profile-photo__placeholder\">\n <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.6666 17.5C16.6666 16.337 16.6666 15.7555 16.4942 15.2824C16.1544 14.3491 15.4008 13.5955 14.4675 13.2558C13.9944 13.0833 13.4129 13.0833 12.2499 13.0833H7.74992C6.58694 13.0833 6.00545 13.0833 5.53237 13.2558C4.59907 13.5955 3.84542 14.3491 3.50567 15.2824C3.33325 15.7555 3.33325 16.337 3.33325 17.5M13.7499 6.25C13.7499 8.32107 12.0710 10 9.99992 10C7.92885 10 6.24992 8.32107 6.24992 6.25C6.24992 4.17893 7.92885 2.5 9.99992 2.5C12.0710 2.5 13.7499 4.17893 13.7499 6.25Z\" stroke=\"currentColor\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n <!-- Text initials -->\n @if (showText) {\n <span class=\"zendu-avatar-profile-photo__text\">{{ text }}</span>\n }\n</div>\n", styles: [".zendu-avatar-profile-photo{position:relative;border:4px solid #FFFFFF;border-radius:50%;overflow:hidden;box-sizing:border-box;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:inline-flex;align-items:center;justify-content:center}.zendu-avatar-profile-photo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none}.zendu-avatar-profile-photo__placeholder{display:flex;align-items:center;justify-content:center;color:#475467}.zendu-avatar-profile-photo__text{font-family:Inter,sans-serif;font-weight:500;color:#475467;text-align:center}.zendu-avatar-profile-photo--md{width:96px;height:96px;background-color:#f9fafb}.zendu-avatar-profile-photo--md .zendu-avatar-profile-photo__placeholder{width:48px;height:48px}.zendu-avatar-profile-photo--md .zendu-avatar-profile-photo__placeholder svg{width:100%;height:100%}.zendu-avatar-profile-photo--md .zendu-avatar-profile-photo__text{font-size:36px;line-height:44px;letter-spacing:-.72px}.zendu-avatar-profile-photo--lg{width:160px;height:160px;background-color:#f9fafb}.zendu-avatar-profile-photo--lg .zendu-avatar-profile-photo__placeholder{width:80px;height:80px}.zendu-avatar-profile-photo--lg .zendu-avatar-profile-photo__placeholder svg{width:100%;height:100%}.zendu-avatar-profile-photo--lg .zendu-avatar-profile-photo__text{font-size:60px;line-height:72px;letter-spacing:-1.2px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
9054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduAvatarProfilePhotoComponent, isStandalone: false, selector: "zendu-avatar-profile-photo", inputs: { size: "size", src: "src", text: "text" }, ngImport: i0, template: "<div class=\"zendu-avatar-profile-photo\" [ngClass]=\"'zendu-avatar-profile-photo--' + size\">\n <!-- Image -->\n @if (showImage) {\n <img [src]=\"src\" class=\"zendu-avatar-profile-photo__img\" alt=\"\" />\n }\n\n <!-- Placeholder icon -->\n @if (showPlaceholder) {\n <div class=\"zendu-avatar-profile-photo__placeholder\">\n <svg viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16.6666 17.5C16.6666 16.337 16.6666 15.7555 16.4942 15.2824C16.1544 14.3491 15.4008 13.5955 14.4675 13.2558C13.9944 13.0833 13.4129 13.0833 12.2499 13.0833H7.74992C6.58694 13.0833 6.00545 13.0833 5.53237 13.2558C4.59907 13.5955 3.84542 14.3491 3.50567 15.2824C3.33325 15.7555 3.33325 16.337 3.33325 17.5M13.7499 6.25C13.7499 8.32107 12.0710 10 9.99992 10C7.92885 10 6.24992 8.32107 6.24992 6.25C6.24992 4.17893 7.92885 2.5 9.99992 2.5C12.0710 2.5 13.7499 4.17893 13.7499 6.25Z\" stroke=\"currentColor\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n\n <!-- Text initials -->\n @if (showText) {\n <span class=\"zendu-avatar-profile-photo__text\">{{ text }}</span>\n }\n</div>\n", styles: [".zendu-avatar-profile-photo{position:relative;border:4px solid #FFFFFF;border-radius:50%;overflow:hidden;box-sizing:border-box;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:inline-flex;align-items:center;justify-content:center}.zendu-avatar-profile-photo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none}.zendu-avatar-profile-photo__placeholder{display:flex;align-items:center;justify-content:center;color:#475467}.zendu-avatar-profile-photo__text{font-family:Inter,sans-serif;font-weight:500;color:#475467;text-align:center}.zendu-avatar-profile-photo--md{width:96px;height:96px;background-color:#f9fafb}.zendu-avatar-profile-photo--md .zendu-avatar-profile-photo__placeholder{width:48px;height:48px}.zendu-avatar-profile-photo--md .zendu-avatar-profile-photo__placeholder svg{width:100%;height:100%}.zendu-avatar-profile-photo--md .zendu-avatar-profile-photo__text{font-size:36px;line-height:44px;letter-spacing:-.72px}.zendu-avatar-profile-photo--lg{width:160px;height:160px;background-color:#f9fafb}.zendu-avatar-profile-photo--lg .zendu-avatar-profile-photo__placeholder{width:80px;height:80px}.zendu-avatar-profile-photo--lg .zendu-avatar-profile-photo__placeholder svg{width:100%;height:100%}.zendu-avatar-profile-photo--lg .zendu-avatar-profile-photo__text{font-size:60px;line-height:72px;letter-spacing:-1.2px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8762
9055
|
}
|
|
8763
9056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarProfilePhotoComponent, decorators: [{
|
|
8764
9057
|
type: Component,
|
|
@@ -8997,7 +9290,7 @@ class ZenBadgeComponent {
|
|
|
8997
9290
|
this.remove.emit();
|
|
8998
9291
|
}
|
|
8999
9292
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9000
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenBadgeComponent, isStandalone: false, selector: "zen-badge", inputs: { size: "size", color: "color", dot: "dot", removable: "removable", iconOnly: "iconOnly", icon: "icon", iconSrc: "iconSrc", iconDirection: "iconDirection", imgSrc: "imgSrc", group: "group", badgeLabel: "badgeLabel", badgePosition: "badgePosition", theme: "theme", showIcon: "showIcon" }, outputs: { remove: "remove", clicked: "clicked" }, ngImport: i0, template: "<!-- Badge Group mode -->\n@if (group) {\n <div [class]=\"groupClasses\" (click)=\"onClick($event)\">\n <!-- Leading: inner badge first -->\n @if (badgePosition === 'leading') {\n <span class=\"zen-badge-group__badge\">{{ badgeLabel }}</span>\n <span class=\"zen-badge-group__content\">\n <span class=\"zen-badge-group__message\"><ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container></span>\n @if (showIcon) {\n <zen-icon class=\"zen-badge-group__icon\" name=\"arrow-right\"></zen-icon>\n }\n </span>\n }\n <!-- Trailing: message first, badge with optional icon last -->\n @if (badgePosition === 'trailing') {\n <span class=\"zen-badge-group__message\"><ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container></span>\n <span class=\"zen-badge-group__badge\">\n {{ badgeLabel }}\n @if (showIcon) {\n <zen-icon class=\"zen-badge-group__badge-icon\" name=\"arrow-right\"></zen-icon>\n }\n </span>\n }\n </div>\n} @else {\n <div [class]=\"hostClasses\" (click)=\"onClick($event)\">\n @if (dot) {\n <span class=\"zen-badge__dot\"></span>\n }\n @if (imgSrc) {\n <img class=\"zen-badge__img\" [src]=\"imgSrc\" alt=\"\">\n }\n @if (hasIcon && !iconOnly && iconDirection === 'left') {\n <zen-icon class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n }\n @if (!iconOnly) {\n <span class=\"zen-badge__text\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </span>\n }\n @if (iconOnly && hasIcon) {\n <zen-icon class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n }\n @if (hasIcon && !iconOnly && iconDirection === 'right') {\n <zen-icon class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n }\n @if (removable) {\n <button class=\"zen-badge__close\" (click)=\"onRemove($event)\" type=\"button\" aria-label=\"Remove\">\n <zen-icon class=\"zen-badge__icon\" name=\"x\"></zen-icon>\n </button>\n }\n </div>\n}\n\n<!-- Standard badge mode -->\n\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n", styles: [".zen-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;font-family:Inter,sans-serif;font-weight:500;white-space:nowrap;mix-blend-mode:multiply;gap:4px;cursor:pointer}.zen-badge__icon{display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor}.zen-badge--sm{padding:2px 8px;font-size:12px;line-height:18px}.zen-badge--sm.zen-badge--dot,.zen-badge--sm.zen-badge--icon-left{padding-left:6px}.zen-badge--sm.zen-badge--icon-right,.zen-badge--sm.zen-badge--removable{padding-right:6px}.zen-badge--sm.zen-badge--icon-only{padding:4px}.zen-badge--sm.zen-badge--has-img{padding-left:3px;gap:6px}.zen-badge--sm .zen-badge__dot{width:6px;height:6px}.zen-badge--sm .zen-badge__close svg{width:10px;height:10px}.zen-badge--sm .zen-badge__img{width:16px;height:16px}.zen-badge--md{padding:2px 10px;font-size:14px;line-height:20px}.zen-badge--md.zen-badge--dot,.zen-badge--md.zen-badge--icon-left{padding-left:8px}.zen-badge--md.zen-badge--icon-right,.zen-badge--md.zen-badge--removable{padding-right:8px}.zen-badge--md.zen-badge--icon-only{padding:6px}.zen-badge--md.zen-badge--has-img{padding-left:4px;gap:6px}.zen-badge--md .zen-badge__dot{width:8px;height:8px}.zen-badge--md .zen-badge__img{width:18px;height:18px}.zen-badge--lg{padding:4px 12px;font-size:14px;line-height:20px}.zen-badge--lg.zen-badge--dot,.zen-badge--lg.zen-badge--icon-left{padding-left:10px}.zen-badge--lg.zen-badge--icon-right,.zen-badge--lg.zen-badge--removable{padding-right:10px}.zen-badge--lg.zen-badge--icon-only{padding:8px}.zen-badge--lg.zen-badge--has-img{padding-left:5px;gap:6px}.zen-badge--lg .zen-badge__dot{width:8px;height:8px}.zen-badge--lg .zen-badge__img{width:20px;height:20px}.zen-badge__dot{display:inline-block;border-radius:50%;flex-shrink:0}.zen-badge__img{flex-shrink:0;border-radius:50%;object-fit:cover}.zen-badge__text{text-align:center}.zen-badge__close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:inherit;flex-shrink:0}.zen-badge__close svg{width:12px;height:12px}.zen-badge--gray{background-color:#f2f4f7;color:#344054}.zen-badge--gray .zen-badge__dot{background-color:#667085}.zen-badge--primary{background-color:#f1f7fe;color:#105494}.zen-badge--primary .zen-badge__dot{background-color:#2188d9}.zen-badge--error{background-color:#fef3f2;color:#b42318}.zen-badge--error .zen-badge__dot{background-color:#f04438}.zen-badge--warning{background-color:#fffaeb;color:#b54708}.zen-badge--warning .zen-badge__dot{background-color:#f79009}.zen-badge--success{background-color:#ecfdf3;color:#027a48}.zen-badge--success .zen-badge__dot{background-color:#12b76a}.zen-badge--blue-gray{background-color:#f8f9fc;color:#363f72}.zen-badge--blue-gray .zen-badge__dot{background-color:#4e5ba6}.zen-badge--blue-light{background-color:#f0f9ff;color:#026aa2}.zen-badge--blue-light .zen-badge__dot{background-color:#0ba5ec}.zen-badge--blue{background-color:#eff8ff;color:#175cd3}.zen-badge--blue .zen-badge__dot{background-color:#2e90fa}.zen-badge--indigo{background-color:#eef4ff;color:#3538cd}.zen-badge--indigo .zen-badge__dot{background-color:#6172f3}.zen-badge--purple{background-color:#f4f3ff;color:#5925dc}.zen-badge--purple .zen-badge__dot{background-color:#7a5af8}.zen-badge--pink{background-color:#fdf2fa;color:#c11574}.zen-badge--pink .zen-badge__dot{background-color:#ee46bc}.zen-badge--rose{background-color:#fff1f3;color:#c01048}.zen-badge--rose .zen-badge__dot{background-color:#f63d68}.zen-badge--orange{background-color:#fef6ee;color:#b93815}.zen-badge--orange .zen-badge__dot{background-color:#ef6820}.zen-badge-group{display:inline-flex;align-items:center;border-radius:16px;font-family:Inter,sans-serif;font-weight:500;white-space:nowrap;mix-blend-mode:multiply;cursor:pointer}.zen-badge-group__badge{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;white-space:nowrap;flex-shrink:0;gap:4px}.zen-badge-group__content{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.zen-badge-group__message{white-space:nowrap;flex-shrink:0}.zen-badge-group__icon,.zen-badge-group__badge-icon{display:inline-block;flex-shrink:0;background-color:currentColor}.zen-badge-group--md,.zen-badge-group--sm{padding:4px;gap:8px;font-size:12px;line-height:18px}.zen-badge-group--md.zen-badge-group--leading,.zen-badge-group--leading.zen-badge-group--sm{padding-right:10px}.zen-badge-group--md.zen-badge-group--trailing,.zen-badge-group--trailing.zen-badge-group--sm{padding-left:12px}.zen-badge-group--md.zen-badge-group--leading.zen-badge-group--has-icon,.zen-badge-group--leading.zen-badge-group--has-icon.zen-badge-group--sm{padding-right:10px}.zen-badge-group--md .zen-badge-group__badge,.zen-badge-group--sm .zen-badge-group__badge{padding:2px 8px;font-size:12px;line-height:18px}.zen-badge-group--md .zen-badge-group__icon,.zen-badge-group--sm .zen-badge-group__icon{width:16px;height:16px}.zen-badge-group--md .zen-badge-group__badge-icon,.zen-badge-group--sm .zen-badge-group__badge-icon{width:12px;height:12px}.zen-badge-group--lg{padding:4px;gap:12px;font-size:14px;line-height:20px}.zen-badge-group--lg.zen-badge-group--leading{padding-right:12px}.zen-badge-group--lg.zen-badge-group--trailing{padding-left:14px}.zen-badge-group--lg.zen-badge-group--leading.zen-badge-group--has-icon{padding-right:12px}.zen-badge-group--lg .zen-badge-group__badge{padding:2px 10px;font-size:14px;line-height:20px}.zen-badge-group--lg .zen-badge-group__icon{width:18px;height:18px}.zen-badge-group--lg .zen-badge-group__badge-icon{width:14px;height:14px}.zen-badge-group--primary{color:#105494}.zen-badge-group--primary.zen-badge-group--light{background-color:#f1f7fe}.zen-badge-group--primary.zen-badge-group--light .zen-badge-group__badge{background-color:#fff;color:#105494}.zen-badge-group--primary.zen-badge-group--medium{background-color:#e3eefb}.zen-badge-group--primary.zen-badge-group--medium .zen-badge-group__badge{background-color:#f1f7fe;color:#105494}.zen-badge-group--primary.zen-badge-group--dark{background-color:#f1f7fe}.zen-badge-group--primary.zen-badge-group--dark .zen-badge-group__badge{background-color:#136ab6;color:#fff}.zen-badge-group--gray{color:#344054}.zen-badge-group--gray.zen-badge-group--light{background-color:#f9fafb}.zen-badge-group--gray.zen-badge-group--light .zen-badge-group__badge{background-color:#fff;color:#344054}.zen-badge-group--gray.zen-badge-group--medium{background-color:#f2f4f7}.zen-badge-group--gray.zen-badge-group--medium .zen-badge-group__badge{background-color:#f9fafb;color:#344054}.zen-badge-group--gray.zen-badge-group--dark{background-color:#f9fafb}.zen-badge-group--gray.zen-badge-group--dark .zen-badge-group__badge{background-color:#475467;color:#fff}.zen-badge-group--error{color:#b42318}.zen-badge-group--error.zen-badge-group--light{background-color:#fef3f2}.zen-badge-group--error.zen-badge-group--light .zen-badge-group__badge{background-color:#fff;color:#b42318}.zen-badge-group--error.zen-badge-group--medium{background-color:#fee4e2}.zen-badge-group--error.zen-badge-group--medium .zen-badge-group__badge{background-color:#fef3f2;color:#b42318}.zen-badge-group--error.zen-badge-group--dark{background-color:#fef3f2}.zen-badge-group--error.zen-badge-group--dark .zen-badge-group__badge{background-color:#d92d20;color:#fff}.zen-badge-group--warning{color:#b54708}.zen-badge-group--warning.zen-badge-group--light{background-color:#fffaeb}.zen-badge-group--warning.zen-badge-group--light .zen-badge-group__badge{background-color:#fff;color:#b54708}.zen-badge-group--warning.zen-badge-group--medium{background-color:#fef0c7}.zen-badge-group--warning.zen-badge-group--medium .zen-badge-group__badge{background-color:#fffaeb;color:#b54708}.zen-badge-group--warning.zen-badge-group--dark{background-color:#fffaeb}.zen-badge-group--warning.zen-badge-group--dark .zen-badge-group__badge{background-color:#dc6803;color:#fff}.zen-badge-group--success{color:#027a48}.zen-badge-group--success.zen-badge-group--light{background-color:#ecfdf3}.zen-badge-group--success.zen-badge-group--light .zen-badge-group__badge{background-color:#fff;color:#027a48}.zen-badge-group--success.zen-badge-group--medium{background-color:#d1fadf}.zen-badge-group--success.zen-badge-group--medium .zen-badge-group__badge{background-color:#ecfdf3;color:#027a48}.zen-badge-group--success.zen-badge-group--dark{background-color:#ecfdf3}.zen-badge-group--success.zen-badge-group--dark .zen-badge-group__badge{background-color:#039855;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
9293
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenBadgeComponent, isStandalone: false, selector: "zen-badge", inputs: { size: "size", color: "color", dot: "dot", removable: "removable", iconOnly: "iconOnly", icon: "icon", iconSrc: "iconSrc", iconDirection: "iconDirection", imgSrc: "imgSrc", group: "group", badgeLabel: "badgeLabel", badgePosition: "badgePosition", theme: "theme", showIcon: "showIcon" }, outputs: { remove: "remove", clicked: "clicked" }, ngImport: i0, template: "<!-- Badge Group mode -->\n@if (group) {\n <div [class]=\"groupClasses\" (click)=\"onClick($event)\">\n <!-- Leading: inner badge first -->\n @if (badgePosition === 'leading') {\n <span class=\"zen-badge-group__badge\">{{ badgeLabel }}</span>\n <span class=\"zen-badge-group__content\">\n <span class=\"zen-badge-group__message\"><ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container></span>\n @if (showIcon) {\n <zen-icon class=\"zen-badge-group__icon\" name=\"arrow-right\"></zen-icon>\n }\n </span>\n }\n <!-- Trailing: message first, badge with optional icon last -->\n @if (badgePosition === 'trailing') {\n <span class=\"zen-badge-group__message\"><ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container></span>\n <span class=\"zen-badge-group__badge\">\n {{ badgeLabel }}\n @if (showIcon) {\n <zen-icon class=\"zen-badge-group__badge-icon\" name=\"arrow-right\"></zen-icon>\n }\n </span>\n }\n </div>\n} @else {\n <div [class]=\"hostClasses\" (click)=\"onClick($event)\">\n @if (dot) {\n <span class=\"zen-badge__dot\"></span>\n }\n @if (imgSrc) {\n <img class=\"zen-badge__img\" [src]=\"imgSrc\" alt=\"\">\n }\n @if (hasIcon && !iconOnly && iconDirection === 'left') {\n <zen-icon class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n }\n @if (!iconOnly) {\n <span class=\"zen-badge__text\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </span>\n }\n @if (iconOnly && hasIcon) {\n <zen-icon class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n }\n @if (hasIcon && !iconOnly && iconDirection === 'right') {\n <zen-icon class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n }\n @if (removable) {\n <button class=\"zen-badge__close\" (click)=\"onRemove($event)\" type=\"button\" aria-label=\"Remove\">\n <zen-icon class=\"zen-badge__icon\" name=\"x\"></zen-icon>\n </button>\n }\n </div>\n}\n\n<!-- Standard badge mode -->\n\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n", styles: [".zen-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;font-family:Inter,sans-serif;font-weight:500;white-space:nowrap;mix-blend-mode:multiply;gap:4px;cursor:pointer}.zen-badge__icon{display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor}.zen-badge--sm{padding:2px 8px;font-size:12px;line-height:18px}.zen-badge--sm.zen-badge--dot,.zen-badge--sm.zen-badge--icon-left{padding-left:6px}.zen-badge--sm.zen-badge--icon-right,.zen-badge--sm.zen-badge--removable{padding-right:6px}.zen-badge--sm.zen-badge--icon-only{padding:4px}.zen-badge--sm.zen-badge--has-img{padding-left:3px;gap:6px}.zen-badge--sm .zen-badge__dot{width:6px;height:6px}.zen-badge--sm .zen-badge__close svg{width:10px;height:10px}.zen-badge--sm .zen-badge__img{width:16px;height:16px}.zen-badge--md{padding:2px 10px;font-size:14px;line-height:20px}.zen-badge--md.zen-badge--dot,.zen-badge--md.zen-badge--icon-left{padding-left:8px}.zen-badge--md.zen-badge--icon-right,.zen-badge--md.zen-badge--removable{padding-right:8px}.zen-badge--md.zen-badge--icon-only{padding:6px}.zen-badge--md.zen-badge--has-img{padding-left:4px;gap:6px}.zen-badge--md .zen-badge__dot{width:8px;height:8px}.zen-badge--md .zen-badge__img{width:18px;height:18px}.zen-badge--lg{padding:4px 12px;font-size:14px;line-height:20px}.zen-badge--lg.zen-badge--dot,.zen-badge--lg.zen-badge--icon-left{padding-left:10px}.zen-badge--lg.zen-badge--icon-right,.zen-badge--lg.zen-badge--removable{padding-right:10px}.zen-badge--lg.zen-badge--icon-only{padding:8px}.zen-badge--lg.zen-badge--has-img{padding-left:5px;gap:6px}.zen-badge--lg .zen-badge__dot{width:8px;height:8px}.zen-badge--lg .zen-badge__img{width:20px;height:20px}.zen-badge__dot{display:inline-block;border-radius:50%;flex-shrink:0}.zen-badge__img{flex-shrink:0;border-radius:50%;object-fit:cover}.zen-badge__text{text-align:center}.zen-badge__close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:inherit;flex-shrink:0}.zen-badge__close svg{width:12px;height:12px}.zen-badge--gray{background-color:#f2f4f7;color:#344054}.zen-badge--gray .zen-badge__dot{background-color:#667085}.zen-badge--primary{background-color:#f1f7fe;color:#105494}.zen-badge--primary .zen-badge__dot{background-color:#2188d9}.zen-badge--error{background-color:#fef3f2;color:#b42318}.zen-badge--error .zen-badge__dot{background-color:#f04438}.zen-badge--warning{background-color:#fffaeb;color:#b54708}.zen-badge--warning .zen-badge__dot{background-color:#f79009}.zen-badge--success{background-color:#ecfdf3;color:#027a48}.zen-badge--success .zen-badge__dot{background-color:#12b76a}.zen-badge--blue-gray{background-color:#f8f9fc;color:#363f72}.zen-badge--blue-gray .zen-badge__dot{background-color:#4e5ba6}.zen-badge--blue-light{background-color:#f0f9ff;color:#026aa2}.zen-badge--blue-light .zen-badge__dot{background-color:#0ba5ec}.zen-badge--blue{background-color:#eff8ff;color:#175cd3}.zen-badge--blue .zen-badge__dot{background-color:#2e90fa}.zen-badge--indigo{background-color:#eef4ff;color:#3538cd}.zen-badge--indigo .zen-badge__dot{background-color:#6172f3}.zen-badge--purple{background-color:#f4f3ff;color:#5925dc}.zen-badge--purple .zen-badge__dot{background-color:#7a5af8}.zen-badge--pink{background-color:#fdf2fa;color:#c11574}.zen-badge--pink .zen-badge__dot{background-color:#ee46bc}.zen-badge--rose{background-color:#fff1f3;color:#c01048}.zen-badge--rose .zen-badge__dot{background-color:#f63d68}.zen-badge--orange{background-color:#fef6ee;color:#b93815}.zen-badge--orange .zen-badge__dot{background-color:#ef6820}.zen-badge-group{display:inline-flex;align-items:center;border-radius:16px;font-family:Inter,sans-serif;font-weight:500;white-space:nowrap;mix-blend-mode:multiply;cursor:pointer}.zen-badge-group__badge{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;white-space:nowrap;flex-shrink:0;gap:4px}.zen-badge-group__content{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.zen-badge-group__message{white-space:nowrap;flex-shrink:0}.zen-badge-group__icon,.zen-badge-group__badge-icon{display:inline-block;flex-shrink:0;background-color:currentColor}.zen-badge-group--md,.zen-badge-group--sm{padding:4px;gap:8px;font-size:12px;line-height:18px}.zen-badge-group--md.zen-badge-group--leading,.zen-badge-group--leading.zen-badge-group--sm{padding-right:10px}.zen-badge-group--md.zen-badge-group--trailing,.zen-badge-group--trailing.zen-badge-group--sm{padding-left:12px}.zen-badge-group--md.zen-badge-group--leading.zen-badge-group--has-icon,.zen-badge-group--leading.zen-badge-group--has-icon.zen-badge-group--sm{padding-right:10px}.zen-badge-group--md .zen-badge-group__badge,.zen-badge-group--sm .zen-badge-group__badge{padding:2px 8px;font-size:12px;line-height:18px}.zen-badge-group--md .zen-badge-group__icon,.zen-badge-group--sm .zen-badge-group__icon{width:16px;height:16px}.zen-badge-group--md .zen-badge-group__badge-icon,.zen-badge-group--sm .zen-badge-group__badge-icon{width:12px;height:12px}.zen-badge-group--lg{padding:4px;gap:12px;font-size:14px;line-height:20px}.zen-badge-group--lg.zen-badge-group--leading{padding-right:12px}.zen-badge-group--lg.zen-badge-group--trailing{padding-left:14px}.zen-badge-group--lg.zen-badge-group--leading.zen-badge-group--has-icon{padding-right:12px}.zen-badge-group--lg .zen-badge-group__badge{padding:2px 10px;font-size:14px;line-height:20px}.zen-badge-group--lg .zen-badge-group__icon{width:18px;height:18px}.zen-badge-group--lg .zen-badge-group__badge-icon{width:14px;height:14px}.zen-badge-group--primary{color:#105494}.zen-badge-group--primary.zen-badge-group--light{background-color:#f1f7fe}.zen-badge-group--primary.zen-badge-group--light .zen-badge-group__badge{background-color:#fff;color:#105494}.zen-badge-group--primary.zen-badge-group--medium{background-color:#e3eefb}.zen-badge-group--primary.zen-badge-group--medium .zen-badge-group__badge{background-color:#f1f7fe;color:#105494}.zen-badge-group--primary.zen-badge-group--dark{background-color:#f1f7fe}.zen-badge-group--primary.zen-badge-group--dark .zen-badge-group__badge{background-color:#136ab6;color:#fff}.zen-badge-group--gray{color:#344054}.zen-badge-group--gray.zen-badge-group--light{background-color:#f9fafb}.zen-badge-group--gray.zen-badge-group--light .zen-badge-group__badge{background-color:#fff;color:#344054}.zen-badge-group--gray.zen-badge-group--medium{background-color:#f2f4f7}.zen-badge-group--gray.zen-badge-group--medium .zen-badge-group__badge{background-color:#f9fafb;color:#344054}.zen-badge-group--gray.zen-badge-group--dark{background-color:#f9fafb}.zen-badge-group--gray.zen-badge-group--dark .zen-badge-group__badge{background-color:#475467;color:#fff}.zen-badge-group--error{color:#b42318}.zen-badge-group--error.zen-badge-group--light{background-color:#fef3f2}.zen-badge-group--error.zen-badge-group--light .zen-badge-group__badge{background-color:#fff;color:#b42318}.zen-badge-group--error.zen-badge-group--medium{background-color:#fee4e2}.zen-badge-group--error.zen-badge-group--medium .zen-badge-group__badge{background-color:#fef3f2;color:#b42318}.zen-badge-group--error.zen-badge-group--dark{background-color:#fef3f2}.zen-badge-group--error.zen-badge-group--dark .zen-badge-group__badge{background-color:#d92d20;color:#fff}.zen-badge-group--warning{color:#b54708}.zen-badge-group--warning.zen-badge-group--light{background-color:#fffaeb}.zen-badge-group--warning.zen-badge-group--light .zen-badge-group__badge{background-color:#fff;color:#b54708}.zen-badge-group--warning.zen-badge-group--medium{background-color:#fef0c7}.zen-badge-group--warning.zen-badge-group--medium .zen-badge-group__badge{background-color:#fffaeb;color:#b54708}.zen-badge-group--warning.zen-badge-group--dark{background-color:#fffaeb}.zen-badge-group--warning.zen-badge-group--dark .zen-badge-group__badge{background-color:#dc6803;color:#fff}.zen-badge-group--success{color:#027a48}.zen-badge-group--success.zen-badge-group--light{background-color:#ecfdf3}.zen-badge-group--success.zen-badge-group--light .zen-badge-group__badge{background-color:#fff;color:#027a48}.zen-badge-group--success.zen-badge-group--medium{background-color:#d1fadf}.zen-badge-group--success.zen-badge-group--medium .zen-badge-group__badge{background-color:#ecfdf3;color:#027a48}.zen-badge-group--success.zen-badge-group--dark{background-color:#ecfdf3}.zen-badge-group--success.zen-badge-group--dark .zen-badge-group__badge{background-color:#039855;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
9001
9294
|
}
|
|
9002
9295
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenBadgeComponent, decorators: [{
|
|
9003
9296
|
type: Component,
|
|
@@ -9437,7 +9730,7 @@ class ZenTooltipDirective {
|
|
|
9437
9730
|
];
|
|
9438
9731
|
}
|
|
9439
9732
|
}
|
|
9440
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, deps: [{ token: i1
|
|
9733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9441
9734
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ZenTooltipDirective, isStandalone: false, selector: "[zenTooltip]", inputs: { text: ["zenTooltip", "text"], tooltipSupportingText: "tooltipSupportingText", tooltipPosition: "tooltipPosition", tooltipTheme: "tooltipTheme", tooltipDisabled: "tooltipDisabled" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 }); }
|
|
9442
9735
|
}
|
|
9443
9736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, decorators: [{
|
|
@@ -9446,7 +9739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
9446
9739
|
selector: '[zenTooltip]',
|
|
9447
9740
|
standalone: false
|
|
9448
9741
|
}]
|
|
9449
|
-
}], ctorParameters: () => [{ type: i1
|
|
9742
|
+
}], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { text: [{
|
|
9450
9743
|
type: Input,
|
|
9451
9744
|
args: ['zenTooltip']
|
|
9452
9745
|
}], tooltipSupportingText: [{
|
|
@@ -9941,7 +10234,7 @@ class ZenStepBaseComponent {
|
|
|
9941
10234
|
}
|
|
9942
10235
|
}
|
|
9943
10236
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenStepBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9944
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenStepBaseComponent, isStandalone: false, selector: "zen-step-base", inputs: { type: "type", size: "size", theme: "theme", status: "status", title: "title", description: "description", showConnector: "showConnector" }, ngImport: i0, template: "<div [class]=\"hostClasses\">\n\n <!-- ============ TYPE: TOP (icons-centered) ============ -->\n @if (type === 'top') {\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n @if (title || description) {\n <div class=\"zen-step-base__content\">\n @if (title) {\n <p class=\"zen-step-base__title\">{{ title }}</p>\n }\n @if (description) {\n <p class=\"zen-step-base__description\">{{ description }}</p>\n }\n </div>\n }\n }\n\n <!-- ============ TYPE: ICON ONLY (minimal-icons) ============ -->\n @if (type === 'icon-only') {\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n }\n\n <!-- ============ TYPE: TEXT LINE ============ -->\n @if (type === 'text-line') {\n <div class=\"zen-step-base__bar\"></div>\n @if (title || description) {\n <div class=\"zen-step-base__content\">\n @if (title) {\n <p class=\"zen-step-base__title\">{{ title }}</p>\n }\n @if (description) {\n <p class=\"zen-step-base__description\">{{ description }}</p>\n }\n </div>\n }\n }\n\n <!-- ============ TYPE: ICON LEFT (icons-text vertical) ============ -->\n @if (type === 'icon-left') {\n <div class=\"zen-step-base__icon-col\">\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n @if (showConnector) {\n <div\n class=\"zen-step-base__connector\"\n [class.zen-step-base__connector--complete]=\"status === 'complete'\"\n [class.zen-step-base__connector--incomplete]=\"status !== 'complete'\">\n </div>\n }\n </div>\n @if (title || description) {\n <div class=\"zen-step-base__content\">\n @if (title) {\n <p class=\"zen-step-base__title\">{{ title }}</p>\n }\n @if (description) {\n <p class=\"zen-step-base__description\">{{ description }}</p>\n }\n </div>\n }\n }\n\n</div>\n\n<!-- ============ ICON TEMPLATE ============ -->\n<ng-template #iconTpl>\n <div class=\"zen-step-base__icon\"\n [class.zen-step-base__icon--complete]=\"status === 'complete'\"\n [class.zen-step-base__icon--current]=\"status === 'current'\"\n [class.zen-step-base__icon--incomplete]=\"status === 'incomplete'\">\n <!-- Complete: checkmark -->\n @if (status === 'complete') {\n <svg\n [attr.width]=\"checkSize\" [attr.height]=\"checkSize\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13.3334 4L6.00008 11.3333L2.66675 8\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n <!-- Current / Incomplete: dot -->\n @if (status !== 'complete') {\n <span\n class=\"zen-step-base__dot\"\n [style.width.px]=\"dotSize\"\n [style.height.px]=\"dotSize\">\n </span>\n }\n </div>\n</ng-template>\n", styles: [".zen-step-base{display:flex;position:relative;font-family:Inter,sans-serif}.zen-step-base__icon{display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;overflow:hidden;position:relative;box-sizing:border-box}.zen-step-base__dot{display:block;border-radius:50%}.zen-step-base__content{display:flex;flex-direction:column}.zen-step-base__title{font-weight:500;margin:0}.zen-step-base__description{font-weight:400;margin:0}.zen-step-base__bar{width:100%;flex-shrink:0}.zen-step-base__connector{width:2px;flex:1 0 0;min-height:1px;border-radius:2px}.zen-step-base__connector--complete{background-color:#136ab6}.zen-step-base__connector--incomplete{background-color:#eaecf0}.zen-step-base__icon-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:4px;padding-bottom:4px;align-self:stretch}.zen-step-base--top{flex-direction:column;align-items:center}.zen-step-base--top .zen-step-base__content{text-align:center;width:100%}.zen-step-base--icon-only{align-items:center}.zen-step-base--text-line{flex-direction:column;align-items:flex-start;width:100%}.zen-step-base--icon-left{align-items:flex-start;width:100%}.zen-step-base--icon-left .zen-step-base__content{flex:1 0 0;min-width:0}.zen-step-base--sm .zen-step-base__icon{width:24px;height:24px}.zen-step-base--sm .zen-step-base__title,.zen-step-base--sm .zen-step-base__description{font-size:14px;line-height:20px}.zen-step-base--sm .zen-step-base__bar{height:4px}.zen-step-base--sm.zen-step-base--top{gap:12px}.zen-step-base--sm.zen-step-base--top .zen-step-base__content{padding-top:2px}.zen-step-base--sm.zen-step-base--text-line{gap:8px}.zen-step-base--sm.zen-step-base--text-line .zen-step-base__content{padding-top:2px}.zen-step-base--sm.zen-step-base--icon-left{gap:12px}.zen-step-base--sm.zen-step-base--icon-left .zen-step-base__content{padding-top:2px;padding-bottom:24px}.zen-step-base--md .zen-step-base__icon{width:32px;height:32px}.zen-step-base--md .zen-step-base__title,.zen-step-base--md .zen-step-base__description{font-size:16px;line-height:24px}.zen-step-base--md .zen-step-base__bar{height:4px}.zen-step-base--md.zen-step-base--top{gap:12px}.zen-step-base--md.zen-step-base--top .zen-step-base__content{padding-top:4px;gap:2px}.zen-step-base--md.zen-step-base--text-line{gap:8px}.zen-step-base--md.zen-step-base--text-line .zen-step-base__content{padding-top:4px;gap:2px}.zen-step-base--md.zen-step-base--icon-left{gap:12px}.zen-step-base--md.zen-step-base--icon-left .zen-step-base__content{padding-top:4px;padding-bottom:24px;gap:2px}.zen-step-base--lg .zen-step-base__icon{width:40px;height:40px}.zen-step-base--lg .zen-step-base__title,.zen-step-base--lg .zen-step-base__description{font-size:16px;line-height:24px}.zen-step-base--lg .zen-step-base__bar{height:4px}.zen-step-base--lg.zen-step-base--top{gap:12px}.zen-step-base--lg.zen-step-base--top .zen-step-base__content{padding-top:8px;gap:2px}.zen-step-base--lg.zen-step-base--text-line{gap:10px}.zen-step-base--lg.zen-step-base--text-line .zen-step-base__content{padding-top:8px;gap:2px}.zen-step-base--lg.zen-step-base--icon-left{gap:12px}.zen-step-base--lg.zen-step-base--icon-left .zen-step-base__content{padding-top:8px;padding-bottom:24px;gap:2px}.zen-step-base--light .zen-step-base__icon--complete{background-color:#f1f7fe;color:#136ab6}.zen-step-base--light .zen-step-base__icon--current{background-color:#f1f7fe;box-shadow:0 0 0 4px #e3eefb}.zen-step-base--light .zen-step-base__icon--current .zen-step-base__dot{background-color:#136ab6}.zen-step-base--light .zen-step-base__icon--incomplete{background-color:#f9fafb}.zen-step-base--light .zen-step-base__icon--incomplete .zen-step-base__dot{background-color:#d0d5dd}.zen-step-base--light.zen-step-base--complete .zen-step-base__title{color:#344054}.zen-step-base--light.zen-step-base--complete .zen-step-base__description{color:#667085}.zen-step-base--light.zen-step-base--current .zen-step-base__title{color:#105494}.zen-step-base--light.zen-step-base--current .zen-step-base__description{color:#136ab6}.zen-step-base--light.zen-step-base--incomplete .zen-step-base__title{color:#344054}.zen-step-base--light.zen-step-base--incomplete .zen-step-base__description{color:#667085}.zen-step-base--light .zen-step-base__bar{background-color:#eaecf0}.zen-step-base--light.zen-step-base--complete .zen-step-base__bar,.zen-step-base--light.zen-step-base--current .zen-step-base__bar{background-color:#136ab6}.zen-step-base--mid .zen-step-base__icon--complete{background-color:#f1f7fe;color:#136ab6}.zen-step-base--mid .zen-step-base__icon--current{background-color:#f1f7fe;border:2px solid #136AB6;box-shadow:0 0 0 4px #e3eefb}.zen-step-base--mid .zen-step-base__icon--current .zen-step-base__dot{background-color:#136ab6}.zen-step-base--mid .zen-step-base__icon--incomplete{background-color:#fff;border:2px solid #EAECF0}.zen-step-base--mid .zen-step-base__icon--incomplete .zen-step-base__dot{background-color:#d0d5dd}.zen-step-base--mid.zen-step-base--complete .zen-step-base__title{color:#344054}.zen-step-base--mid.zen-step-base--complete .zen-step-base__description{color:#667085}.zen-step-base--mid.zen-step-base--current .zen-step-base__title{color:#105494}.zen-step-base--mid.zen-step-base--current .zen-step-base__description{color:#136ab6}.zen-step-base--mid.zen-step-base--incomplete .zen-step-base__title{color:#344054}.zen-step-base--mid.zen-step-base--incomplete .zen-step-base__description{color:#667085}.zen-step-base--mid .zen-step-base__bar{background-color:#eaecf0}.zen-step-base--mid.zen-step-base--complete .zen-step-base__bar,.zen-step-base--mid.zen-step-base--current .zen-step-base__bar{background-color:#136ab6}.zen-step-base--mid.zen-step-base--sm .zen-step-base__icon--current,.zen-step-base--mid.zen-step-base--sm .zen-step-base__icon--incomplete{border-width:1.5px}.zen-step-base--dark .zen-step-base__icon--complete{background-color:#136ab6;color:#fff}.zen-step-base--dark .zen-step-base__icon--current{background-color:#136ab6;box-shadow:0 0 0 4px #e3eefb}.zen-step-base--dark .zen-step-base__icon--current .zen-step-base__dot{background-color:#fff}.zen-step-base--dark .zen-step-base__icon--incomplete{background-color:#f2f4f7}.zen-step-base--dark .zen-step-base__icon--incomplete .zen-step-base__dot{background-color:#98a2b3}.zen-step-base--dark.zen-step-base--complete .zen-step-base__title{color:#344054}.zen-step-base--dark.zen-step-base--complete .zen-step-base__description{color:#667085}.zen-step-base--dark.zen-step-base--current .zen-step-base__title{color:#105494}.zen-step-base--dark.zen-step-base--current .zen-step-base__description{color:#136ab6}.zen-step-base--dark.zen-step-base--incomplete .zen-step-base__title{color:#344054}.zen-step-base--dark.zen-step-base--incomplete .zen-step-base__description{color:#667085}.zen-step-base--dark .zen-step-base__bar{background-color:#eaecf0}.zen-step-base--dark.zen-step-base--complete .zen-step-base__bar,.zen-step-base--dark.zen-step-base--current .zen-step-base__bar{background-color:#136ab6}.zen-step-base--icon-left:last-child .zen-step-base__content{padding-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
10237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenStepBaseComponent, isStandalone: false, selector: "zen-step-base", inputs: { type: "type", size: "size", theme: "theme", status: "status", title: "title", description: "description", showConnector: "showConnector" }, ngImport: i0, template: "<div [class]=\"hostClasses\">\n\n <!-- ============ TYPE: TOP (icons-centered) ============ -->\n @if (type === 'top') {\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n @if (title || description) {\n <div class=\"zen-step-base__content\">\n @if (title) {\n <p class=\"zen-step-base__title\">{{ title }}</p>\n }\n @if (description) {\n <p class=\"zen-step-base__description\">{{ description }}</p>\n }\n </div>\n }\n }\n\n <!-- ============ TYPE: ICON ONLY (minimal-icons) ============ -->\n @if (type === 'icon-only') {\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n }\n\n <!-- ============ TYPE: TEXT LINE ============ -->\n @if (type === 'text-line') {\n <div class=\"zen-step-base__bar\"></div>\n @if (title || description) {\n <div class=\"zen-step-base__content\">\n @if (title) {\n <p class=\"zen-step-base__title\">{{ title }}</p>\n }\n @if (description) {\n <p class=\"zen-step-base__description\">{{ description }}</p>\n }\n </div>\n }\n }\n\n <!-- ============ TYPE: ICON LEFT (icons-text vertical) ============ -->\n @if (type === 'icon-left') {\n <div class=\"zen-step-base__icon-col\">\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n @if (showConnector) {\n <div\n class=\"zen-step-base__connector\"\n [class.zen-step-base__connector--complete]=\"status === 'complete'\"\n [class.zen-step-base__connector--incomplete]=\"status !== 'complete'\">\n </div>\n }\n </div>\n @if (title || description) {\n <div class=\"zen-step-base__content\">\n @if (title) {\n <p class=\"zen-step-base__title\">{{ title }}</p>\n }\n @if (description) {\n <p class=\"zen-step-base__description\">{{ description }}</p>\n }\n </div>\n }\n }\n\n</div>\n\n<!-- ============ ICON TEMPLATE ============ -->\n<ng-template #iconTpl>\n <div class=\"zen-step-base__icon\"\n [class.zen-step-base__icon--complete]=\"status === 'complete'\"\n [class.zen-step-base__icon--current]=\"status === 'current'\"\n [class.zen-step-base__icon--incomplete]=\"status === 'incomplete'\">\n <!-- Complete: checkmark -->\n @if (status === 'complete') {\n <svg\n [attr.width]=\"checkSize\" [attr.height]=\"checkSize\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M13.3334 4L6.00008 11.3333L2.66675 8\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n <!-- Current / Incomplete: dot -->\n @if (status !== 'complete') {\n <span\n class=\"zen-step-base__dot\"\n [style.width.px]=\"dotSize\"\n [style.height.px]=\"dotSize\">\n </span>\n }\n </div>\n</ng-template>\n", styles: [".zen-step-base{display:flex;position:relative;font-family:Inter,sans-serif}.zen-step-base__icon{display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;overflow:hidden;position:relative;box-sizing:border-box}.zen-step-base__dot{display:block;border-radius:50%}.zen-step-base__content{display:flex;flex-direction:column}.zen-step-base__title{font-weight:500;margin:0}.zen-step-base__description{font-weight:400;margin:0}.zen-step-base__bar{width:100%;flex-shrink:0}.zen-step-base__connector{width:2px;flex:1 0 0;min-height:1px;border-radius:2px}.zen-step-base__connector--complete{background-color:#136ab6}.zen-step-base__connector--incomplete{background-color:#eaecf0}.zen-step-base__icon-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:4px;padding-bottom:4px;align-self:stretch}.zen-step-base--top{flex-direction:column;align-items:center}.zen-step-base--top .zen-step-base__content{text-align:center;width:100%}.zen-step-base--icon-only{align-items:center}.zen-step-base--text-line{flex-direction:column;align-items:flex-start;width:100%}.zen-step-base--icon-left{align-items:flex-start;width:100%}.zen-step-base--icon-left .zen-step-base__content{flex:1 0 0;min-width:0}.zen-step-base--sm .zen-step-base__icon{width:24px;height:24px}.zen-step-base--sm .zen-step-base__title,.zen-step-base--sm .zen-step-base__description{font-size:14px;line-height:20px}.zen-step-base--sm .zen-step-base__bar{height:4px}.zen-step-base--sm.zen-step-base--top{gap:12px}.zen-step-base--sm.zen-step-base--top .zen-step-base__content{padding-top:2px}.zen-step-base--sm.zen-step-base--text-line{gap:8px}.zen-step-base--sm.zen-step-base--text-line .zen-step-base__content{padding-top:2px}.zen-step-base--sm.zen-step-base--icon-left{gap:12px}.zen-step-base--sm.zen-step-base--icon-left .zen-step-base__content{padding-top:2px;padding-bottom:24px}.zen-step-base--md .zen-step-base__icon{width:32px;height:32px}.zen-step-base--md .zen-step-base__title,.zen-step-base--md .zen-step-base__description{font-size:16px;line-height:24px}.zen-step-base--md .zen-step-base__bar{height:4px}.zen-step-base--md.zen-step-base--top{gap:12px}.zen-step-base--md.zen-step-base--top .zen-step-base__content{padding-top:4px;gap:2px}.zen-step-base--md.zen-step-base--text-line{gap:8px}.zen-step-base--md.zen-step-base--text-line .zen-step-base__content{padding-top:4px;gap:2px}.zen-step-base--md.zen-step-base--icon-left{gap:12px}.zen-step-base--md.zen-step-base--icon-left .zen-step-base__content{padding-top:4px;padding-bottom:24px;gap:2px}.zen-step-base--lg .zen-step-base__icon{width:40px;height:40px}.zen-step-base--lg .zen-step-base__title,.zen-step-base--lg .zen-step-base__description{font-size:16px;line-height:24px}.zen-step-base--lg .zen-step-base__bar{height:4px}.zen-step-base--lg.zen-step-base--top{gap:12px}.zen-step-base--lg.zen-step-base--top .zen-step-base__content{padding-top:8px;gap:2px}.zen-step-base--lg.zen-step-base--text-line{gap:10px}.zen-step-base--lg.zen-step-base--text-line .zen-step-base__content{padding-top:8px;gap:2px}.zen-step-base--lg.zen-step-base--icon-left{gap:12px}.zen-step-base--lg.zen-step-base--icon-left .zen-step-base__content{padding-top:8px;padding-bottom:24px;gap:2px}.zen-step-base--light .zen-step-base__icon--complete{background-color:#f1f7fe;color:#136ab6}.zen-step-base--light .zen-step-base__icon--current{background-color:#f1f7fe;box-shadow:0 0 0 4px #e3eefb}.zen-step-base--light .zen-step-base__icon--current .zen-step-base__dot{background-color:#136ab6}.zen-step-base--light .zen-step-base__icon--incomplete{background-color:#f9fafb}.zen-step-base--light .zen-step-base__icon--incomplete .zen-step-base__dot{background-color:#d0d5dd}.zen-step-base--light.zen-step-base--complete .zen-step-base__title{color:#344054}.zen-step-base--light.zen-step-base--complete .zen-step-base__description{color:#667085}.zen-step-base--light.zen-step-base--current .zen-step-base__title{color:#105494}.zen-step-base--light.zen-step-base--current .zen-step-base__description{color:#136ab6}.zen-step-base--light.zen-step-base--incomplete .zen-step-base__title{color:#344054}.zen-step-base--light.zen-step-base--incomplete .zen-step-base__description{color:#667085}.zen-step-base--light .zen-step-base__bar{background-color:#eaecf0}.zen-step-base--light.zen-step-base--complete .zen-step-base__bar,.zen-step-base--light.zen-step-base--current .zen-step-base__bar{background-color:#136ab6}.zen-step-base--mid .zen-step-base__icon--complete{background-color:#f1f7fe;color:#136ab6}.zen-step-base--mid .zen-step-base__icon--current{background-color:#f1f7fe;border:2px solid #136AB6;box-shadow:0 0 0 4px #e3eefb}.zen-step-base--mid .zen-step-base__icon--current .zen-step-base__dot{background-color:#136ab6}.zen-step-base--mid .zen-step-base__icon--incomplete{background-color:#fff;border:2px solid #EAECF0}.zen-step-base--mid .zen-step-base__icon--incomplete .zen-step-base__dot{background-color:#d0d5dd}.zen-step-base--mid.zen-step-base--complete .zen-step-base__title{color:#344054}.zen-step-base--mid.zen-step-base--complete .zen-step-base__description{color:#667085}.zen-step-base--mid.zen-step-base--current .zen-step-base__title{color:#105494}.zen-step-base--mid.zen-step-base--current .zen-step-base__description{color:#136ab6}.zen-step-base--mid.zen-step-base--incomplete .zen-step-base__title{color:#344054}.zen-step-base--mid.zen-step-base--incomplete .zen-step-base__description{color:#667085}.zen-step-base--mid .zen-step-base__bar{background-color:#eaecf0}.zen-step-base--mid.zen-step-base--complete .zen-step-base__bar,.zen-step-base--mid.zen-step-base--current .zen-step-base__bar{background-color:#136ab6}.zen-step-base--mid.zen-step-base--sm .zen-step-base__icon--current,.zen-step-base--mid.zen-step-base--sm .zen-step-base__icon--incomplete{border-width:1.5px}.zen-step-base--dark .zen-step-base__icon--complete{background-color:#136ab6;color:#fff}.zen-step-base--dark .zen-step-base__icon--current{background-color:#136ab6;box-shadow:0 0 0 4px #e3eefb}.zen-step-base--dark .zen-step-base__icon--current .zen-step-base__dot{background-color:#fff}.zen-step-base--dark .zen-step-base__icon--incomplete{background-color:#f2f4f7}.zen-step-base--dark .zen-step-base__icon--incomplete .zen-step-base__dot{background-color:#98a2b3}.zen-step-base--dark.zen-step-base--complete .zen-step-base__title{color:#344054}.zen-step-base--dark.zen-step-base--complete .zen-step-base__description{color:#667085}.zen-step-base--dark.zen-step-base--current .zen-step-base__title{color:#105494}.zen-step-base--dark.zen-step-base--current .zen-step-base__description{color:#136ab6}.zen-step-base--dark.zen-step-base--incomplete .zen-step-base__title{color:#344054}.zen-step-base--dark.zen-step-base--incomplete .zen-step-base__description{color:#667085}.zen-step-base--dark .zen-step-base__bar{background-color:#eaecf0}.zen-step-base--dark.zen-step-base--complete .zen-step-base__bar,.zen-step-base--dark.zen-step-base--current .zen-step-base__bar{background-color:#136ab6}.zen-step-base--icon-left:last-child .zen-step-base__content{padding-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
9945
10238
|
}
|
|
9946
10239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenStepBaseComponent, decorators: [{
|
|
9947
10240
|
type: Component,
|
|
@@ -10280,5 +10573,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
10280
10573
|
* Generated bundle index. Do not edit.
|
|
10281
10574
|
*/
|
|
10282
10575
|
|
|
10283
|
-
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 };
|
|
10576
|
+
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, ZenduOverlayService, ZenduPaginationBarComponent, ZenduPhoneInputComponent, ZenduProgress, ZenduRadioButtonComponent, ZenduSearchBoxComponent, ZenduSelectButtonDirective, ZenduSelectComponent, ZenduSelectOptionDirective, ZenduSelectValueDirective, ZenduSliderComponent, ZenduSortHeaderComponent, ZenduSpinner, ZenduTimepickerComponent, ZenduToggleComponent, ZenduToggleSlideComponent };
|
|
10284
10577
|
//# sourceMappingURL=ng-zenduit.mjs.map
|