ng-zenduit 2.3.15 → 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
CHANGED
|
@@ -421,11 +421,11 @@ class ZenduCheckboxComponent {
|
|
|
421
421
|
this.checkedChange.emit(this.checked);
|
|
422
422
|
}
|
|
423
423
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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: [".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 }); }
|
|
425
425
|
}
|
|
426
426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCheckboxComponent, decorators: [{
|
|
427
427
|
type: Component,
|
|
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: [".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"] }]
|
|
429
429
|
}], propDecorators: { checked: [{
|
|
430
430
|
type: Input
|
|
431
431
|
}], checkedChange: [{
|
|
@@ -1423,11 +1423,11 @@ class ZenduSearchBoxComponent {
|
|
|
1423
1423
|
return null;
|
|
1424
1424
|
}
|
|
1425
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 }); }
|
|
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 <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 }); }
|
|
1427
1427
|
}
|
|
1428
1428
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, decorators: [{
|
|
1429
1429
|
type: Component,
|
|
1430
|
-
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"] }]
|
|
1431
1431
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { text: [{
|
|
1432
1432
|
type: Input
|
|
1433
1433
|
}], textChange: [{
|
|
@@ -9691,13 +9691,15 @@ class ZenTooltipDirective {
|
|
|
9691
9691
|
this.tooltipPosition = 'top';
|
|
9692
9692
|
this.tooltipTheme = 'dark';
|
|
9693
9693
|
this.tooltipDisabled = false;
|
|
9694
|
+
this.tooltipDelay = 0;
|
|
9694
9695
|
this._overlayRef = null;
|
|
9695
9696
|
this._tooltipRef = null;
|
|
9697
|
+
this._showTimeoutId = null;
|
|
9696
9698
|
}
|
|
9697
9699
|
onMouseEnter() {
|
|
9698
9700
|
if (this.tooltipDisabled || !this.text)
|
|
9699
9701
|
return;
|
|
9700
|
-
this.
|
|
9702
|
+
this._scheduleShow();
|
|
9701
9703
|
}
|
|
9702
9704
|
onMouseLeave() {
|
|
9703
9705
|
this._hide();
|
|
@@ -9705,7 +9707,7 @@ class ZenTooltipDirective {
|
|
|
9705
9707
|
onFocus() {
|
|
9706
9708
|
if (this.tooltipDisabled || !this.text)
|
|
9707
9709
|
return;
|
|
9708
|
-
this.
|
|
9710
|
+
this._scheduleShow();
|
|
9709
9711
|
}
|
|
9710
9712
|
onBlur() {
|
|
9711
9713
|
this._hide();
|
|
@@ -9713,6 +9715,19 @@ class ZenTooltipDirective {
|
|
|
9713
9715
|
ngOnDestroy() {
|
|
9714
9716
|
this._hide();
|
|
9715
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
|
+
}
|
|
9716
9731
|
_show() {
|
|
9717
9732
|
if (this._overlayRef)
|
|
9718
9733
|
return;
|
|
@@ -9731,6 +9746,10 @@ class ZenTooltipDirective {
|
|
|
9731
9746
|
this._tooltipRef.changeDetectorRef.markForCheck();
|
|
9732
9747
|
}
|
|
9733
9748
|
_hide() {
|
|
9749
|
+
if (this._showTimeoutId !== null) {
|
|
9750
|
+
clearTimeout(this._showTimeoutId);
|
|
9751
|
+
this._showTimeoutId = null;
|
|
9752
|
+
}
|
|
9734
9753
|
if (this._overlayRef) {
|
|
9735
9754
|
this._overlayRef.dispose();
|
|
9736
9755
|
this._overlayRef = null;
|
|
@@ -9786,7 +9805,7 @@ class ZenTooltipDirective {
|
|
|
9786
9805
|
}
|
|
9787
9806
|
}
|
|
9788
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 }); }
|
|
9789
|
-
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 }); }
|
|
9790
9809
|
}
|
|
9791
9810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, decorators: [{
|
|
9792
9811
|
type: Directive,
|
|
@@ -9805,6 +9824,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
9805
9824
|
type: Input
|
|
9806
9825
|
}], tooltipDisabled: [{
|
|
9807
9826
|
type: Input
|
|
9827
|
+
}], tooltipDelay: [{
|
|
9828
|
+
type: Input
|
|
9808
9829
|
}], onMouseEnter: [{
|
|
9809
9830
|
type: HostListener,
|
|
9810
9831
|
args: ['mouseenter']
|