ng-zenduit 2.3.7 → 2.3.11
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 +550 -304
- 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 +191 -34
package/fesm2022/ng-zenduit.mjs
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
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
|
-
import * as
|
|
11
|
+
import * as i3 from '@angular/forms';
|
|
9
12
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
10
|
-
import * as i2$
|
|
13
|
+
import * as i2$1 from '@angular/cdk/drag-drop';
|
|
11
14
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
12
15
|
import { PhoneNumberUtil } from 'google-libphonenumber';
|
|
13
16
|
import * as i2 from '@ngx-translate/core';
|
|
@@ -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(config.positions ?? 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,
|
|
@@ -1187,7 +1371,7 @@ class ZenduSearchBoxComponent {
|
|
|
1187
1371
|
return null;
|
|
1188
1372
|
}
|
|
1189
1373
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1190
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSearchBoxComponent, isStandalone: false, selector: "zen-search-box", inputs: { text: "text", delay: "delay", autoFocus: "autoFocus", disabled: "disabled", placeholder: "placeholder" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div class=\"search-box-component\"\n [class.has-text]=\"text\">\n <zen-input [(ngModel)]=\"text\"\n [placeholder]=\"placeholder | translate\"\n [disabled]=\"disabled\"\n leadingIcon=\"search\"\n autocomplete=\"off\"\n (ngModelChange)=\"onChange()\">\n </zen-input>\n @if (text) {\n <i class=\"material-icons close-icon\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"clear(); $event.stopPropagation()\">close</i>\n }\n</div>\n", styles: [".search-box-component{position:relative;width:100%}.search-box-component ::ng-deep .zen-input-field-wrapper{height:40px!important;min-height:auto!important;padding:8px 14px!important}.search-box-component.has-text ::ng-deep .zen-input-field{padding-right:24px}.search-box-component .close-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1}\n"], dependencies: [{ kind: "directive", type:
|
|
1374
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSearchBoxComponent, isStandalone: false, selector: "zen-search-box", inputs: { text: "text", delay: "delay", autoFocus: "autoFocus", disabled: "disabled", placeholder: "placeholder" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div class=\"search-box-component\"\n [class.has-text]=\"text\">\n <zen-input [(ngModel)]=\"text\"\n [placeholder]=\"placeholder | translate\"\n [disabled]=\"disabled\"\n leadingIcon=\"search\"\n autocomplete=\"off\"\n (ngModelChange)=\"onChange()\">\n </zen-input>\n @if (text) {\n <i class=\"material-icons close-icon\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"clear(); $event.stopPropagation()\">close</i>\n }\n</div>\n", styles: [".search-box-component{position:relative;width:100%}.search-box-component ::ng-deep .zen-input-field-wrapper{height:40px!important;min-height:auto!important;padding:8px 14px!important}.search-box-component.has-text ::ng-deep .zen-input-field{padding-right:24px}.search-box-component .close-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1}\n"], dependencies: [{ kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1191
1375
|
}
|
|
1192
1376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, decorators: [{
|
|
1193
1377
|
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$
|
|
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$1.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$1.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: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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;
|
|
@@ -2625,19 +2842,21 @@ class ZenduDatePickerDropdownComponent {
|
|
|
2625
2842
|
return !!(this.startDate && this.endDate);
|
|
2626
2843
|
}
|
|
2627
2844
|
get formattedSelectedDate() {
|
|
2628
|
-
|
|
2845
|
+
// Date only — the time is edited in the time-picker section below, so
|
|
2846
|
+
// repeating it here would overflow the narrow input box.
|
|
2847
|
+
return this._selectedDate ? this.formatDate(this._selectedDate, false) : '';
|
|
2629
2848
|
}
|
|
2630
2849
|
get formattedStartDate() {
|
|
2631
|
-
return this._selectedStart ? this.formatDate(this._selectedStart) : '';
|
|
2850
|
+
return this._selectedStart ? this.formatDate(this._selectedStart, false) : '';
|
|
2632
2851
|
}
|
|
2633
2852
|
get formattedEndDate() {
|
|
2634
|
-
return this._selectedEnd ? this.formatDate(this._selectedEnd) : '';
|
|
2853
|
+
return this._selectedEnd ? this.formatDate(this._selectedEnd, false) : '';
|
|
2635
2854
|
}
|
|
2636
|
-
formatDate(date) {
|
|
2855
|
+
formatDate(date, includeTime = true) {
|
|
2637
2856
|
const enMonth = moment(date).format('MMM');
|
|
2638
2857
|
const translatedMonth = this._translate.instant(enMonth);
|
|
2639
2858
|
let formatted = moment(date).format('MMM D, YYYY').replace(enMonth, translatedMonth);
|
|
2640
|
-
if (this.timePicker) {
|
|
2859
|
+
if (includeTime && this.timePicker) {
|
|
2641
2860
|
formatted += ' ' + this.formatTime(date);
|
|
2642
2861
|
}
|
|
2643
2862
|
return formatted;
|
|
@@ -2663,6 +2882,9 @@ class ZenduDatePickerDropdownComponent {
|
|
|
2663
2882
|
}
|
|
2664
2883
|
}
|
|
2665
2884
|
open() {
|
|
2885
|
+
// Recompute the layout for the current viewport/zoom before rendering,
|
|
2886
|
+
// so the correct (desktop vs compact) branch is shown on open.
|
|
2887
|
+
this.checkMobile();
|
|
2666
2888
|
this.isOpen = true;
|
|
2667
2889
|
this._selectedDate = this.date ? new Date(this.date) : null;
|
|
2668
2890
|
this._selectedStart = this.startDate ? new Date(this.startDate) : null;
|
|
@@ -2689,56 +2911,106 @@ class ZenduDatePickerDropdownComponent {
|
|
|
2689
2911
|
this.rightCurrentSlot = moment(this.leftCurrentSlot).add(1, 'month').toDate();
|
|
2690
2912
|
}
|
|
2691
2913
|
this.updateCalendars();
|
|
2914
|
+
this.addRepositionListeners();
|
|
2692
2915
|
this.updateDropdownPosition();
|
|
2693
2916
|
}
|
|
2694
2917
|
updateDropdownPosition() {
|
|
2695
|
-
|
|
2696
|
-
// is hidden (external control drives the popup).
|
|
2697
|
-
const anchorEl = this.triggerBtn?.nativeElement
|
|
2698
|
-
?? this._element.nativeElement;
|
|
2918
|
+
const anchorEl = this.anchorElement();
|
|
2699
2919
|
if (!anchorEl)
|
|
2700
2920
|
return;
|
|
2701
|
-
//
|
|
2921
|
+
// Synchronous first placement so the panel opens without a flash. The
|
|
2922
|
+
// panel hasn't rendered yet (it renders this change-detection pass), so
|
|
2923
|
+
// we anchor it and cap its height to the space on the chosen side up
|
|
2924
|
+
// front — that way the footer can't be pushed off-screen even before we
|
|
2925
|
+
// measure the real panel. `clampToViewport()` then refines it once the
|
|
2926
|
+
// dual calendars have laid out.
|
|
2702
2927
|
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
|
-
|
|
2928
|
+
const viewportHeight = window.innerHeight;
|
|
2929
|
+
const spaceBelow = viewportHeight - rect.bottom - PANEL_GAP - VIEWPORT_MARGIN;
|
|
2930
|
+
const spaceAbove = rect.top - PANEL_GAP - VIEWPORT_MARGIN;
|
|
2931
|
+
this.dropdownStyle = spaceBelow >= spaceAbove
|
|
2932
|
+
? {
|
|
2933
|
+
left: `${rect.left}px`,
|
|
2934
|
+
top: `${rect.bottom + PANEL_GAP}px`,
|
|
2935
|
+
'max-height': `${Math.max(MIN_PANEL_HEIGHT, spaceBelow)}px`
|
|
2936
|
+
}
|
|
2937
|
+
: {
|
|
2938
|
+
left: `${rect.left}px`,
|
|
2939
|
+
bottom: `${viewportHeight - rect.top + PANEL_GAP}px`,
|
|
2940
|
+
'max-height': `${Math.max(MIN_PANEL_HEIGHT, spaceAbove)}px`
|
|
2941
|
+
};
|
|
2942
|
+
// Measure AFTER the calendars render. The dual-calendar range layout is
|
|
2943
|
+
// tall, and a single pre-render frame can mis-measure its height and
|
|
2944
|
+
// place the footer off-screen — so wait two frames, then clamp using the
|
|
2945
|
+
// real panel size.
|
|
2946
|
+
requestAnimationFrame(() => requestAnimationFrame(() => this.clampToViewport()));
|
|
2947
|
+
}
|
|
2948
|
+
/**
|
|
2949
|
+
* Re-clamp the open panel to the viewport using its real measured size.
|
|
2950
|
+
* Keeps the panel anchored to the trigger and guarantees the footer stays
|
|
2951
|
+
* reachable (the panel scrolls internally) at any viewport size or zoom.
|
|
2952
|
+
*/
|
|
2953
|
+
clampToViewport() {
|
|
2954
|
+
if (!this.isOpen)
|
|
2955
|
+
return;
|
|
2956
|
+
const anchorEl = this.anchorElement();
|
|
2957
|
+
const panelEl = this._element.nativeElement.querySelector('.dropdown-menu');
|
|
2958
|
+
if (!anchorEl || !panelEl)
|
|
2959
|
+
return;
|
|
2960
|
+
const rect = anchorEl.getBoundingClientRect();
|
|
2961
|
+
const viewportWidth = window.innerWidth;
|
|
2962
|
+
const viewportHeight = window.innerHeight;
|
|
2963
|
+
const panelWidth = panelEl.offsetWidth;
|
|
2964
|
+
const panelHeight = panelEl.scrollHeight;
|
|
2965
|
+
const spaceBelow = viewportHeight - rect.bottom - PANEL_GAP - VIEWPORT_MARGIN;
|
|
2966
|
+
const spaceAbove = rect.top - PANEL_GAP - VIEWPORT_MARGIN;
|
|
2967
|
+
const style = {};
|
|
2968
|
+
// Horizontal: keep the panel fully on-screen.
|
|
2969
|
+
style['left'] = `${Math.max(VIEWPORT_MARGIN, Math.min(rect.left, viewportWidth - panelWidth - VIEWPORT_MARGIN))}px`;
|
|
2970
|
+
// Vertical: open below when it fits or there is more room below,
|
|
2971
|
+
// otherwise above. Always cap max-height to the available space so the
|
|
2972
|
+
// footer stays reachable via the panel's internal scroll.
|
|
2973
|
+
if (panelHeight <= spaceBelow || spaceBelow >= spaceAbove) {
|
|
2974
|
+
style['top'] = `${rect.bottom + PANEL_GAP}px`;
|
|
2975
|
+
style['max-height'] = `${Math.max(MIN_PANEL_HEIGHT, spaceBelow)}px`;
|
|
2976
|
+
}
|
|
2977
|
+
else {
|
|
2978
|
+
style['bottom'] = `${viewportHeight - rect.top + PANEL_GAP}px`;
|
|
2979
|
+
style['max-height'] = `${Math.max(MIN_PANEL_HEIGHT, spaceAbove)}px`;
|
|
2980
|
+
}
|
|
2981
|
+
this.dropdownStyle = style;
|
|
2982
|
+
}
|
|
2983
|
+
/**
|
|
2984
|
+
* Anchor to the trigger button, or to the host element when the trigger is
|
|
2985
|
+
* hidden (an external control drives the popup).
|
|
2986
|
+
*/
|
|
2987
|
+
anchorElement() {
|
|
2988
|
+
return this.triggerBtn?.nativeElement ?? this._element.nativeElement ?? null;
|
|
2989
|
+
}
|
|
2990
|
+
addRepositionListeners() {
|
|
2991
|
+
// Capture phase so scrolls inside ANY ancestor (e.g. a dialog body) are
|
|
2992
|
+
// caught — `scroll` does not bubble, so a window:scroll listener alone
|
|
2993
|
+
// would miss them and the fixed panel would detach from its trigger.
|
|
2994
|
+
window.addEventListener('scroll', this._onViewportChange, true);
|
|
2995
|
+
}
|
|
2996
|
+
removeRepositionListeners() {
|
|
2997
|
+
window.removeEventListener('scroll', this._onViewportChange, true);
|
|
2998
|
+
if (this._positionRafId != null) {
|
|
2999
|
+
cancelAnimationFrame(this._positionRafId);
|
|
3000
|
+
this._positionRafId = null;
|
|
3001
|
+
}
|
|
3002
|
+
}
|
|
3003
|
+
schedulePositionUpdate() {
|
|
3004
|
+
if (this._positionRafId != null)
|
|
3005
|
+
return;
|
|
3006
|
+
this._positionRafId = requestAnimationFrame(() => {
|
|
3007
|
+
this._positionRafId = null;
|
|
3008
|
+
this.clampToViewport();
|
|
2738
3009
|
});
|
|
2739
3010
|
}
|
|
2740
3011
|
close() {
|
|
2741
3012
|
this.isOpen = false;
|
|
3013
|
+
this.removeRepositionListeners();
|
|
2742
3014
|
}
|
|
2743
3015
|
// Calendar navigation
|
|
2744
3016
|
leftPrevMonth() {
|
|
@@ -3167,11 +3439,11 @@ class ZenduDatePickerDropdownComponent {
|
|
|
3167
3439
|
return moment(day.date).isSame(moment(this._selectedEnd), 'day');
|
|
3168
3440
|
}
|
|
3169
3441
|
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 }); }
|
|
3442
|
+
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
3443
|
}
|
|
3172
3444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatePickerDropdownComponent, decorators: [{
|
|
3173
3445
|
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"] }]
|
|
3446
|
+
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
3447
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.TranslateService }, { type: undefined, decorators: [{
|
|
3176
3448
|
type: Optional
|
|
3177
3449
|
}, {
|
|
@@ -3333,16 +3605,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3333
3605
|
}] } });
|
|
3334
3606
|
|
|
3335
3607
|
class ZenduFilterComponent {
|
|
3336
|
-
|
|
3337
|
-
|
|
3608
|
+
set isVisible(open) {
|
|
3609
|
+
open = !!open;
|
|
3610
|
+
if (open === this._isVisible) {
|
|
3611
|
+
return;
|
|
3612
|
+
}
|
|
3613
|
+
this._isVisible = open;
|
|
3614
|
+
if (open) {
|
|
3615
|
+
this._openOverlay();
|
|
3616
|
+
}
|
|
3617
|
+
else {
|
|
3618
|
+
this._closeOverlay();
|
|
3619
|
+
}
|
|
3620
|
+
}
|
|
3621
|
+
get isVisible() {
|
|
3622
|
+
return this._isVisible;
|
|
3623
|
+
}
|
|
3624
|
+
constructor(overlay, viewContainerRef) {
|
|
3625
|
+
this.overlay = overlay;
|
|
3626
|
+
this.viewContainerRef = viewContainerRef;
|
|
3338
3627
|
this.config = { items: [] };
|
|
3339
3628
|
this.position = 'right';
|
|
3340
3629
|
this.resetBehavior = 'clear';
|
|
3341
3630
|
this.filterChange = new EventEmitter();
|
|
3342
|
-
|
|
3631
|
+
/**
|
|
3632
|
+
* Open/closed state and the single source of truth for the panel. Assigning it
|
|
3633
|
+
* attaches/detaches the CDK overlay panel, so every existing open/close path
|
|
3634
|
+
* (toggle, hide, apply, external `[(isVisible)]` binding) stays correct without
|
|
3635
|
+
* touching each call site — mirrors zen-select's `isOpen`.
|
|
3636
|
+
*/
|
|
3637
|
+
this._isVisible = false;
|
|
3343
3638
|
this.isVisibleChange = new EventEmitter();
|
|
3344
3639
|
this.customTrigger = false;
|
|
3345
3640
|
this.triggerVariant = 'default';
|
|
3641
|
+
/**
|
|
3642
|
+
* @deprecated Obsolete since the panel moved to the CDK overlay
|
|
3643
|
+
* (ZenduOverlayService), which owns positioning. Kept for back-compat so
|
|
3644
|
+
* existing `[customPosition]` bindings keep compiling; it no longer has any
|
|
3645
|
+
* effect. Use `position` to steer the preferred side.
|
|
3646
|
+
*/
|
|
3346
3647
|
this.customPosition = 'fixed';
|
|
3347
3648
|
this.searchText = '';
|
|
3348
3649
|
// Forces the trigger highlight on. Set internally by updateAppliedState() and
|
|
@@ -3374,13 +3675,94 @@ class ZenduFilterComponent {
|
|
|
3374
3675
|
// updateAppliedState() and on config init — never during live editing.
|
|
3375
3676
|
this.appliedCount = 0;
|
|
3376
3677
|
this.hasActiveFilters = false;
|
|
3377
|
-
this.menuLeft = '0px';
|
|
3378
|
-
this.menuRight = '0px';
|
|
3379
|
-
this.menuTop = '0px';
|
|
3380
|
-
this.menuBottom = '0px';
|
|
3381
|
-
this.menuMaxHeight = 'none';
|
|
3382
3678
|
this.errorMessage = [];
|
|
3383
3679
|
this.selectedDateRangeOptions = {};
|
|
3680
|
+
this._panelRef = null;
|
|
3681
|
+
}
|
|
3682
|
+
ngAfterViewInit() {
|
|
3683
|
+
// Honour an initial `[isVisible]="true"` binding: the input setter may have
|
|
3684
|
+
// run before the view (and thus the trigger/panel refs) existed, so open
|
|
3685
|
+
// here once they're available.
|
|
3686
|
+
if (this._isVisible && !this._panelRef) {
|
|
3687
|
+
this._openOverlay();
|
|
3688
|
+
}
|
|
3689
|
+
}
|
|
3690
|
+
ngOnDestroy() {
|
|
3691
|
+
this._closeOverlay();
|
|
3692
|
+
}
|
|
3693
|
+
/**
|
|
3694
|
+
* Open the filter panel in a CDK overlay anchored to the trigger. The overlay
|
|
3695
|
+
* owns viewport-aware positioning (flip up/down, push into view, clamp +
|
|
3696
|
+
* internal scroll) and renders at the body level, so the panel is never
|
|
3697
|
+
* clipped by an ancestor's `overflow` or by the viewport edge. Mirrors
|
|
3698
|
+
* zen-select's `_openOverlay`.
|
|
3699
|
+
*/
|
|
3700
|
+
_openOverlay() {
|
|
3701
|
+
if (this._panelRef || !this._componentElement || !this.filterPanel) {
|
|
3702
|
+
return;
|
|
3703
|
+
}
|
|
3704
|
+
this._panelRef = this.overlay.openConnectedPanel({
|
|
3705
|
+
origin: this._componentElement,
|
|
3706
|
+
content: this.filterPanel,
|
|
3707
|
+
viewContainerRef: this.viewContainerRef,
|
|
3708
|
+
// The panel has its own fixed width (.filter-menu); let it size to content
|
|
3709
|
+
// and the overlay's flexible dimensions clamp it on small viewports.
|
|
3710
|
+
width: 'auto',
|
|
3711
|
+
scrollBehavior: 'reposition',
|
|
3712
|
+
positions: this._buildConnectedPositions(),
|
|
3713
|
+
});
|
|
3714
|
+
// Outside click / Escape / detach → close AND restore the last-applied
|
|
3715
|
+
// filter (cancel-edit), matching the old outside-click behaviour. Closing
|
|
3716
|
+
// via Apply/toggle goes through `_closeOverlay()` directly, which the
|
|
3717
|
+
// service does not report as a close, so those paths never restore.
|
|
3718
|
+
this._panelRef.closed.subscribe(() => {
|
|
3719
|
+
this.hide();
|
|
3720
|
+
this.restorePreviousApplied();
|
|
3721
|
+
});
|
|
3722
|
+
this.focusSearchBox();
|
|
3723
|
+
}
|
|
3724
|
+
_closeOverlay() {
|
|
3725
|
+
this._panelRef?.close();
|
|
3726
|
+
this._panelRef = null;
|
|
3727
|
+
}
|
|
3728
|
+
/**
|
|
3729
|
+
* Map the `position` input ('left' | 'right' | 'top' | 'bottom' | 'auto', or
|
|
3730
|
+
* combinations) to CDK connected positions in preference order. The requested
|
|
3731
|
+
* side comes first; the remaining three are fallbacks so the panel always
|
|
3732
|
+
* fits. 'left' aligns the panel's right edge to the trigger (opens leftward),
|
|
3733
|
+
* 'right' aligns its left edge (opens rightward); 'auto' picks the side with
|
|
3734
|
+
* more room. `withPush` + flexible dimensions still clamp into the viewport.
|
|
3735
|
+
*/
|
|
3736
|
+
_buildConnectedPositions() {
|
|
3737
|
+
const GAP = 4;
|
|
3738
|
+
const rect = this._componentElement?.nativeElement.getBoundingClientRect();
|
|
3739
|
+
const wantsTop = this.position.includes('top');
|
|
3740
|
+
const wantsBottom = this.position.includes('bottom');
|
|
3741
|
+
const openUp = wantsTop
|
|
3742
|
+
? true
|
|
3743
|
+
: wantsBottom
|
|
3744
|
+
? false
|
|
3745
|
+
: // 'auto' / unspecified: open up only when the trigger sits low.
|
|
3746
|
+
Boolean(rect && rect.top > window.innerHeight / 2);
|
|
3747
|
+
const wantsLeft = this.position.includes('left');
|
|
3748
|
+
const wantsRight = this.position.includes('right');
|
|
3749
|
+
const alignEnd = wantsLeft
|
|
3750
|
+
? true
|
|
3751
|
+
: wantsRight
|
|
3752
|
+
? false
|
|
3753
|
+
: // 'auto' / unspecified: right-align (open leftward) only near the right edge.
|
|
3754
|
+
Boolean(rect && rect.left > window.innerWidth / 2);
|
|
3755
|
+
const xPref = alignEnd ? 'end' : 'start';
|
|
3756
|
+
const xAlt = alignEnd ? 'start' : 'end';
|
|
3757
|
+
const below = (x) => ({
|
|
3758
|
+
originX: x, originY: 'bottom', overlayX: x, overlayY: 'top', offsetY: GAP,
|
|
3759
|
+
});
|
|
3760
|
+
const above = (x) => ({
|
|
3761
|
+
originX: x, originY: 'top', overlayX: x, overlayY: 'bottom', offsetY: -GAP,
|
|
3762
|
+
});
|
|
3763
|
+
return openUp
|
|
3764
|
+
? [above(xPref), above(xAlt), below(xPref), below(xAlt)]
|
|
3765
|
+
: [below(xPref), below(xAlt), above(xPref), above(xAlt)];
|
|
3384
3766
|
}
|
|
3385
3767
|
ngOnChanges(changes) {
|
|
3386
3768
|
if (changes.config && changes.config.currentValue) {
|
|
@@ -3422,10 +3804,6 @@ class ZenduFilterComponent {
|
|
|
3422
3804
|
// recorded but never shown as checked.
|
|
3423
3805
|
this.syncFromFilter(changes.filter.currentValue);
|
|
3424
3806
|
}
|
|
3425
|
-
if (changes.isVisible && changes.isVisible.currentValue) {
|
|
3426
|
-
this.updatePlacement(this.customPosition);
|
|
3427
|
-
this.focusSearchBox();
|
|
3428
|
-
}
|
|
3429
3807
|
// Cache the default preset's filter signature so ngDoCheck only diffs the
|
|
3430
3808
|
// (mutating) live state against it, instead of rebuilding the invariant
|
|
3431
3809
|
// default object every tick. Recomputed only when config / defaultFilter
|
|
@@ -3457,59 +3835,21 @@ class ZenduFilterComponent {
|
|
|
3457
3835
|
// facial-ai pages drive the trigger highlight that way).
|
|
3458
3836
|
this.hasActiveFilters = this.isApplied || this.appliedCount > 0;
|
|
3459
3837
|
}
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
if (this._componentElement.nativeElement.contains(target)) {
|
|
3470
|
-
return;
|
|
3471
|
-
}
|
|
3472
|
-
// hide the menu for outside click
|
|
3473
|
-
this.hide();
|
|
3474
|
-
// restore values
|
|
3475
|
-
this.restorePreviousApplied();
|
|
3476
|
-
}
|
|
3477
|
-
windowSizeHandling() {
|
|
3478
|
-
if (!this.isVisible) {
|
|
3479
|
-
return;
|
|
3480
|
-
}
|
|
3481
|
-
this.updatePlacement(this.customPosition);
|
|
3482
|
-
}
|
|
3483
|
-
windowScroll() {
|
|
3484
|
-
if (!this.isVisible) {
|
|
3485
|
-
return;
|
|
3486
|
-
}
|
|
3487
|
-
this.updatePlacement(this.customPosition);
|
|
3488
|
-
}
|
|
3489
|
-
onWindowKeyDown(event) {
|
|
3490
|
-
if (!this.isVisible) {
|
|
3838
|
+
/**
|
|
3839
|
+
* Focus the panel's search box when it opens. The panel renders in the overlay
|
|
3840
|
+
* at body level, so it isn't reachable via `@ViewChild`; zen-search-box also
|
|
3841
|
+
* self-focuses on init (`autoFocus`), and we nudge the rendered input directly
|
|
3842
|
+
* as a fallback once the overlay has attached.
|
|
3843
|
+
*/
|
|
3844
|
+
focusSearchBox() {
|
|
3845
|
+
const panelEl = this._panelRef?.overlayRef.overlayElement;
|
|
3846
|
+
if (!panelEl) {
|
|
3491
3847
|
return;
|
|
3492
3848
|
}
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
event.key === 'Home' ||
|
|
3498
|
-
event.key === 'End') {
|
|
3499
|
-
const target = event.target;
|
|
3500
|
-
if (!document.body.contains(target)) {
|
|
3501
|
-
return;
|
|
3502
|
-
}
|
|
3503
|
-
if (this._componentElement.nativeElement.contains(target) &&
|
|
3504
|
-
!target.classList.contains('button-stroked')) {
|
|
3505
|
-
return;
|
|
3506
|
-
}
|
|
3507
|
-
this.hide();
|
|
3508
|
-
this.restorePreviousApplied();
|
|
3509
|
-
}
|
|
3510
|
-
}
|
|
3511
|
-
focusSearchBox() {
|
|
3512
|
-
this.searchBox.doFocus();
|
|
3849
|
+
setTimeout(() => {
|
|
3850
|
+
const input = panelEl.querySelector('input');
|
|
3851
|
+
input?.focus();
|
|
3852
|
+
});
|
|
3513
3853
|
}
|
|
3514
3854
|
isMenuIsVisible(item) {
|
|
3515
3855
|
if (item.isLazyLoading) {
|
|
@@ -4031,9 +4371,9 @@ class ZenduFilterComponent {
|
|
|
4031
4371
|
this.checkChanged(dsItem, item);
|
|
4032
4372
|
}
|
|
4033
4373
|
toggle() {
|
|
4374
|
+
// Assigning isVisible opens/closes the overlay (and focuses the search box)
|
|
4375
|
+
// via the setter; no manual placement/focus needed here.
|
|
4034
4376
|
this.isVisible = !this.isVisible;
|
|
4035
|
-
this.updatePlacement(this.customPosition);
|
|
4036
|
-
this.focusSearchBox();
|
|
4037
4377
|
if (this.isVisible) {
|
|
4038
4378
|
this.resetLazyLoadingSources(true);
|
|
4039
4379
|
}
|
|
@@ -4057,111 +4397,6 @@ class ZenduFilterComponent {
|
|
|
4057
4397
|
}
|
|
4058
4398
|
return true;
|
|
4059
4399
|
}
|
|
4060
|
-
updatePlacement(pos = 'fixed') {
|
|
4061
|
-
const host = this._componentElement.nativeElement;
|
|
4062
|
-
const container = host.querySelector('.menu-content');
|
|
4063
|
-
if (!container)
|
|
4064
|
-
return;
|
|
4065
|
-
const rect = pos === 'fixed'
|
|
4066
|
-
? host.getBoundingClientRect()
|
|
4067
|
-
: container.getBoundingClientRect();
|
|
4068
|
-
const left = rect.left;
|
|
4069
|
-
const right = rect.right;
|
|
4070
|
-
// VIEWPORT_GAP: min space between the panel and the viewport edge.
|
|
4071
|
-
// OPEN_GAP: space between the trigger and the panel when it opens (design guide).
|
|
4072
|
-
const VIEWPORT_GAP = 16;
|
|
4073
|
-
const OPEN_GAP = 12;
|
|
4074
|
-
const hostRect = host.getBoundingClientRect();
|
|
4075
|
-
if (pos === 'absolute') {
|
|
4076
|
-
this.renderer.addClass(container, 'absolute');
|
|
4077
|
-
this.renderer.removeStyle(container, 'inset');
|
|
4078
|
-
}
|
|
4079
|
-
else {
|
|
4080
|
-
this.renderer.removeClass(container, 'absolute');
|
|
4081
|
-
}
|
|
4082
|
-
if (pos === 'fixed') {
|
|
4083
|
-
if (this.position.includes('auto')) {
|
|
4084
|
-
const horizontalPosition = this.getHorizontalPosition();
|
|
4085
|
-
this.menuRight =
|
|
4086
|
-
horizontalPosition === 'left'
|
|
4087
|
-
? `${window.innerWidth - right}px`
|
|
4088
|
-
: 'unset';
|
|
4089
|
-
this.menuLeft = horizontalPosition === 'right' ? `${left}px` : 'unset';
|
|
4090
|
-
}
|
|
4091
|
-
else if (this.position.includes('left')) {
|
|
4092
|
-
this.menuRight = `${window.innerWidth - right}px`;
|
|
4093
|
-
this.menuLeft = 'unset';
|
|
4094
|
-
}
|
|
4095
|
-
else {
|
|
4096
|
-
this.menuLeft = `${left}px`;
|
|
4097
|
-
this.menuRight = 'unset';
|
|
4098
|
-
}
|
|
4099
|
-
// Anchor vertically, then cap max-height to the space available from that
|
|
4100
|
-
// anchor to the opposite viewport edge (minus the gap). Measuring from the
|
|
4101
|
-
// real panel anchor — not the trigger — keeps the bottom/top gap exact.
|
|
4102
|
-
let openDownTopY = null;
|
|
4103
|
-
let openUpBottomY = null;
|
|
4104
|
-
if (this.position.includes('auto')) {
|
|
4105
|
-
if (this.getVerticalPosition() === 'bottom') {
|
|
4106
|
-
openDownTopY = hostRect.bottom + OPEN_GAP;
|
|
4107
|
-
}
|
|
4108
|
-
else {
|
|
4109
|
-
openUpBottomY = hostRect.top - OPEN_GAP;
|
|
4110
|
-
}
|
|
4111
|
-
}
|
|
4112
|
-
else if (this.position.includes('top')) {
|
|
4113
|
-
openUpBottomY = hostRect.top - OPEN_GAP;
|
|
4114
|
-
}
|
|
4115
|
-
else {
|
|
4116
|
-
openDownTopY = hostRect.bottom + OPEN_GAP;
|
|
4117
|
-
}
|
|
4118
|
-
if (openDownTopY !== null) {
|
|
4119
|
-
this.menuTop = `${openDownTopY}px`;
|
|
4120
|
-
this.menuBottom = 'unset';
|
|
4121
|
-
this.menuMaxHeight = `${Math.max(160, window.innerHeight - openDownTopY - VIEWPORT_GAP)}px`;
|
|
4122
|
-
}
|
|
4123
|
-
else {
|
|
4124
|
-
const bottomY = openUpBottomY ?? window.innerHeight;
|
|
4125
|
-
this.menuTop = 'unset';
|
|
4126
|
-
this.menuBottom = `${window.innerHeight - bottomY}px`;
|
|
4127
|
-
this.menuMaxHeight = `${Math.max(160, bottomY - VIEWPORT_GAP)}px`;
|
|
4128
|
-
}
|
|
4129
|
-
}
|
|
4130
|
-
else {
|
|
4131
|
-
let verticalClass = '';
|
|
4132
|
-
let horizontalClass = '';
|
|
4133
|
-
if (this.position.includes('auto')) {
|
|
4134
|
-
horizontalClass = this.getHorizontalPosition();
|
|
4135
|
-
verticalClass = this.getVerticalPosition();
|
|
4136
|
-
}
|
|
4137
|
-
else {
|
|
4138
|
-
horizontalClass = this.position.includes('left') ? 'left' : 'right';
|
|
4139
|
-
verticalClass = this.position.includes('top') ? 'top' : 'bottom';
|
|
4140
|
-
}
|
|
4141
|
-
[
|
|
4142
|
-
'dropdown-left',
|
|
4143
|
-
'dropdown-right',
|
|
4144
|
-
'dropdown-top',
|
|
4145
|
-
'dropdown-bottom',
|
|
4146
|
-
].forEach((c) => this.renderer.removeClass(container, c));
|
|
4147
|
-
this.renderer.addClass(container, `dropdown-${horizontalClass}`);
|
|
4148
|
-
this.renderer.addClass(container, `dropdown-${verticalClass}`);
|
|
4149
|
-
// Absolute panel opens OPEN_GAP from the trigger (dropdown margin); cap it
|
|
4150
|
-
// the same way so it also keeps the 16px gap from the viewport edge.
|
|
4151
|
-
this.menuMaxHeight =
|
|
4152
|
-
verticalClass === 'top'
|
|
4153
|
-
? `${Math.max(160, hostRect.top - OPEN_GAP - VIEWPORT_GAP)}px`
|
|
4154
|
-
: `${Math.max(160, window.innerHeight - (hostRect.bottom + OPEN_GAP) - VIEWPORT_GAP)}px`;
|
|
4155
|
-
}
|
|
4156
|
-
}
|
|
4157
|
-
getVerticalPosition() {
|
|
4158
|
-
const top = this._componentElement.nativeElement.getBoundingClientRect().top;
|
|
4159
|
-
return top > window.innerHeight / 2 ? 'top' : 'bottom';
|
|
4160
|
-
}
|
|
4161
|
-
getHorizontalPosition() {
|
|
4162
|
-
const left = this._componentElement.nativeElement.getBoundingClientRect().left;
|
|
4163
|
-
return left > window.innerWidth / 2 ? 'left' : 'right';
|
|
4164
|
-
}
|
|
4165
4400
|
getDefaultDateRangeOptions() {
|
|
4166
4401
|
return [
|
|
4167
4402
|
{
|
|
@@ -4279,13 +4514,13 @@ class ZenduFilterComponent {
|
|
|
4279
4514
|
}
|
|
4280
4515
|
return count;
|
|
4281
4516
|
}
|
|
4282
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, deps: [{ token: i0.
|
|
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 }); }
|
|
4517
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, deps: [{ token: ZenduOverlayService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4518
|
+
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" }, viewQueries: [{ propertyName: "_componentElement", first: true, predicate: ["mainComponent"], descendants: true }, { propertyName: "filterPanel", first: true, predicate: ["filterPanel"], 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 <!-- Filter panel (rendered into a CDK overlay via ZenduOverlayService;\n positioning/flip/clamping is handled there, not with absolute CSS) -->\n <ng-template #filterPanel>\n <div class=\"filter-menu\"\n [class.customTrigger]=\"customTrigger\">\n <div class=\"filter-menu__header\">\n <zen-search-box [(text)]=\"searchText\"\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 </ng-template>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filter-menu{width:400px;max-width:100%;white-space:initial;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}.filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filter-menu__body .menu-item.menu-item--multiselect,.filter-menu__body .menu-item.menu-item--radio{gap:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filter-menu__body .menu-item__content{padding-left:8px}.filter-menu__body .action-item,.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filter-menu__body .action-item:focus-within,.filter-menu__body .action-item-checkbox:focus-within,.filter-menu__body .action-item-radio:focus-within{background:transparent}.filter-menu__body .action-item:hover{background:transparent}.filter-menu__body .action-item-checkbox,.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}.filter-menu__body .action-item-checkbox:hover,.filter-menu__body .action-item-radio:hover{background:#f9fafb}.filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filter-menu__body .action-item-checkbox:first-child,.filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filter-menu__body .action-item-checkbox:last-child,.filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.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}.filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filter-menu__body .expander-item.expanded,.filter-menu__body .expander-item.active{background:transparent;color:#344054}.filter-menu__body .expander-item:hover{background:#f9fafb}.filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filter-menu__body .no-item,.filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filter-menu__body .select-all{font-weight:500}.filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filter-menu__body .number-range-row{display:flex;gap:16px}.filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filter-menu__body .toggle-row:hover{background:#f9fafb}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.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}.filter-menu__body .section-title:hover{background:#f9fafb}.filter-menu__body .has-badge zen-checkbox{width:auto}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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
4519
|
}
|
|
4285
4520
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, decorators: [{
|
|
4286
4521
|
type: Component,
|
|
4287
|
-
args: [{ selector: 'zen-filter', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
4288
|
-
}], ctorParameters: () => [{ type: i0.
|
|
4522
|
+
args: [{ selector: 'zen-filter', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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 <!-- Filter panel (rendered into a CDK overlay via ZenduOverlayService;\n positioning/flip/clamping is handled there, not with absolute CSS) -->\n <ng-template #filterPanel>\n <div class=\"filter-menu\"\n [class.customTrigger]=\"customTrigger\">\n <div class=\"filter-menu__header\">\n <zen-search-box [(text)]=\"searchText\"\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 </ng-template>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filter-menu{width:400px;max-width:100%;white-space:initial;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}.filter-menu__header{flex-shrink:0;display:flex;flex-direction:column;padding:16px}.filter-menu__footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px;border-top:1px solid #eaecf0}.filter-menu__footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filter-menu__footer .filter-footer-actions{display:flex;gap:12px}.filter-menu__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px}.filter-menu__body .menu-item{display:flex;flex-direction:column;gap:12px}.filter-menu__body .menu-item.menu-item--multiselect,.filter-menu__body .menu-item.menu-item--radio{gap:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:first-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:first-child{margin-top:0}.filter-menu__body .menu-item.menu-item--multiselect .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--multiselect .action-item-radio:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-checkbox:last-child,.filter-menu__body .menu-item.menu-item--radio .action-item-radio:last-child{margin-bottom:0}.filter-menu__body .menu-item__content{padding-left:8px}.filter-menu__body .action-item,.filter-menu__body .action-item-checkbox,.filter-menu__body .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0}.filter-menu__body .action-item:focus-within,.filter-menu__body .action-item-checkbox:focus-within,.filter-menu__body .action-item-radio:focus-within{background:transparent}.filter-menu__body .action-item:hover{background:transparent}.filter-menu__body .action-item-checkbox,.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}.filter-menu__body .action-item-checkbox:hover,.filter-menu__body .action-item-radio:hover{background:#f9fafb}.filter-menu__body .action-item-checkbox ::ng-deep .checkbox-component,.filter-menu__body .action-item-radio ::ng-deep .radio-component{padding-top:10px;padding-bottom:10px}.filter-menu__body .action-item-checkbox:first-child,.filter-menu__body .action-item-radio:first-child{margin-top:-10px}.filter-menu__body .action-item-checkbox:last-child,.filter-menu__body .action-item-radio:last-child{margin-bottom:-4px}.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}.filter-menu__body .expander-item .expander-title{flex:1;text-align:left}.filter-menu__body .expander-item.expanded,.filter-menu__body .expander-item.active{background:transparent;color:#344054}.filter-menu__body .expander-item:hover{background:#f9fafb}.filter-menu__body .expand-icon{transition:transform .3s;width:20px;height:20px;background-color:#667085}.filter-menu__body .expand-icon.active{transform:rotate(180deg)}.filter-menu__body .expander-indicator{display:flex;align-items:center;gap:12px;flex-shrink:0}.filter-menu__body .filter-section-dot{width:8px;height:8px;border-radius:50%;background:#136ab6;flex-shrink:0}.filter-menu__body .no-item,.filter-menu__body .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 0;font-weight:400;font-size:14px}.filter-menu__body .select-all{font-weight:500}.filter-menu__body .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filter-menu__body .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filter-menu__body .filter-date-fields{display:flex;flex-direction:column;gap:12px}.filter-menu__body .number-range-row{display:flex;gap:16px}.filter-menu__body .number-range-row zen-input{flex:1 1 0;min-width:0}.filter-menu__body .toggle-row{justify-content:space-between;margin:0 -16px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease}.filter-menu__body .toggle-row zen-toggle{display:flex;align-items:center}.filter-menu__body .toggle-row:hover{background:#f9fafb}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled){background-color:#eaecf0}.filter-menu__body .toggle-row:hover ::ng-deep .zen-toggle-track:not(.zen-toggle--disabled).zen-toggle--active{background-color:#105494}.filter-menu__body .filter-divider{height:1px;margin:0;background:#eaecf0}.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}.filter-menu__body .section-title:hover{background:#f9fafb}.filter-menu__body .has-badge zen-checkbox{width:auto}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox{background:#e3eefb;border-color:#136ab6}.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-checked,.filter-menu__body .has-badge:hover ::ng-deep .app-checkbox.app-indeterminate{background:#e3eefb;border-color:#136ab6;color:#136ab6}.filter-menu__body .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.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"] }]
|
|
4523
|
+
}], ctorParameters: () => [{ type: ZenduOverlayService }, { type: i0.ViewContainerRef }], propDecorators: { config: [{
|
|
4289
4524
|
type: Input
|
|
4290
4525
|
}], filter: [{
|
|
4291
4526
|
type: Input
|
|
@@ -4317,24 +4552,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
4317
4552
|
type: Input
|
|
4318
4553
|
}], customPosition: [{
|
|
4319
4554
|
type: Input
|
|
4320
|
-
}], searchBox: [{
|
|
4321
|
-
type: ViewChild,
|
|
4322
|
-
args: ['searchBox', { static: false }]
|
|
4323
4555
|
}], _componentElement: [{
|
|
4324
4556
|
type: ViewChild,
|
|
4325
4557
|
args: ['mainComponent', { static: false }]
|
|
4326
|
-
}],
|
|
4327
|
-
type:
|
|
4328
|
-
args: ['
|
|
4329
|
-
}], windowSizeHandling: [{
|
|
4330
|
-
type: HostListener,
|
|
4331
|
-
args: ['window:resize', []]
|
|
4332
|
-
}], windowScroll: [{
|
|
4333
|
-
type: HostListener,
|
|
4334
|
-
args: ['window:scroll', []]
|
|
4335
|
-
}], onWindowKeyDown: [{
|
|
4336
|
-
type: HostListener,
|
|
4337
|
-
args: ['window:keydown', ['$event']]
|
|
4558
|
+
}], filterPanel: [{
|
|
4559
|
+
type: ViewChild,
|
|
4560
|
+
args: ['filterPanel', { static: false }]
|
|
4338
4561
|
}] } });
|
|
4339
4562
|
|
|
4340
4563
|
class ZenduSelectOptionDirective {
|
|
@@ -4392,8 +4615,24 @@ class ZenduSelectComponent {
|
|
|
4392
4615
|
get multiselect() {
|
|
4393
4616
|
return this.isMultiselect;
|
|
4394
4617
|
}
|
|
4395
|
-
|
|
4618
|
+
get isOpen() {
|
|
4619
|
+
return this._isOpen;
|
|
4620
|
+
}
|
|
4621
|
+
set isOpen(open) {
|
|
4622
|
+
if (open === this._isOpen)
|
|
4623
|
+
return;
|
|
4624
|
+
this._isOpen = open;
|
|
4625
|
+
if (open) {
|
|
4626
|
+
this._openOverlay();
|
|
4627
|
+
}
|
|
4628
|
+
else {
|
|
4629
|
+
this._closeOverlay();
|
|
4630
|
+
}
|
|
4631
|
+
}
|
|
4632
|
+
constructor(elementRef, overlay, viewContainerRef) {
|
|
4396
4633
|
this.elementRef = elementRef;
|
|
4634
|
+
this.overlay = overlay;
|
|
4635
|
+
this.viewContainerRef = viewContainerRef;
|
|
4397
4636
|
/**
|
|
4398
4637
|
* callback to emit changes for parent component
|
|
4399
4638
|
*/
|
|
@@ -4514,9 +4753,12 @@ class ZenduSelectComponent {
|
|
|
4514
4753
|
*/
|
|
4515
4754
|
this.closed = new EventEmitter();
|
|
4516
4755
|
/**
|
|
4517
|
-
* State tracking
|
|
4756
|
+
* State tracking. `isOpen` is the single source of truth — assigning it
|
|
4757
|
+
* attaches/detaches the CDK overlay panel, so every existing open/close path
|
|
4758
|
+
* (toggle, search focus/typing, option select, hideDropDown) stays correct
|
|
4759
|
+
* without touching each call site.
|
|
4518
4760
|
*/
|
|
4519
|
-
this.
|
|
4761
|
+
this._isOpen = false;
|
|
4520
4762
|
this.helpTooltipAlign = 'center';
|
|
4521
4763
|
this.helpTooltipPlacement = 'above';
|
|
4522
4764
|
this.searchText = '';
|
|
@@ -4531,24 +4773,33 @@ class ZenduSelectComponent {
|
|
|
4531
4773
|
// Tree mode properties
|
|
4532
4774
|
this.treeFilteredDataSource = [];
|
|
4533
4775
|
this.isSelectedAll = false;
|
|
4776
|
+
this._panelRef = null;
|
|
4777
|
+
}
|
|
4778
|
+
ngOnDestroy() {
|
|
4779
|
+
this._closeOverlay();
|
|
4534
4780
|
}
|
|
4535
4781
|
/**
|
|
4536
|
-
*
|
|
4782
|
+
* Open the dropdown panel in a CDK overlay anchored to the trigger. The
|
|
4783
|
+
* overlay handles viewport-aware positioning (flip up/down, push into view,
|
|
4784
|
+
* clamp + internal scroll) and renders at the body level, so the panel is
|
|
4785
|
+
* never clipped by an ancestor's `overflow` or by the viewport edge.
|
|
4537
4786
|
*/
|
|
4538
|
-
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
|
|
4542
|
-
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
|
|
4546
|
-
|
|
4547
|
-
}
|
|
4787
|
+
_openOverlay() {
|
|
4788
|
+
if (this._panelRef || !this.selectWrapper || !this.dropdownPanel)
|
|
4789
|
+
return;
|
|
4790
|
+
this._panelRef = this.overlay.openConnectedPanel({
|
|
4791
|
+
origin: this.selectWrapper,
|
|
4792
|
+
content: this.dropdownPanel,
|
|
4793
|
+
viewContainerRef: this.viewContainerRef,
|
|
4794
|
+
width: 'origin',
|
|
4795
|
+
scrollBehavior: 'reposition'
|
|
4796
|
+
});
|
|
4797
|
+
// Outside click / Escape / detach → close (and emit, as a user action).
|
|
4798
|
+
this._panelRef.closed.subscribe(() => this.hideDropDown(true));
|
|
4548
4799
|
}
|
|
4549
|
-
|
|
4550
|
-
|
|
4551
|
-
|
|
4800
|
+
_closeOverlay() {
|
|
4801
|
+
this._panelRef?.close();
|
|
4802
|
+
this._panelRef = null;
|
|
4552
4803
|
}
|
|
4553
4804
|
/**
|
|
4554
4805
|
* Resolve icon path with fallback to assets folder
|
|
@@ -5071,14 +5322,6 @@ class ZenduSelectComponent {
|
|
|
5071
5322
|
const option = this.findOptionByValue(this.selectModel);
|
|
5072
5323
|
return option?.secondaryText || null;
|
|
5073
5324
|
}
|
|
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
5325
|
/**
|
|
5083
5326
|
* Hide dropdown
|
|
5084
5327
|
*/
|
|
@@ -5220,13 +5463,13 @@ class ZenduSelectComponent {
|
|
|
5220
5463
|
return;
|
|
5221
5464
|
this.isSelectedAll = this.options.every(opt => opt.checked);
|
|
5222
5465
|
}
|
|
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 }); }
|
|
5466
|
+
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 }); }
|
|
5467
|
+
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: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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
5468
|
}
|
|
5226
5469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, decorators: [{
|
|
5227
5470
|
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: [{
|
|
5471
|
+
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"] }]
|
|
5472
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: ZenduOverlayService }, { type: i0.ViewContainerRef }], propDecorators: { selectModel: [{
|
|
5230
5473
|
type: Input
|
|
5231
5474
|
}], selectModelChange: [{
|
|
5232
5475
|
type: Output
|
|
@@ -5313,9 +5556,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
5313
5556
|
}], buttonTemplate: [{
|
|
5314
5557
|
type: ContentChild,
|
|
5315
5558
|
args: [ZenduSelectButtonDirective]
|
|
5316
|
-
}],
|
|
5317
|
-
type:
|
|
5318
|
-
args: ['
|
|
5559
|
+
}], selectWrapper: [{
|
|
5560
|
+
type: ViewChild,
|
|
5561
|
+
args: ['selectWrapper']
|
|
5562
|
+
}], dropdownPanel: [{
|
|
5563
|
+
type: ViewChild,
|
|
5564
|
+
args: ['dropdownPanel']
|
|
5319
5565
|
}] } });
|
|
5320
5566
|
|
|
5321
5567
|
class ZenduPaginationBarComponent {
|
|
@@ -5531,7 +5777,7 @@ class ZenduPhoneInputComponent {
|
|
|
5531
5777
|
}
|
|
5532
5778
|
}
|
|
5533
5779
|
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 }); }
|
|
5780
|
+
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: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5535
5781
|
}
|
|
5536
5782
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, decorators: [{
|
|
5537
5783
|
type: Component,
|
|
@@ -5642,7 +5888,7 @@ class ZenduMapPreviewComponent {
|
|
|
5642
5888
|
}
|
|
5643
5889
|
}
|
|
5644
5890
|
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 }); }
|
|
5891
|
+
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
5892
|
}
|
|
5647
5893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduMapPreviewComponent, decorators: [{
|
|
5648
5894
|
type: Component,
|
|
@@ -6500,7 +6746,7 @@ class ZenduDocScanner {
|
|
|
6500
6746
|
this._canvas.renderAll();
|
|
6501
6747
|
}
|
|
6502
6748
|
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 }); }
|
|
6749
|
+
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
6750
|
}
|
|
6505
6751
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDocScanner, decorators: [{
|
|
6506
6752
|
type: Component,
|
|
@@ -6932,7 +7178,7 @@ class ZenduFileUpload {
|
|
|
6932
7178
|
this.clear();
|
|
6933
7179
|
}
|
|
6934
7180
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6935
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFileUpload, isStandalone: false, selector: "zen-file-upload", inputs: { fileTypes: "fileTypes", uploadState: "uploadState" }, outputs: { uploadFile: "uploadFile", uploadCancelled: "uploadCancelled" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" } }, ngImport: i0, template: "<div class=\"component\">\n <div class=\"title\">\n @if (uploadState != 'done') {\n <span>Upload File</span>\n }\n @if (uploadState == 'done') {\n <span>Uploaded File</span>\n }\n </div>\n @if (uploadState != 'done') {\n <div class=\"drop-area\"\n [class.dragover]=\"isFileDragover\"\n >\n @if (!isFileSelected) {\n <div class=\"box\"\n >\n <div>\n <zen-icon class=\"doc-icon\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/document.svg\"></zen-icon>\n </div>\n <div>\n <div>Drag and Drop Here</div>\n <div>or</div>\n <span class=\"browse\"\n (click)=\"fileIp.click()\">Browse</span>\n <form><input type=\"file\"\n [accept]=\"fileTypes\"\n #fileIp\n (change)=\"onFileInput($event)\" /></form>\n </div>\n </div>\n }\n @if (isFileSelected) {\n <!-- File selected state -->\n @if (uploadState == '') {\n <div class=\"box-selected-file\">\n <div class=\"close-wrapper\">\n <zen-icon (click)=\"clear()\"\n class=\"close-icon\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n </div>\n <div>\n <zen-icon class=\"img-icon\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n </div>\n <div class=\"filename\">\n {{filename}}\n </div>\n </div>\n }\n <!-- Uploading state -->\n @if (uploadState == 'uploading') {\n <div class=\"box-file-uploading\">\n <div class=\"file-description\">\n <zen-icon class=\"img-icon-sm\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/image-sm.svg\"></zen-icon>\n <div>{{filename}}</div>\n </div>\n <div class=\"progress\">\n <div class=\"progress-bar-value\"></div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n\n <!-- Uploading done -->\n @if (uploadState == 'done') {\n <div\n class=\"box-upload-done\">\n <div class=\"file-description\">\n <zen-icon class=\"img-icon\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n <div class=\"filename\">{{filename}}</div>\n <div class=\"close-btn\">\n <zen-icon (click)=\"clear()\"\n class=\"close-icon\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n </div>\n </div>\n </div>\n }\n\n <div class=\"btn-upload-wrapper\">\n\n @if (uploadState == '') {\n <button\n (click)=\"uploadNow()\"\n class=\"button-flat full-width\"\n [disabled]=\"!isFileSelected\">\n Upload Now\n </button>\n }\n\n @if (uploadState == 'uploading') {\n <button\n (click)=\"cancelUploading()\"\n class=\"button-alert full-width\"\n [disabled]=\"!isFileSelected\">\n Cancel\n </button>\n }\n </div>\n\n</div>\n", styles: [".component{border-radius:4px;border:1px solid var(--color-white-tint-3, #e0e0e0);padding:24px;box-sizing:border-box;font-family:Roboto;width:100%;height:100%}.component .title{font-size:16px;font-style:normal;font-weight:500;margin-bottom:16px}.component .drop-area{border-radius:4px;border:1px dashed var(--color-white-tint-3, #e0e0e0);min-width:100px;margin-bottom:16px}.component .drop-area input[type=file]{display:none}.component .drop-area .box{padding:26px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400}.component .drop-area .box .browse{color:var(--color-primary, #2188d9);font-style:normal;font-weight:500;line-height:130%;letter-spacing:.28px;text-decoration:underline;cursor:pointer}.component .drop-area .doc-icon{width:28px;height:28px;background-color:var(--color-grey-primary, #4f4f4f)}.component .drop-area.dragover{border:1px dashed var(--color-primary, #2188d9)}.component .drop-area.dragover .doc-icon{background-color:var(--color-primary, #2188d9)}.component .drop-area .box-selected-file{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;margin:8px}.component .drop-area .box-selected-file .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .drop-area .box-selected-file .close-wrapper{width:100%;display:flex;justify-content:end;margin-bottom:8px}.component .drop-area .box-selected-file .close-wrapper .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .drop-area .box-selected-file .filename{color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400;margin-bottom:30px}.component .drop-area .box-file-uploading{padding:56px 28px;box-sizing:border-box}.component .drop-area .box-file-uploading .file-description{display:flex;align-items:center;gap:8px;font-size:14px;font-style:normal;font-weight:400;margin-bottom:5px}.component .drop-area .box-file-uploading .file-description .img-icon-sm{background-color:var(--color-grey-primary, #4f4f4f);width:28px;height:28px}.component .drop-area .box-file-uploading .progress{border-radius:4px;background-color:var(--color-white-tint-3, #e0e0e0);width:100%;height:5px;overflow:hidden}.component .drop-area .box-file-uploading .progress .progress-bar-value{width:100%;height:100%;background-color:var(--color-primary, #2188d9);animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%}.component .box-upload-done .file-description{display:flex;align-items:center;gap:4px;font-size:14px;font-style:normal;font-weight:400}.component .box-upload-done .file-description .filename{flex:1}.component .box-upload-done .file-description .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .box-upload-done .file-description .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .btn-upload-wrapper button{width:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}\n"], dependencies: [{ kind: "directive", type:
|
|
7181
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFileUpload, isStandalone: false, selector: "zen-file-upload", inputs: { fileTypes: "fileTypes", uploadState: "uploadState" }, outputs: { uploadFile: "uploadFile", uploadCancelled: "uploadCancelled" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" } }, ngImport: i0, template: "<div class=\"component\">\n <div class=\"title\">\n @if (uploadState != 'done') {\n <span>Upload File</span>\n }\n @if (uploadState == 'done') {\n <span>Uploaded File</span>\n }\n </div>\n @if (uploadState != 'done') {\n <div class=\"drop-area\"\n [class.dragover]=\"isFileDragover\"\n >\n @if (!isFileSelected) {\n <div class=\"box\"\n >\n <div>\n <zen-icon class=\"doc-icon\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/document.svg\"></zen-icon>\n </div>\n <div>\n <div>Drag and Drop Here</div>\n <div>or</div>\n <span class=\"browse\"\n (click)=\"fileIp.click()\">Browse</span>\n <form><input type=\"file\"\n [accept]=\"fileTypes\"\n #fileIp\n (change)=\"onFileInput($event)\" /></form>\n </div>\n </div>\n }\n @if (isFileSelected) {\n <!-- File selected state -->\n @if (uploadState == '') {\n <div class=\"box-selected-file\">\n <div class=\"close-wrapper\">\n <zen-icon (click)=\"clear()\"\n class=\"close-icon\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n </div>\n <div>\n <zen-icon class=\"img-icon\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n </div>\n <div class=\"filename\">\n {{filename}}\n </div>\n </div>\n }\n <!-- Uploading state -->\n @if (uploadState == 'uploading') {\n <div class=\"box-file-uploading\">\n <div class=\"file-description\">\n <zen-icon class=\"img-icon-sm\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/image-sm.svg\"></zen-icon>\n <div>{{filename}}</div>\n </div>\n <div class=\"progress\">\n <div class=\"progress-bar-value\"></div>\n </div>\n </div>\n }\n }\n </div>\n }\n\n\n <!-- Uploading done -->\n @if (uploadState == 'done') {\n <div\n class=\"box-upload-done\">\n <div class=\"file-description\">\n <zen-icon class=\"img-icon\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/image.svg\"></zen-icon>\n <div class=\"filename\">{{filename}}</div>\n <div class=\"close-btn\">\n <zen-icon (click)=\"clear()\"\n class=\"close-icon\"\n src=\"https://storage.googleapis.com/ng-zenduit/icon/cross.svg\"></zen-icon>\n </div>\n </div>\n </div>\n }\n\n <div class=\"btn-upload-wrapper\">\n\n @if (uploadState == '') {\n <button\n (click)=\"uploadNow()\"\n class=\"button-flat full-width\"\n [disabled]=\"!isFileSelected\">\n Upload Now\n </button>\n }\n\n @if (uploadState == 'uploading') {\n <button\n (click)=\"cancelUploading()\"\n class=\"button-alert full-width\"\n [disabled]=\"!isFileSelected\">\n Cancel\n </button>\n }\n </div>\n\n</div>\n", styles: [".component{border-radius:4px;border:1px solid var(--color-white-tint-3, #e0e0e0);padding:24px;box-sizing:border-box;font-family:Roboto;width:100%;height:100%}.component .title{font-size:16px;font-style:normal;font-weight:500;margin-bottom:16px}.component .drop-area{border-radius:4px;border:1px dashed var(--color-white-tint-3, #e0e0e0);min-width:100px;margin-bottom:16px}.component .drop-area input[type=file]{display:none}.component .drop-area .box{padding:26px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400}.component .drop-area .box .browse{color:var(--color-primary, #2188d9);font-style:normal;font-weight:500;line-height:130%;letter-spacing:.28px;text-decoration:underline;cursor:pointer}.component .drop-area .doc-icon{width:28px;height:28px;background-color:var(--color-grey-primary, #4f4f4f)}.component .drop-area.dragover{border:1px dashed var(--color-primary, #2188d9)}.component .drop-area.dragover .doc-icon{background-color:var(--color-primary, #2188d9)}.component .drop-area .box-selected-file{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;margin:8px}.component .drop-area .box-selected-file .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .drop-area .box-selected-file .close-wrapper{width:100%;display:flex;justify-content:end;margin-bottom:8px}.component .drop-area .box-selected-file .close-wrapper .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .drop-area .box-selected-file .filename{color:var(--color-grey-primary, #4f4f4f);font-size:14px;font-style:normal;font-weight:400;margin-bottom:30px}.component .drop-area .box-file-uploading{padding:56px 28px;box-sizing:border-box}.component .drop-area .box-file-uploading .file-description{display:flex;align-items:center;gap:8px;font-size:14px;font-style:normal;font-weight:400;margin-bottom:5px}.component .drop-area .box-file-uploading .file-description .img-icon-sm{background-color:var(--color-grey-primary, #4f4f4f);width:28px;height:28px}.component .drop-area .box-file-uploading .progress{border-radius:4px;background-color:var(--color-white-tint-3, #e0e0e0);width:100%;height:5px;overflow:hidden}.component .drop-area .box-file-uploading .progress .progress-bar-value{width:100%;height:100%;background-color:var(--color-primary, #2188d9);animation:indeterminateAnimation 1s infinite linear;transform-origin:0% 50%}.component .box-upload-done .file-description{display:flex;align-items:center;gap:4px;font-size:14px;font-style:normal;font-weight:400}.component .box-upload-done .file-description .filename{flex:1}.component .box-upload-done .file-description .close-icon{background-color:var(--color-error-primary, #dc3e33);cursor:pointer}.component .box-upload-done .file-description .img-icon{background-color:var(--color-grey-primary, #4f4f4f);width:52px;height:52px}.component .btn-upload-wrapper button{width:100%}@keyframes indeterminateAnimation{0%{transform:translate(0) scaleX(0)}40%{transform:translate(0) scaleX(.4)}to{transform:translate(100%) scaleX(.5)}}\n"], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
6936
7182
|
}
|
|
6937
7183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFileUpload, decorators: [{
|
|
6938
7184
|
type: Component,
|
|
@@ -7017,7 +7263,7 @@ class ZenduProgress {
|
|
|
7017
7263
|
return this.sizeConfig.containerSize / 2 + this.sizeConfig.strokeWidth;
|
|
7018
7264
|
}
|
|
7019
7265
|
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 }); }
|
|
7266
|
+
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
7267
|
}
|
|
7022
7268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduProgress, decorators: [{
|
|
7023
7269
|
type: Component,
|
|
@@ -7194,7 +7440,7 @@ class ZenduLocationSearch {
|
|
|
7194
7440
|
}
|
|
7195
7441
|
}
|
|
7196
7442
|
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:
|
|
7443
|
+
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: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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
7444
|
}
|
|
7199
7445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduLocationSearch, decorators: [{
|
|
7200
7446
|
type: Component,
|
|
@@ -7749,7 +7995,7 @@ class ZenSnapshotPlayerComponent {
|
|
|
7749
7995
|
clearTimeout(this._timer);
|
|
7750
7996
|
}
|
|
7751
7997
|
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 }); }
|
|
7998
|
+
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
7999
|
}
|
|
7754
8000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSnapshotPlayerComponent, decorators: [{
|
|
7755
8001
|
type: Component,
|
|
@@ -8669,7 +8915,7 @@ class ZenduAvatarComponent {
|
|
|
8669
8915
|
};
|
|
8670
8916
|
}
|
|
8671
8917
|
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 }); }
|
|
8918
|
+
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
8919
|
}
|
|
8674
8920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarComponent, decorators: [{
|
|
8675
8921
|
type: Component,
|
|
@@ -8696,7 +8942,7 @@ class ZenduAvatarGroupComponent {
|
|
|
8696
8942
|
this.showAddButton = false;
|
|
8697
8943
|
}
|
|
8698
8944
|
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 }); }
|
|
8945
|
+
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
8946
|
}
|
|
8701
8947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarGroupComponent, decorators: [{
|
|
8702
8948
|
type: Component,
|
|
@@ -8721,7 +8967,7 @@ class ZenduAvatarLabelGroupComponent {
|
|
|
8721
8967
|
return this.size;
|
|
8722
8968
|
}
|
|
8723
8969
|
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 }); }
|
|
8970
|
+
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
8971
|
}
|
|
8726
8972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarLabelGroupComponent, decorators: [{
|
|
8727
8973
|
type: Component,
|
|
@@ -8758,7 +9004,7 @@ class ZenduAvatarProfilePhotoComponent {
|
|
|
8758
9004
|
return !this.src && !this.text;
|
|
8759
9005
|
}
|
|
8760
9006
|
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 }); }
|
|
9007
|
+
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
9008
|
}
|
|
8763
9009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarProfilePhotoComponent, decorators: [{
|
|
8764
9010
|
type: Component,
|
|
@@ -8997,7 +9243,7 @@ class ZenBadgeComponent {
|
|
|
8997
9243
|
this.remove.emit();
|
|
8998
9244
|
}
|
|
8999
9245
|
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 }); }
|
|
9246
|
+
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
9247
|
}
|
|
9002
9248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenBadgeComponent, decorators: [{
|
|
9003
9249
|
type: Component,
|
|
@@ -9437,7 +9683,7 @@ class ZenTooltipDirective {
|
|
|
9437
9683
|
];
|
|
9438
9684
|
}
|
|
9439
9685
|
}
|
|
9440
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, deps: [{ token: i1
|
|
9686
|
+
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
9687
|
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
9688
|
}
|
|
9443
9689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, decorators: [{
|
|
@@ -9446,7 +9692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
9446
9692
|
selector: '[zenTooltip]',
|
|
9447
9693
|
standalone: false
|
|
9448
9694
|
}]
|
|
9449
|
-
}], ctorParameters: () => [{ type: i1
|
|
9695
|
+
}], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { text: [{
|
|
9450
9696
|
type: Input,
|
|
9451
9697
|
args: ['zenTooltip']
|
|
9452
9698
|
}], tooltipSupportingText: [{
|
|
@@ -9941,7 +10187,7 @@ class ZenStepBaseComponent {
|
|
|
9941
10187
|
}
|
|
9942
10188
|
}
|
|
9943
10189
|
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 }); }
|
|
10190
|
+
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
10191
|
}
|
|
9946
10192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenStepBaseComponent, decorators: [{
|
|
9947
10193
|
type: Component,
|
|
@@ -10280,5 +10526,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
10280
10526
|
* Generated bundle index. Do not edit.
|
|
10281
10527
|
*/
|
|
10282
10528
|
|
|
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 };
|
|
10529
|
+
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
10530
|
//# sourceMappingURL=ng-zenduit.mjs.map
|