ng-zenduit 2.3.12 → 2.3.16
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 +94 -10
- package/fesm2022/ng-zenduit.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ng-zenduit.d.ts +27 -3
package/fesm2022/ng-zenduit.mjs
CHANGED
|
@@ -221,8 +221,18 @@ class ZenduOverlayService {
|
|
|
221
221
|
if (config.minWidth != null) {
|
|
222
222
|
overlayConfig.minWidth = config.minWidth;
|
|
223
223
|
}
|
|
224
|
+
if (config.minHeight != null) {
|
|
225
|
+
overlayConfig.minHeight = config.minHeight;
|
|
226
|
+
}
|
|
224
227
|
const overlayRef = this._overlay.create(overlayConfig);
|
|
225
228
|
overlayRef.attach(new TemplatePortal(config.content, config.viewContainerRef));
|
|
229
|
+
// scrollBehavior: 'block' — freeze the trigger's scroll container while
|
|
230
|
+
// the panel is open (mat-select-style). CDK's BlockScrollStrategy only
|
|
231
|
+
// locks <html>, which is useless in an app-shell that scrolls inside a
|
|
232
|
+
// nested overflow:auto pane, so we lock that pane directly instead.
|
|
233
|
+
const unlockScroll = config.scrollBehavior === 'block'
|
|
234
|
+
? this._lockScrollContainer(originEl)
|
|
235
|
+
: null;
|
|
226
236
|
const closed = new Subject();
|
|
227
237
|
const destroyed = new Subject();
|
|
228
238
|
// Ignore the pointer interaction that OPENED the panel. open() is
|
|
@@ -305,6 +315,7 @@ class ZenduOverlayService {
|
|
|
305
315
|
closed: closed.asObservable(),
|
|
306
316
|
updatePosition: () => overlayRef.updatePosition(),
|
|
307
317
|
close: () => {
|
|
318
|
+
unlockScroll?.();
|
|
308
319
|
removeViewportListeners();
|
|
309
320
|
destroyed.next();
|
|
310
321
|
destroyed.complete();
|
|
@@ -329,6 +340,47 @@ class ZenduOverlayService {
|
|
|
329
340
|
{ originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offsetY }
|
|
330
341
|
];
|
|
331
342
|
}
|
|
343
|
+
/**
|
|
344
|
+
* Lock the trigger's nearest scrollable ancestor (or the document) with
|
|
345
|
+
* `overflow: hidden` so the page can't scroll while the panel is open, and
|
|
346
|
+
* pad for the now-missing scrollbar so content doesn't jump. Returns an
|
|
347
|
+
* idempotent restore fn that puts the inline styles back.
|
|
348
|
+
*/
|
|
349
|
+
_lockScrollContainer(originEl) {
|
|
350
|
+
const el = this._findScrollContainer(originEl);
|
|
351
|
+
if (!el) {
|
|
352
|
+
return () => { };
|
|
353
|
+
}
|
|
354
|
+
const prevOverflow = el.style.overflow;
|
|
355
|
+
const prevPaddingRight = el.style.paddingRight;
|
|
356
|
+
const scrollbarWidth = el.offsetWidth - el.clientWidth;
|
|
357
|
+
el.style.overflow = 'hidden';
|
|
358
|
+
if (scrollbarWidth > 0) {
|
|
359
|
+
const computed = getComputedStyle(el).paddingRight;
|
|
360
|
+
el.style.paddingRight = `calc(${computed} + ${scrollbarWidth}px)`;
|
|
361
|
+
}
|
|
362
|
+
return () => {
|
|
363
|
+
el.style.overflow = prevOverflow;
|
|
364
|
+
el.style.paddingRight = prevPaddingRight;
|
|
365
|
+
};
|
|
366
|
+
}
|
|
367
|
+
/**
|
|
368
|
+
* Walk up from the trigger to the first ancestor that actually scrolls
|
|
369
|
+
* (overflow-y auto/scroll AND content taller than the box). Falls back to
|
|
370
|
+
* the document scrolling element so block always has something to lock.
|
|
371
|
+
*/
|
|
372
|
+
_findScrollContainer(originEl) {
|
|
373
|
+
let node = originEl.parentElement;
|
|
374
|
+
while (node && node !== document.body && node !== document.documentElement) {
|
|
375
|
+
const overflowY = getComputedStyle(node).overflowY;
|
|
376
|
+
const scrolls = overflowY === 'auto' || overflowY === 'scroll';
|
|
377
|
+
if (scrolls && node.scrollHeight > node.clientHeight) {
|
|
378
|
+
return node;
|
|
379
|
+
}
|
|
380
|
+
node = node.parentElement;
|
|
381
|
+
}
|
|
382
|
+
return document.scrollingElement ?? document.documentElement;
|
|
383
|
+
}
|
|
332
384
|
_panelClasses(extra) {
|
|
333
385
|
const classes = ['zen-overlay-panel'];
|
|
334
386
|
if (Array.isArray(extra)) {
|
|
@@ -369,11 +421,11 @@ class ZenduCheckboxComponent {
|
|
|
369
421
|
this.checkedChange.emit(this.checked);
|
|
370
422
|
}
|
|
371
423
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 }); }
|
|
424
|
+
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: [":host{display:inline-block}.checkbox-component{display:inline-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 }); }
|
|
373
425
|
}
|
|
374
426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCheckboxComponent, decorators: [{
|
|
375
427
|
type: Component,
|
|
376
|
-
args: [{ selector: 'zen-checkbox', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
428
|
+
args: [{ selector: 'zen-checkbox', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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: [":host{display:inline-block}.checkbox-component{display:inline-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"] }]
|
|
377
429
|
}], propDecorators: { checked: [{
|
|
378
430
|
type: Input
|
|
379
431
|
}], checkedChange: [{
|
|
@@ -1371,11 +1423,11 @@ class ZenduSearchBoxComponent {
|
|
|
1371
1423
|
return null;
|
|
1372
1424
|
}
|
|
1373
1425
|
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 }); }
|
|
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
|
|
1426
|
+
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 [class.disabled]=\"disabled\">\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 .close-icon{position:absolute;top:50%;right:6px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1;background:#fff;padding:4px 6px;border-radius:4px}.search-box-component.disabled .close-icon{background:#f9fafb}\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 }); }
|
|
1375
1427
|
}
|
|
1376
1428
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, decorators: [{
|
|
1377
1429
|
type: Component,
|
|
1378
|
-
args: [{ selector: 'zen-search-box', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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
|
|
1430
|
+
args: [{ selector: 'zen-search-box', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"search-box-component\"\n [class.has-text]=\"text\"\n [class.disabled]=\"disabled\">\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 .close-icon{position:absolute;top:50%;right:6px;transform:translateY(-50%);color:#828282;font-size:20px;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1;background:#fff;padding:4px 6px;border-radius:4px}.search-box-component.disabled .close-icon{background:#f9fafb}\n"] }]
|
|
1379
1431
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { text: [{
|
|
1380
1432
|
type: Input
|
|
1381
1433
|
}], textChange: [{
|
|
@@ -2862,8 +2914,11 @@ class ZenduDatePickerDropdownComponent {
|
|
|
2862
2914
|
return formatted;
|
|
2863
2915
|
}
|
|
2864
2916
|
formatTime(date) {
|
|
2865
|
-
|
|
2866
|
-
|
|
2917
|
+
// Normalize through moment so a string/moment input (the declared type is
|
|
2918
|
+
// Date, but consumers often bind ISO strings) doesn't break native getters.
|
|
2919
|
+
const mDate = moment(date);
|
|
2920
|
+
let h = mDate.hours();
|
|
2921
|
+
const m = mDate.minutes();
|
|
2867
2922
|
const period = h >= 12 ? 'PM' : 'AM';
|
|
2868
2923
|
if (h === 0)
|
|
2869
2924
|
h = 12;
|
|
@@ -3637,6 +3692,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3637
3692
|
type: Input
|
|
3638
3693
|
}] } });
|
|
3639
3694
|
|
|
3695
|
+
// Lets a tall filter panel clamp to the viewport and scroll instead of being
|
|
3696
|
+
// pushed off-screen. Gates CDK's flexible path; not the panel's actual height.
|
|
3697
|
+
const FILTER_PANEL_MIN_HEIGHT = 120;
|
|
3640
3698
|
class ZenduFilterComponent {
|
|
3641
3699
|
set isVisible(open) {
|
|
3642
3700
|
open = !!open;
|
|
@@ -3741,6 +3799,7 @@ class ZenduFilterComponent {
|
|
|
3741
3799
|
// The panel has its own fixed width (.filter-menu); let it size to content
|
|
3742
3800
|
// and the overlay's flexible dimensions clamp it on small viewports.
|
|
3743
3801
|
width: 'auto',
|
|
3802
|
+
minHeight: FILTER_PANEL_MIN_HEIGHT,
|
|
3744
3803
|
scrollBehavior: 'reposition',
|
|
3745
3804
|
positions: this._buildConnectedPositions(),
|
|
3746
3805
|
});
|
|
@@ -4827,7 +4886,11 @@ class ZenduSelectComponent {
|
|
|
4827
4886
|
width: 'origin',
|
|
4828
4887
|
minWidth: this.panelMinWidth,
|
|
4829
4888
|
panelClass: this.panelClass,
|
|
4830
|
-
|
|
4889
|
+
// Freeze the page while the dropdown is open (mat-select-style) instead
|
|
4890
|
+
// of chasing the trigger on scroll. The overlay service locks the
|
|
4891
|
+
// trigger's nearest scroll container, which works in app shells that
|
|
4892
|
+
// scroll inner panes rather than the document root.
|
|
4893
|
+
scrollBehavior: 'block'
|
|
4831
4894
|
});
|
|
4832
4895
|
// Outside click / Escape / detach → close (and emit, as a user action).
|
|
4833
4896
|
this._panelRef.closed.subscribe(() => this.hideDropDown(true));
|
|
@@ -9628,13 +9691,15 @@ class ZenTooltipDirective {
|
|
|
9628
9691
|
this.tooltipPosition = 'top';
|
|
9629
9692
|
this.tooltipTheme = 'dark';
|
|
9630
9693
|
this.tooltipDisabled = false;
|
|
9694
|
+
this.tooltipDelay = 0;
|
|
9631
9695
|
this._overlayRef = null;
|
|
9632
9696
|
this._tooltipRef = null;
|
|
9697
|
+
this._showTimeoutId = null;
|
|
9633
9698
|
}
|
|
9634
9699
|
onMouseEnter() {
|
|
9635
9700
|
if (this.tooltipDisabled || !this.text)
|
|
9636
9701
|
return;
|
|
9637
|
-
this.
|
|
9702
|
+
this._scheduleShow();
|
|
9638
9703
|
}
|
|
9639
9704
|
onMouseLeave() {
|
|
9640
9705
|
this._hide();
|
|
@@ -9642,7 +9707,7 @@ class ZenTooltipDirective {
|
|
|
9642
9707
|
onFocus() {
|
|
9643
9708
|
if (this.tooltipDisabled || !this.text)
|
|
9644
9709
|
return;
|
|
9645
|
-
this.
|
|
9710
|
+
this._scheduleShow();
|
|
9646
9711
|
}
|
|
9647
9712
|
onBlur() {
|
|
9648
9713
|
this._hide();
|
|
@@ -9650,6 +9715,19 @@ class ZenTooltipDirective {
|
|
|
9650
9715
|
ngOnDestroy() {
|
|
9651
9716
|
this._hide();
|
|
9652
9717
|
}
|
|
9718
|
+
_scheduleShow() {
|
|
9719
|
+
if (this._overlayRef || this._showTimeoutId !== null)
|
|
9720
|
+
return;
|
|
9721
|
+
if (this.tooltipDelay > 0) {
|
|
9722
|
+
this._showTimeoutId = setTimeout(() => {
|
|
9723
|
+
this._showTimeoutId = null;
|
|
9724
|
+
this._show();
|
|
9725
|
+
}, this.tooltipDelay);
|
|
9726
|
+
}
|
|
9727
|
+
else {
|
|
9728
|
+
this._show();
|
|
9729
|
+
}
|
|
9730
|
+
}
|
|
9653
9731
|
_show() {
|
|
9654
9732
|
if (this._overlayRef)
|
|
9655
9733
|
return;
|
|
@@ -9668,6 +9746,10 @@ class ZenTooltipDirective {
|
|
|
9668
9746
|
this._tooltipRef.changeDetectorRef.markForCheck();
|
|
9669
9747
|
}
|
|
9670
9748
|
_hide() {
|
|
9749
|
+
if (this._showTimeoutId !== null) {
|
|
9750
|
+
clearTimeout(this._showTimeoutId);
|
|
9751
|
+
this._showTimeoutId = null;
|
|
9752
|
+
}
|
|
9671
9753
|
if (this._overlayRef) {
|
|
9672
9754
|
this._overlayRef.dispose();
|
|
9673
9755
|
this._overlayRef = null;
|
|
@@ -9723,7 +9805,7 @@ class ZenTooltipDirective {
|
|
|
9723
9805
|
}
|
|
9724
9806
|
}
|
|
9725
9807
|
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 }); }
|
|
9726
|
-
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 }); }
|
|
9808
|
+
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", tooltipDelay: "tooltipDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 }); }
|
|
9727
9809
|
}
|
|
9728
9810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, decorators: [{
|
|
9729
9811
|
type: Directive,
|
|
@@ -9742,6 +9824,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
9742
9824
|
type: Input
|
|
9743
9825
|
}], tooltipDisabled: [{
|
|
9744
9826
|
type: Input
|
|
9827
|
+
}], tooltipDelay: [{
|
|
9828
|
+
type: Input
|
|
9745
9829
|
}], onMouseEnter: [{
|
|
9746
9830
|
type: HostListener,
|
|
9747
9831
|
args: ['mouseenter']
|