ng-zenduit 2.1.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ng-zenduit.mjs +280 -288
- package/fesm2022/ng-zenduit.mjs.map +1 -1
- package/package.json +5 -6
- package/types/ng-zenduit.d.ts +2559 -0
- package/esm2022/lib/avatar/zendu-avatar-group.component.mjs +0 -26
- package/esm2022/lib/avatar/zendu-avatar-label-group.component.mjs +0 -37
- package/esm2022/lib/avatar/zendu-avatar-profile-photo.component.mjs +0 -30
- package/esm2022/lib/avatar/zendu-avatar.component.mjs +0 -44
- package/esm2022/lib/badge/zen-badge.component.mjs +0 -106
- package/esm2022/lib/button/zen-button.component.mjs +0 -97
- package/esm2022/lib/card-block/zendu-card-block.component.mjs +0 -21
- package/esm2022/lib/chart/zen-chart.component.mjs +0 -209
- package/esm2022/lib/chart/zen-chart.types.mjs +0 -2
- package/esm2022/lib/checkbox/zendu-checkbox.component.mjs +0 -52
- package/esm2022/lib/colorpicker/zendu-colorpicker.component.mjs +0 -107
- package/esm2022/lib/column-configuration/columnState.mjs +0 -2
- package/esm2022/lib/column-configuration/zendu-column-configuration.component.mjs +0 -118
- package/esm2022/lib/core/cevent.mjs +0 -20
- package/esm2022/lib/core/local.lock.mjs +0 -33
- package/esm2022/lib/core/thread.mjs +0 -10
- package/esm2022/lib/date-picker-dropdown/date-picker-dropdown.types.mjs +0 -3
- package/esm2022/lib/date-picker-dropdown/zendu-date-picker-dropdown.component.mjs +0 -665
- package/esm2022/lib/datepicker/date-picker-day.mjs +0 -2
- package/esm2022/lib/datepicker/date-picker-hint.mjs +0 -2
- package/esm2022/lib/datepicker/datepicker.mjs +0 -9
- package/esm2022/lib/datepicker/zendu-datepicker.component.mjs +0 -601
- package/esm2022/lib/doc-scanner/zendu-doc-scanner.component.mjs +0 -711
- package/esm2022/lib/dropdown-menu/zen-dropdown-menu.component.mjs +0 -267
- package/esm2022/lib/eld-status/zen-eld-status.component.mjs +0 -30
- package/esm2022/lib/file-upload/zendu-file-upload.component.mjs +0 -107
- package/esm2022/lib/file-uploader/file-uploader.types.mjs +0 -2
- package/esm2022/lib/file-uploader/zendu-file-uploader.component.mjs +0 -144
- package/esm2022/lib/filter/dateRange.mjs +0 -2
- package/esm2022/lib/filter/filtersConfig.mjs +0 -2
- package/esm2022/lib/filter/numberRange.mjs +0 -2
- package/esm2022/lib/filter/zendu-filter.component.mjs +0 -794
- package/esm2022/lib/groups/zendu-groups.component.mjs +0 -351
- package/esm2022/lib/icon/icon-config.mjs +0 -6
- package/esm2022/lib/icon/zendu-icon.component.mjs +0 -63
- package/esm2022/lib/input/zendu-input.component.mjs +0 -563
- package/esm2022/lib/live-view-player/flv-player/flv-player.component.mjs +0 -83
- package/esm2022/lib/live-view-player/flv-player/flv.mjs +0 -19
- package/esm2022/lib/live-view-player/hls-player/hls-player.component.mjs +0 -140
- package/esm2022/lib/live-view-player/html5-video-player/html5-video-player.component.mjs +0 -20
- package/esm2022/lib/live-view-player/live-view-player/live-view-player.component.mjs +0 -49
- package/esm2022/lib/live-view-player/player.control.mjs +0 -79
- package/esm2022/lib/live-view-player/snapshot-player/snapshot-player.component.mjs +0 -92
- package/esm2022/lib/live-view-player/web-rtc/web-rtc-player.component.mjs +0 -100
- package/esm2022/lib/live-view-player/web-rtc/web-rtc.mjs +0 -286
- package/esm2022/lib/local.lock.mjs +0 -33
- package/esm2022/lib/location-search/location.address.mjs +0 -2
- package/esm2022/lib/location-search/zendu-location-search.component.mjs +0 -130
- package/esm2022/lib/map/map.types.mjs +0 -2
- package/esm2022/lib/map/zendu-map.component.mjs +0 -129
- package/esm2022/lib/map-preview/zendu-map-preview.component.mjs +0 -30
- package/esm2022/lib/module-popup/zen-module-popup.component.mjs +0 -78
- package/esm2022/lib/nav-search/zen-nav-search.component.mjs +0 -41
- package/esm2022/lib/ng-zenduit.module.mjs +0 -334
- package/esm2022/lib/pagination-bar/pageItem.mjs +0 -2
- package/esm2022/lib/pagination-bar/zendu-pagination-bar.component.mjs +0 -77
- package/esm2022/lib/phone-input/zendu-phone-input.component.mjs +0 -151
- package/esm2022/lib/progress/zendu-progress.component.mjs +0 -85
- package/esm2022/lib/progress-steps/zen-progress-steps.component.mjs +0 -56
- package/esm2022/lib/progress-steps/zen-progress-steps.types.mjs +0 -2
- package/esm2022/lib/progress-steps/zen-step-base.component.mjs +0 -65
- package/esm2022/lib/radio-button/radio-button.component.mjs +0 -54
- package/esm2022/lib/search-box/zendu-search-box.component.mjs +0 -123
- package/esm2022/lib/select/templates/zendu-select-button.directive.mjs +0 -16
- package/esm2022/lib/select/templates/zendu-select-option.directive.mjs +0 -16
- package/esm2022/lib/select/templates/zendu-select-value.directive.mjs +0 -16
- package/esm2022/lib/select/zendu-select.component.mjs +0 -845
- package/esm2022/lib/services/geoconding.service.mjs +0 -61
- package/esm2022/lib/services/http.service.mjs +0 -88
- package/esm2022/lib/services/map.service.mjs +0 -181
- package/esm2022/lib/services/opencv.service.mjs +0 -82
- package/esm2022/lib/services/script.loader.service.mjs +0 -82
- package/esm2022/lib/services/zendu-notify.service.mjs +0 -92
- package/esm2022/lib/slider/zendu-slider.component.mjs +0 -166
- package/esm2022/lib/sort-header/zendu-sort-header.component.mjs +0 -36
- package/esm2022/lib/spinner/zendu-spinner.component.mjs +0 -16
- package/esm2022/lib/submodule-item/zen-submodule-item.component.mjs +0 -38
- package/esm2022/lib/subpage-item/zen-subpage-item.component.mjs +0 -56
- package/esm2022/lib/timepicker/zendu-timepicker.component.mjs +0 -327
- package/esm2022/lib/toggle/zendu-toggle.component.mjs +0 -40
- package/esm2022/lib/toggle-slide/zendu-toggle-slide.component.mjs +0 -27
- package/esm2022/lib/tooltip/zen-tooltip.component.mjs +0 -40
- package/esm2022/lib/tooltip/zen-tooltip.directive.mjs +0 -142
- package/esm2022/lib/util.mjs +0 -98
- package/esm2022/ng-zenduit.mjs +0 -5
- package/esm2022/public-api.mjs +0 -73
- package/index.d.ts +0 -5
- package/lib/avatar/zendu-avatar-group.component.d.ts +0 -10
- package/lib/avatar/zendu-avatar-label-group.component.d.ts +0 -16
- package/lib/avatar/zendu-avatar-profile-photo.component.d.ts +0 -12
- package/lib/avatar/zendu-avatar.component.d.ts +0 -17
- package/lib/badge/zen-badge.component.d.ts +0 -41
- package/lib/button/zen-button.component.d.ts +0 -16
- package/lib/card-block/zendu-card-block.component.d.ts +0 -9
- package/lib/chart/zen-chart.component.d.ts +0 -37
- package/lib/chart/zen-chart.types.d.ts +0 -7
- package/lib/checkbox/zendu-checkbox.component.d.ts +0 -20
- package/lib/colorpicker/zendu-colorpicker.component.d.ts +0 -28
- package/lib/column-configuration/columnState.d.ts +0 -8
- package/lib/column-configuration/zendu-column-configuration.component.d.ts +0 -43
- package/lib/core/cevent.d.ts +0 -7
- package/lib/core/local.lock.d.ts +0 -8
- package/lib/core/thread.d.ts +0 -3
- package/lib/date-picker-dropdown/date-picker-dropdown.types.d.ts +0 -19
- package/lib/date-picker-dropdown/zendu-date-picker-dropdown.component.d.ts +0 -113
- package/lib/datepicker/date-picker-day.d.ts +0 -9
- package/lib/datepicker/date-picker-hint.d.ts +0 -5
- package/lib/datepicker/datepicker.d.ts +0 -7
- package/lib/datepicker/zendu-datepicker.component.d.ts +0 -116
- package/lib/doc-scanner/zendu-doc-scanner.component.d.ts +0 -93
- package/lib/dropdown-menu/zen-dropdown-menu.component.d.ts +0 -63
- package/lib/eld-status/zen-eld-status.component.d.ts +0 -9
- package/lib/file-upload/zendu-file-upload.component.d.ts +0 -28
- package/lib/file-uploader/file-uploader.types.d.ts +0 -7
- package/lib/file-uploader/zendu-file-uploader.component.d.ts +0 -27
- package/lib/filter/dateRange.d.ts +0 -4
- package/lib/filter/filtersConfig.d.ts +0 -130
- package/lib/filter/numberRange.d.ts +0 -4
- package/lib/filter/zendu-filter.component.d.ts +0 -83
- package/lib/groups/zendu-groups.component.d.ts +0 -51
- package/lib/icon/icon-config.d.ts +0 -8
- package/lib/icon/zendu-icon.component.d.ts +0 -19
- package/lib/input/zendu-input.component.d.ts +0 -250
- package/lib/live-view-player/flv-player/flv-player.component.d.ts +0 -20
- package/lib/live-view-player/flv-player/flv.d.ts +0 -320
- package/lib/live-view-player/hls-player/hls-player.component.d.ts +0 -25
- package/lib/live-view-player/html5-video-player/html5-video-player.component.d.ts +0 -10
- package/lib/live-view-player/live-view-player/live-view-player.component.d.ts +0 -22
- package/lib/live-view-player/player.control.d.ts +0 -53
- package/lib/live-view-player/snapshot-player/snapshot-player.component.d.ts +0 -30
- package/lib/live-view-player/web-rtc/web-rtc-player.component.d.ts +0 -28
- package/lib/live-view-player/web-rtc/web-rtc.d.ts +0 -52
- package/lib/local.lock.d.ts +0 -8
- package/lib/location-search/location.address.d.ts +0 -12
- package/lib/location-search/zendu-location-search.component.d.ts +0 -32
- package/lib/map/map.types.d.ts +0 -33
- package/lib/map/zendu-map.component.d.ts +0 -23
- package/lib/map-preview/zendu-map-preview.component.d.ts +0 -11
- package/lib/module-popup/zen-module-popup.component.d.ts +0 -24
- package/lib/nav-search/zen-nav-search.component.d.ts +0 -14
- package/lib/ng-zenduit.module.d.ts +0 -71
- package/lib/pagination-bar/pageItem.d.ts +0 -7
- package/lib/pagination-bar/zendu-pagination-bar.component.d.ts +0 -17
- package/lib/phone-input/zendu-phone-input.component.d.ts +0 -42
- package/lib/progress/zendu-progress.component.d.ts +0 -48
- package/lib/progress-steps/zen-progress-steps.component.d.ts +0 -16
- package/lib/progress-steps/zen-progress-steps.types.d.ts +0 -9
- package/lib/progress-steps/zen-step-base.component.d.ts +0 -24
- package/lib/radio-button/radio-button.component.d.ts +0 -20
- package/lib/search-box/zendu-search-box.component.d.ts +0 -25
- package/lib/select/templates/zendu-select-button.directive.d.ts +0 -8
- package/lib/select/templates/zendu-select-option.directive.d.ts +0 -8
- package/lib/select/templates/zendu-select-value.directive.d.ts +0 -8
- package/lib/select/zendu-select.component.d.ts +0 -398
- package/lib/services/geoconding.service.d.ts +0 -23
- package/lib/services/http.service.d.ts +0 -21
- package/lib/services/map.service.d.ts +0 -22
- package/lib/services/opencv.service.d.ts +0 -47
- package/lib/services/script.loader.service.d.ts +0 -11
- package/lib/services/zendu-notify.service.d.ts +0 -10
- package/lib/slider/zendu-slider.component.d.ts +0 -40
- package/lib/sort-header/zendu-sort-header.component.d.ts +0 -10
- package/lib/spinner/zendu-spinner.component.d.ts +0 -6
- package/lib/submodule-item/zen-submodule-item.component.d.ts +0 -13
- package/lib/subpage-item/zen-subpage-item.component.d.ts +0 -21
- package/lib/timepicker/zendu-timepicker.component.d.ts +0 -68
- package/lib/toggle/zendu-toggle.component.d.ts +0 -16
- package/lib/toggle-slide/zendu-toggle-slide.component.d.ts +0 -13
- package/lib/tooltip/zen-tooltip.component.d.ts +0 -13
- package/lib/tooltip/zen-tooltip.directive.d.ts +0 -28
- package/lib/util.d.ts +0 -13
- package/public-api.d.ts +0 -69
package/fesm2022/ng-zenduit.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter, Input, Output, Component, HostListener, forwardRef, HostBinding, ViewChild, InjectionToken, Inject, Directive, ContentChild, Optional, ViewEncapsulation,
|
|
2
|
+
import { Injectable, EventEmitter, Input, Output, ChangeDetectionStrategy, Component, HostListener, forwardRef, HostBinding, ViewChild, InjectionToken, Inject, Directive, ContentChild, Optional, ViewEncapsulation, NgModule } from '@angular/core';
|
|
3
3
|
import { show } from 'node-snackbar';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
@@ -9,7 +9,7 @@ import * as i2$2 from '@angular/cdk/drag-drop';
|
|
|
9
9
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
10
10
|
import { PhoneNumberUtil } from 'google-libphonenumber';
|
|
11
11
|
import * as i2 from '@ngx-translate/core';
|
|
12
|
-
import { TranslateModule
|
|
12
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
13
13
|
import moment from 'moment/moment';
|
|
14
14
|
import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
|
|
15
15
|
import * as i1$1 from '@angular/cdk/overlay';
|
|
@@ -18,13 +18,13 @@ import uniqBy from 'lodash.uniqby';
|
|
|
18
18
|
import { fabric } from 'fabric';
|
|
19
19
|
import { BehaviorSubject, Subject, Subscription, fromEvent } from 'rxjs';
|
|
20
20
|
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
21
|
-
import {
|
|
21
|
+
import { SignaturePadComponent } from '@almothafar/angular-signature-pad';
|
|
22
22
|
import * as i1$2 from '@angular/common/http';
|
|
23
|
-
import { HttpHeaders,
|
|
23
|
+
import { HttpHeaders, provideHttpClient, withXhr, withInterceptorsFromDi } from '@angular/common/http';
|
|
24
24
|
import HLS from 'hls.js';
|
|
25
|
-
import {
|
|
26
|
-
import * as
|
|
27
|
-
import { BaseChartDirective,
|
|
25
|
+
import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
|
|
26
|
+
import * as i1$3 from 'ng2-charts';
|
|
27
|
+
import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
|
|
28
28
|
|
|
29
29
|
class ZenNotifyService {
|
|
30
30
|
info(msg, duration = 5000, hasDismiss = true) {
|
|
@@ -105,10 +105,10 @@ class ZenNotifyService {
|
|
|
105
105
|
return '';
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
109
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
108
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenNotifyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
109
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenNotifyService, providedIn: 'root' }); }
|
|
110
110
|
}
|
|
111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenNotifyService, decorators: [{
|
|
112
112
|
type: Injectable,
|
|
113
113
|
args: [{
|
|
114
114
|
providedIn: 'root'
|
|
@@ -136,12 +136,12 @@ class ZenduCheckboxComponent {
|
|
|
136
136
|
this.indeterminate = false;
|
|
137
137
|
this.checkedChange.emit(this.checked);
|
|
138
138
|
}
|
|
139
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
140
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
139
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
140
|
+
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 }); }
|
|
141
141
|
}
|
|
142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCheckboxComponent, decorators: [{
|
|
143
143
|
type: Component,
|
|
144
|
-
args: [{ selector: 'zen-checkbox', template: "<div class=\"checkbox-component\"\n
|
|
144
|
+
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"] }]
|
|
145
145
|
}], propDecorators: { checked: [{
|
|
146
146
|
type: Input
|
|
147
147
|
}], checkedChange: [{
|
|
@@ -244,12 +244,12 @@ class ZenduColorPickerComponent {
|
|
|
244
244
|
this.color = color;
|
|
245
245
|
this.colorChange.emit(color);
|
|
246
246
|
}
|
|
247
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
248
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
247
|
+
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 }); }
|
|
248
|
+
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 }); }
|
|
249
249
|
}
|
|
250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduColorPickerComponent, decorators: [{
|
|
251
251
|
type: Component,
|
|
252
|
-
args: [{ selector: 'zen-colorpicker', template: "<div class=\"colorpicker-component\"\n
|
|
252
|
+
args: [{ selector: 'zen-colorpicker', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
253
253
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
|
|
254
254
|
type: Input
|
|
255
255
|
}], colorChange: [{
|
|
@@ -809,16 +809,16 @@ class ZenduInputComponent {
|
|
|
809
809
|
// Focus the input when leading icon is clicked
|
|
810
810
|
this.focusInput();
|
|
811
811
|
}
|
|
812
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
813
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
812
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduInputComponent, isStandalone: false, selector: "zen-input", inputs: { type: "type", variant: "variant", placeholder: "placeholder", label: "label", hintText: "hintText", leadingIcon: "leadingIcon", helpIcon: "helpIcon", helpTooltip: "helpTooltip", destructive: "destructive", errorMessage: "errorMessage", disabled: "disabled", required: "required", maxLength: "maxLength", minLength: "minLength", pattern: "pattern", autocomplete: "autocomplete", name: "name", id: "id", leadingDropdownOptions: "leadingDropdownOptions", leadingDropdownValue: "leadingDropdownValue", leadingDropdownPlaceholder: "leadingDropdownPlaceholder", trailingDropdownOptions: "trailingDropdownOptions", trailingDropdownValue: "trailingDropdownValue", trailingDropdownPlaceholder: "trailingDropdownPlaceholder", leadingText: "leadingText", trailingText: "trailingText", size: "size", showCharacterCount: "showCharacterCount", phoneMaxLength: "phoneMaxLength", phone: "phone", width: "width" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", inputKeydown: "inputKeydown", inputKeyup: "inputKeyup", leadingDropdownChange: "leadingDropdownChange", leadingDropdownValueChange: "leadingDropdownValueChange", trailingDropdownChange: "trailingDropdownChange", trailingDropdownValueChange: "trailingDropdownValueChange", helpIconClick: "helpIconClick", phoneChange: "phoneChange", validChange: "validChange", leadingIconClick: "leadingIconClick" }, host: { properties: { "class.zen-input-wrapper": "this.hostClass" } }, providers: [
|
|
814
814
|
{
|
|
815
815
|
provide: NG_VALUE_ACCESSOR,
|
|
816
816
|
useExisting: forwardRef(() => ZenduInputComponent),
|
|
817
817
|
multi: true
|
|
818
818
|
}
|
|
819
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-input-container\" [ngClass]=\"inputClasses\">\n <!-- Label -->\n <label *ngIf=\"showLabel\" \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 <span *ngIf=\"required\" class=\"required-indicator\">*</span>\n </label>\n \n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n \n <!-- Leading icon -->\n <i *ngIf=\"leadingIcon && variant === 'default'\" \n class=\"material-icons zen-input-leading-icon\"\n (click)=\"onLeadingIconClick($event)\">\n {{ leadingIcon }}\n </i>\n \n <!-- Leading dropdown -->\n <div *ngIf=\"variant === 'leading-dropdown'\" \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 \n <div class=\"zen-dropdown-menu\" \n *ngIf=\"leadingDropdownOpen\"\n [ngClass]=\"{'open': leadingDropdownOpen}\">\n <button *ngFor=\"let option of leadingDropdownOptions\"\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === leadingDropdownValue}\"\n (click)=\"onLeadingDropdownChange(option.value); $event.stopPropagation()\">\n <i *ngIf=\"option.icon\" class=\"material-icons option-icon\">{{ option.icon }}</i>\n {{ option.label | translate }}\n </button>\n </div>\n </div>\n \n <!-- Leading text -->\n <span *ngIf=\"variant === 'leading-text'\" \n class=\"zen-input-leading-text text text-md text-weight-regular\">\n {{ leadingText }}\n </span>\n \n <!-- Payment card icon -->\n <div *ngIf=\"variant === 'payment'\" \n class=\"zen-payment-card-icon\">\n <i class=\"material-icons card-icon\">payment</i>\n </div>\n \n <!-- Input content based on type -->\n <ng-container *ngIf=\"type === 'tel'; else defaultInputTemplate\">\n <ng-container *ngTemplateOutlet=\"phoneInputTemplate\"></ng-container>\n </ng-container>\n \n <!-- Default input template -->\n <ng-template #defaultInputTemplate>\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 [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 </ng-template>\n \n <!-- Trailing elements container -->\n <div class=\"zen-input-trailing-container\">\n <!-- Trailing text -->\n <span *ngIf=\"variant === 'trailing-text'\"\n class=\"zen-input-trailing-text text text-md text-weight-regular\">\n {{ trailingText }}\n </span>\n\n <!-- Character counter -->\n <span *ngIf=\"showCharacterCount && !helpIcon && variant === 'default'\"\n class=\"zen-character-count text text-sm text-weight-regular\">\n {{ characterCount }}\n </span>\n \n <!-- Help icon -->\n <button *ngIf=\"helpIcon && variant !== 'trailing-dropdown'\" \n type=\"button\"\n class=\"zen-help-icon\"\n [disabled]=\"disabled\"\n (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n <i class=\"material-icons-outlined\">help_outline</i>\n \n <!-- Help tooltip -->\n <div class=\"zen-help-tooltip\" \n *ngIf=\"showHelpTooltip\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n </button>\n \n <!-- Trailing dropdown -->\n <div *ngIf=\"variant === 'trailing-dropdown'\" \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 \n <div class=\"zen-dropdown-menu dropdown-menu-right\" \n *ngIf=\"trailingDropdownOpen\"\n [ngClass]=\"{'open': trailingDropdownOpen}\">\n <button *ngFor=\"let option of trailingDropdownOptions\"\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === trailingDropdownValue}\"\n (click)=\"onTrailingDropdownChange(option.value); $event.stopPropagation()\">\n <i *ngIf=\"option.icon\" class=\"material-icons option-icon\">{{ option.icon }}</i>\n {{ option.label | translate }}\n </button>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Hint text / Error message -->\n <div *ngIf=\"showHintText\" \n class=\"zen-input-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n <i *ngIf=\"destructive\" class=\"material-icons-outlined hint-icon\">error_outline</i>\n {{ displayHintText | translate }}\n </div>\n \n <!-- Phone Country Dropdown (for tel type) -->\n <div *ngIf=\"type === 'tel' && isPhoneDropdownExpanded\" \n class=\"zen-phone-dropdown-menu\">\n <div class=\"zen-phone-dropdown-list\">\n <!-- Countries List -->\n <button type=\"button\"\n class=\"zen-phone-dropdown-item\"\n *ngFor=\"let country of countryList\"\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</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<div *ngIf=\"leadingDropdownOpen || trailingDropdownOpen || isPhoneDropdownExpanded\" \n class=\"zen-dropdown-backdrop\" \n (click)=\"closeDropdowns(); hidePhoneDropdown()\"></div>", 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:#d0d5dd}.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:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.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:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:pointer}.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:hover:not(:disabled) 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 .zen-help-tooltip{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 .tooltip-content{background:#101828;color:#fff;padding:8px 12px;border-radius:8px;font-family:Inter,sans-serif;font-size:12px;line-height:18px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;max-width:200px;white-space:normal}.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.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
819
|
+
], 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') {\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 {\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 [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 <!-- Default input template -->\n\n <!-- Trailing elements container -->\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') {\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') {\n <button\n type=\"button\"\n class=\"zen-help-icon\"\n [disabled]=\"disabled\"\n (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <!-- Help tooltip -->\n @if (showHelpTooltip) {\n <div class=\"zen-help-tooltip\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n }\n </button>\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 </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}", 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:#d0d5dd}.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:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.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:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:pointer}.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:hover:not(:disabled) 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 .zen-help-tooltip{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 .tooltip-content{background:#101828;color:#fff;padding:8px 12px;border-radius:8px;font-family:Inter,sans-serif;font-size:12px;line-height:18px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;max-width:200px;white-space:normal}.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.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 }); }
|
|
820
820
|
}
|
|
821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduInputComponent, decorators: [{
|
|
822
822
|
type: Component,
|
|
823
823
|
args: [{ selector: 'zen-input', providers: [
|
|
824
824
|
{
|
|
@@ -826,7 +826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
826
826
|
useExisting: forwardRef(() => ZenduInputComponent),
|
|
827
827
|
multi: true
|
|
828
828
|
}
|
|
829
|
-
], template: "<div class=\"zen-input-container\" [ngClass]=\"inputClasses\">\n <!-- Label -->\n <label *ngIf=\"showLabel\" \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 <span *ngIf=\"required\" class=\"required-indicator\">*</span>\n </label>\n \n <!-- Input wrapper -->\n <div class=\"zen-input-field-wrapper\" (click)=\"focusInput()\">\n \n <!-- Leading icon -->\n <i *ngIf=\"leadingIcon && variant === 'default'\" \n class=\"material-icons zen-input-leading-icon\"\n (click)=\"onLeadingIconClick($event)\">\n {{ leadingIcon }}\n </i>\n \n <!-- Leading dropdown -->\n <div *ngIf=\"variant === 'leading-dropdown'\" \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 \n <div class=\"zen-dropdown-menu\" \n *ngIf=\"leadingDropdownOpen\"\n [ngClass]=\"{'open': leadingDropdownOpen}\">\n <button *ngFor=\"let option of leadingDropdownOptions\"\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === leadingDropdownValue}\"\n (click)=\"onLeadingDropdownChange(option.value); $event.stopPropagation()\">\n <i *ngIf=\"option.icon\" class=\"material-icons option-icon\">{{ option.icon }}</i>\n {{ option.label | translate }}\n </button>\n </div>\n </div>\n \n <!-- Leading text -->\n <span *ngIf=\"variant === 'leading-text'\" \n class=\"zen-input-leading-text text text-md text-weight-regular\">\n {{ leadingText }}\n </span>\n \n <!-- Payment card icon -->\n <div *ngIf=\"variant === 'payment'\" \n class=\"zen-payment-card-icon\">\n <i class=\"material-icons card-icon\">payment</i>\n </div>\n \n <!-- Input content based on type -->\n <ng-container *ngIf=\"type === 'tel'; else defaultInputTemplate\">\n <ng-container *ngTemplateOutlet=\"phoneInputTemplate\"></ng-container>\n </ng-container>\n \n <!-- Default input template -->\n <ng-template #defaultInputTemplate>\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 [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 </ng-template>\n \n <!-- Trailing elements container -->\n <div class=\"zen-input-trailing-container\">\n <!-- Trailing text -->\n <span *ngIf=\"variant === 'trailing-text'\"\n class=\"zen-input-trailing-text text text-md text-weight-regular\">\n {{ trailingText }}\n </span>\n\n <!-- Character counter -->\n <span *ngIf=\"showCharacterCount && !helpIcon && variant === 'default'\"\n class=\"zen-character-count text text-sm text-weight-regular\">\n {{ characterCount }}\n </span>\n \n <!-- Help icon -->\n <button *ngIf=\"helpIcon && variant !== 'trailing-dropdown'\" \n type=\"button\"\n class=\"zen-help-icon\"\n [disabled]=\"disabled\"\n (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n <i class=\"material-icons-outlined\">help_outline</i>\n \n <!-- Help tooltip -->\n <div class=\"zen-help-tooltip\" \n *ngIf=\"showHelpTooltip\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n </button>\n \n <!-- Trailing dropdown -->\n <div *ngIf=\"variant === 'trailing-dropdown'\" \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 \n <div class=\"zen-dropdown-menu dropdown-menu-right\" \n *ngIf=\"trailingDropdownOpen\"\n [ngClass]=\"{'open': trailingDropdownOpen}\">\n <button *ngFor=\"let option of trailingDropdownOptions\"\n type=\"button\"\n class=\"zen-dropdown-option\"\n [ngClass]=\"{'selected': option.value === trailingDropdownValue}\"\n (click)=\"onTrailingDropdownChange(option.value); $event.stopPropagation()\">\n <i *ngIf=\"option.icon\" class=\"material-icons option-icon\">{{ option.icon }}</i>\n {{ option.label | translate }}\n </button>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Hint text / Error message -->\n <div *ngIf=\"showHintText\" \n class=\"zen-input-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n <i *ngIf=\"destructive\" class=\"material-icons-outlined hint-icon\">error_outline</i>\n {{ displayHintText | translate }}\n </div>\n \n <!-- Phone Country Dropdown (for tel type) -->\n <div *ngIf=\"type === 'tel' && isPhoneDropdownExpanded\" \n class=\"zen-phone-dropdown-menu\">\n <div class=\"zen-phone-dropdown-list\">\n <!-- Countries List -->\n <button type=\"button\"\n class=\"zen-phone-dropdown-item\"\n *ngFor=\"let country of countryList\"\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</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<div *ngIf=\"leadingDropdownOpen || trailingDropdownOpen || isPhoneDropdownExpanded\" \n class=\"zen-dropdown-backdrop\" \n (click)=\"closeDropdowns(); hidePhoneDropdown()\"></div>", 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:#d0d5dd}.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:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.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:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:pointer}.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:hover:not(:disabled) 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 .zen-help-tooltip{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 .tooltip-content{background:#101828;color:#fff;padding:8px 12px;border-radius:8px;font-family:Inter,sans-serif;font-size:12px;line-height:18px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;max-width:200px;white-space:normal}.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.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"] }]
|
|
829
|
+
], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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') {\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 {\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 [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 <!-- Default input template -->\n\n <!-- Trailing elements container -->\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') {\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') {\n <button\n type=\"button\"\n class=\"zen-help-icon\"\n [disabled]=\"disabled\"\n (click)=\"onHelpIconClick($event); $event.stopPropagation()\">\n <i class=\"material-icons-outlined\">help_outline</i>\n <!-- Help tooltip -->\n @if (showHelpTooltip) {\n <div class=\"zen-help-tooltip\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tooltip-content\">\n {{ helpTooltip | translate }}\n </div>\n <div class=\"tooltip-arrow\"></div>\n </div>\n }\n </button>\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 </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}", 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:#d0d5dd}.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:#d0d5dd}.zen-input-container .zen-input-field-wrapper .zen-input-field:disabled::placeholder{color:#d0d5dd}.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:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;cursor:pointer}.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:hover:not(:disabled) 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 .zen-help-tooltip{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 .tooltip-content{background:#101828;color:#fff;padding:8px 12px;border-radius:8px;font-family:Inter,sans-serif;font-size:12px;line-height:18px;box-shadow:0 12px 16px #10182814,0 4px 6px #10182808;max-width:200px;white-space:normal}.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.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"] }]
|
|
830
830
|
}], propDecorators: { inputElement: [{
|
|
831
831
|
type: ViewChild,
|
|
832
832
|
args: ['inputElement']
|
|
@@ -1019,12 +1019,12 @@ class ZenduSearchBoxComponent {
|
|
|
1019
1019
|
}
|
|
1020
1020
|
return null;
|
|
1021
1021
|
}
|
|
1022
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1023
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1022
|
+
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 }); }
|
|
1023
|
+
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: 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: ZenduInputComponent, selector: "zen-input", inputs: ["type", "variant", "placeholder", "label", "hintText", "leadingIcon", "helpIcon", "helpTooltip", "destructive", "errorMessage", "disabled", "required", "maxLength", "minLength", "pattern", "autocomplete", "name", "id", "leadingDropdownOptions", "leadingDropdownValue", "leadingDropdownPlaceholder", "trailingDropdownOptions", "trailingDropdownValue", "trailingDropdownPlaceholder", "leadingText", "trailingText", "size", "showCharacterCount", "phoneMaxLength", "phone", "width"], outputs: ["valueChange", "inputFocus", "inputBlur", "inputKeydown", "inputKeyup", "leadingDropdownChange", "leadingDropdownValueChange", "trailingDropdownChange", "trailingDropdownValueChange", "helpIconClick", "phoneChange", "validChange", "leadingIconClick"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1024
1024
|
}
|
|
1025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSearchBoxComponent, decorators: [{
|
|
1026
1026
|
type: Component,
|
|
1027
|
-
args: [{ selector: 'zen-search-box', template: "<div class=\"search-box-component\"\n
|
|
1027
|
+
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.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"] }]
|
|
1028
1028
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { text: [{
|
|
1029
1029
|
type: Input
|
|
1030
1030
|
}], textChange: [{
|
|
@@ -1130,12 +1130,12 @@ class ZenduColumnConfigurationComponent {
|
|
|
1130
1130
|
.toLowerCase()
|
|
1131
1131
|
.includes(this.searchText.trim().toLowerCase()));
|
|
1132
1132
|
}
|
|
1133
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1134
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1133
|
+
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 }); }
|
|
1134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduColumnConfigurationComponent, isStandalone: false, selector: "zen-column-configuration", inputs: { configuration: "configuration", defaultConfiguration: "defaultConfiguration", dropdownPosition: "dropdownPosition" }, outputs: { configurationChange: "configurationChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-config-component\">\n <button class=\"button-basic button-icon\"\n [ngClass]=\"{ 'active': showPanel }\"\n (click)=\"togglePanel()\">\n <i class=\"material-icons\">view_column</i>\n </button>\n\n @if (showPanel) {\n <div\n class=\"action-menu column-config-menu\"\n [ngClass]=\"{'right': dropdownPosition === 'right'}\">\n <div class=\"action-menu-header\">\n <div class=\"title\">Manage Columns</div>\n <zen-search-box [(text)]=\"searchText\"\n (textChange)=\"filterItems()\"></zen-search-box>\n </div>\n <div class=\"action-menu-body dnd-container\"\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\">\n @for (config of filteredColumnsConfiguration; track config) {\n <div\n class=\"action-item-checkbox drag-item\"\n cdkDrag>\n <zen-checkbox class=\"flex-1\"\n [(checked)]=\"config.isVisible\"\n [label]=\"config.displayName\"></zen-checkbox>\n <i class=\"material-icons drag-icon\">drag_handle</i>\n </div>\n }\n </div>\n <div class=\"action-menu-footer\">\n <button (click)=\"reset()\"\n type=\"button\"\n class=\"button-stroked full-width\">Reset</button>\n <button (click)=\"apply()\"\n type=\"button\"\n class=\"button-flat full-width\">Apply</button>\n </div>\n </div>\n }\n</div>\n", styles: [".column-config-component{display:inline-block;position:relative}.column-config-component .column-config-menu{top:115%;width:300px}.column-config-component .column-config-menu.right{right:0}.column-config-component .column-config-menu .dnd-container{max-height:218px;overflow-y:auto}.column-config-component .column-config-menu .dnd-container .drag-item{justify-content:space-between}.column-config-component .column-config-menu .dnd-container .drag-item .drag-icon{cursor:move;color:#b8b9bc}.column-config-component .column-config-menu .dnd-container .dndDraggingSource{display:none}.column-config-component .column-config-menu .dnd-container .dndPlaceholder{background-color:#b8b9bc;display:block;min-height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1135
1135
|
}
|
|
1136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduColumnConfigurationComponent, decorators: [{
|
|
1137
1137
|
type: Component,
|
|
1138
|
-
args: [{ selector: 'zen-column-configuration', template: "<div class=\"column-config-component\">\n
|
|
1138
|
+
args: [{ selector: 'zen-column-configuration', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
1139
1139
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { configurationChange: [{
|
|
1140
1140
|
type: Output
|
|
1141
1141
|
}], configuration: [{
|
|
@@ -1197,14 +1197,14 @@ class ZenduIconComponent {
|
|
|
1197
1197
|
}
|
|
1198
1198
|
}
|
|
1199
1199
|
}
|
|
1200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1200
|
+
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 }); }
|
|
1201
|
+
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 }); }
|
|
1202
1202
|
}
|
|
1203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduIconComponent, decorators: [{
|
|
1204
1204
|
type: Component,
|
|
1205
1205
|
args: [{ selector: 'zen-icon', host: {
|
|
1206
1206
|
'[class.zen-icon--featured]': 'isFeatured'
|
|
1207
|
-
}, template: "
|
|
1207
|
+
}, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
1208
1208
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
1209
1209
|
type: Inject,
|
|
1210
1210
|
args: [ZEN_ICON_CONFIG]
|
|
@@ -1752,12 +1752,12 @@ class ZenduDatepickerComponent {
|
|
|
1752
1752
|
}
|
|
1753
1753
|
this.updateDays();
|
|
1754
1754
|
}
|
|
1755
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1756
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenduDatepickerComponent, 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 <ng-container *ngIf=\"!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 <div class=\"date-placeholder\"\n *ngIf=\"!date && showDate && !showTime\">\n {{\"Select Date\" | translate}}\n </div>\n <div class=\"date-placeholder\"\n *ngIf=\"!date && showTime && !showDate\">\n {{\"Select Time\" | translate}}\n </div>\n <div class=\"date-placeholder\"\n *ngIf=\"!date && showTime && showDate && showTime\">\n {{\"Select Date & Time\" | translate}}\n </div>\n\n <!-- Selected datetime -->\n <div *ngIf=\"date\">\n <span *ngIf=\"showDate\">{{formattedDate()}}</span>\n <span *ngIf=\"showTime\"> {{formattedTime()}}</span>\n </div>\n </div>\n\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 </ng-container>\n\n <!-- Box design datepicker toggle -->\n <ng-container *ngIf=\"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\n <!-- Datepicker icon, depends on picker type -->\n <zen-icon class=\"date-icon\"\n [src]=\"getIcon()\"\n [ngClass]=\"{'filled': date}\">\n </zen-icon>\n\n <div class=\"date-content new-box-design\">\n <!-- date placeholder -->\n\n <div class=\"date-placeholder\"\n *ngIf=\"!date && showDate && !showTime\">\n {{\"Select Date\" | translate}}\n </div>\n <div class=\"date-placeholder\"\n *ngIf=\"!date && showTime && !showDate\">\n {{\"Select Time\" | translate}}\n </div>\n <div class=\"date-placeholder\"\n *ngIf=\"!date && showTime && showDate && showTime\">\n {{\"Select Date & Time\" | translate}}\n </div>\n <!-- Selected datetime -->\n <div *ngIf=\"date\">\n <span *ngIf=\"showDate\">{{formattedDate()}}</span>\n <span *ngIf=\"showTime\"> {{formattedTime()}}</span>\n </div>\n </div>\n </button>\n </ng-container>\n\n <!-- Datepicker popup -->\n <ng-container *ngTemplateOutlet=\"dateMenuTemplate\">\n </ng-container>\n\n <ng-template #dateMenuTemplate>\n <div #dateMenu\n *ngIf=\"isPickerVisible\"\n class=\"date-menu\"\n [ngClass]=\"{ 'right': right, 'bottom': bottom }\">\n <div class=\"date-modal\">\n <ng-container *ngIf=\"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 <div *ngFor=\"let weekDay of weekDays\"\n class=\"week-day\">\n {{weekDay | translate}}\n </div>\n </div>\n <div *ngFor=\"let row of dayRows\"\n class=\"day-row\">\n <div *ngFor=\"let day of row.days\"\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 <zen-icon *ngIf=\"day.isHighlighted\"\n class=\"highlight-icon\"\n src=\"assets/ng-zenduit/icons/play.svg\"></zen-icon>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf=\"showTime\"\n class=\"time-container\">\n\n <div class=\"time-lbl\">\n {{\"Select Time\" | translate}}:\n </div>\n\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 <span *ngIf=\"showSeconds\">:</span>\n <div class=\"input-wrapper\" *ngIf=\"showSeconds\">\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 <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 <div class=\"hint\"\n *ngIf=\"hint\">\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 <div class=\"footer\"\n *ngIf=\"!autoConfirm || showTime\">\n <button *ngIf=\"date\"\n (click)=\"clear()\"\n class=\"button-stroked\">\n {{\"Clear\" | translate}}\n </button>\n <button *ngIf=\"!date\"\n (click)=\"cancel()\"\n class=\"button-stroked\">\n {{\"Cancel\" | translate}}\n </button>\n <button [disabled]=\"!_dateToSet\"\n (click)=\"apply()\"\n class=\"button-flat\">\n {{\"Apply\" | translate}}\n </button>\n </div>\n\n <ng-container *ngIf=\"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 <div class=\"month-item\"\n *ngFor=\"let month of months; index as index\"\n (click)=\"selectMonth(index)\">\n {{ month | translate }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"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 <div class=\"month-item\"\n *ngFor=\"let year of years\"\n (click)=\"selectYear(year)\">\n {{ year }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"date-modal-extra-space\"></div>\n </div>\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);font-weight:400;font-size:14px;color:var(--color-grey-primary, #4f4f4f);border-radius:2px}.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 .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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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" }] }); }
|
|
1755
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatepickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1756
|
+
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 }); }
|
|
1757
1757
|
}
|
|
1758
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatepickerComponent, decorators: [{
|
|
1759
1759
|
type: Component,
|
|
1760
|
-
args: [{ selector: 'zen-datepicker', template: "<div class=\"date-component\">\n <!-- Material design datepicker toggle -->\n <ng-container *ngIf=\"!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 <div class=\"date-placeholder\"\n *ngIf=\"!date && showDate && !showTime\">\n {{\"Select Date\" | translate}}\n </div>\n <div class=\"date-placeholder\"\n *ngIf=\"!date && showTime && !showDate\">\n {{\"Select Time\" | translate}}\n </div>\n <div class=\"date-placeholder\"\n *ngIf=\"!date && showTime && showDate && showTime\">\n {{\"Select Date & Time\" | translate}}\n </div>\n\n <!-- Selected datetime -->\n <div *ngIf=\"date\">\n <span *ngIf=\"showDate\">{{formattedDate()}}</span>\n <span *ngIf=\"showTime\"> {{formattedTime()}}</span>\n </div>\n </div>\n\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 </ng-container>\n\n <!-- Box design datepicker toggle -->\n <ng-container *ngIf=\"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\n <!-- Datepicker icon, depends on picker type -->\n <zen-icon class=\"date-icon\"\n [src]=\"getIcon()\"\n [ngClass]=\"{'filled': date}\">\n </zen-icon>\n\n <div class=\"date-content new-box-design\">\n <!-- date placeholder -->\n\n <div class=\"date-placeholder\"\n *ngIf=\"!date && showDate && !showTime\">\n {{\"Select Date\" | translate}}\n </div>\n <div class=\"date-placeholder\"\n *ngIf=\"!date && showTime && !showDate\">\n {{\"Select Time\" | translate}}\n </div>\n <div class=\"date-placeholder\"\n *ngIf=\"!date && showTime && showDate && showTime\">\n {{\"Select Date & Time\" | translate}}\n </div>\n <!-- Selected datetime -->\n <div *ngIf=\"date\">\n <span *ngIf=\"showDate\">{{formattedDate()}}</span>\n <span *ngIf=\"showTime\"> {{formattedTime()}}</span>\n </div>\n </div>\n </button>\n </ng-container>\n\n <!-- Datepicker popup -->\n <ng-container *ngTemplateOutlet=\"dateMenuTemplate\">\n </ng-container>\n\n <ng-template #dateMenuTemplate>\n <div #dateMenu\n *ngIf=\"isPickerVisible\"\n class=\"date-menu\"\n [ngClass]=\"{ 'right': right, 'bottom': bottom }\">\n <div class=\"date-modal\">\n <ng-container *ngIf=\"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 <div *ngFor=\"let weekDay of weekDays\"\n class=\"week-day\">\n {{weekDay | translate}}\n </div>\n </div>\n <div *ngFor=\"let row of dayRows\"\n class=\"day-row\">\n <div *ngFor=\"let day of row.days\"\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 <zen-icon *ngIf=\"day.isHighlighted\"\n class=\"highlight-icon\"\n src=\"assets/ng-zenduit/icons/play.svg\"></zen-icon>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf=\"showTime\"\n class=\"time-container\">\n\n <div class=\"time-lbl\">\n {{\"Select Time\" | translate}}:\n </div>\n\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 <span *ngIf=\"showSeconds\">:</span>\n <div class=\"input-wrapper\" *ngIf=\"showSeconds\">\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 <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 <div class=\"hint\"\n *ngIf=\"hint\">\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 <div class=\"footer\"\n *ngIf=\"!autoConfirm || showTime\">\n <button *ngIf=\"date\"\n (click)=\"clear()\"\n class=\"button-stroked\">\n {{\"Clear\" | translate}}\n </button>\n <button *ngIf=\"!date\"\n (click)=\"cancel()\"\n class=\"button-stroked\">\n {{\"Cancel\" | translate}}\n </button>\n <button [disabled]=\"!_dateToSet\"\n (click)=\"apply()\"\n class=\"button-flat\">\n {{\"Apply\" | translate}}\n </button>\n </div>\n\n <ng-container *ngIf=\"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 <div class=\"month-item\"\n *ngFor=\"let month of months; index as index\"\n (click)=\"selectMonth(index)\">\n {{ month | translate }}\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"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 <div class=\"month-item\"\n *ngFor=\"let year of years\"\n (click)=\"selectYear(year)\">\n {{ year }}\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"date-modal-extra-space\"></div>\n </div>\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);font-weight:400;font-size:14px;color:var(--color-grey-primary, #4f4f4f);border-radius:2px}.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 .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"] }]
|
|
1760
|
+
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"] }]
|
|
1761
1761
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.TranslateService }], propDecorators: { date: [{
|
|
1762
1762
|
type: Input
|
|
1763
1763
|
}], dateChange: [{
|
|
@@ -1824,12 +1824,12 @@ class ZenduToggleSlideComponent {
|
|
|
1824
1824
|
this.enabled = !this.enabled;
|
|
1825
1825
|
this.enabledChange.emit(this.enabled);
|
|
1826
1826
|
}
|
|
1827
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1828
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1827
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduToggleSlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenduToggleSlideComponent, isStandalone: false, selector: "zen-toggle-slide", inputs: { enabled: "enabled", disabled: "disabled" }, outputs: { enabledChange: "enabledChange" }, ngImport: i0, template: "<button class=\"toggle-slide-component\"\n (click)=\"toggle()\"\n [disabled]=\"disabled\"\n [class.active]=\"enabled\"\n [class.disabled]=\"disabled\">\n\n <div class=\"toggle-slider\"></div>\n <div class=\"toggle-btn\"></div>\n</button>\n", styles: [".toggle-slide-component{position:relative;padding:8px;background:none;border:none;cursor:pointer;outline:none}.toggle-slide-component .toggle-slider{width:25px;height:4px;background:#def0ff;border-radius:2px}.toggle-slide-component .toggle-btn{position:absolute;left:2px;top:3px;background:#fff;width:15px;height:15px;border-radius:8px;box-shadow:0 0 10px #bee1fd;transition:.4s}.toggle-slide-component:focus .toggle-slider,.toggle-slide-component:focus .toggle-btn{box-shadow:0 0 2px 2px #2188d94d}.toggle-slide-component:hover .toggle-slider{background:#d5ebfd}.toggle-slide-component.active .toggle-slider,.toggle-slide-component.active .toggle-btn{background:var(--color-primary, #2188d9)}.toggle-slide-component.active .toggle-btn{left:24px;background:var(--color-primary, #2188d9)}.toggle-slide-component.active:hover .toggle-slider,.toggle-slide-component.active:hover .toggle-btn{background-color:#0d74c5}.toggle-slide-component.disabled{cursor:not-allowed}.toggle-slide-component.disabled .toggle-slider,.toggle-slide-component.disabled .toggle-btn{background:#d0d0d2}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1829
1829
|
}
|
|
1830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1830
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduToggleSlideComponent, decorators: [{
|
|
1831
1831
|
type: Component,
|
|
1832
|
-
args: [{ selector: 'zen-toggle-slide', template: "<button class=\"toggle-slide-component\"\n (click)=\"toggle()\"\n [disabled]=\"disabled\"\n [class.active]=\"enabled\"\n [class.disabled]=\"disabled\">\n\n <div class=\"toggle-slider\"></div>\n <div class=\"toggle-btn\"></div>\n</button>\n", styles: [".toggle-slide-component{position:relative;padding:8px;background:none;border:none;cursor:pointer;outline:none}.toggle-slide-component .toggle-slider{width:25px;height:4px;background:#def0ff;border-radius:2px}.toggle-slide-component .toggle-btn{position:absolute;left:2px;top:3px;background:#fff;width:15px;height:15px;border-radius:8px;box-shadow:0 0 10px #bee1fd;transition:.4s}.toggle-slide-component:focus .toggle-slider,.toggle-slide-component:focus .toggle-btn{box-shadow:0 0 2px 2px #2188d94d}.toggle-slide-component:hover .toggle-slider{background:#d5ebfd}.toggle-slide-component.active .toggle-slider,.toggle-slide-component.active .toggle-btn{background:var(--color-primary, #2188d9)}.toggle-slide-component.active .toggle-btn{left:24px;background:var(--color-primary, #2188d9)}.toggle-slide-component.active:hover .toggle-slider,.toggle-slide-component.active:hover .toggle-btn{background-color:#0d74c5}.toggle-slide-component.disabled{cursor:not-allowed}.toggle-slide-component.disabled .toggle-slider,.toggle-slide-component.disabled .toggle-btn{background:#d0d0d2}\n"] }]
|
|
1832
|
+
args: [{ selector: 'zen-toggle-slide', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<button class=\"toggle-slide-component\"\n (click)=\"toggle()\"\n [disabled]=\"disabled\"\n [class.active]=\"enabled\"\n [class.disabled]=\"disabled\">\n\n <div class=\"toggle-slider\"></div>\n <div class=\"toggle-btn\"></div>\n</button>\n", styles: [".toggle-slide-component{position:relative;padding:8px;background:none;border:none;cursor:pointer;outline:none}.toggle-slide-component .toggle-slider{width:25px;height:4px;background:#def0ff;border-radius:2px}.toggle-slide-component .toggle-btn{position:absolute;left:2px;top:3px;background:#fff;width:15px;height:15px;border-radius:8px;box-shadow:0 0 10px #bee1fd;transition:.4s}.toggle-slide-component:focus .toggle-slider,.toggle-slide-component:focus .toggle-btn{box-shadow:0 0 2px 2px #2188d94d}.toggle-slide-component:hover .toggle-slider{background:#d5ebfd}.toggle-slide-component.active .toggle-slider,.toggle-slide-component.active .toggle-btn{background:var(--color-primary, #2188d9)}.toggle-slide-component.active .toggle-btn{left:24px;background:var(--color-primary, #2188d9)}.toggle-slide-component.active:hover .toggle-slider,.toggle-slide-component.active:hover .toggle-btn{background-color:#0d74c5}.toggle-slide-component.disabled{cursor:not-allowed}.toggle-slide-component.disabled .toggle-slider,.toggle-slide-component.disabled .toggle-btn{background:#d0d0d2}\n"] }]
|
|
1833
1833
|
}], propDecorators: { enabled: [{
|
|
1834
1834
|
type: Input
|
|
1835
1835
|
}], enabledChange: [{
|
|
@@ -2148,12 +2148,12 @@ class ZenduGroupsComponent {
|
|
|
2148
2148
|
getTreeMap() {
|
|
2149
2149
|
return this._treeMap;
|
|
2150
2150
|
}
|
|
2151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2152
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2151
|
+
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 }); }
|
|
2152
|
+
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]=\"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]=\"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)}\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 }); }
|
|
2153
2153
|
}
|
|
2154
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduGroupsComponent, decorators: [{
|
|
2155
2155
|
type: Component,
|
|
2156
|
-
args: [{ selector: 'zen-groups', template: "<!-- Dropdown mode (default) -->\n<div class=\"zen-groups-dropdown\"
|
|
2156
|
+
args: [{ selector: 'zen-groups', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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]=\"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]=\"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)}\n"] }]
|
|
2157
2157
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dataSource: [{
|
|
2158
2158
|
type: Input
|
|
2159
2159
|
}], filteredDataSource: [{
|
|
@@ -2207,12 +2207,12 @@ class ZenduRadioButtonComponent {
|
|
|
2207
2207
|
}
|
|
2208
2208
|
this.radioChange.emit(event.target.value);
|
|
2209
2209
|
}
|
|
2210
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2211
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2210
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2211
|
+
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 }); }
|
|
2212
2212
|
}
|
|
2213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduRadioButtonComponent, decorators: [{
|
|
2214
2214
|
type: Component,
|
|
2215
|
-
args: [{ selector: 'zen-radio', template: "<label class=\"radio-component\"\n
|
|
2215
|
+
args: [{ selector: 'zen-radio', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
2216
2216
|
}], ctorParameters: () => [], propDecorators: { selected: [{
|
|
2217
2217
|
type: Input
|
|
2218
2218
|
}], radioChange: [{
|
|
@@ -2237,12 +2237,12 @@ class ZenduSpinner {
|
|
|
2237
2237
|
constructor() {
|
|
2238
2238
|
this.size = "default";
|
|
2239
2239
|
}
|
|
2240
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2241
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2240
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2241
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenduSpinner, isStandalone: false, selector: "zen-spinner", inputs: { size: "size" }, ngImport: i0, template: "<div class=\"component\"\n [class.small-size]=\"size == 'small'\">\n</div>\n", styles: [".component{width:64px;height:64px;border:6px solid var(--color-primary, #2188d9);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation_spinner 1s linear infinite}.component.small-size{width:32px;height:32px;border:3px solid var(--color-primary, #2188d9);border-bottom-color:transparent}@keyframes rotation_spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2242
2242
|
}
|
|
2243
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSpinner, decorators: [{
|
|
2244
2244
|
type: Component,
|
|
2245
|
-
args: [{ selector: 'zen-spinner', template: "<div class=\"component\"\n [class.small-size]=\"size == 'small'\">\n</div>\n", styles: [".component{width:64px;height:64px;border:6px solid var(--color-primary, #2188d9);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation_spinner 1s linear infinite}.component.small-size{width:32px;height:32px;border:3px solid var(--color-primary, #2188d9);border-bottom-color:transparent}@keyframes rotation_spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
2245
|
+
args: [{ selector: 'zen-spinner', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"component\"\n [class.small-size]=\"size == 'small'\">\n</div>\n", styles: [".component{width:64px;height:64px;border:6px solid var(--color-primary, #2188d9);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation_spinner 1s linear infinite}.component.small-size{width:32px;height:32px;border:3px solid var(--color-primary, #2188d9);border-bottom-color:transparent}@keyframes rotation_spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
2246
2246
|
}], propDecorators: { size: [{
|
|
2247
2247
|
type: Input
|
|
2248
2248
|
}] } });
|
|
@@ -2316,12 +2316,12 @@ class ZenButtonComponent {
|
|
|
2316
2316
|
// Use the icon input if provided, otherwise default to circle
|
|
2317
2317
|
return this.icon || 'circle';
|
|
2318
2318
|
}
|
|
2319
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2320
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenButtonComponent, selector: "zen-button", inputs: { variant: "variant", buttonType: "buttonType", icon: "icon", size: "size", destructive: "destructive", disabled: "disabled", fullWidth: "fullWidth", type: "type" }, ngImport: i0, template: "<button \n [class]=\"buttonClasses\"\n [type]=\"type\"\n [disabled]=\"disabled\">\n \n <!-- Dot indicator -->\n <span *ngIf=\"buttonType === 'button-dot'\" class=\"button-dot\"></span>\n \n <!-- Leading icon -->\n <zen-icon *ngIf=\"buttonType === 'button-icon-leading' || isIconOnly\" \n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n \n <!-- Button content -->\n <ng-content *ngIf=\"!isIconOnly\"></ng-content>\n \n <!-- Trailing icon -->\n <zen-icon *ngIf=\"buttonType === 'button-icon-trailing'\" \n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n</button>", 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}}.button-2xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit;height:60px;padding:0 28px}.button-2xl zen-icon{color:inherit;background-color:currentColor}.button-2xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-2xl:disabled{cursor:not-allowed}.button-2xl.full-width{width:100%;justify-content:center}.button-2xl.button-icon-only{padding:0;justify-content:center}.button-2xl.button-icon-only{width:60px;padding:0}.button-xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit;height:48px;padding:0 20px}.button-xl zen-icon{color:inherit;background-color:currentColor}.button-xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-xl:disabled{cursor:not-allowed}.button-xl.full-width{width:100%;justify-content:center}.button-xl.button-icon-only{padding:0;justify-content:center}.button-xl.button-icon-only{width:48px;padding:0}.button-lg{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit;height:44px;padding:0 18px}.button-lg zen-icon{color:inherit;background-color:currentColor}.button-lg .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-lg:disabled{cursor:not-allowed}.button-lg.full-width{width:100%;justify-content:center}.button-lg.button-icon-only{padding:0;justify-content:center}.button-lg.button-icon-only{width:44px;padding:0}.button-md{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit;height:40px;padding:0 16px}.button-md zen-icon{color:inherit;background-color:currentColor}.button-md .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-md:disabled{cursor:not-allowed}.button-md.full-width{width:100%;justify-content:center}.button-md.button-icon-only{padding:0;justify-content:center}.button-md.button-icon-only{width:40px;padding:0}.button-sm{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit;height:36px;padding:0 14px}.button-sm zen-icon{color:inherit;background-color:currentColor}.button-sm .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-sm:disabled{cursor:not-allowed}.button-sm.full-width{width:100%;justify-content:center}.button-sm.button-icon-only{padding:0;justify-content:center}.button-sm.button-icon-only{width:36px;padding:0}.button-base{background:#136ab6;color:#fff;border:1px solid #136AB6;box-shadow:0 1px 2px #1018280d}.button-base:hover:not(:disabled){background:#105494;border-color:#105494}.button-base:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-base.destructive{background:#d92d20;border-color:#d92d20}.button-base.destructive:hover:not(:disabled){background:#b42318;border-color:#b42318}.button-base.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-base.destructive:disabled{background:#fecdca;border-color:#fecdca;color:#fff}.button-base:disabled{background:#c0ddf7;border-color:#c0ddf7;color:#fff}.button-secondary-gray{background:#fff;color:#344054;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d}.button-secondary-gray:hover:not(:disabled){background:#f9fafb;color:#1d2939}.button-secondary-gray:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.button-secondary-gray.destructive{color:#b42318}.button-secondary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-secondary-gray.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-gray.destructive:disabled{background:#fff;border-color:#eaecf0;color:#fda29b}.button-secondary-gray:disabled{background:#fff;border-color:#eaecf0;color:#d0d5dd}.button-secondary-color{background:#f1f7fe;color:#105494;border:1px solid #F1F7FE;box-shadow:0 1px 2px #1018280d}.button-secondary-color:hover:not(:disabled){background:#e3eefb;border-color:#e3eefb}.button-secondary-color:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-secondary-color.destructive{background:#fef3f2;color:#b42318;border-color:#fef3f2}.button-secondary-color.destructive:hover:not(:disabled){background:#fee4e2;border-color:#fee4e2}.button-secondary-color.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-color.destructive:disabled{background:#fffbfa;border-color:#fffbfa;color:#fda29b}.button-secondary-color:disabled{background:#fafdff;border-color:#fafdff;color:#88c1f1}.button-tertiary-gray{background:transparent;color:#667085;border:1px solid transparent}.button-tertiary-gray:hover:not(:disabled){background:#f9fafb;color:#475467}.button-tertiary-gray:focus:not(:disabled){outline:none;background:#f9fafb}.button-tertiary-gray.destructive{color:#b42318}.button-tertiary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-gray.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-gray.destructive:disabled{color:#fda29b}.button-tertiary-gray:disabled{color:#d0d5dd}.button-tertiary-color{background:transparent;color:#105494;border:1px solid transparent}.button-tertiary-color:hover:not(:disabled){background:#f1f7fe}.button-tertiary-color:focus:not(:disabled){outline:none;background:#f1f7fe}.button-tertiary-color.destructive{color:#b42318}.button-tertiary-color.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-color.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-color.destructive:disabled{color:#fda29b}.button-tertiary-color:disabled{color:#d0d5dd}.button-link-gray{background:transparent;color:#475467;border:none;text-decoration:none}.button-link-gray:hover:not(:disabled){color:#344054}.button-link-gray:focus:not(:disabled){outline:none}.button-link-gray.destructive{color:#b42318}.button-link-gray.destructive:hover:not(:disabled){color:#912018}.button-link-gray.destructive:disabled{color:#fda29b}.button-link-gray:disabled{color:#d0d5dd}.button-link-color{background:transparent;color:#105494;border:none;text-decoration:none}.button-link-color:hover:not(:disabled){color:#12497a}.button-link-color:focus:not(:disabled){outline:none}.button-link-color.destructive{color:#b42318}.button-link-color.destructive:hover:not(:disabled){color:#912018}.button-link-color.destructive:disabled{color:#fda29b}.button-link-color:disabled{color:#d0d5dd}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }] }); }
|
|
2319
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2320
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenButtonComponent, isStandalone: false, selector: "zen-button", inputs: { variant: "variant", buttonType: "buttonType", icon: "icon", size: "size", destructive: "destructive", disabled: "disabled", fullWidth: "fullWidth", type: "type" }, ngImport: i0, template: "<button\n [class]=\"buttonClasses\"\n [type]=\"type\"\n [disabled]=\"disabled\">\n\n <!-- Dot indicator -->\n @if (buttonType === 'button-dot') {\n <span class=\"button-dot\"></span>\n }\n\n <!-- Leading icon -->\n @if (buttonType === 'button-icon-leading' || isIconOnly) {\n <zen-icon\n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n }\n\n <!-- Button content -->\n @if (!isIconOnly) {\n <ng-content></ng-content>\n }\n\n <!-- Trailing icon -->\n @if (buttonType === 'button-icon-trailing') {\n <zen-icon\n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n }\n</button>", 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}}.button-2xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-2xl zen-icon{color:inherit;background-color:currentColor}.button-2xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-2xl:disabled{cursor:not-allowed}.button-2xl.full-width{width:100%;justify-content:center}.button-2xl.button-icon-only{padding:0;justify-content:center}.button-2xl{height:60px;padding:0 28px}.button-2xl.button-icon-only{width:60px;padding:0}.button-xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-xl zen-icon{color:inherit;background-color:currentColor}.button-xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-xl:disabled{cursor:not-allowed}.button-xl.full-width{width:100%;justify-content:center}.button-xl.button-icon-only{padding:0;justify-content:center}.button-xl{height:48px;padding:0 20px}.button-xl.button-icon-only{width:48px;padding:0}.button-lg{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-lg zen-icon{color:inherit;background-color:currentColor}.button-lg .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-lg:disabled{cursor:not-allowed}.button-lg.full-width{width:100%;justify-content:center}.button-lg.button-icon-only{padding:0;justify-content:center}.button-lg{height:44px;padding:0 18px}.button-lg.button-icon-only{width:44px;padding:0}.button-md{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-md zen-icon{color:inherit;background-color:currentColor}.button-md .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-md:disabled{cursor:not-allowed}.button-md.full-width{width:100%;justify-content:center}.button-md.button-icon-only{padding:0;justify-content:center}.button-md{height:40px;padding:0 16px}.button-md.button-icon-only{width:40px;padding:0}.button-sm{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-sm zen-icon{color:inherit;background-color:currentColor}.button-sm .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-sm:disabled{cursor:not-allowed}.button-sm.full-width{width:100%;justify-content:center}.button-sm.button-icon-only{padding:0;justify-content:center}.button-sm{height:36px;padding:0 14px}.button-sm.button-icon-only{width:36px;padding:0}.button-base{background:#136ab6;color:#fff;border:1px solid #136AB6;box-shadow:0 1px 2px #1018280d}.button-base:hover:not(:disabled){background:#105494;border-color:#105494}.button-base:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-base.destructive{background:#d92d20;border-color:#d92d20}.button-base.destructive:hover:not(:disabled){background:#b42318;border-color:#b42318}.button-base.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-base.destructive:disabled{background:#fecdca;border-color:#fecdca;color:#fff}.button-base:disabled{background:#c0ddf7;border-color:#c0ddf7;color:#fff}.button-secondary-gray{background:#fff;color:#344054;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d}.button-secondary-gray:hover:not(:disabled){background:#f9fafb;color:#1d2939}.button-secondary-gray:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.button-secondary-gray.destructive{color:#b42318}.button-secondary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-secondary-gray.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-gray.destructive:disabled{background:#fff;border-color:#eaecf0;color:#fda29b}.button-secondary-gray:disabled{background:#fff;border-color:#eaecf0;color:#d0d5dd}.button-secondary-color{background:#f1f7fe;color:#105494;border:1px solid #F1F7FE;box-shadow:0 1px 2px #1018280d}.button-secondary-color:hover:not(:disabled){background:#e3eefb;border-color:#e3eefb}.button-secondary-color:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-secondary-color.destructive{background:#fef3f2;color:#b42318;border-color:#fef3f2}.button-secondary-color.destructive:hover:not(:disabled){background:#fee4e2;border-color:#fee4e2}.button-secondary-color.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-color.destructive:disabled{background:#fffbfa;border-color:#fffbfa;color:#fda29b}.button-secondary-color:disabled{background:#fafdff;border-color:#fafdff;color:#88c1f1}.button-tertiary-gray{background:transparent;color:#667085;border:1px solid transparent}.button-tertiary-gray:hover:not(:disabled){background:#f9fafb;color:#475467}.button-tertiary-gray:focus:not(:disabled){outline:none;background:#f9fafb}.button-tertiary-gray.destructive{color:#b42318}.button-tertiary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-gray.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-gray.destructive:disabled{color:#fda29b}.button-tertiary-gray:disabled{color:#d0d5dd}.button-tertiary-color{background:transparent;color:#105494;border:1px solid transparent}.button-tertiary-color:hover:not(:disabled){background:#f1f7fe}.button-tertiary-color:focus:not(:disabled){outline:none;background:#f1f7fe}.button-tertiary-color.destructive{color:#b42318}.button-tertiary-color.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-color.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-color.destructive:disabled{color:#fda29b}.button-tertiary-color:disabled{color:#d0d5dd}.button-link-gray{background:transparent;color:#475467;border:none;text-decoration:none}.button-link-gray:hover:not(:disabled){color:#344054}.button-link-gray:focus:not(:disabled){outline:none}.button-link-gray.destructive{color:#b42318}.button-link-gray.destructive:hover:not(:disabled){color:#912018}.button-link-gray.destructive:disabled{color:#fda29b}.button-link-gray:disabled{color:#d0d5dd}.button-link-color{background:transparent;color:#105494;border:none;text-decoration:none}.button-link-color:hover:not(:disabled){color:#12497a}.button-link-color:focus:not(:disabled){outline:none}.button-link-color.destructive{color:#b42318}.button-link-color.destructive:hover:not(:disabled){color:#912018}.button-link-color.destructive:disabled{color:#fda29b}.button-link-color:disabled{color:#d0d5dd}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2321
2321
|
}
|
|
2322
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2322
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenButtonComponent, decorators: [{
|
|
2323
2323
|
type: Component,
|
|
2324
|
-
args: [{ selector: 'zen-button', template: "<button \n [class]=\"buttonClasses\"\n [type]=\"type\"\n [disabled]=\"disabled\">\n \n <!-- Dot indicator -->\n <span *ngIf=\"buttonType === 'button-dot'\" class=\"button-dot\"></span>\n \n <!-- Leading icon -->\n <zen-icon *ngIf=\"buttonType === 'button-icon-leading' || isIconOnly\" \n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n \n <!-- Button content -->\n <ng-content *ngIf=\"!isIconOnly\"></ng-content>\n \n <!-- Trailing icon -->\n <zen-icon *ngIf=\"buttonType === 'button-icon-trailing'\" \n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n</button>", 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}}.button-2xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit;height:60px;padding:0 28px}.button-2xl zen-icon{color:inherit;background-color:currentColor}.button-2xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-2xl:disabled{cursor:not-allowed}.button-2xl.full-width{width:100%;justify-content:center}.button-2xl.button-icon-only{padding:0;justify-content:center}.button-2xl.button-icon-only{width:60px;padding:0}.button-xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit;height:48px;padding:0 20px}.button-xl zen-icon{color:inherit;background-color:currentColor}.button-xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-xl:disabled{cursor:not-allowed}.button-xl.full-width{width:100%;justify-content:center}.button-xl.button-icon-only{padding:0;justify-content:center}.button-xl.button-icon-only{width:48px;padding:0}.button-lg{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit;height:44px;padding:0 18px}.button-lg zen-icon{color:inherit;background-color:currentColor}.button-lg .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-lg:disabled{cursor:not-allowed}.button-lg.full-width{width:100%;justify-content:center}.button-lg.button-icon-only{padding:0;justify-content:center}.button-lg.button-icon-only{width:44px;padding:0}.button-md{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit;height:40px;padding:0 16px}.button-md zen-icon{color:inherit;background-color:currentColor}.button-md .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-md:disabled{cursor:not-allowed}.button-md.full-width{width:100%;justify-content:center}.button-md.button-icon-only{padding:0;justify-content:center}.button-md.button-icon-only{width:40px;padding:0}.button-sm{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit;height:36px;padding:0 14px}.button-sm zen-icon{color:inherit;background-color:currentColor}.button-sm .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-sm:disabled{cursor:not-allowed}.button-sm.full-width{width:100%;justify-content:center}.button-sm.button-icon-only{padding:0;justify-content:center}.button-sm.button-icon-only{width:36px;padding:0}.button-base{background:#136ab6;color:#fff;border:1px solid #136AB6;box-shadow:0 1px 2px #1018280d}.button-base:hover:not(:disabled){background:#105494;border-color:#105494}.button-base:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-base.destructive{background:#d92d20;border-color:#d92d20}.button-base.destructive:hover:not(:disabled){background:#b42318;border-color:#b42318}.button-base.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-base.destructive:disabled{background:#fecdca;border-color:#fecdca;color:#fff}.button-base:disabled{background:#c0ddf7;border-color:#c0ddf7;color:#fff}.button-secondary-gray{background:#fff;color:#344054;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d}.button-secondary-gray:hover:not(:disabled){background:#f9fafb;color:#1d2939}.button-secondary-gray:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.button-secondary-gray.destructive{color:#b42318}.button-secondary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-secondary-gray.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-gray.destructive:disabled{background:#fff;border-color:#eaecf0;color:#fda29b}.button-secondary-gray:disabled{background:#fff;border-color:#eaecf0;color:#d0d5dd}.button-secondary-color{background:#f1f7fe;color:#105494;border:1px solid #F1F7FE;box-shadow:0 1px 2px #1018280d}.button-secondary-color:hover:not(:disabled){background:#e3eefb;border-color:#e3eefb}.button-secondary-color:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-secondary-color.destructive{background:#fef3f2;color:#b42318;border-color:#fef3f2}.button-secondary-color.destructive:hover:not(:disabled){background:#fee4e2;border-color:#fee4e2}.button-secondary-color.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-color.destructive:disabled{background:#fffbfa;border-color:#fffbfa;color:#fda29b}.button-secondary-color:disabled{background:#fafdff;border-color:#fafdff;color:#88c1f1}.button-tertiary-gray{background:transparent;color:#667085;border:1px solid transparent}.button-tertiary-gray:hover:not(:disabled){background:#f9fafb;color:#475467}.button-tertiary-gray:focus:not(:disabled){outline:none;background:#f9fafb}.button-tertiary-gray.destructive{color:#b42318}.button-tertiary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-gray.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-gray.destructive:disabled{color:#fda29b}.button-tertiary-gray:disabled{color:#d0d5dd}.button-tertiary-color{background:transparent;color:#105494;border:1px solid transparent}.button-tertiary-color:hover:not(:disabled){background:#f1f7fe}.button-tertiary-color:focus:not(:disabled){outline:none;background:#f1f7fe}.button-tertiary-color.destructive{color:#b42318}.button-tertiary-color.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-color.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-color.destructive:disabled{color:#fda29b}.button-tertiary-color:disabled{color:#d0d5dd}.button-link-gray{background:transparent;color:#475467;border:none;text-decoration:none}.button-link-gray:hover:not(:disabled){color:#344054}.button-link-gray:focus:not(:disabled){outline:none}.button-link-gray.destructive{color:#b42318}.button-link-gray.destructive:hover:not(:disabled){color:#912018}.button-link-gray.destructive:disabled{color:#fda29b}.button-link-gray:disabled{color:#d0d5dd}.button-link-color{background:transparent;color:#105494;border:none;text-decoration:none}.button-link-color:hover:not(:disabled){color:#12497a}.button-link-color:focus:not(:disabled){outline:none}.button-link-color.destructive{color:#b42318}.button-link-color.destructive:hover:not(:disabled){color:#912018}.button-link-color.destructive:disabled{color:#fda29b}.button-link-color:disabled{color:#d0d5dd}\n"] }]
|
|
2324
|
+
args: [{ selector: 'zen-button', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<button\n [class]=\"buttonClasses\"\n [type]=\"type\"\n [disabled]=\"disabled\">\n\n <!-- Dot indicator -->\n @if (buttonType === 'button-dot') {\n <span class=\"button-dot\"></span>\n }\n\n <!-- Leading icon -->\n @if (buttonType === 'button-icon-leading' || isIconOnly) {\n <zen-icon\n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n }\n\n <!-- Button content -->\n @if (!isIconOnly) {\n <ng-content></ng-content>\n }\n\n <!-- Trailing icon -->\n @if (buttonType === 'button-icon-trailing') {\n <zen-icon\n [name]=\"getIconName()\"\n size=\"xs\"></zen-icon>\n }\n</button>", 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}}.button-2xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-2xl zen-icon{color:inherit;background-color:currentColor}.button-2xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-2xl:disabled{cursor:not-allowed}.button-2xl.full-width{width:100%;justify-content:center}.button-2xl.button-icon-only{padding:0;justify-content:center}.button-2xl{height:60px;padding:0 28px}.button-2xl.button-icon-only{width:60px;padding:0}.button-xl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-xl zen-icon{color:inherit;background-color:currentColor}.button-xl .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-xl:disabled{cursor:not-allowed}.button-xl.full-width{width:100%;justify-content:center}.button-xl.button-icon-only{padding:0;justify-content:center}.button-xl{height:48px;padding:0 20px}.button-xl.button-icon-only{width:48px;padding:0}.button-lg{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-lg zen-icon{color:inherit;background-color:currentColor}.button-lg .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-lg:disabled{cursor:not-allowed}.button-lg.full-width{width:100%;justify-content:center}.button-lg.button-icon-only{padding:0;justify-content:center}.button-lg{height:44px;padding:0 18px}.button-lg.button-icon-only{width:44px;padding:0}.button-md{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-md zen-icon{color:inherit;background-color:currentColor}.button-md .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-md:disabled{cursor:not-allowed}.button-md.full-width{width:100%;justify-content:center}.button-md.button-icon-only{padding:0;justify-content:center}.button-md{height:40px;padding:0 16px}.button-md.button-icon-only{width:40px;padding:0}.button-sm{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:8px;box-sizing:border-box;white-space:nowrap;border:none;transition:all .2s ease;cursor:pointer;font-family:inherit}.button-sm zen-icon{color:inherit;background-color:currentColor}.button-sm .button-dot{width:6px;height:6px;background:currentColor;border-radius:50%;display:inline-block}.button-sm:disabled{cursor:not-allowed}.button-sm.full-width{width:100%;justify-content:center}.button-sm.button-icon-only{padding:0;justify-content:center}.button-sm{height:36px;padding:0 14px}.button-sm.button-icon-only{width:36px;padding:0}.button-base{background:#136ab6;color:#fff;border:1px solid #136AB6;box-shadow:0 1px 2px #1018280d}.button-base:hover:not(:disabled){background:#105494;border-color:#105494}.button-base:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-base.destructive{background:#d92d20;border-color:#d92d20}.button-base.destructive:hover:not(:disabled){background:#b42318;border-color:#b42318}.button-base.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-base.destructive:disabled{background:#fecdca;border-color:#fecdca;color:#fff}.button-base:disabled{background:#c0ddf7;border-color:#c0ddf7;color:#fff}.button-secondary-gray{background:#fff;color:#344054;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d}.button-secondary-gray:hover:not(:disabled){background:#f9fafb;color:#1d2939}.button-secondary-gray:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.button-secondary-gray.destructive{color:#b42318}.button-secondary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-secondary-gray.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-gray.destructive:disabled{background:#fff;border-color:#eaecf0;color:#fda29b}.button-secondary-gray:disabled{background:#fff;border-color:#eaecf0;color:#d0d5dd}.button-secondary-color{background:#f1f7fe;color:#105494;border:1px solid #F1F7FE;box-shadow:0 1px 2px #1018280d}.button-secondary-color:hover:not(:disabled){background:#e3eefb;border-color:#e3eefb}.button-secondary-color:focus:not(:disabled){outline:none;box-shadow:0 1px 2px #1018280d,0 0 0 4px #136ab63d}.button-secondary-color.destructive{background:#fef3f2;color:#b42318;border-color:#fef3f2}.button-secondary-color.destructive:hover:not(:disabled){background:#fee4e2;border-color:#fee4e2}.button-secondary-color.destructive:focus:not(:disabled){box-shadow:0 1px 2px #1018280d,0 0 0 4px #d92d203d}.button-secondary-color.destructive:disabled{background:#fffbfa;border-color:#fffbfa;color:#fda29b}.button-secondary-color:disabled{background:#fafdff;border-color:#fafdff;color:#88c1f1}.button-tertiary-gray{background:transparent;color:#667085;border:1px solid transparent}.button-tertiary-gray:hover:not(:disabled){background:#f9fafb;color:#475467}.button-tertiary-gray:focus:not(:disabled){outline:none;background:#f9fafb}.button-tertiary-gray.destructive{color:#b42318}.button-tertiary-gray.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-gray.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-gray.destructive:disabled{color:#fda29b}.button-tertiary-gray:disabled{color:#d0d5dd}.button-tertiary-color{background:transparent;color:#105494;border:1px solid transparent}.button-tertiary-color:hover:not(:disabled){background:#f1f7fe}.button-tertiary-color:focus:not(:disabled){outline:none;background:#f1f7fe}.button-tertiary-color.destructive{color:#b42318}.button-tertiary-color.destructive:hover:not(:disabled){background:#fef3f2;color:#912018}.button-tertiary-color.destructive:focus:not(:disabled){background:#fef3f2}.button-tertiary-color.destructive:disabled{color:#fda29b}.button-tertiary-color:disabled{color:#d0d5dd}.button-link-gray{background:transparent;color:#475467;border:none;text-decoration:none}.button-link-gray:hover:not(:disabled){color:#344054}.button-link-gray:focus:not(:disabled){outline:none}.button-link-gray.destructive{color:#b42318}.button-link-gray.destructive:hover:not(:disabled){color:#912018}.button-link-gray.destructive:disabled{color:#fda29b}.button-link-gray:disabled{color:#d0d5dd}.button-link-color{background:transparent;color:#105494;border:none;text-decoration:none}.button-link-color:hover:not(:disabled){color:#12497a}.button-link-color:focus:not(:disabled){outline:none}.button-link-color.destructive{color:#b42318}.button-link-color.destructive:hover:not(:disabled){color:#912018}.button-link-color.destructive:disabled{color:#fda29b}.button-link-color:disabled{color:#d0d5dd}\n"] }]
|
|
2325
2325
|
}], propDecorators: { variant: [{
|
|
2326
2326
|
type: Input
|
|
2327
2327
|
}], buttonType: [{
|
|
@@ -3062,12 +3062,12 @@ class ZenduFilterComponent {
|
|
|
3062
3062
|
}
|
|
3063
3063
|
return count;
|
|
3064
3064
|
}
|
|
3065
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3066
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenduFilterComponent, selector: "zen-filter", inputs: { config: "config", filter: "filter", position: "position", resetBehavior: "resetBehavior", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", showOptions: "showOptions", customOptions: "customOptions", wrapperBodyClass: "wrapperBodyClass", customPosition: "customPosition" }, outputs: { filterChange: "filterChange", isVisibleChange: "isVisibleChange" }, host: { listeners: { "window:mousedown": "outsideHandling($event)", "window:resize": "windowSizeHandling($event)", "window:scroll": "windowScroll($event)", "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 <ng-container *ngIf=\"!customTrigger\">\n <zen-button (click)=\"toggle()\"\n [variant]=\"isApplied ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{isApplied ? 'applied' : ''}}\">\n <zen-icon [src]=\"imageUrl\"\n *ngIf=\"imageUrl\"></zen-icon>\n <i class=\"filter-icon material-icons\"\n *ngIf=\"!imageUrl\">filter_list</i>\n <span *ngIf=\"label\">{{ label | translate }}</span>\n </zen-button>\n </ng-container>\n\n <ng-content *ngIf=\"customTrigger\"></ng-content>\n\n <div [hidden]=\"!isVisible\"\n class=\"action-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"action-menu-header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"action-menu-body items-wrapper\"\n ngClass=\"{{wrapperBodyClass}}\">\n <ng-container *ngIf=\"errorMessage.length\">\n <li *ngFor=\"let item of errorMessage\"\n class=\"error-msg\">{{item | translate }}</li>\n </ng-container>\n\n <div *ngFor=\"let item of config.items\">\n <div class=\"menu-item\"\n *ngIf=\"isMenuIsVisible(item)\">\n\n <!-- Divider between two filter -->\n <div *ngIf=\"item.type === 'divider'\">\n <p class=\"filter-divider\"></p>\n </div>\n\n <!-- Boolean toggle -->\n <div *ngIf=\"item.type === 'toggle'\"\n class=\"action-item toggle-row\">\n <div>{{item.title | translate}}</div>\n <zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\n </div>\n\n <button class=\"action-item expander-item\"\n *ngIf=\"item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n </button>\n\n <div class=\"action-item section-title\"\n *ngIf=\"item.type != 'toggle' && item.type != 'divider' && item.disableCollapse\">\n {{item.title | translate}}\n </div>\n\n <ng-container *ngIf=\"item.expanded || item.disableCollapse\">\n <div [ngSwitch]=\"item.type\">\n <!-- Multiselect -->\n <div *ngSwitchCase=\"'multiselect'\">\n <!-- Lazy loading mode -->\n <ng-container *ngIf=\"item.isLazyLoading\">\n <div *ngFor=\"let dsItem of item.filteredDataSource\"\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n <span *ngIf=\"dsItem.badgeBgColor\"\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n </div>\n <div *ngIf=\"item.canLoadMore && !item.isLoadingNow\"\n class=\"action-item\">\n <button (click)=\"loadMore(item, false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </button>\n </div>\n <div *ngIf=\"item.isLoadingNow\"\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!item.isLazyLoading && !hasTreeData(item)\">\n <div class=\"action-item-checkbox ds-item select-all\" *ngIf=\"!item.hideSelectAll\">\n <zen-checkbox *ngIf=\"item.dataSource.length === item.filteredDataSource.length\"\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n </div>\n\n <div *ngFor=\"let dsItem of item.filteredDataSource\"\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n <span *ngIf=\"dsItem.badgeBgColor\"\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n </div>\n </ng-container>\n\n <!-- Tree view mode -->\n <zen-groups *ngIf=\"!item.isLazyLoading && hasTreeData(item)\"\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 </div>\n\n <!-- Date range picker -->\n <div *ngSwitchCase=\"'dateRange'\">\n <!-- Options date range view -->\n <ng-container *ngIf=\"item.dateRangeOptions?.length\">\n <ng-container *ngFor=\"let option of item.dateRangeOptions\">\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 </ng-container>\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 <ng-container *ngIf=\"selectedDateRangeOptions[item.key] === 'Custom'\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Default date range view -->\n <ng-container *ngIf=\"!item.dateRangeOptions?.length\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </ng-container>\n </div>\n\n <!-- Date picker -->\n <div *ngSwitchCase=\"'date'\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'Date' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.date\"\n [showTime]=\"item.showTime\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </div>\n\n <!-- Number range -->\n <div *ngSwitchCase=\"'numberRange'\"\n class=\"filter-row number-range-row\">\n <div>\n <div class=\"lbl\">{{'Min' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.from\"\n type=\"number\" />\n </div>\n <div>\n <div class=\"lbl\">{{'Max' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.to\"\n type=\"number\" />\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngSwitchCase=\"'radio'\">\n <div *ngFor=\"let option of item.radioOptions\"\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 </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n <span *ngIf=\"showNoFilterResult\"\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n </div>\n\n <div class=\"action-menu-footer filter-footer\">\n <span class=\"selected-count\" *ngIf=\"hasMultiselectItems\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <button (click)=\"reset()\"\n class=\"filter-btn-clear\"\n [class.has-selection]=\"selectedCount > 0 && hasMultiselectItems\">\n {{'Clear Filter' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"filter-btn-apply\">\n {{'Apply' | translate}}\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:360px;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:8px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:8px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative;padding:8px 0}.filters-component .menu-content .items-wrapper .action-item,.filters-component .menu-content .items-wrapper .action-item-checkbox,.filters-component .menu-content .items-wrapper .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.filters-component .menu-content .items-wrapper .action-item:hover,.filters-component .menu-content .items-wrapper .action-item-checkbox:hover,.filters-component .menu-content .items-wrapper .action-item-radio:hover{background:transparent}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:12px 24px}.filters-component .menu-content .items-wrapper .expander-item .expander-title{flex:1;text-align:left}.filters-component .menu-content .items-wrapper .expander-item.expanded,.filters-component .menu-content .items-wrapper .expander-item.active{background:transparent;color:#344054}.filters-component .menu-content .items-wrapper .expander-item:hover{background:transparent}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s;font-size:20px;color:#667085}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:32px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 24px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 24px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.filters-component .filter-footer{justify-content:space-between;padding:16px 24px;border-top:1px solid #eaecf0}.filters-component .filter-footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-footer .filter-btn-clear{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:#fff;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#d0d5dd;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-clear:hover{background:#f9fafb;color:#98a2b3}.filters-component .filter-footer .filter-btn-clear.has-selection{border-color:#fda29b;color:#b42318}.filters-component .filter-footer .filter-btn-clear.has-selection:hover{background:#fef3f2;color:#912018}.filters-component .filter-footer .filter-btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:var(--color-primary, #2188d9);border:1px solid var(--color-primary, #2188d9);box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-apply:hover{background:var(--color-blue-shade-1, #0d74c5);border-color:var(--color-blue-shade-1, #0d74c5)}.filters-component .section-title{font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:12px 24px}.filters-component .section-title:hover{background:transparent}.filters-component .has-badge zen-checkbox{width:auto}.filters-component .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.hidden{display:none}:host ::ng-deep zen-radio label{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: ZenduToggleSlideComponent, selector: "zen-toggle-slide", inputs: ["enabled", "disabled"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduDatepickerComponent, selector: "zen-datepicker", inputs: ["date", "showTime", "showSeconds", "showDate", "parentContainer", "containerClass", "minDate", "maxDate", "boxDesign", "highlightDays", "autoConfirm", "hint", "highlightError", "disabled", "readonly", "xPosition", "yPosition", "dispalyOverParent"], outputs: ["dateChange"] }, { 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: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
3065
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3066
|
+
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", isVisible: "isVisible", customTrigger: "customTrigger", imageUrl: "imageUrl", label: "label", 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]=\"isApplied ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{isApplied ? 'applied' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <i class=\"filter-icon material-icons\"\n >filter_list</i>\n }\n @if (label) {\n <span>{{ label | translate }}</span>\n }\n </zen-button>\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <div [hidden]=\"!isVisible\"\n class=\"action-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"action-menu-header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"action-menu-body items-wrapper\"\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 <div>\n @if (isMenuIsVisible(item)) {\n <div class=\"menu-item\"\n >\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <div>\n <p class=\"filter-divider\"></p>\n </div>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\">\n <div>{{item.title | translate}}</div>\n <zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\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 <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n {{item.title | translate}}\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n <div>\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div>\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 <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\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 <button (click)=\"loadMore(item, false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </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 <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\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>\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=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'Date' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.date\"\n [showTime]=\"item.showTime\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row\">\n <div>\n <div class=\"lbl\">{{'Min' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.from\"\n type=\"number\" />\n </div>\n <div>\n <div class=\"lbl\">{{'Max' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.to\"\n type=\"number\" />\n </div>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div>\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 </div>\n }\n </div>\n }\n </div>\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"action-menu-footer filter-footer\">\n @if (hasMultiselectItems) {\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n }\n <div class=\"filter-footer-actions\">\n <button (click)=\"reset()\"\n class=\"filter-btn-clear\"\n [class.has-selection]=\"selectedCount > 0 && hasMultiselectItems\">\n {{'Clear Filter' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"filter-btn-apply\">\n {{'Apply' | translate}}\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:360px;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:8px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:8px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative;padding:8px 0}.filters-component .menu-content .items-wrapper .action-item,.filters-component .menu-content .items-wrapper .action-item-checkbox,.filters-component .menu-content .items-wrapper .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.filters-component .menu-content .items-wrapper .action-item:hover,.filters-component .menu-content .items-wrapper .action-item-checkbox:hover,.filters-component .menu-content .items-wrapper .action-item-radio:hover{background:transparent}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:12px 24px}.filters-component .menu-content .items-wrapper .expander-item .expander-title{flex:1;text-align:left}.filters-component .menu-content .items-wrapper .expander-item.expanded,.filters-component .menu-content .items-wrapper .expander-item.active{background:transparent;color:#344054}.filters-component .menu-content .items-wrapper .expander-item:hover{background:transparent}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s;font-size:20px;color:#667085}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:32px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 24px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 24px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.filters-component .filter-footer{justify-content:space-between;padding:16px 24px;border-top:1px solid #eaecf0}.filters-component .filter-footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-footer .filter-btn-clear{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:#fff;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#d0d5dd;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-clear:hover{background:#f9fafb;color:#98a2b3}.filters-component .filter-footer .filter-btn-clear.has-selection{border-color:#fda29b;color:#b42318}.filters-component .filter-footer .filter-btn-clear.has-selection:hover{background:#fef3f2;color:#912018}.filters-component .filter-footer .filter-btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:var(--color-primary, #2188d9);border:1px solid var(--color-primary, #2188d9);box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-apply:hover{background:var(--color-blue-shade-1, #0d74c5);border-color:var(--color-blue-shade-1, #0d74c5)}.filters-component .section-title{font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:12px 24px}.filters-component .section-title:hover{background:transparent}.filters-component .has-badge zen-checkbox{width:auto}.filters-component .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.hidden{display:none}: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.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.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { 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: ZenduToggleSlideComponent, selector: "zen-toggle-slide", inputs: ["enabled", "disabled"], outputs: ["enabledChange"] }, { kind: "component", type: ZenduSearchBoxComponent, selector: "zen-search-box", inputs: ["text", "delay", "autoFocus", "disabled", "placeholder"], outputs: ["textChange"] }, { kind: "component", type: ZenduDatepickerComponent, selector: "zen-datepicker", inputs: ["date", "showTime", "showSeconds", "showDate", "parentContainer", "containerClass", "minDate", "maxDate", "boxDesign", "highlightDays", "autoConfirm", "hint", "highlightError", "disabled", "readonly", "xPosition", "yPosition", "dispalyOverParent"], outputs: ["dateChange"] }, { 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: ZenButtonComponent, selector: "zen-button", inputs: ["variant", "buttonType", "icon", "size", "destructive", "disabled", "fullWidth", "type"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
3067
3067
|
}
|
|
3068
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFilterComponent, decorators: [{
|
|
3069
3069
|
type: Component,
|
|
3070
|
-
args: [{ selector: 'zen-filter', template: "<div class=\"filters-component\"\n #mainComponent\n click-out=\"isVisible && hide()\">\n\n <ng-container *ngIf=\"!customTrigger\">\n <zen-button (click)=\"toggle()\"\n [variant]=\"isApplied ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{isApplied ? 'applied' : ''}}\">\n <zen-icon [src]=\"imageUrl\"\n *ngIf=\"imageUrl\"></zen-icon>\n <i class=\"filter-icon material-icons\"\n *ngIf=\"!imageUrl\">filter_list</i>\n <span *ngIf=\"label\">{{ label | translate }}</span>\n </zen-button>\n </ng-container>\n\n <ng-content *ngIf=\"customTrigger\"></ng-content>\n\n <div [hidden]=\"!isVisible\"\n class=\"action-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"action-menu-header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"action-menu-body items-wrapper\"\n ngClass=\"{{wrapperBodyClass}}\">\n <ng-container *ngIf=\"errorMessage.length\">\n <li *ngFor=\"let item of errorMessage\"\n class=\"error-msg\">{{item | translate }}</li>\n </ng-container>\n\n <div *ngFor=\"let item of config.items\">\n <div class=\"menu-item\"\n *ngIf=\"isMenuIsVisible(item)\">\n\n <!-- Divider between two filter -->\n <div *ngIf=\"item.type === 'divider'\">\n <p class=\"filter-divider\"></p>\n </div>\n\n <!-- Boolean toggle -->\n <div *ngIf=\"item.type === 'toggle'\"\n class=\"action-item toggle-row\">\n <div>{{item.title | translate}}</div>\n <zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\n </div>\n\n <button class=\"action-item expander-item\"\n *ngIf=\"item.type != 'toggle' && item.type != 'divider' && !item.disableCollapse\"\n (click)=\"toggleItem(item)\">\n <span class=\"expander-title\">{{item.title | translate}}</span>\n <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n </button>\n\n <div class=\"action-item section-title\"\n *ngIf=\"item.type != 'toggle' && item.type != 'divider' && item.disableCollapse\">\n {{item.title | translate}}\n </div>\n\n <ng-container *ngIf=\"item.expanded || item.disableCollapse\">\n <div [ngSwitch]=\"item.type\">\n <!-- Multiselect -->\n <div *ngSwitchCase=\"'multiselect'\">\n <!-- Lazy loading mode -->\n <ng-container *ngIf=\"item.isLazyLoading\">\n <div *ngFor=\"let dsItem of item.filteredDataSource\"\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n <span *ngIf=\"dsItem.badgeBgColor\"\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n </div>\n <div *ngIf=\"item.canLoadMore && !item.isLoadingNow\"\n class=\"action-item\">\n <button (click)=\"loadMore(item, false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </button>\n </div>\n <div *ngIf=\"item.isLoadingNow\"\n class=\"loader-more-spinner\">\n <zen-spinner size=\"small\"></zen-spinner>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!item.isLazyLoading && !hasTreeData(item)\">\n <div class=\"action-item-checkbox ds-item select-all\" *ngIf=\"!item.hideSelectAll\">\n <zen-checkbox *ngIf=\"item.dataSource.length === item.filteredDataSource.length\"\n [(checked)]=\"item.isSelectedAll\"\n [indeterminate]=\"isItemActive(item) && !item.isSelectedAll\"\n [label]=\"'Select All' | translate\"\n (checkedChange)=\"onSelectAll(item)\">\n </zen-checkbox>\n </div>\n\n <div *ngFor=\"let dsItem of item.filteredDataSource\"\n class=\"action-item-checkbox ds-item\"\n [class.has-badge]=\"dsItem.badgeBgColor\">\n <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\n [label]=\"dsItem.badgeBgColor ? '' : (dsItem.name?.toString() | translate)\"></zen-checkbox>\n <span *ngIf=\"dsItem.badgeBgColor\"\n class=\"filter-item-badge\"\n [ngStyle]=\"{'background': dsItem.badgeBgColor, 'color': dsItem.badgeColor}\">\n {{ dsItem.name?.toString() | translate }}\n </span>\n </div>\n </ng-container>\n\n <!-- Tree view mode -->\n <zen-groups *ngIf=\"!item.isLazyLoading && hasTreeData(item)\"\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 </div>\n\n <!-- Date range picker -->\n <div *ngSwitchCase=\"'dateRange'\">\n <!-- Options date range view -->\n <ng-container *ngIf=\"item.dateRangeOptions?.length\">\n <ng-container *ngFor=\"let option of item.dateRangeOptions\">\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 </ng-container>\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 <ng-container *ngIf=\"selectedDateRangeOptions[item.key] === 'Custom'\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Default date range view -->\n <ng-container *ngIf=\"!item.dateRangeOptions?.length\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </ng-container>\n </div>\n\n <!-- Date picker -->\n <div *ngSwitchCase=\"'date'\">\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'Date' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.date\"\n [showTime]=\"item.showTime\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </div>\n\n <!-- Number range -->\n <div *ngSwitchCase=\"'numberRange'\"\n class=\"filter-row number-range-row\">\n <div>\n <div class=\"lbl\">{{'Min' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.from\"\n type=\"number\" />\n </div>\n <div>\n <div class=\"lbl\">{{'Max' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.to\"\n type=\"number\" />\n </div>\n </div>\n\n <!-- Radio -->\n <div *ngSwitchCase=\"'radio'\">\n <div *ngFor=\"let option of item.radioOptions\"\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 </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n <span *ngIf=\"showNoFilterResult\"\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n </div>\n\n <div class=\"action-menu-footer filter-footer\">\n <span class=\"selected-count\" *ngIf=\"hasMultiselectItems\">{{ selectedCount }} {{'Selected' | translate}}</span>\n <div class=\"filter-footer-actions\">\n <button (click)=\"reset()\"\n class=\"filter-btn-clear\"\n [class.has-selection]=\"selectedCount > 0 && hasMultiselectItems\">\n {{'Clear Filter' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"filter-btn-apply\">\n {{'Apply' | translate}}\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:360px;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:8px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:8px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative;padding:8px 0}.filters-component .menu-content .items-wrapper .action-item,.filters-component .menu-content .items-wrapper .action-item-checkbox,.filters-component .menu-content .items-wrapper .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.filters-component .menu-content .items-wrapper .action-item:hover,.filters-component .menu-content .items-wrapper .action-item-checkbox:hover,.filters-component .menu-content .items-wrapper .action-item-radio:hover{background:transparent}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:12px 24px}.filters-component .menu-content .items-wrapper .expander-item .expander-title{flex:1;text-align:left}.filters-component .menu-content .items-wrapper .expander-item.expanded,.filters-component .menu-content .items-wrapper .expander-item.active{background:transparent;color:#344054}.filters-component .menu-content .items-wrapper .expander-item:hover{background:transparent}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s;font-size:20px;color:#667085}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:32px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 24px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 24px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.filters-component .filter-footer{justify-content:space-between;padding:16px 24px;border-top:1px solid #eaecf0}.filters-component .filter-footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-footer .filter-btn-clear{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:#fff;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#d0d5dd;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-clear:hover{background:#f9fafb;color:#98a2b3}.filters-component .filter-footer .filter-btn-clear.has-selection{border-color:#fda29b;color:#b42318}.filters-component .filter-footer .filter-btn-clear.has-selection:hover{background:#fef3f2;color:#912018}.filters-component .filter-footer .filter-btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:var(--color-primary, #2188d9);border:1px solid var(--color-primary, #2188d9);box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-apply:hover{background:var(--color-blue-shade-1, #0d74c5);border-color:var(--color-blue-shade-1, #0d74c5)}.filters-component .section-title{font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:12px 24px}.filters-component .section-title:hover{background:transparent}.filters-component .has-badge zen-checkbox{width:auto}.filters-component .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.hidden{display:none}:host ::ng-deep zen-radio label{margin:0}\n"] }]
|
|
3070
|
+
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]=\"isApplied ? 'secondary' : 'secondary-gray'\"\n class=\"filter {{isApplied ? 'applied' : ''}}\">\n @if (imageUrl) {\n <zen-icon [src]=\"imageUrl\"\n ></zen-icon>\n }\n @if (!imageUrl) {\n <i class=\"filter-icon material-icons\"\n >filter_list</i>\n }\n @if (label) {\n <span>{{ label | translate }}</span>\n }\n </zen-button>\n }\n\n @if (customTrigger) {\n <ng-content></ng-content>\n }\n\n <div [hidden]=\"!isVisible\"\n class=\"action-menu menu-content\"\n [class.customTrigger]=\"customTrigger\"\n [ngStyle]=\"{ 'left': menuLeft, 'right': menuRight, 'top': menuTop, 'bottom': menuBottom }\">\n <div class=\"action-menu-header\">\n <zen-search-box [(text)]=\"searchText\"\n #searchBox\n (textChange)=\"searchTextChanged()\"></zen-search-box>\n </div>\n\n <div class=\"action-menu-body items-wrapper\"\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 <div>\n @if (isMenuIsVisible(item)) {\n <div class=\"menu-item\"\n >\n <!-- Divider between two filter -->\n @if (item.type === 'divider') {\n <div>\n <p class=\"filter-divider\"></p>\n </div>\n }\n <!-- Boolean toggle -->\n @if (item.type === 'toggle') {\n <div\n class=\"action-item toggle-row\">\n <div>{{item.title | translate}}</div>\n <zen-toggle-slide [(enabled)]=\"item.enabled\"></zen-toggle-slide>\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 <i class=\"material-icons expand-icon\"\n [ngClass]=\"{'active': item.expanded}\">expand_more</i>\n </button>\n }\n @if (item.type != 'toggle' && item.type != 'divider' && item.disableCollapse) {\n <div class=\"action-item section-title\"\n >\n {{item.title | translate}}\n </div>\n }\n @if (item.expanded || item.disableCollapse) {\n <div>\n @switch (item.type) {\n <!-- Multiselect -->\n @case ('multiselect') {\n <div>\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 <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\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 <button (click)=\"loadMore(item, false)\"\n class=\"button-stroked full-width\">\n {{'Load More' | translate}}\n </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 <zen-checkbox [(checked)]=\"dsItem.checked\"\n [imageUrl]=\"dsItem.imageUrl\"\n (checkedChange)=\"checkChanged(dsItem, item)\"\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>\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=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n }\n }\n <!-- Default date range view -->\n @if (!item.dateRangeOptions?.length) {\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'From' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.start\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'To' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.dateRange.end\"\n [showTime]=\"item.showTime\"\n [yPosition]=\"item.config?.yPosition ?? datepickerPosition.AUTO\"\n (dateChange)=\"handleEndDateChange(item)\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n }\n </div>\n }\n <!-- Date picker -->\n @case ('date') {\n <div>\n <div class=\"ds-item filter-row\">\n <div class=\"lbl\">{{'Date' | translate}}:</div>\n <zen-datepicker class=\"width-full\"\n [(date)]=\"item.date\"\n [showTime]=\"item.showTime\"\n [parentContainer]=\"mainComponent\">\n </zen-datepicker>\n </div>\n </div>\n }\n <!-- Number range -->\n @case ('numberRange') {\n <div\n class=\"filter-row number-range-row\">\n <div>\n <div class=\"lbl\">{{'Min' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.from\"\n type=\"number\" />\n </div>\n <div>\n <div class=\"lbl\">{{'Max' | translate}}:</div>\n <input class=\"material-input\"\n [(ngModel)]=\"item.numberRange.to\"\n type=\"number\" />\n </div>\n </div>\n }\n <!-- Radio -->\n @case ('radio') {\n <div>\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 </div>\n }\n </div>\n }\n </div>\n }\n @if (showNoFilterResult) {\n <span\n class=\"no-item\">{{'No Results Found' | translate}}..</span>\n }\n </div>\n\n <div class=\"action-menu-footer filter-footer\">\n @if (hasMultiselectItems) {\n <span class=\"selected-count\">{{ selectedCount }} {{'Selected' | translate}}</span>\n }\n <div class=\"filter-footer-actions\">\n <button (click)=\"reset()\"\n class=\"filter-btn-clear\"\n [class.has-selection]=\"selectedCount > 0 && hasMultiselectItems\">\n {{'Clear Filter' | translate}}\n </button>\n <button (click)=\"apply()\"\n class=\"filter-btn-apply\">\n {{'Apply' | translate}}\n </button>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".filters-component{display:inline-block;position:relative}.filters-component .menu-content{width:360px;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:8px}.filters-component .menu-content.dropdown-bottom{top:100%;margin-top:8px}.filters-component .menu-content.customTrigger{top:30px}.filters-component .menu-content .items-wrapper{overflow-y:auto;max-height:calc(100vh - 407px);position:relative;padding:8px 0}.filters-component .menu-content .items-wrapper .action-item,.filters-component .menu-content .items-wrapper .action-item-checkbox,.filters-component .menu-content .items-wrapper .action-item-radio{font-weight:500;font-size:14px;line-height:20px;color:#344054;padding:0 24px}.filters-component .menu-content .items-wrapper .action-item:hover,.filters-component .menu-content .items-wrapper .action-item-checkbox:hover,.filters-component .menu-content .items-wrapper .action-item-radio:hover{background:transparent}.filters-component .menu-content .items-wrapper .expander-item{outline:none;border:none;display:flex;width:100%;justify-content:space-between;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#344054;background:transparent;padding:12px 24px}.filters-component .menu-content .items-wrapper .expander-item .expander-title{flex:1;text-align:left}.filters-component .menu-content .items-wrapper .expander-item.expanded,.filters-component .menu-content .items-wrapper .expander-item.active{background:transparent;color:#344054}.filters-component .menu-content .items-wrapper .expander-item:hover{background:transparent}.filters-component .menu-content .items-wrapper .expand-icon{transition:.3s;font-size:20px;color:#667085}.filters-component .menu-content .items-wrapper .expand-icon.active{transform:rotate(180deg)}.filters-component .menu-content .items-wrapper .ds-item{padding-left:32px}.filters-component .menu-content .items-wrapper .no-item,.filters-component .menu-content .items-wrapper .error-msg{color:#dc3e33;display:flex;flex-direction:row;align-items:center;padding:10px 24px;font-weight:400;font-size:14px}.filters-component .menu-content .items-wrapper .select-all{font-weight:500}.filters-component .menu-content .items-wrapper .filter-row{padding:0 24px}.filters-component .menu-content .items-wrapper .filter-row:not(:last-of-type){margin-bottom:20px}.filters-component .menu-content .items-wrapper .filter-row .lbl{color:#344054;font-size:14px;font-weight:500;margin-bottom:8px}.filters-component .menu-content .items-wrapper .filter-row:focus-within .lbl{color:var(--color-primary, #2188d9)}.filters-component .menu-content .items-wrapper .number-range-row{display:flex;margin-left:32px;gap:16px;margin-bottom:10px}.filters-component .menu-content .items-wrapper .toggle-row{justify-content:space-between}.filters-component .filter-footer{justify-content:space-between;padding:16px 24px;border-top:1px solid #eaecf0}.filters-component .filter-footer .selected-count{font-weight:500;font-size:14px;line-height:20px;color:#1d2939}.filters-component .filter-footer .filter-footer-actions{display:flex;gap:12px}.filters-component .filter-footer .filter-btn-clear{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:#fff;border:1px solid #eaecf0;box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#d0d5dd;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-clear:hover{background:#f9fafb;color:#98a2b3}.filters-component .filter-footer .filter-btn-clear.has-selection{border-color:#fda29b;color:#b42318}.filters-component .filter-footer .filter-btn-clear.has-selection:hover{background:#fef3f2;color:#912018}.filters-component .filter-footer .filter-btn-apply{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;background:var(--color-primary, #2188d9);border:1px solid var(--color-primary, #2188d9);box-shadow:0 1px 2px #1018280d;font-family:inherit;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer;white-space:nowrap}.filters-component .filter-footer .filter-btn-apply:hover{background:var(--color-blue-shade-1, #0d74c5);border-color:var(--color-blue-shade-1, #0d74c5)}.filters-component .section-title{font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:default;padding:12px 24px}.filters-component .section-title:hover{background:transparent}.filters-component .has-badge zen-checkbox{width:auto}.filters-component .filter-item-badge{font-weight:500;font-size:14px;line-height:20px;padding:2px 10px;border-radius:16px;white-space:nowrap}.filters-component .loader-more-spinner{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.hidden{display:none}:host ::ng-deep zen-radio label{margin:0}\n"] }]
|
|
3071
3071
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { config: [{
|
|
3072
3072
|
type: Input
|
|
3073
3073
|
}], filter: [{
|
|
@@ -3107,10 +3107,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3107
3107
|
args: ['window:mousedown', ['$event']]
|
|
3108
3108
|
}], windowSizeHandling: [{
|
|
3109
3109
|
type: HostListener,
|
|
3110
|
-
args: ['window:resize', [
|
|
3110
|
+
args: ['window:resize', []]
|
|
3111
3111
|
}], windowScroll: [{
|
|
3112
3112
|
type: HostListener,
|
|
3113
|
-
args: ['window:scroll', [
|
|
3113
|
+
args: ['window:scroll', []]
|
|
3114
3114
|
}], onWindowKeyDown: [{
|
|
3115
3115
|
type: HostListener,
|
|
3116
3116
|
args: ['window:keydown', ['$event']]
|
|
@@ -3172,12 +3172,12 @@ class ZenduPaginationBarComponent {
|
|
|
3172
3172
|
}
|
|
3173
3173
|
return result;
|
|
3174
3174
|
}
|
|
3175
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3176
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3175
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3176
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduPaginationBarComponent, isStandalone: false, selector: "zen-pagination-bar", inputs: { page: "page", perPage: "perPage", count: "count" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-component\">\n <button type=\"button\"\n class=\"nav-btn\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPage(page - 1)\">\n <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n <span>{{ \"Previous\" | translate }}</span>\n </button>\n\n <div class=\"pages\">\n @for (item of pages; track item; let i = $index) {\n @if (item.kind === 'page') {\n <button\n type=\"button\"\n class=\"page-btn\"\n [class.is-active]=\"item.active\"\n (click)=\"goToPage(item.page)\">\n {{ item.page }}\n </button>\n }\n @if (item.kind === 'ellipsis') {\n <span class=\"page-ellipsis\">\u2026</span>\n }\n }\n </div>\n\n <button type=\"button\"\n class=\"nav-btn\"\n [disabled]=\"page >= totalPages\"\n (click)=\"goToPage(page + 1)\">\n <span>{{ \"Next\" | translate }}</span>\n <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n</div>\n", styles: [".pagination-component{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .nav-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:pointer;transition:background-color .1s}.pagination-component .nav-btn:hover:not(:disabled){background:#f9fafb}.pagination-component .nav-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-component .nav-btn .nav-icon{width:20px;height:20px;background-color:#344054}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"], dependencies: [{ 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 }); }
|
|
3177
3177
|
}
|
|
3178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPaginationBarComponent, decorators: [{
|
|
3179
3179
|
type: Component,
|
|
3180
|
-
args: [{ selector: 'zen-pagination-bar', template: "<div class=\"pagination-component\">\n
|
|
3180
|
+
args: [{ selector: 'zen-pagination-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"pagination-component\">\n <button type=\"button\"\n class=\"nav-btn\"\n [disabled]=\"page <= 1\"\n (click)=\"goToPage(page - 1)\">\n <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n <span>{{ \"Previous\" | translate }}</span>\n </button>\n\n <div class=\"pages\">\n @for (item of pages; track item; let i = $index) {\n @if (item.kind === 'page') {\n <button\n type=\"button\"\n class=\"page-btn\"\n [class.is-active]=\"item.active\"\n (click)=\"goToPage(item.page)\">\n {{ item.page }}\n </button>\n }\n @if (item.kind === 'ellipsis') {\n <span class=\"page-ellipsis\">\u2026</span>\n }\n }\n </div>\n\n <button type=\"button\"\n class=\"nav-btn\"\n [disabled]=\"page >= totalPages\"\n (click)=\"goToPage(page + 1)\">\n <span>{{ \"Next\" | translate }}</span>\n <zen-icon class=\"nav-icon\" src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n </button>\n</div>\n", styles: [".pagination-component{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid #EAECF0;padding:11px 24px 16px;font-family:Inter,sans-serif}.pagination-component .nav-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:pointer;transition:background-color .1s}.pagination-component .nav-btn:hover:not(:disabled){background:#f9fafb}.pagination-component .nav-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-component .nav-btn .nav-icon{width:20px;height:20px;background-color:#344054}.pagination-component .pages{display:flex;flex-direction:row;align-items:center;gap:2px}.pagination-component .page-btn,.pagination-component .page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;color:#667085;background:transparent;border:0;padding:0;box-sizing:border-box}.pagination-component .page-btn{cursor:pointer;transition:background-color .1s,color .1s}.pagination-component .page-btn:hover:not(.is-active){background:#f9fafb}.pagination-component .page-btn.is-active{background:#f1f7fe;color:#136ab6;cursor:default}.pagination-component .page-ellipsis{cursor:default}\n"] }]
|
|
3181
3181
|
}], propDecorators: { page: [{
|
|
3182
3182
|
type: Input
|
|
3183
3183
|
}], perPage: [{
|
|
@@ -3311,12 +3311,12 @@ class ZenduPhoneInputComponent {
|
|
|
3311
3311
|
this.inputElement.nativeElement.focus();
|
|
3312
3312
|
}
|
|
3313
3313
|
}
|
|
3314
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenduPhoneInputComponent, 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 <div class=\"zen-dropdown-menu\"\n *ngIf=\"isExpanded\"\n [ngClass]=\"{'open': isExpanded}\">\n <!-- Countries List -->\n <button type=\"button\"\n class=\"zen-dropdown-option\"\n *ngFor=\"let country of countryList\"\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</div>\n\n<!-- Click outside handler for dropdown -->\n<div *ngIf=\"isExpanded\"\n class=\"zen-dropdown-backdrop\"\n (click)=\"hideDropDown()\"></div>\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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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"] }] }); }
|
|
3314
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3315
|
+
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 }); }
|
|
3316
3316
|
}
|
|
3317
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3317
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduPhoneInputComponent, decorators: [{
|
|
3318
3318
|
type: Component,
|
|
3319
|
-
args: [{ selector: 'zen-phone-input', template: "<div class=\"zen-input-container\" [style.width]=\"width\">\n
|
|
3319
|
+
args: [{ selector: 'zen-phone-input', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
3320
3320
|
}], ctorParameters: () => [], propDecorators: { inputElement: [{
|
|
3321
3321
|
type: ViewChild,
|
|
3322
3322
|
args: ['input']
|
|
@@ -3338,13 +3338,14 @@ class ZenduSelectOptionDirective {
|
|
|
3338
3338
|
constructor(template) {
|
|
3339
3339
|
this.template = template;
|
|
3340
3340
|
}
|
|
3341
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3342
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3341
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3342
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ZenduSelectOptionDirective, isStandalone: false, selector: "[zen-select-option]", ngImport: i0 }); }
|
|
3343
3343
|
}
|
|
3344
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectOptionDirective, decorators: [{
|
|
3345
3345
|
type: Directive,
|
|
3346
3346
|
args: [{
|
|
3347
|
-
selector: '[zen-select-option]'
|
|
3347
|
+
selector: '[zen-select-option]',
|
|
3348
|
+
standalone: false
|
|
3348
3349
|
}]
|
|
3349
3350
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
3350
3351
|
|
|
@@ -3352,13 +3353,14 @@ class ZenduSelectValueDirective {
|
|
|
3352
3353
|
constructor(template) {
|
|
3353
3354
|
this.template = template;
|
|
3354
3355
|
}
|
|
3355
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3356
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3356
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectValueDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3357
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ZenduSelectValueDirective, isStandalone: false, selector: "[zen-select-value]", ngImport: i0 }); }
|
|
3357
3358
|
}
|
|
3358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3359
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectValueDirective, decorators: [{
|
|
3359
3360
|
type: Directive,
|
|
3360
3361
|
args: [{
|
|
3361
|
-
selector: '[zen-select-value]'
|
|
3362
|
+
selector: '[zen-select-value]',
|
|
3363
|
+
standalone: false
|
|
3362
3364
|
}]
|
|
3363
3365
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
3364
3366
|
|
|
@@ -3366,13 +3368,14 @@ class ZenduSelectButtonDirective {
|
|
|
3366
3368
|
constructor(template) {
|
|
3367
3369
|
this.template = template;
|
|
3368
3370
|
}
|
|
3369
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3370
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3371
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectButtonDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3372
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ZenduSelectButtonDirective, isStandalone: false, selector: "[zen-select-custom-button]", ngImport: i0 }); }
|
|
3371
3373
|
}
|
|
3372
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectButtonDirective, decorators: [{
|
|
3373
3375
|
type: Directive,
|
|
3374
3376
|
args: [{
|
|
3375
|
-
selector: '[zen-select-custom-button]'
|
|
3377
|
+
selector: '[zen-select-custom-button]',
|
|
3378
|
+
standalone: false
|
|
3376
3379
|
}]
|
|
3377
3380
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
3378
3381
|
|
|
@@ -4116,12 +4119,12 @@ class ZenduSelectComponent {
|
|
|
4116
4119
|
return;
|
|
4117
4120
|
this.isSelectedAll = this.options.every(opt => opt.checked);
|
|
4118
4121
|
}
|
|
4119
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4120
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenduSelectComponent, selector: "zen-select", inputs: { selectModel: "selectModel", options: "options", label: "label", 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 <label class=\"app-select-label text text-sm text-weight-medium\" *ngIf=\"label\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n <span *ngIf=\"required\" class=\"required-indicator\">*</span>\n </label>\n\n <!-- Select Input -->\n <div class=\"app-select-wrapper\">\n <!-- Custom Trigger Template (overrides built-in trigger) -->\n <div *ngIf=\"buttonTemplate\"\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 <!-- Built-in Trigger (when no custom button template provided) -->\n <ng-container *ngIf=\"!buttonTemplate\" [ngSwitch]=\"leadingType\">\n <!-- Default Select (no leading element) -->\n <ng-container *ngSwitchCase=\"'default'\">\n <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n </ng-container>\n\n <!-- Icon Leading Select -->\n <ng-container *ngSwitchCase=\"'icon'\">\n <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n </ng-container>\n\n <!-- Avatar Leading Select -->\n <ng-container *ngSwitchCase=\"'avatar'\">\n <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n </ng-container>\n\n <!-- Dot Leading Select -->\n <ng-container *ngSwitchCase=\"'dot'\">\n <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n </ng-container>\n\n <!-- Search Input Select -->\n <ng-container *ngSwitchCase=\"'search'\">\n <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n </ng-container>\n </ng-container>\n\n <!-- Dropdown Menu -->\n <div class=\"app-select-dropdown\" \n [ngClass]=\"getDropdownDirectionClass()\"\n *ngIf=\"isOpen\">\n \n <!-- Tree Mode: embed zen-groups inline -->\n <ng-container *ngIf=\"isTreeMode && isMultiselect; else flatList\">\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 </ng-container>\n\n <!-- Flat List Mode (default) -->\n <ng-template #flatList>\n <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n <div class=\"app-select-search\" *ngIf=\"leadingType !== 'search' && hasSearch && !disabled\">\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 <zen-icon *ngIf=\"searchText\"\n class=\"app-select-search-clear\"\n [name]=\"'x'\"\n [customColor]=\"'#667085'\"\n (click)=\"clearSearch(); $event.stopPropagation()\">\n </zen-icon>\n </div>\n\n <!-- Options List -->\n <div class=\"app-select-options\">\n <!-- Select All Option for Multiselect -->\n <button *ngIf=\"isMultiselect && !hideSelectAll && filteredOptions.length > 0\"\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 <button *ngIf=\"enableAddNewOption && (showDefaultAddOption || searchText)\"\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 <button *ngIf=\"enableRemoveOption\"\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 <div *ngIf=\"filteredOptions.length === 0 && !enableAddNewOption\" class=\"app-select-no-options\">\n No matching options found\n </div>\n\n <button *ngFor=\"let option of filteredOptions\"\n class=\"app-select-option\"\n [class.selected]=\"isSelected(option)\"\n (click)=\"selectOption(option)\">\n\n <!-- Checkbox for Multiselect -->\n <zen-checkbox class=\"app-select-checkbox\"\n *ngIf=\"isMultiselect\"\n [checked]=\"isSelected(option)\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n\n <!-- Option Leading Element -->\n <div class=\"app-select-option-leading\" *ngIf=\"leadingType !== 'default'\">\n <ng-container [ngSwitch]=\"leadingType\">\n <ng-container *ngSwitchCase=\"'icon'\">\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'avatar'\">\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'dot'\">\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Option Text -->\n <div class=\"app-select-option-text-wrapper\">\n <!-- Use custom template if provided -->\n <ng-container *ngIf=\"!isMultiselect && optionTemplate; else defaultOptionText\">\n <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n </ng-container>\n <ng-template #defaultOptionText>\n <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n {{ getName(option) | translate }}\n </span>\n <span class=\"app-select-option-secondary\" *ngIf=\"option.secondaryText\">\n {{ option.secondaryText }}\n </span>\n </ng-template>\n </div>\n\n <!-- Check Icon for Single Select -->\n <zen-icon *ngIf=\"!isMultiselect && isSelected(option)\"\n class=\"app-select-option-check\"\n [name]=\"'check'\"\n [customColor]=\"'#136AB6'\">\n </zen-icon>\n </button>\n </div>\n </ng-template>\n </div>\n </div>\n \n <!-- Hint text / Error message -->\n <div *ngIf=\"(destructive && errorMessage) || hintText\" \n class=\"app-select-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n <i *ngIf=\"destructive\" class=\"material-icons-outlined hint-icon\">error_outline</i>\n <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n </div>\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 <ng-container *ngIf=\"valueTemplate && !isModelEmpty(); else defaultValueDisplay\">\n <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n </ng-template>\n </ng-container>\n <ng-template #defaultValueDisplay>\n <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n {{ selectedDisplay || placeholder | translate }}\n </span>\n <span class=\"app-select-secondary\" *ngIf=\"getSelectedSecondaryText() && !isModelEmpty()\">\n {{ getSelectedSecondaryText() }}\n </span>\n </ng-template>\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 <ng-container *ngIf=\"icon || option?.icon || option?.iconName\">\n <ng-container *ngIf=\"getIconPath(option, icon) as iconPath\">\n <!-- If icon contains / or . treat as SVG path -->\n <ng-container *ngIf=\"(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 <img *ngIf=\"iconPath.includes('excel')\" \n [src]=\"iconPath\" \n alt=\"\"\n style=\"width: 20px; height: 20px;\">\n <!-- Use zen-icon with src for other SVG files -->\n <zen-icon *ngIf=\"!iconPath.includes('excel')\"\n [src]=\"iconPath\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n </ng-container>\n <!-- Otherwise treat as Material icon name or special cases -->\n <ng-container *ngIf=\"!((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 <img *ngIf=\"(icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')\"\n src=\"assets/ng-zenduit/icons/excel.svg\"\n alt=\"Excel\"\n style=\"width: 20px; height: 20px;\">\n <!-- Material icon names -->\n <zen-icon *ngIf=\"(icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')\"\n [name]=\"icon || option?.icon || option?.iconName\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n <div class=\"app-select-avatar\" *ngIf=\"avatar || option?.avatar\" >\n <img [src]=\"avatar || option?.avatar\" alt=\"\">\n </div>\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:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.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:#d0d5dd}.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;opacity:.6}.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 .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-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.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-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-secondary,.app-select-container.disabled .app-select-search-field{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 0}.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 14px;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[style*=padding-left]{padding-right:14px}.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 24px;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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
4122
|
+
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 }); }
|
|
4123
|
+
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", 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 </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\">\n <!-- Select All Option for Multiselect -->\n @if (isMultiselect && !hideSelectAll && 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) {\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 </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:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.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:#d0d5dd}.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;opacity:.6}.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 .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-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.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-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-secondary,.app-select-container.disabled .app-select-search-field{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 0}.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 14px;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[style*=padding-left]{padding-right:14px}.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 24px;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: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4121
4124
|
}
|
|
4122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSelectComponent, decorators: [{
|
|
4123
4126
|
type: Component,
|
|
4124
|
-
args: [{ selector: 'zen-select', template: "<div [class]=\"getStateClasses()\">\n <!-- Label -->\n <label class=\"app-select-label text text-sm text-weight-medium\" *ngIf=\"label\"\n [ngClass]=\"{'required': required, 'disabled': disabled, 'destructive': destructive}\">\n {{ label | translate }}\n <span *ngIf=\"required\" class=\"required-indicator\">*</span>\n </label>\n\n <!-- Select Input -->\n <div class=\"app-select-wrapper\">\n <!-- Custom Trigger Template (overrides built-in trigger) -->\n <div *ngIf=\"buttonTemplate\"\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 <!-- Built-in Trigger (when no custom button template provided) -->\n <ng-container *ngIf=\"!buttonTemplate\" [ngSwitch]=\"leadingType\">\n <!-- Default Select (no leading element) -->\n <ng-container *ngSwitchCase=\"'default'\">\n <ng-container *ngTemplateOutlet=\"defaultSelectTemplate\"></ng-container>\n </ng-container>\n\n <!-- Icon Leading Select -->\n <ng-container *ngSwitchCase=\"'icon'\">\n <ng-container *ngTemplateOutlet=\"iconSelectTemplate\"></ng-container>\n </ng-container>\n\n <!-- Avatar Leading Select -->\n <ng-container *ngSwitchCase=\"'avatar'\">\n <ng-container *ngTemplateOutlet=\"avatarSelectTemplate\"></ng-container>\n </ng-container>\n\n <!-- Dot Leading Select -->\n <ng-container *ngSwitchCase=\"'dot'\">\n <ng-container *ngTemplateOutlet=\"dotSelectTemplate\"></ng-container>\n </ng-container>\n\n <!-- Search Input Select -->\n <ng-container *ngSwitchCase=\"'search'\">\n <ng-container *ngTemplateOutlet=\"searchInputTemplate\"></ng-container>\n </ng-container>\n </ng-container>\n\n <!-- Dropdown Menu -->\n <div class=\"app-select-dropdown\" \n [ngClass]=\"getDropdownDirectionClass()\"\n *ngIf=\"isOpen\">\n \n <!-- Tree Mode: embed zen-groups inline -->\n <ng-container *ngIf=\"isTreeMode && isMultiselect; else flatList\">\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 </ng-container>\n\n <!-- Flat List Mode (default) -->\n <ng-template #flatList>\n <!-- Search Box for hasSearch (not for search type as it has inline search) -->\n <div class=\"app-select-search\" *ngIf=\"leadingType !== 'search' && hasSearch && !disabled\">\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 <zen-icon *ngIf=\"searchText\"\n class=\"app-select-search-clear\"\n [name]=\"'x'\"\n [customColor]=\"'#667085'\"\n (click)=\"clearSearch(); $event.stopPropagation()\">\n </zen-icon>\n </div>\n\n <!-- Options List -->\n <div class=\"app-select-options\">\n <!-- Select All Option for Multiselect -->\n <button *ngIf=\"isMultiselect && !hideSelectAll && filteredOptions.length > 0\"\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 <button *ngIf=\"enableAddNewOption && (showDefaultAddOption || searchText)\"\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 <button *ngIf=\"enableRemoveOption\"\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 <div *ngIf=\"filteredOptions.length === 0 && !enableAddNewOption\" class=\"app-select-no-options\">\n No matching options found\n </div>\n\n <button *ngFor=\"let option of filteredOptions\"\n class=\"app-select-option\"\n [class.selected]=\"isSelected(option)\"\n (click)=\"selectOption(option)\">\n\n <!-- Checkbox for Multiselect -->\n <zen-checkbox class=\"app-select-checkbox\"\n *ngIf=\"isMultiselect\"\n [checked]=\"isSelected(option)\"\n [disableValueChange]=\"true\"\n [label]=\"''\"\n size=\"sm\">\n </zen-checkbox>\n\n <!-- Option Leading Element -->\n <div class=\"app-select-option-leading\" *ngIf=\"leadingType !== 'default'\">\n <ng-container [ngSwitch]=\"leadingType\">\n <ng-container *ngSwitchCase=\"'icon'\">\n <ng-container *ngTemplateOutlet=\"iconLeadingElement; context: { option: option }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'avatar'\">\n <ng-container *ngTemplateOutlet=\"avatarLeadingElement; context: { option: option }\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'dot'\">\n <ng-container *ngTemplateOutlet=\"dotLeadingElement; context: { option: option }\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Option Text -->\n <div class=\"app-select-option-text-wrapper\">\n <!-- Use custom template if provided -->\n <ng-container *ngIf=\"!isMultiselect && optionTemplate; else defaultOptionText\">\n <ng-template [ngTemplateOutlet]=\"optionTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: option }\">\n </ng-template>\n </ng-container>\n <ng-template #defaultOptionText>\n <span class=\"app-select-option-text\" [class.app-select-option-truncate]=\"isTruncate\">\n {{ getName(option) | translate }}\n </span>\n <span class=\"app-select-option-secondary\" *ngIf=\"option.secondaryText\">\n {{ option.secondaryText }}\n </span>\n </ng-template>\n </div>\n\n <!-- Check Icon for Single Select -->\n <zen-icon *ngIf=\"!isMultiselect && isSelected(option)\"\n class=\"app-select-option-check\"\n [name]=\"'check'\"\n [customColor]=\"'#136AB6'\">\n </zen-icon>\n </button>\n </div>\n </ng-template>\n </div>\n </div>\n \n <!-- Hint text / Error message -->\n <div *ngIf=\"(destructive && errorMessage) || hintText\" \n class=\"app-select-hint text text-sm text-weight-regular\"\n [ngClass]=\"{'destructive': destructive}\">\n <i *ngIf=\"destructive\" class=\"material-icons-outlined hint-icon\">error_outline</i>\n <span>{{ ((destructive && errorMessage) ? errorMessage : hintText) | translate }}</span>\n </div>\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 <ng-container *ngIf=\"valueTemplate && !isModelEmpty(); else defaultValueDisplay\">\n <ng-template [ngTemplateOutlet]=\"valueTemplate.template\"\n [ngTemplateOutletContext]=\"{ option: getSelectedOption(), display: selectedDisplay }\">\n </ng-template>\n </ng-container>\n <ng-template #defaultValueDisplay>\n <span class=\"app-select-value\" [class.placeholder]=\"isModelEmpty()\">\n {{ selectedDisplay || placeholder | translate }}\n </span>\n <span class=\"app-select-secondary\" *ngIf=\"getSelectedSecondaryText() && !isModelEmpty()\">\n {{ getSelectedSecondaryText() }}\n </span>\n </ng-template>\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 <ng-container *ngIf=\"icon || option?.icon || option?.iconName\">\n <ng-container *ngIf=\"getIconPath(option, icon) as iconPath\">\n <!-- If icon contains / or . treat as SVG path -->\n <ng-container *ngIf=\"(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 <img *ngIf=\"iconPath.includes('excel')\" \n [src]=\"iconPath\" \n alt=\"\"\n style=\"width: 20px; height: 20px;\">\n <!-- Use zen-icon with src for other SVG files -->\n <zen-icon *ngIf=\"!iconPath.includes('excel')\"\n [src]=\"iconPath\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n </ng-container>\n <!-- Otherwise treat as Material icon name or special cases -->\n <ng-container *ngIf=\"!((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 <img *ngIf=\"(icon === 'excel') || (option?.icon === 'excel') || (option?.iconName === 'excel')\"\n src=\"assets/ng-zenduit/icons/excel.svg\"\n alt=\"Excel\"\n style=\"width: 20px; height: 20px;\">\n <!-- Material icon names -->\n <zen-icon *ngIf=\"(icon !== 'excel') && (option?.icon !== 'excel') && (option?.iconName !== 'excel')\"\n [name]=\"icon || option?.icon || option?.iconName\"\n [customColor]=\"'#667085'\">\n </zen-icon>\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<!-- Avatar Leading Element -->\n<ng-template #avatarLeadingElement let-option=\"option\" let-avatar=\"avatar\">\n <div class=\"app-select-avatar\" *ngIf=\"avatar || option?.avatar\" >\n <img [src]=\"avatar || option?.avatar\" alt=\"\">\n </div>\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:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.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:#d0d5dd}.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;opacity:.6}.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 .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-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.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-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-secondary,.app-select-container.disabled .app-select-search-field{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 0}.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 14px;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[style*=padding-left]{padding-right:14px}.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 24px;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"] }]
|
|
4127
|
+
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 </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\">\n <!-- Select All Option for Multiselect -->\n @if (isMultiselect && !hideSelectAll && 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) {\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 </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:4px;margin-bottom:6px;color:#344054}.app-select-label .required-indicator{color:#f04438}.app-select-label.disabled{color:#d0d5dd}.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:#d0d5dd}.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;opacity:.6}.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 .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-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.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-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-secondary,.app-select-container.disabled .app-select-search-field{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 0}.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 14px;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[style*=padding-left]{padding-right:14px}.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 24px;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"] }]
|
|
4125
4128
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectModel: [{
|
|
4126
4129
|
type: Input
|
|
4127
4130
|
}], selectModelChange: [{
|
|
@@ -4229,12 +4232,12 @@ class ZenduSortHeaderComponent {
|
|
|
4229
4232
|
this.sortChange.emit(this.sort);
|
|
4230
4233
|
}
|
|
4231
4234
|
}
|
|
4232
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4235
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4236
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenduSortHeaderComponent, isStandalone: false, selector: "zen-sort", inputs: { sort: "sort", active: "active" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div class=\"sort-option\"\n (click)=\"toggleSort()\">\n <zen-icon class=\"sort-icon\"\n [class.sort-icon-active]=\"active\"\n [class.sort-icon-asc]=\"active && sort === 'asc'\"\n src=\"assets/ng-zenduit/icons/arrow-down.svg\"></zen-icon>\n</div>\n", styles: [".sort-option{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.sort-option .sort-icon{width:10px;height:10px;background-color:#667085;transition:transform .2s,background-color .2s}.sort-option .sort-icon-active{background-color:#344054}.sort-option .sort-icon-asc{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4234
4237
|
}
|
|
4235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSortHeaderComponent, decorators: [{
|
|
4236
4239
|
type: Component,
|
|
4237
|
-
args: [{ selector: 'zen-sort', template: "<div class=\"sort-option\"\n (click)=\"toggleSort()\">\n <zen-icon class=\"sort-icon\"\n [class.sort-icon-active]=\"active\"\n [class.sort-icon-asc]=\"active && sort === 'asc'\"\n src=\"assets/ng-zenduit/icons/arrow-down.svg\"></zen-icon>\n</div>\n", styles: [".sort-option{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.sort-option .sort-icon{width:10px;height:10px;background-color:#667085;transition:transform .2s,background-color .2s}.sort-option .sort-icon-active{background-color:#344054}.sort-option .sort-icon-asc{transform:rotate(180deg)}\n"] }]
|
|
4240
|
+
args: [{ selector: 'zen-sort', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"sort-option\"\n (click)=\"toggleSort()\">\n <zen-icon class=\"sort-icon\"\n [class.sort-icon-active]=\"active\"\n [class.sort-icon-asc]=\"active && sort === 'asc'\"\n src=\"assets/ng-zenduit/icons/arrow-down.svg\"></zen-icon>\n</div>\n", styles: [".sort-option{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.sort-option .sort-icon{width:10px;height:10px;background-color:#667085;transition:transform .2s,background-color .2s}.sort-option .sort-icon-active{background-color:#344054}.sort-option .sort-icon-asc{transform:rotate(180deg)}\n"] }]
|
|
4238
4241
|
}], propDecorators: { sort: [{
|
|
4239
4242
|
type: Input
|
|
4240
4243
|
}], sortChange: [{
|
|
@@ -4260,12 +4263,12 @@ class ZenduToggleComponent {
|
|
|
4260
4263
|
this.enabled = !this.enabled;
|
|
4261
4264
|
this.enabledChange.emit(this.enabled);
|
|
4262
4265
|
}
|
|
4263
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4264
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4266
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4267
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduToggleComponent, isStandalone: false, selector: "zen-toggle", inputs: { enabled: "enabled", size: "size", disabled: "disabled", label: "label", supportingText: "supportingText" }, outputs: { enabledChange: "enabledChange" }, ngImport: i0, template: "<div class=\"zen-toggle-wrapper\"\n [class.zen-toggle--sm]=\"size === 'sm'\"\n [class.zen-toggle--md]=\"size === 'md'\"\n [class.zen-toggle--has-text]=\"label\">\n\n <button class=\"zen-toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"enabled\"\n [attr.aria-disabled]=\"disabled\"\n [class.zen-toggle--active]=\"enabled\"\n [class.zen-toggle--disabled]=\"disabled\"\n [disabled]=\"disabled\"\n (click)=\"toggle()\">\n <span class=\"zen-toggle-knob\"></span>\n </button>\n\n @if (label) {\n <div class=\"zen-toggle-text\">\n <span class=\"zen-toggle-label\">{{label}}</span>\n @if (supportingText) {\n <span class=\"zen-toggle-supporting\">{{supportingText}}</span>\n }\n </div>\n }\n\n</div>\n", styles: [".zen-toggle-wrapper{display:inline-flex;align-items:flex-start}.zen-toggle-track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:2px;border:none;border-radius:12px;background-color:#f2f4f7;cursor:pointer;overflow:hidden;outline:none;transition:background-color .2s ease}.zen-toggle-track:hover{background-color:#eaecf0}.zen-toggle-track:focus-visible{box-shadow:0 0 0 4px #f4ebff;background-color:#f9fafb}.zen-toggle-track.zen-toggle--active{background-color:#136ab6}.zen-toggle-track.zen-toggle--active .zen-toggle-knob{transform:translate(100%)}.zen-toggle-track.zen-toggle--active:hover{background-color:#105494}.zen-toggle-track.zen-toggle--active:focus-visible{background-color:#136ab6;box-shadow:0 0 0 4px #f4ebff}.zen-toggle-track.zen-toggle--disabled{background-color:#f2f4f7;cursor:not-allowed}.zen-toggle-track.zen-toggle--disabled .zen-toggle-knob{box-shadow:none}.zen-toggle-track.zen-toggle--disabled:hover,.zen-toggle-track.zen-toggle--disabled.zen-toggle--active{background-color:#f2f4f7}.zen-toggle-track.zen-toggle--disabled.zen-toggle--active .zen-toggle-knob{transform:translate(100%)}.zen-toggle-knob{display:block;border-radius:50%;background-color:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f;transition:transform .2s ease;transform:translate(0)}.zen-toggle--sm .zen-toggle-track{width:36px;height:20px}.zen-toggle--sm .zen-toggle-knob{width:16px;height:16px}.zen-toggle--sm.zen-toggle--has-text{gap:8px}.zen-toggle--sm .zen-toggle-label,.zen-toggle--sm .zen-toggle-supporting{font-size:14px;line-height:20px}.zen-toggle--md .zen-toggle-track{width:44px;height:24px}.zen-toggle--md .zen-toggle-knob{width:20px;height:20px}.zen-toggle--md.zen-toggle--has-text{gap:12px}.zen-toggle--md .zen-toggle-label,.zen-toggle--md .zen-toggle-supporting{font-size:16px;line-height:24px}.zen-toggle-text{display:flex;flex-direction:column;min-width:0}.zen-toggle-label{font-family:Inter,sans-serif;font-weight:500;color:#344054}.zen-toggle-supporting{font-family:Inter,sans-serif;font-weight:400;color:#667085}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4265
4268
|
}
|
|
4266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4269
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduToggleComponent, decorators: [{
|
|
4267
4270
|
type: Component,
|
|
4268
|
-
args: [{ selector: 'zen-toggle', template: "<div class=\"zen-toggle-wrapper\"\n
|
|
4271
|
+
args: [{ selector: 'zen-toggle', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-toggle-wrapper\"\n [class.zen-toggle--sm]=\"size === 'sm'\"\n [class.zen-toggle--md]=\"size === 'md'\"\n [class.zen-toggle--has-text]=\"label\">\n\n <button class=\"zen-toggle-track\"\n type=\"button\"\n role=\"switch\"\n [attr.aria-checked]=\"enabled\"\n [attr.aria-disabled]=\"disabled\"\n [class.zen-toggle--active]=\"enabled\"\n [class.zen-toggle--disabled]=\"disabled\"\n [disabled]=\"disabled\"\n (click)=\"toggle()\">\n <span class=\"zen-toggle-knob\"></span>\n </button>\n\n @if (label) {\n <div class=\"zen-toggle-text\">\n <span class=\"zen-toggle-label\">{{label}}</span>\n @if (supportingText) {\n <span class=\"zen-toggle-supporting\">{{supportingText}}</span>\n }\n </div>\n }\n\n</div>\n", styles: [".zen-toggle-wrapper{display:inline-flex;align-items:flex-start}.zen-toggle-track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:2px;border:none;border-radius:12px;background-color:#f2f4f7;cursor:pointer;overflow:hidden;outline:none;transition:background-color .2s ease}.zen-toggle-track:hover{background-color:#eaecf0}.zen-toggle-track:focus-visible{box-shadow:0 0 0 4px #f4ebff;background-color:#f9fafb}.zen-toggle-track.zen-toggle--active{background-color:#136ab6}.zen-toggle-track.zen-toggle--active .zen-toggle-knob{transform:translate(100%)}.zen-toggle-track.zen-toggle--active:hover{background-color:#105494}.zen-toggle-track.zen-toggle--active:focus-visible{background-color:#136ab6;box-shadow:0 0 0 4px #f4ebff}.zen-toggle-track.zen-toggle--disabled{background-color:#f2f4f7;cursor:not-allowed}.zen-toggle-track.zen-toggle--disabled .zen-toggle-knob{box-shadow:none}.zen-toggle-track.zen-toggle--disabled:hover,.zen-toggle-track.zen-toggle--disabled.zen-toggle--active{background-color:#f2f4f7}.zen-toggle-track.zen-toggle--disabled.zen-toggle--active .zen-toggle-knob{transform:translate(100%)}.zen-toggle-knob{display:block;border-radius:50%;background-color:#fff;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f;transition:transform .2s ease;transform:translate(0)}.zen-toggle--sm .zen-toggle-track{width:36px;height:20px}.zen-toggle--sm .zen-toggle-knob{width:16px;height:16px}.zen-toggle--sm.zen-toggle--has-text{gap:8px}.zen-toggle--sm .zen-toggle-label,.zen-toggle--sm .zen-toggle-supporting{font-size:14px;line-height:20px}.zen-toggle--md .zen-toggle-track{width:44px;height:24px}.zen-toggle--md .zen-toggle-knob{width:20px;height:20px}.zen-toggle--md.zen-toggle--has-text{gap:12px}.zen-toggle--md .zen-toggle-label,.zen-toggle--md .zen-toggle-supporting{font-size:16px;line-height:24px}.zen-toggle-text{display:flex;flex-direction:column;min-width:0}.zen-toggle-label{font-family:Inter,sans-serif;font-weight:500;color:#344054}.zen-toggle-supporting{font-family:Inter,sans-serif;font-weight:400;color:#667085}\n"] }]
|
|
4269
4272
|
}], propDecorators: { enabled: [{
|
|
4270
4273
|
type: Input
|
|
4271
4274
|
}], enabledChange: [{
|
|
@@ -4281,12 +4284,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4281
4284
|
}] } });
|
|
4282
4285
|
|
|
4283
4286
|
class ZenduCardBlockComponent {
|
|
4284
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4285
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4287
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCardBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4288
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduCardBlockComponent, isStandalone: false, selector: "zen-card-block", inputs: { icon: "icon", title: "title", text: "text", selected: "selected" }, ngImport: i0, template: "<div class=\"component\">\n @if (icon) {\n <zen-icon\n [src]=\"icon\"></zen-icon>\n }\n\n <div class=\"title\">\n {{title}}\n </div>\n <div class=\"text\">\n {{text}}\n </div>\n</div>\n", styles: [".component{border-radius:10px;border:2px solid transparent;background:var(--color-white-primary, #ffffff);box-shadow:0 0 20px 2px #f0f0f0;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%}.component:hover{border:2px solid var(--color-grey-shade-7, #121212)}.component zen-icon{width:50px;height:50px}.component .title{width:167px;text-align:center;font-family:Roboto;font-size:32px;font-style:normal;font-weight:500}.component .text{color:var(--color-white-tint-6, #bebebe);text-align:center;margin-top:22px;font-size:16px;font-style:normal;font-weight:400;line-height:130%}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4286
4289
|
}
|
|
4287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduCardBlockComponent, decorators: [{
|
|
4288
4291
|
type: Component,
|
|
4289
|
-
args: [{ selector: 'zen-card-block', template: "<div class=\"component\">\n <zen-icon
|
|
4292
|
+
args: [{ selector: 'zen-card-block', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"component\">\n @if (icon) {\n <zen-icon\n [src]=\"icon\"></zen-icon>\n }\n\n <div class=\"title\">\n {{title}}\n </div>\n <div class=\"text\">\n {{text}}\n </div>\n</div>\n", styles: [".component{border-radius:10px;border:2px solid transparent;background:var(--color-white-primary, #ffffff);box-shadow:0 0 20px 2px #f0f0f0;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%}.component:hover{border:2px solid var(--color-grey-shade-7, #121212)}.component zen-icon{width:50px;height:50px}.component .title{width:167px;text-align:center;font-family:Roboto;font-size:32px;font-style:normal;font-weight:500}.component .text{color:var(--color-white-tint-6, #bebebe);text-align:center;margin-top:22px;font-size:16px;font-style:normal;font-weight:400;line-height:130%}\n"] }]
|
|
4290
4293
|
}], propDecorators: { icon: [{
|
|
4291
4294
|
type: Input
|
|
4292
4295
|
}], title: [{
|
|
@@ -4310,12 +4313,12 @@ class ZenduMapPreviewComponent {
|
|
|
4310
4313
|
this.source = "";
|
|
4311
4314
|
}
|
|
4312
4315
|
}
|
|
4313
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduMapPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4317
|
+
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 }); }
|
|
4315
4318
|
}
|
|
4316
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduMapPreviewComponent, decorators: [{
|
|
4317
4320
|
type: Component,
|
|
4318
|
-
args: [{ selector: 'zen-map-preview', 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"] }]
|
|
4321
|
+
args: [{ selector: 'zen-map-preview', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
4319
4322
|
}], propDecorators: { lat: [{
|
|
4320
4323
|
type: Input
|
|
4321
4324
|
}], lng: [{
|
|
@@ -4425,10 +4428,10 @@ class ScriptLoader {
|
|
|
4425
4428
|
getCVInternal() {
|
|
4426
4429
|
return window["cv"];
|
|
4427
4430
|
}
|
|
4428
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4429
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4431
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScriptLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4432
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScriptLoader, providedIn: 'root' }); }
|
|
4430
4433
|
}
|
|
4431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4434
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScriptLoader, decorators: [{
|
|
4432
4435
|
type: Injectable,
|
|
4433
4436
|
args: [{
|
|
4434
4437
|
providedIn: 'root'
|
|
@@ -4503,10 +4506,10 @@ class OpenCVService {
|
|
|
4503
4506
|
getCVInternal() {
|
|
4504
4507
|
return window["cv"];
|
|
4505
4508
|
}
|
|
4506
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4507
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4509
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OpenCVService, deps: [{ token: ScriptLoader }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4510
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OpenCVService, providedIn: 'root' }); }
|
|
4508
4511
|
}
|
|
4509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OpenCVService, decorators: [{
|
|
4510
4513
|
type: Injectable,
|
|
4511
4514
|
args: [{
|
|
4512
4515
|
providedIn: 'root'
|
|
@@ -5168,12 +5171,12 @@ class ZenduDocScanner {
|
|
|
5168
5171
|
this.textAdded = false;
|
|
5169
5172
|
this._canvas.renderAll();
|
|
5170
5173
|
}
|
|
5171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5174
|
+
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 }); }
|
|
5175
|
+
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 }); }
|
|
5173
5176
|
}
|
|
5174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDocScanner, decorators: [{
|
|
5175
5178
|
type: Component,
|
|
5176
|
-
args: [{ selector: 'zen-doc-scanner', template: "<div #componentWrapper\n
|
|
5179
|
+
args: [{ selector: 'zen-doc-scanner', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
5177
5180
|
}], ctorParameters: () => [{ type: OpenCVService }, { type: i0.ChangeDetectorRef }], propDecorators: { _canvasElement: [{
|
|
5178
5181
|
type: ViewChild,
|
|
5179
5182
|
args: ['drawCanas']
|
|
@@ -5390,10 +5393,10 @@ class MapService {
|
|
|
5390
5393
|
stop.setData(tag);
|
|
5391
5394
|
return stop;
|
|
5392
5395
|
}
|
|
5393
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5394
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5396
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5397
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MapService }); }
|
|
5395
5398
|
}
|
|
5396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MapService, decorators: [{
|
|
5397
5400
|
type: Injectable
|
|
5398
5401
|
}] });
|
|
5399
5402
|
|
|
@@ -5504,12 +5507,12 @@ class ZenduMapComponent {
|
|
|
5504
5507
|
this._map.removeObjects(this._objects);
|
|
5505
5508
|
this._objects = [];
|
|
5506
5509
|
}
|
|
5507
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5508
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5510
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5511
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenduMapComponent, isStandalone: false, selector: "zen-map", inputs: { apiKey: "apiKey", trips: "trips", devices: "devices", theme: "theme" }, viewQueries: [{ propertyName: "_mapElement", first: true, predicate: ["map"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"component\">\n <div #map\n class=\"zen-map\"></div>\n</div>\n", styles: [".component{width:100%;height:100%}.component .zen-map{width:100%;height:100%;min-width:100px;min-height:100px}::ng-deep .component .zen-map .g-stop{display:flex;align-items:center;justify-content:center;padding:0 5px;min-width:16px;height:24px;background:#2188d9;border:1px solid black;border-radius:1px}::ng-deep .component .zen-map .g-stop label{color:#fff;display:block;text-align:center;margin:0!important}::ng-deep .component .zen-map .g-stop-img{position:relative}::ng-deep .component .zen-map .g-stop-img img{height:50px;position:relative;top:-49px;left:-20px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper{position:absolute;bottom:0;width:54px;display:flex;flex-direction:column;align-items:center;left:-27px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img{display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .g-marker-vehilce{position:relative;cursor:pointer}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label-wrapper{position:absolute;bottom:42px;width:400px;left:-200px;display:flex}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label{font-weight:400;font-size:14px;border-radius:2px;text-align:center;white-space:nowrap;max-width:400px;text-overflow:ellipsis;overflow-x:hidden;color:#fff;position:absolute;top:-28px;padding:0 12px;line-height:18px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon{width:30px;height:30px;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .direction-arrow{height:72px;width:72px;background-repeat:no-repeat;background-size:15px;background-position:top;position:absolute}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label.moving{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label.stopped{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon.moving{border-radius:50%;background-color:#2188d9;width:36px;height:36px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon.stopped{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .svg-color.white{filter:invert(100%) sepia(4%) saturate(1%) hue-rotate(347deg) brightness(105%) contrast(100%)}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .g-marker-img{display:block;margin:auto;height:15px}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5509
5512
|
}
|
|
5510
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5513
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduMapComponent, decorators: [{
|
|
5511
5514
|
type: Component,
|
|
5512
|
-
args: [{ selector: 'zen-map', template: "<div class=\"component\">\n <div #map\n class=\"zen-map\"></div>\n</div>\n", styles: [".component{width:100%;height:100%}.component .zen-map{width:100%;height:100%;min-width:100px;min-height:100px}::ng-deep .component .zen-map .g-stop{display:flex;align-items:center;justify-content:center;padding:0 5px;min-width:16px;height:24px;background:#2188d9;border:1px solid black;border-radius:1px}::ng-deep .component .zen-map .g-stop label{color:#fff;display:block;text-align:center;margin:0!important}::ng-deep .component .zen-map .g-stop-img{position:relative}::ng-deep .component .zen-map .g-stop-img img{height:50px;position:relative;top:-49px;left:-20px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper{position:absolute;bottom:0;width:54px;display:flex;flex-direction:column;align-items:center;left:-27px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img{display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .g-marker-vehilce{position:relative;cursor:pointer}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label-wrapper{position:absolute;bottom:42px;width:400px;left:-200px;display:flex}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label{font-weight:400;font-size:14px;border-radius:2px;text-align:center;white-space:nowrap;max-width:400px;text-overflow:ellipsis;overflow-x:hidden;color:#fff;position:absolute;top:-28px;padding:0 12px;line-height:18px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon{width:30px;height:30px;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .direction-arrow{height:72px;width:72px;background-repeat:no-repeat;background-size:15px;background-position:top;position:absolute}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label.moving{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label.stopped{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon.moving{border-radius:50%;background-color:#2188d9;width:36px;height:36px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon.stopped{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .svg-color.white{filter:invert(100%) sepia(4%) saturate(1%) hue-rotate(347deg) brightness(105%) contrast(100%)}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .g-marker-img{display:block;margin:auto;height:15px}\n"] }]
|
|
5515
|
+
args: [{ selector: 'zen-map', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"component\">\n <div #map\n class=\"zen-map\"></div>\n</div>\n", styles: [".component{width:100%;height:100%}.component .zen-map{width:100%;height:100%;min-width:100px;min-height:100px}::ng-deep .component .zen-map .g-stop{display:flex;align-items:center;justify-content:center;padding:0 5px;min-width:16px;height:24px;background:#2188d9;border:1px solid black;border-radius:1px}::ng-deep .component .zen-map .g-stop label{color:#fff;display:block;text-align:center;margin:0!important}::ng-deep .component .zen-map .g-stop-img{position:relative}::ng-deep .component .zen-map .g-stop-img img{height:50px;position:relative;top:-49px;left:-20px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper{position:absolute;bottom:0;width:54px;display:flex;flex-direction:column;align-items:center;left:-27px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img{display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .g-marker-vehilce{position:relative;cursor:pointer}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label-wrapper{position:absolute;bottom:42px;width:400px;left:-200px;display:flex}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label{font-weight:400;font-size:14px;border-radius:2px;text-align:center;white-space:nowrap;max-width:400px;text-overflow:ellipsis;overflow-x:hidden;color:#fff;position:absolute;top:-28px;padding:0 12px;line-height:18px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon{width:30px;height:30px;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .direction-arrow{height:72px;width:72px;background-repeat:no-repeat;background-size:15px;background-position:top;position:absolute}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label.moving{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-label.stopped{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon.moving{border-radius:50%;background-color:#2188d9;width:36px;height:36px}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .gotrax-img>.g-marker-icon.stopped{background-color:#2188d9}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .svg-color.white{filter:invert(100%) sepia(4%) saturate(1%) hue-rotate(347deg) brightness(105%) contrast(100%)}::ng-deep .component .zen-map .g-marker-vehilce-wrapper .g-marker-img{display:block;margin:auto;height:15px}\n"] }]
|
|
5513
5516
|
}], propDecorators: { _mapElement: [{
|
|
5514
5517
|
type: ViewChild,
|
|
5515
5518
|
args: ["map"]
|
|
@@ -5600,12 +5603,12 @@ class ZenduFileUpload {
|
|
|
5600
5603
|
this.uploadCancelled.emit();
|
|
5601
5604
|
this.clear();
|
|
5602
5605
|
}
|
|
5603
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5604
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5606
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5607
|
+
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: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.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 }); }
|
|
5605
5608
|
}
|
|
5606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5609
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFileUpload, decorators: [{
|
|
5607
5610
|
type: Component,
|
|
5608
|
-
args: [{ selector: 'zen-file-upload', template: "<div class=\"component\">\n
|
|
5611
|
+
args: [{ selector: 'zen-file-upload', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
5609
5612
|
}], propDecorators: { fileTypes: [{
|
|
5610
5613
|
type: Input
|
|
5611
5614
|
}], uploadState: [{
|
|
@@ -5685,12 +5688,12 @@ class ZenduProgress {
|
|
|
5685
5688
|
get halfCircleContainerHeight() {
|
|
5686
5689
|
return this.sizeConfig.containerSize / 2 + this.sizeConfig.strokeWidth;
|
|
5687
5690
|
}
|
|
5688
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5689
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenduProgress, 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 <div *ngIf=\"type == 'bar'\" 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\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 <div *ngIf=\"label === 'top-floating'\" 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 <div *ngIf=\"label === 'bottom-floating'\" 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 </div>\n </div>\n\n <!-- Right label -->\n <span *ngIf=\"label === 'right'\" class=\"bar-label\">{{value}}%</span>\n\n <!-- Bottom label -->\n <span *ngIf=\"label === 'bottom'\" class=\"bar-label\">{{value}}%</span>\n\n <!-- Text description (legacy support) -->\n <div *ngIf=\"text && (label === 'none')\" class=\"progress-text\">{{text}}</div>\n </div>\n\n <!-- Circle progress -->\n <div *ngIf=\"type == 'circle'\" class=\"circle-wrapper\"\n [ngStyle]=\"{\n 'width.px': sizeConfig.containerSize,\n 'height.px': sizeConfig.containerSize\n }\">\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\n <div class=\"circle-label\">\n <span *ngIf=\"text\" class=\"circle-label-text\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.labelFontSize\n }\">{{text}}</span>\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 <!-- Half-Circle progress -->\n <div *ngIf=\"type == 'half-circle'\" class=\"half-circle-wrapper\"\n [ngStyle]=\"{\n 'width.px': sizeConfig.containerSize,\n 'height.px': halfCircleContainerHeight\n }\">\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\n <div class=\"half-circle-label\">\n <span *ngIf=\"text\" class=\"circle-label-text\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.labelFontSize\n }\">{{text}}</span>\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</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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
5691
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduProgress, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5692
|
+
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 }); }
|
|
5690
5693
|
}
|
|
5691
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5694
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduProgress, decorators: [{
|
|
5692
5695
|
type: Component,
|
|
5693
|
-
args: [{ selector: 'zen-progress', template: "<div class=\"component\">\n <!-- Progress bar -->\n <div *ngIf=\"type == 'bar'\" 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\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 <div *ngIf=\"label === 'top-floating'\" 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 <div *ngIf=\"label === 'bottom-floating'\" 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 </div>\n </div>\n\n <!-- Right label -->\n <span *ngIf=\"label === 'right'\" class=\"bar-label\">{{value}}%</span>\n\n <!-- Bottom label -->\n <span *ngIf=\"label === 'bottom'\" class=\"bar-label\">{{value}}%</span>\n\n <!-- Text description (legacy support) -->\n <div *ngIf=\"text && (label === 'none')\" class=\"progress-text\">{{text}}</div>\n </div>\n\n <!-- Circle progress -->\n <div *ngIf=\"type == 'circle'\" class=\"circle-wrapper\"\n [ngStyle]=\"{\n 'width.px': sizeConfig.containerSize,\n 'height.px': sizeConfig.containerSize\n }\">\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\n <div class=\"circle-label\">\n <span *ngIf=\"text\" class=\"circle-label-text\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.labelFontSize\n }\">{{text}}</span>\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 <!-- Half-Circle progress -->\n <div *ngIf=\"type == 'half-circle'\" class=\"half-circle-wrapper\"\n [ngStyle]=\"{\n 'width.px': sizeConfig.containerSize,\n 'height.px': halfCircleContainerHeight\n }\">\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\n <div class=\"half-circle-label\">\n <span *ngIf=\"text\" class=\"circle-label-text\"\n [ngStyle]=\"{\n 'font-size.px': sizeConfig.labelFontSize\n }\">{{text}}</span>\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</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"] }]
|
|
5696
|
+
args: [{ selector: 'zen-progress', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
5694
5697
|
}], propDecorators: { type: [{
|
|
5695
5698
|
type: Input
|
|
5696
5699
|
}], label: [{
|
|
@@ -5756,10 +5759,10 @@ class GeocodingService {
|
|
|
5756
5759
|
});
|
|
5757
5760
|
});
|
|
5758
5761
|
}
|
|
5759
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5760
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5762
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GeocodingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5763
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GeocodingService, providedIn: 'root' }); }
|
|
5761
5764
|
}
|
|
5762
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5765
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: GeocodingService, decorators: [{
|
|
5763
5766
|
type: Injectable,
|
|
5764
5767
|
args: [{
|
|
5765
5768
|
providedIn: 'root'
|
|
@@ -5862,12 +5865,12 @@ class ZenduLocationSearch {
|
|
|
5862
5865
|
this.onSelect.emit(address);
|
|
5863
5866
|
}
|
|
5864
5867
|
}
|
|
5865
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5866
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5868
|
+
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 }); }
|
|
5869
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduLocationSearch, isStandalone: false, selector: "zen-location-search", inputs: { apiKey: "apiKey", address: "address", displaySearchIcon: "displaySearchIcon", materialStyle: "materialStyle", placeholder: "placeholder", disabled: "disabled", customStyles: "customStyles" }, outputs: { addressChange: "addressChange", onSelect: "onSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"component\">\n\n <div class=\"search-input-wrapper\"\n [class.boundaries]=\"!materialStyle\">\n @if (displaySearchIcon) {\n <zen-icon src=\"https://storage.googleapis.com/ng-zenduit/icon/search.svg\"\n class=\"search-icon\"\n [style]=\"{'background-color': customStyles.color}\"></zen-icon>\n }\n\n <input type=\"text\"\n class=\"material-input\"\n [style]=\"customStyles\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"address\"\n [ngClass]=\"{'no-icon': !displaySearchIcon}\"\n (ngModelChange)='addressChanged($event)'>\n </div>\n\n @if (address) {\n <div class=\"search-list\"\n [class.boundaries]=\"!materialStyle\"\n appClickOutside\n (clickOutside)=\"addressList = [];\">\n @if (addressList.length || isSearching) {\n <ul class=\"search-item-list\"\n >\n @if (isSearching) {\n <li>Searching</li>\n }\n @if (!isSearching) {\n <div>\n @for (address of addressList; track address) {\n <li\n (click)=\"selectAddress(address)\">\n {{address.name}}\n </li>\n }\n </div>\n }\n </ul>\n }\n </div>\n }\n</div>\n", styles: [".component,.component .search-input-wrapper{position:relative}.component .search-input-wrapper .search-icon{position:absolute;left:4px;background-color:var(--color-white-tint-6, #bebebe)}.component .search-input-wrapper .material-input{padding-left:38px}.component .search-input-wrapper .material-input.no-icon{padding-left:8px}.component .search-input-wrapper .material-input.no-icon::placeholder{font-size:14px}.component .search-input-wrapper.boundaries .material-input{border:1px solid var(--color-white-tint-4, #d6d6d8);padding-top:8px;border-radius:4px;height:40px;font-style:normal;font-weight:400;font-size:14px;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.component .search-input-wrapper.boundaries .material-input:hover{border-color:#b8b9bc}.component .search-input-wrapper.boundaries .material-input:focus-within{box-shadow:0 0 2px 2px #2188d94d}.component .search-input-wrapper.boundaries .search-icon{top:8px;left:8px}.component .search-list{position:absolute;top:40px;left:16px;z-index:1;min-width:278px;max-width:420px;box-shadow:0 4px 10px #060c1b26;background:#fff}.component .search-list.boundaries{top:45px}.component .search-list ul.search-item-list{list-style-type:none;max-width:420px;max-height:30vh;overflow-y:scroll;overflow-x:inherit;margin:0;padding:5px 10px}.component .search-list ul.search-item-list li{background-color:#fff;padding:5px 10px;align-items:flex-start;color:#828282;cursor:pointer;width:100%;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px}.component .search-list ul.search-item-list li:hover{text-decoration:none;background-color:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5867
5870
|
}
|
|
5868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5871
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduLocationSearch, decorators: [{
|
|
5869
5872
|
type: Component,
|
|
5870
|
-
args: [{ selector: 'zen-location-search', template: "<div class=\"component\">\n\n
|
|
5873
|
+
args: [{ selector: 'zen-location-search', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
5871
5874
|
}], ctorParameters: () => [{ type: GeocodingService }, { type: i0.ChangeDetectorRef }], propDecorators: { apiKey: [{
|
|
5872
5875
|
type: Input
|
|
5873
5876
|
}], address: [{
|
|
@@ -5992,12 +5995,12 @@ class ZenHTML5VideoPlayerComponent {
|
|
|
5992
5995
|
console.log(`Created the html5 video player for source "${this.source}"`);
|
|
5993
5996
|
}
|
|
5994
5997
|
}
|
|
5995
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5996
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5998
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenHTML5VideoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5999
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenHTML5VideoPlayerComponent, isStandalone: false, selector: "zen-html5-video-player", inputs: { source: "source", control: "control" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"html5-player-component\">\n\t<video controls\n\t\t muted\n\t\t autoplay\n\t\t [src]=\"source\">\n\t</video>\n</div>\n", styles: [".html5-player-component{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.html5-player-component video{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
5997
6000
|
}
|
|
5998
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6001
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenHTML5VideoPlayerComponent, decorators: [{
|
|
5999
6002
|
type: Component,
|
|
6000
|
-
args: [{ selector: 'zen-html5-video-player', template: "<div class=\"html5-player-component\">\n\t<video controls\n\t\t muted\n\t\t autoplay\n\t\t [src]=\"source\">\n\t</video>\n</div>\n", styles: [".html5-player-component{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.html5-player-component video{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}\n"] }]
|
|
6003
|
+
args: [{ selector: 'zen-html5-video-player', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"html5-player-component\">\n\t<video controls\n\t\t muted\n\t\t autoplay\n\t\t [src]=\"source\">\n\t</video>\n</div>\n", styles: [".html5-player-component{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.html5-player-component video{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}\n"] }]
|
|
6001
6004
|
}], propDecorators: { source: [{
|
|
6002
6005
|
type: Input
|
|
6003
6006
|
}], control: [{
|
|
@@ -6072,12 +6075,12 @@ class ZenFlvPlayerComponent {
|
|
|
6072
6075
|
}
|
|
6073
6076
|
}
|
|
6074
6077
|
}
|
|
6075
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6076
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
6078
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenFlvPlayerComponent, deps: [{ token: i0.ElementRef }, { token: ScriptLoader }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6079
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenFlvPlayerComponent, isStandalone: false, selector: "zen-flv-player", inputs: { source: "source", control: "control" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flv-player-component\">\n <video controls\n muted></video>\n\n</div>\n", styles: [".flv-player-component{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.flv-player-component video{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}.flv-player-component zen-icon{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.flv-player-component>.video-filter{position:absolute;right:20px;top:50px;z-index:1000;display:none}.flv-player-component>.video-filter.active{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
6077
6080
|
}
|
|
6078
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6081
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenFlvPlayerComponent, decorators: [{
|
|
6079
6082
|
type: Component,
|
|
6080
|
-
args: [{ selector: 'zen-flv-player', template: "<div class=\"flv-player-component\">\n <video controls\n muted></video>\n\n</div>\n", styles: [".flv-player-component{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.flv-player-component video{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}.flv-player-component zen-icon{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.flv-player-component>.video-filter{position:absolute;right:20px;top:50px;z-index:1000;display:none}.flv-player-component>.video-filter.active{display:block}\n"] }]
|
|
6083
|
+
args: [{ selector: 'zen-flv-player', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"flv-player-component\">\n <video controls\n muted></video>\n\n</div>\n", styles: [".flv-player-component{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.flv-player-component video{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}.flv-player-component zen-icon{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.flv-player-component>.video-filter{position:absolute;right:20px;top:50px;z-index:1000;display:none}.flv-player-component>.video-filter.active{display:block}\n"] }]
|
|
6081
6084
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: ScriptLoader }], propDecorators: { source: [{
|
|
6082
6085
|
type: Input
|
|
6083
6086
|
}], control: [{
|
|
@@ -6215,12 +6218,12 @@ class ZenHlsPlayerComponent {
|
|
|
6215
6218
|
hideFiler() {
|
|
6216
6219
|
this.isVideoFilterVisible = false;
|
|
6217
6220
|
}
|
|
6218
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6219
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
6221
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenHlsPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6222
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenHlsPlayerComponent, isStandalone: false, selector: "zen-hls-player", inputs: { source: "source", control: "control" }, viewQueries: [{ propertyName: "_video", first: true, predicate: ["video_container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"hls-player-component\">\n\t<video #video_container\n\t\t controls\n\t\t muted\n\t\t autoplay></video>\n</div>\n", styles: [".hls-player-component{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.hls-player-component video{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}.hls-player-component zen-icon{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.hls-player-component .video-filter{position:absolute;right:20px;top:50px;z-index:1000}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
6220
6223
|
}
|
|
6221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenHlsPlayerComponent, decorators: [{
|
|
6222
6225
|
type: Component,
|
|
6223
|
-
args: [{ selector: 'zen-hls-player', template: "<div class=\"hls-player-component\">\n\t<video #video_container\n\t\t controls\n\t\t muted\n\t\t autoplay></video>\n</div>\n", styles: [".hls-player-component{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.hls-player-component video{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}.hls-player-component zen-icon{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.hls-player-component .video-filter{position:absolute;right:20px;top:50px;z-index:1000}\n"] }]
|
|
6226
|
+
args: [{ selector: 'zen-hls-player', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"hls-player-component\">\n\t<video #video_container\n\t\t controls\n\t\t muted\n\t\t autoplay></video>\n</div>\n", styles: [".hls-player-component{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.hls-player-component video{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}.hls-player-component zen-icon{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.hls-player-component .video-filter{position:absolute;right:20px;top:50px;z-index:1000}\n"] }]
|
|
6224
6227
|
}], propDecorators: { source: [{
|
|
6225
6228
|
type: Input
|
|
6226
6229
|
}], control: [{
|
|
@@ -6335,10 +6338,10 @@ class ZenHttpService {
|
|
|
6335
6338
|
const res = await this._http.get(`${url}`, httpOptions).toPromise();
|
|
6336
6339
|
return res;
|
|
6337
6340
|
}
|
|
6338
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6339
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
6341
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenHttpService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6342
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenHttpService, providedIn: 'root' }); }
|
|
6340
6343
|
}
|
|
6341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenHttpService, decorators: [{
|
|
6342
6345
|
type: Injectable,
|
|
6343
6346
|
args: [{
|
|
6344
6347
|
providedIn: 'root'
|
|
@@ -6417,12 +6420,12 @@ class ZenSnapshotPlayerComponent {
|
|
|
6417
6420
|
this._isRunning = false;
|
|
6418
6421
|
clearTimeout(this._timer);
|
|
6419
6422
|
}
|
|
6420
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6421
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
6423
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSnapshotPlayerComponent, deps: [{ token: ZenHttpService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6424
|
+
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 }); }
|
|
6422
6425
|
}
|
|
6423
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSnapshotPlayerComponent, decorators: [{
|
|
6424
6427
|
type: Component,
|
|
6425
|
-
args: [{ selector: 'zen-snapshot-player', 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"] }]
|
|
6428
|
+
args: [{ selector: 'zen-snapshot-player', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
6426
6429
|
}], ctorParameters: () => [{ type: ZenHttpService }], propDecorators: { source: [{
|
|
6427
6430
|
type: Input
|
|
6428
6431
|
}], channel: [{
|
|
@@ -6797,12 +6800,12 @@ class ZenWebRTCPlayerComponent {
|
|
|
6797
6800
|
this.onServerDisconnect.emit();
|
|
6798
6801
|
}
|
|
6799
6802
|
}
|
|
6800
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6801
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
6803
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenWebRTCPlayerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6804
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenWebRTCPlayerComponent, isStandalone: false, selector: "zen-web-rtc-player", inputs: { source: "source", control: "control" }, outputs: { onStartPlay: "onStartPlay", onServerError: "onServerError", onServerDisconnect: "onServerDisconnect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"web-rtc-player\">\n\n <video class=\"web-rtc-player-id\"\n ng-hide=\"IsShowSnapshotPlayer\"\n muted\n controls\n webkit-playsinline=\"true\"\n playsinline=\"true\"\n autoplay=\"\"></video>\n\n</div>\n\n<div class=\"customEventDiv\"></div>", styles: [".web-rtc-player{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.web-rtc-player .web-rtc-player-id{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}.web-rtc-player .live-loading{position:absolute;top:52px;left:calc(50% - 88px)}.web-rtc-player zen-icon{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.web-rtc-player>.video-filter{position:absolute;right:20px;top:50px;z-index:1000;display:none}.web-rtc-player>.video-filter.active{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
6802
6805
|
}
|
|
6803
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenWebRTCPlayerComponent, decorators: [{
|
|
6804
6807
|
type: Component,
|
|
6805
|
-
args: [{ selector: 'zen-web-rtc-player', template: "<div class=\"web-rtc-player\">\n\n <video class=\"web-rtc-player-id\"\n ng-hide=\"IsShowSnapshotPlayer\"\n muted\n controls\n webkit-playsinline=\"true\"\n playsinline=\"true\"\n autoplay=\"\"></video>\n\n</div>\n\n<div class=\"customEventDiv\"></div>", styles: [".web-rtc-player{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.web-rtc-player .web-rtc-player-id{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}.web-rtc-player .live-loading{position:absolute;top:52px;left:calc(50% - 88px)}.web-rtc-player zen-icon{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.web-rtc-player>.video-filter{position:absolute;right:20px;top:50px;z-index:1000;display:none}.web-rtc-player>.video-filter.active{display:block}\n"] }]
|
|
6808
|
+
args: [{ selector: 'zen-web-rtc-player', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"web-rtc-player\">\n\n <video class=\"web-rtc-player-id\"\n ng-hide=\"IsShowSnapshotPlayer\"\n muted\n controls\n webkit-playsinline=\"true\"\n playsinline=\"true\"\n autoplay=\"\"></video>\n\n</div>\n\n<div class=\"customEventDiv\"></div>", styles: [".web-rtc-player{position:relative;background-color:#000;width:100%;height:100%;border-radius:4px}.web-rtc-player .web-rtc-player-id{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100%;border-radius:4px}.web-rtc-player .live-loading{position:absolute;top:52px;left:calc(50% - 88px)}.web-rtc-player zen-icon{position:absolute;width:24px;height:24px;right:20px;top:20px;cursor:pointer;border-radius:4px;background:#fff}.web-rtc-player>.video-filter{position:absolute;right:20px;top:50px;z-index:1000;display:none}.web-rtc-player>.video-filter.active{display:block}\n"] }]
|
|
6806
6809
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { source: [{
|
|
6807
6810
|
type: Input
|
|
6808
6811
|
}], control: [{
|
|
@@ -6835,12 +6838,12 @@ class ZenLiveViewPlayerComponent {
|
|
|
6835
6838
|
}
|
|
6836
6839
|
}
|
|
6837
6840
|
}
|
|
6838
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6839
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6841
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenLiveViewPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6842
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenLiveViewPlayerComponent, isStandalone: false, selector: "zen-live-view-player", inputs: { control: "control", source: "source", playerType: "playerType", snapshotInterval: "snapshotInterval", timeout: "timeout" }, outputs: { onData: "onData" }, ngImport: i0, template: "@if (playerType == 'webrtc') {\n <zen-web-rtc-player [source]=\"source\"\n [control]=\"control\"\n ></zen-web-rtc-player>\n}\n\n@if (playerType == 'snapshot') {\n <zen-snapshot-player [source]=\"source\"\n [control]=\"control\"\n [interval]=\"snapshotInterval\"\n ></zen-snapshot-player>\n}\n\n@if (playerType == 'flv') {\n <zen-flv-player [source]=\"source\"\n [control]=\"control\"\n ></zen-flv-player>\n}\n\n@if (playerType == 'hls') {\n <zen-hls-player [source]=\"source\"\n [control]=\"control\"\n ></zen-hls-player>\n}\n\n@if (playerType == 'html5') {\n <zen-html5-video-player [source]=\"source\"\n [control]=\"control\"\n ></zen-html5-video-player>\n}\n", styles: [""], dependencies: [{ kind: "component", type: ZenHTML5VideoPlayerComponent, selector: "zen-html5-video-player", inputs: ["source", "control"] }, { kind: "component", type: ZenFlvPlayerComponent, selector: "zen-flv-player", inputs: ["source", "control"] }, { kind: "component", type: ZenHlsPlayerComponent, selector: "zen-hls-player", inputs: ["source", "control"] }, { kind: "component", type: ZenSnapshotPlayerComponent, selector: "zen-snapshot-player", inputs: ["source", "channel", "control", "interval"] }, { kind: "component", type: ZenWebRTCPlayerComponent, selector: "zen-web-rtc-player", inputs: ["source", "control"], outputs: ["onStartPlay", "onServerError", "onServerDisconnect"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
6840
6843
|
}
|
|
6841
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6844
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenLiveViewPlayerComponent, decorators: [{
|
|
6842
6845
|
type: Component,
|
|
6843
|
-
args: [{ selector: 'zen-live-view-player', template: "<zen-web-rtc-player [source]=\"source\"\n
|
|
6846
|
+
args: [{ selector: 'zen-live-view-player', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (playerType == 'webrtc') {\n <zen-web-rtc-player [source]=\"source\"\n [control]=\"control\"\n ></zen-web-rtc-player>\n}\n\n@if (playerType == 'snapshot') {\n <zen-snapshot-player [source]=\"source\"\n [control]=\"control\"\n [interval]=\"snapshotInterval\"\n ></zen-snapshot-player>\n}\n\n@if (playerType == 'flv') {\n <zen-flv-player [source]=\"source\"\n [control]=\"control\"\n ></zen-flv-player>\n}\n\n@if (playerType == 'hls') {\n <zen-hls-player [source]=\"source\"\n [control]=\"control\"\n ></zen-hls-player>\n}\n\n@if (playerType == 'html5') {\n <zen-html5-video-player [source]=\"source\"\n [control]=\"control\"\n ></zen-html5-video-player>\n}\n" }]
|
|
6844
6847
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
6845
6848
|
type: Input
|
|
6846
6849
|
}], source: [{
|
|
@@ -7143,12 +7146,12 @@ class ZenduTimepickerComponent {
|
|
|
7143
7146
|
}
|
|
7144
7147
|
return val;
|
|
7145
7148
|
}
|
|
7146
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7147
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenduTimepickerComponent, selector: "zen-timepicker", inputs: { mode: "mode", label: "label", value: "value", showSeconds: "showSeconds", showHours: "showHours", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange", apply: "apply", clear: "clear" }, host: { listeners: { "window:mousedown": "outsideClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-tp\">\n <!-- Input toggle button -->\n <button class=\"zen-tp__toggle zen-tp__toggle--box\"\n [class.zen-tp__toggle--active]=\"isPickerVisible\"\n [class.zen-tp__toggle--disabled]=\"disabled\"\n [class.zen-tp__toggle--readonly]=\"readonly\"\n [style.width]=\"width || null\"\n [disabled]=\"disabled || readonly\"\n (click)=\"togglePicker()\">\n <span class=\"zen-tp__display\" [class.zen-tp__display--placeholder]=\"!value\">\n {{ value ? formattedDisplayValue : defaultPlaceholder }}\n </span>\n <zen-icon class=\"zen-tp__icon\"\n [class.zen-tp__icon--filled]=\"value\"\n src=\"assets/ng-zenduit/icons/time.svg\">\n </zen-icon>\n </button>\n\n <!-- Picker dropdown -->\n <div class=\"zen-tp__dropdown\"\n #pickerPopup\n *ngIf=\"isPickerVisible\"\n [class.zen-tp__dropdown--right]=\"right\"\n [class.zen-tp__dropdown--bottom]=\"bottom\">\n <div class=\"zen-tp__popup\">\n <!-- Header -->\n <div class=\"zen-tp__popup-label\">{{ label || defaultLabel }}</div>\n\n <!-- Time fields -->\n <div class=\"zen-tp__fields\">\n <!-- Hours -->\n <div class=\"zen-tp__field\" *ngIf=\"showHours\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"hoursDisplay\"\n (input)=\"onHoursInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampHours()\"\n (keydown)=\"onInputKeydown($event, 'hours')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementHours()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementHours()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">HRS</span>\n </div>\n\n <span class=\"zen-tp__colon\" *ngIf=\"showHours\">:</span>\n\n <!-- Minutes -->\n <div class=\"zen-tp__field\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"minutesDisplay\"\n (input)=\"onMinutesInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampMinutes()\"\n (keydown)=\"onInputKeydown($event, 'minutes')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementMinutes()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementMinutes()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">MIN</span>\n </div>\n\n <!-- Seconds (duration mode or when showSeconds) -->\n <ng-container *ngIf=\"showSeconds\">\n <span class=\"zen-tp__colon\">:</span>\n <div class=\"zen-tp__field\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Seconds\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"secondsDisplay\"\n (input)=\"onSecondsInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampSeconds()\"\n (keydown)=\"onInputKeydown($event, 'seconds')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementSeconds()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementSeconds()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">SEC</span>\n </div>\n </ng-container>\n\n <!-- AM/PM Toggle (Clock mode only) -->\n <div class=\"zen-tp__period\" *ngIf=\"mode === 'clock'\">\n <button class=\"zen-tp__period-btn\"\n type=\"button\"\n [class.zen-tp__period-btn--active]=\"selectedPeriod === 'AM'\"\n (click)=\"selectPeriod('AM')\">\n AM\n </button>\n <button class=\"zen-tp__period-btn\"\n type=\"button\"\n [class.zen-tp__period-btn--active]=\"selectedPeriod === 'PM'\"\n (click)=\"selectPeriod('PM')\">\n PM\n </button>\n </div>\n </div>\n\n <!-- Divider -->\n <div class=\"zen-tp__divider\"></div>\n\n <!-- Actions -->\n <div class=\"zen-tp__actions\">\n <button class=\"zen-tp__btn zen-tp__btn--clear\" type=\"button\" (click)=\"onClear()\">Clear</button>\n <button class=\"zen-tp__btn zen-tp__btn--apply\" type=\"button\" (click)=\"onApply()\">Apply</button>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:inline-block;position:relative;width:100%}.zen-tp{width:100%;position:relative}.zen-tp *{box-sizing:border-box}.zen-tp__toggle{display:inline-flex;align-items:center;gap:8px;min-width:150px;width:100%;transition:.3s;background:#fff;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid #D0D5DD;padding:0 0 8px;font-size:16px;font-weight:400;line-height:130%;color:#344054}.zen-tp__toggle--box{border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px}.zen-tp__toggle:hover{border-color:#667085}.zen-tp__toggle:focus,.zen-tp__toggle--active{border-color:#136ab6;box-shadow:0 0 0 3px #136ab61f}.zen-tp__toggle--disabled{cursor:not-allowed;opacity:.5}.zen-tp__toggle--readonly{cursor:default;opacity:.7}.zen-tp__display{flex:1;text-align:left;font-size:16px;font-weight:400;line-height:24px;color:#1d2939}.zen-tp__display--placeholder{color:#667085}.zen-tp__icon{width:20px;height:20px;flex-shrink:0;background-color:#667085;transition:.2s}.zen-tp__icon--filled{background-color:#344054}.zen-tp__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px}.zen-tp__dropdown--right{left:auto;right:0}.zen-tp__dropdown--bottom{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}.zen-tp__popup{background:#fff;border-radius:8px;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;padding:16px;display:flex;flex-direction:column;gap:16px;align-items:flex-end;font-family:inherit}.zen-tp__popup-label{width:100%;font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.zen-tp__fields{display:flex;align-items:center;gap:12px}.zen-tp__field{display:flex;flex-direction:column;align-items:center;gap:4px}.zen-tp__field-label{font-size:10px;font-weight:500;line-height:normal;text-transform:uppercase;color:#667085;letter-spacing:.02em}.zen-tp__input-box{display:flex;align-items:center;gap:6px;height:44px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;padding:6px 6px 6px 12px}.zen-tp__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;-moz-appearance:textfield}.zen-tp__input::-webkit-outer-spin-button,.zen-tp__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.zen-tp__arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.zen-tp__arrow{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:2px;flex-shrink:0}.zen-tp__arrow:hover{background:#6670851f}.zen-tp__arrow svg{display:block}.zen-tp__colon{display:flex;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085;-webkit-user-select:none;user-select:none;margin-bottom:18px}.zen-tp__period{display:flex;flex-direction:column;gap:16px;flex-shrink:0;margin-left:20px}.zen-tp__period-btn{display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:all .15s ease;white-space:nowrap;border:1px solid #D0D5DD;background:#fff;color:#344054;box-shadow:0 1px 2px #1018280d}.zen-tp__period-btn:hover{background:#fafafa}.zen-tp__period-btn--active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.zen-tp__period-btn--active:hover{background:#e7f2fd}.zen-tp__divider{width:100%;height:1px;background:#eaecf0}.zen-tp__actions{display:flex;gap:12px}.zen-tp__btn{display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:all .15s ease;white-space:nowrap;box-shadow:0 1px 2px #1018280d}.zen-tp__btn--clear{background:#fff;border:1px solid #D0D5DD;color:#344054}.zen-tp__btn--clear:hover{background:#fafafa}.zen-tp__btn--apply{background:#136ab6;border:1px solid #136AB6;color:#fff}.zen-tp__btn--apply:hover{background:#115d9f}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }] }); }
|
|
7149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduTimepickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduTimepickerComponent, isStandalone: false, selector: "zen-timepicker", inputs: { mode: "mode", label: "label", value: "value", showSeconds: "showSeconds", showHours: "showHours", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange", apply: "apply", clear: "clear" }, host: { listeners: { "window:mousedown": "outsideClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-tp\">\n <!-- Input toggle button -->\n <button class=\"zen-tp__toggle zen-tp__toggle--box\"\n [class.zen-tp__toggle--active]=\"isPickerVisible\"\n [class.zen-tp__toggle--disabled]=\"disabled\"\n [class.zen-tp__toggle--readonly]=\"readonly\"\n [style.width]=\"width || null\"\n [disabled]=\"disabled || readonly\"\n (click)=\"togglePicker()\">\n <span class=\"zen-tp__display\" [class.zen-tp__display--placeholder]=\"!value\">\n {{ value ? formattedDisplayValue : defaultPlaceholder }}\n </span>\n <zen-icon class=\"zen-tp__icon\"\n [class.zen-tp__icon--filled]=\"value\"\n src=\"assets/ng-zenduit/icons/time.svg\">\n </zen-icon>\n </button>\n\n <!-- Picker dropdown -->\n @if (isPickerVisible) {\n <div class=\"zen-tp__dropdown\"\n #pickerPopup\n [class.zen-tp__dropdown--right]=\"right\"\n [class.zen-tp__dropdown--bottom]=\"bottom\">\n <div class=\"zen-tp__popup\">\n <!-- Header -->\n <div class=\"zen-tp__popup-label\">{{ label || defaultLabel }}</div>\n <!-- Time fields -->\n <div class=\"zen-tp__fields\">\n <!-- Hours -->\n @if (showHours) {\n <div class=\"zen-tp__field\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"hoursDisplay\"\n (input)=\"onHoursInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampHours()\"\n (keydown)=\"onInputKeydown($event, 'hours')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementHours()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementHours()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">HRS</span>\n </div>\n }\n @if (showHours) {\n <span class=\"zen-tp__colon\">:</span>\n }\n <!-- Minutes -->\n <div class=\"zen-tp__field\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"minutesDisplay\"\n (input)=\"onMinutesInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampMinutes()\"\n (keydown)=\"onInputKeydown($event, 'minutes')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementMinutes()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementMinutes()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">MIN</span>\n </div>\n <!-- Seconds (duration mode or when showSeconds) -->\n @if (showSeconds) {\n <span class=\"zen-tp__colon\">:</span>\n <div class=\"zen-tp__field\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Seconds\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"secondsDisplay\"\n (input)=\"onSecondsInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampSeconds()\"\n (keydown)=\"onInputKeydown($event, 'seconds')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementSeconds()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementSeconds()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">SEC</span>\n </div>\n }\n <!-- AM/PM Toggle (Clock mode only) -->\n @if (mode === 'clock') {\n <div class=\"zen-tp__period\">\n <button class=\"zen-tp__period-btn\"\n type=\"button\"\n [class.zen-tp__period-btn--active]=\"selectedPeriod === 'AM'\"\n (click)=\"selectPeriod('AM')\">\n AM\n </button>\n <button class=\"zen-tp__period-btn\"\n type=\"button\"\n [class.zen-tp__period-btn--active]=\"selectedPeriod === 'PM'\"\n (click)=\"selectPeriod('PM')\">\n PM\n </button>\n </div>\n }\n </div>\n <!-- Divider -->\n <div class=\"zen-tp__divider\"></div>\n <!-- Actions -->\n <div class=\"zen-tp__actions\">\n <button class=\"zen-tp__btn zen-tp__btn--clear\" type=\"button\" (click)=\"onClear()\">Clear</button>\n <button class=\"zen-tp__btn zen-tp__btn--apply\" type=\"button\" (click)=\"onApply()\">Apply</button>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block;position:relative;width:100%}.zen-tp{width:100%;position:relative}.zen-tp *{box-sizing:border-box}.zen-tp__toggle{display:inline-flex;align-items:center;gap:8px;min-width:150px;width:100%;transition:.3s;background:#fff;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid #D0D5DD;padding:0 0 8px;font-size:16px;font-weight:400;line-height:130%;color:#344054}.zen-tp__toggle--box{border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px}.zen-tp__toggle:hover{border-color:#667085}.zen-tp__toggle:focus,.zen-tp__toggle--active{border-color:#136ab6;box-shadow:0 0 0 3px #136ab61f}.zen-tp__toggle--disabled{cursor:not-allowed;opacity:.5}.zen-tp__toggle--readonly{cursor:default;opacity:.7}.zen-tp__display{flex:1;text-align:left;font-size:16px;font-weight:400;line-height:24px;color:#1d2939}.zen-tp__display--placeholder{color:#667085}.zen-tp__icon{width:20px;height:20px;flex-shrink:0;background-color:#667085;transition:.2s}.zen-tp__icon--filled{background-color:#344054}.zen-tp__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px}.zen-tp__dropdown--right{left:auto;right:0}.zen-tp__dropdown--bottom{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}.zen-tp__popup{background:#fff;border-radius:8px;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;padding:16px;display:flex;flex-direction:column;gap:16px;align-items:flex-end;font-family:inherit}.zen-tp__popup-label{width:100%;font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.zen-tp__fields{display:flex;align-items:center;gap:12px}.zen-tp__field{display:flex;flex-direction:column;align-items:center;gap:4px}.zen-tp__field-label{font-size:10px;font-weight:500;line-height:normal;text-transform:uppercase;color:#667085;letter-spacing:.02em}.zen-tp__input-box{display:flex;align-items:center;gap:6px;height:44px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;padding:6px 6px 6px 12px}.zen-tp__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;-moz-appearance:textfield}.zen-tp__input::-webkit-outer-spin-button,.zen-tp__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.zen-tp__arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.zen-tp__arrow{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:2px;flex-shrink:0}.zen-tp__arrow:hover{background:#6670851f}.zen-tp__arrow svg{display:block}.zen-tp__colon{display:flex;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085;-webkit-user-select:none;user-select:none;margin-bottom:18px}.zen-tp__period{display:flex;flex-direction:column;gap:16px;flex-shrink:0;margin-left:20px}.zen-tp__period-btn{display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:all .15s ease;white-space:nowrap;border:1px solid #D0D5DD;background:#fff;color:#344054;box-shadow:0 1px 2px #1018280d}.zen-tp__period-btn:hover{background:#fafafa}.zen-tp__period-btn--active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.zen-tp__period-btn--active:hover{background:#e7f2fd}.zen-tp__divider{width:100%;height:1px;background:#eaecf0}.zen-tp__actions{display:flex;gap:12px}.zen-tp__btn{display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:all .15s ease;white-space:nowrap;box-shadow:0 1px 2px #1018280d}.zen-tp__btn--clear{background:#fff;border:1px solid #D0D5DD;color:#344054}.zen-tp__btn--clear:hover{background:#fafafa}.zen-tp__btn--apply{background:#136ab6;border:1px solid #136AB6;color:#fff}.zen-tp__btn--apply:hover{background:#115d9f}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
7148
7151
|
}
|
|
7149
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduTimepickerComponent, decorators: [{
|
|
7150
7153
|
type: Component,
|
|
7151
|
-
args: [{ selector: 'zen-timepicker', template: "<div class=\"zen-tp\">\n <!-- Input toggle button -->\n <button class=\"zen-tp__toggle zen-tp__toggle--box\"\n [class.zen-tp__toggle--active]=\"isPickerVisible\"\n [class.zen-tp__toggle--disabled]=\"disabled\"\n [class.zen-tp__toggle--readonly]=\"readonly\"\n [style.width]=\"width || null\"\n [disabled]=\"disabled || readonly\"\n (click)=\"togglePicker()\">\n <span class=\"zen-tp__display\" [class.zen-tp__display--placeholder]=\"!value\">\n {{ value ? formattedDisplayValue : defaultPlaceholder }}\n </span>\n <zen-icon class=\"zen-tp__icon\"\n [class.zen-tp__icon--filled]=\"value\"\n src=\"assets/ng-zenduit/icons/time.svg\">\n </zen-icon>\n </button>\n\n <!-- Picker dropdown -->\n <div class=\"zen-tp__dropdown\"\n #pickerPopup\n *ngIf=\"isPickerVisible\"\n [class.zen-tp__dropdown--right]=\"right\"\n [class.zen-tp__dropdown--bottom]=\"bottom\">\n <div class=\"zen-tp__popup\">\n <!-- Header -->\n <div class=\"zen-tp__popup-label\">{{ label || defaultLabel }}</div>\n\n <!-- Time fields -->\n <div class=\"zen-tp__fields\">\n <!-- Hours -->\n <div class=\"zen-tp__field\" *ngIf=\"showHours\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"hoursDisplay\"\n (input)=\"onHoursInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampHours()\"\n (keydown)=\"onInputKeydown($event, 'hours')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementHours()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementHours()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">HRS</span>\n </div>\n\n <span class=\"zen-tp__colon\" *ngIf=\"showHours\">:</span>\n\n <!-- Minutes -->\n <div class=\"zen-tp__field\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"minutesDisplay\"\n (input)=\"onMinutesInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampMinutes()\"\n (keydown)=\"onInputKeydown($event, 'minutes')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementMinutes()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementMinutes()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">MIN</span>\n </div>\n\n <!-- Seconds (duration mode or when showSeconds) -->\n <ng-container *ngIf=\"showSeconds\">\n <span class=\"zen-tp__colon\">:</span>\n <div class=\"zen-tp__field\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Seconds\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"secondsDisplay\"\n (input)=\"onSecondsInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampSeconds()\"\n (keydown)=\"onInputKeydown($event, 'seconds')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementSeconds()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementSeconds()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">SEC</span>\n </div>\n </ng-container>\n\n <!-- AM/PM Toggle (Clock mode only) -->\n <div class=\"zen-tp__period\" *ngIf=\"mode === 'clock'\">\n <button class=\"zen-tp__period-btn\"\n type=\"button\"\n [class.zen-tp__period-btn--active]=\"selectedPeriod === 'AM'\"\n (click)=\"selectPeriod('AM')\">\n AM\n </button>\n <button class=\"zen-tp__period-btn\"\n type=\"button\"\n [class.zen-tp__period-btn--active]=\"selectedPeriod === 'PM'\"\n (click)=\"selectPeriod('PM')\">\n PM\n </button>\n </div>\n </div>\n\n <!-- Divider -->\n <div class=\"zen-tp__divider\"></div>\n\n <!-- Actions -->\n <div class=\"zen-tp__actions\">\n <button class=\"zen-tp__btn zen-tp__btn--clear\" type=\"button\" (click)=\"onClear()\">Clear</button>\n <button class=\"zen-tp__btn zen-tp__btn--apply\" type=\"button\" (click)=\"onApply()\">Apply</button>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:inline-block;position:relative;width:100%}.zen-tp{width:100%;position:relative}.zen-tp *{box-sizing:border-box}.zen-tp__toggle{display:inline-flex;align-items:center;gap:8px;min-width:150px;width:100%;transition:.3s;background:#fff;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid #D0D5DD;padding:0 0 8px;font-size:16px;font-weight:400;line-height:130%;color:#344054}.zen-tp__toggle--box{border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px}.zen-tp__toggle:hover{border-color:#667085}.zen-tp__toggle:focus,.zen-tp__toggle--active{border-color:#136ab6;box-shadow:0 0 0 3px #136ab61f}.zen-tp__toggle--disabled{cursor:not-allowed;opacity:.5}.zen-tp__toggle--readonly{cursor:default;opacity:.7}.zen-tp__display{flex:1;text-align:left;font-size:16px;font-weight:400;line-height:24px;color:#1d2939}.zen-tp__display--placeholder{color:#667085}.zen-tp__icon{width:20px;height:20px;flex-shrink:0;background-color:#667085;transition:.2s}.zen-tp__icon--filled{background-color:#344054}.zen-tp__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px}.zen-tp__dropdown--right{left:auto;right:0}.zen-tp__dropdown--bottom{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}.zen-tp__popup{background:#fff;border-radius:8px;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;padding:16px;display:flex;flex-direction:column;gap:16px;align-items:flex-end;font-family:inherit}.zen-tp__popup-label{width:100%;font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.zen-tp__fields{display:flex;align-items:center;gap:12px}.zen-tp__field{display:flex;flex-direction:column;align-items:center;gap:4px}.zen-tp__field-label{font-size:10px;font-weight:500;line-height:normal;text-transform:uppercase;color:#667085;letter-spacing:.02em}.zen-tp__input-box{display:flex;align-items:center;gap:6px;height:44px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;padding:6px 6px 6px 12px}.zen-tp__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;-moz-appearance:textfield}.zen-tp__input::-webkit-outer-spin-button,.zen-tp__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.zen-tp__arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.zen-tp__arrow{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:2px;flex-shrink:0}.zen-tp__arrow:hover{background:#6670851f}.zen-tp__arrow svg{display:block}.zen-tp__colon{display:flex;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085;-webkit-user-select:none;user-select:none;margin-bottom:18px}.zen-tp__period{display:flex;flex-direction:column;gap:16px;flex-shrink:0;margin-left:20px}.zen-tp__period-btn{display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:all .15s ease;white-space:nowrap;border:1px solid #D0D5DD;background:#fff;color:#344054;box-shadow:0 1px 2px #1018280d}.zen-tp__period-btn:hover{background:#fafafa}.zen-tp__period-btn--active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.zen-tp__period-btn--active:hover{background:#e7f2fd}.zen-tp__divider{width:100%;height:1px;background:#eaecf0}.zen-tp__actions{display:flex;gap:12px}.zen-tp__btn{display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:all .15s ease;white-space:nowrap;box-shadow:0 1px 2px #1018280d}.zen-tp__btn--clear{background:#fff;border:1px solid #D0D5DD;color:#344054}.zen-tp__btn--clear:hover{background:#fafafa}.zen-tp__btn--apply{background:#136ab6;border:1px solid #136AB6;color:#fff}.zen-tp__btn--apply:hover{background:#115d9f}\n"] }]
|
|
7154
|
+
args: [{ selector: 'zen-timepicker', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-tp\">\n <!-- Input toggle button -->\n <button class=\"zen-tp__toggle zen-tp__toggle--box\"\n [class.zen-tp__toggle--active]=\"isPickerVisible\"\n [class.zen-tp__toggle--disabled]=\"disabled\"\n [class.zen-tp__toggle--readonly]=\"readonly\"\n [style.width]=\"width || null\"\n [disabled]=\"disabled || readonly\"\n (click)=\"togglePicker()\">\n <span class=\"zen-tp__display\" [class.zen-tp__display--placeholder]=\"!value\">\n {{ value ? formattedDisplayValue : defaultPlaceholder }}\n </span>\n <zen-icon class=\"zen-tp__icon\"\n [class.zen-tp__icon--filled]=\"value\"\n src=\"assets/ng-zenduit/icons/time.svg\">\n </zen-icon>\n </button>\n\n <!-- Picker dropdown -->\n @if (isPickerVisible) {\n <div class=\"zen-tp__dropdown\"\n #pickerPopup\n [class.zen-tp__dropdown--right]=\"right\"\n [class.zen-tp__dropdown--bottom]=\"bottom\">\n <div class=\"zen-tp__popup\">\n <!-- Header -->\n <div class=\"zen-tp__popup-label\">{{ label || defaultLabel }}</div>\n <!-- Time fields -->\n <div class=\"zen-tp__fields\">\n <!-- Hours -->\n @if (showHours) {\n <div class=\"zen-tp__field\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Hours\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"hoursDisplay\"\n (input)=\"onHoursInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampHours()\"\n (keydown)=\"onInputKeydown($event, 'hours')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementHours()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementHours()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">HRS</span>\n </div>\n }\n @if (showHours) {\n <span class=\"zen-tp__colon\">:</span>\n }\n <!-- Minutes -->\n <div class=\"zen-tp__field\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Minutes\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"minutesDisplay\"\n (input)=\"onMinutesInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampMinutes()\"\n (keydown)=\"onInputKeydown($event, 'minutes')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementMinutes()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementMinutes()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">MIN</span>\n </div>\n <!-- Seconds (duration mode or when showSeconds) -->\n @if (showSeconds) {\n <span class=\"zen-tp__colon\">:</span>\n <div class=\"zen-tp__field\">\n <div class=\"zen-tp__input-box\">\n <input class=\"zen-tp__input\"\n type=\"text\"\n aria-label=\"Seconds\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n [value]=\"secondsDisplay\"\n (input)=\"onSecondsInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"clampSeconds()\"\n (keydown)=\"onInputKeydown($event, 'seconds')\"\n maxlength=\"2\" />\n <div class=\"zen-tp__arrows\">\n <button class=\"zen-tp__arrow zen-tp__arrow--up\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"incrementSeconds()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 5L5 1L9 5\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <button class=\"zen-tp__arrow zen-tp__arrow--down\"\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"decrementSeconds()\">\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n <path d=\"M1 1L5 5L9 1\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n <span class=\"zen-tp__field-label\">SEC</span>\n </div>\n }\n <!-- AM/PM Toggle (Clock mode only) -->\n @if (mode === 'clock') {\n <div class=\"zen-tp__period\">\n <button class=\"zen-tp__period-btn\"\n type=\"button\"\n [class.zen-tp__period-btn--active]=\"selectedPeriod === 'AM'\"\n (click)=\"selectPeriod('AM')\">\n AM\n </button>\n <button class=\"zen-tp__period-btn\"\n type=\"button\"\n [class.zen-tp__period-btn--active]=\"selectedPeriod === 'PM'\"\n (click)=\"selectPeriod('PM')\">\n PM\n </button>\n </div>\n }\n </div>\n <!-- Divider -->\n <div class=\"zen-tp__divider\"></div>\n <!-- Actions -->\n <div class=\"zen-tp__actions\">\n <button class=\"zen-tp__btn zen-tp__btn--clear\" type=\"button\" (click)=\"onClear()\">Clear</button>\n <button class=\"zen-tp__btn zen-tp__btn--apply\" type=\"button\" (click)=\"onApply()\">Apply</button>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block;position:relative;width:100%}.zen-tp{width:100%;position:relative}.zen-tp *{box-sizing:border-box}.zen-tp__toggle{display:inline-flex;align-items:center;gap:8px;min-width:150px;width:100%;transition:.3s;background:#fff;appearance:none;outline:none;cursor:pointer;border:none;border-radius:0;border-bottom:1px solid #D0D5DD;padding:0 0 8px;font-size:16px;font-weight:400;line-height:130%;color:#344054}.zen-tp__toggle--box{border:1px solid #D0D5DD;border-radius:8px;padding:10px 14px;gap:8px}.zen-tp__toggle:hover{border-color:#667085}.zen-tp__toggle:focus,.zen-tp__toggle--active{border-color:#136ab6;box-shadow:0 0 0 3px #136ab61f}.zen-tp__toggle--disabled{cursor:not-allowed;opacity:.5}.zen-tp__toggle--readonly{cursor:default;opacity:.7}.zen-tp__display{flex:1;text-align:left;font-size:16px;font-weight:400;line-height:24px;color:#1d2939}.zen-tp__display--placeholder{color:#667085}.zen-tp__icon{width:20px;height:20px;flex-shrink:0;background-color:#667085;transition:.2s}.zen-tp__icon--filled{background-color:#344054}.zen-tp__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px}.zen-tp__dropdown--right{left:auto;right:0}.zen-tp__dropdown--bottom{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}.zen-tp__popup{background:#fff;border-radius:8px;box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;padding:16px;display:flex;flex-direction:column;gap:16px;align-items:flex-end;font-family:inherit}.zen-tp__popup-label{width:100%;font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.zen-tp__fields{display:flex;align-items:center;gap:12px}.zen-tp__field{display:flex;flex-direction:column;align-items:center;gap:4px}.zen-tp__field-label{font-size:10px;font-weight:500;line-height:normal;text-transform:uppercase;color:#667085;letter-spacing:.02em}.zen-tp__input-box{display:flex;align-items:center;gap:6px;height:44px;background:#f2f4f7;border:1px solid #E5E7EB;border-radius:8px;padding:6px 6px 6px 12px}.zen-tp__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;-moz-appearance:textfield}.zen-tp__input::-webkit-outer-spin-button,.zen-tp__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.zen-tp__arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.zen-tp__arrow{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:2px;flex-shrink:0}.zen-tp__arrow:hover{background:#6670851f}.zen-tp__arrow svg{display:block}.zen-tp__colon{display:flex;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085;-webkit-user-select:none;user-select:none;margin-bottom:18px}.zen-tp__period{display:flex;flex-direction:column;gap:16px;flex-shrink:0;margin-left:20px}.zen-tp__period-btn{display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:all .15s ease;white-space:nowrap;border:1px solid #D0D5DD;background:#fff;color:#344054;box-shadow:0 1px 2px #1018280d}.zen-tp__period-btn:hover{background:#fafafa}.zen-tp__period-btn--active{background:#f1f7fe;border-color:#f1f7fe;color:#105494}.zen-tp__period-btn--active:hover{background:#e7f2fd}.zen-tp__divider{width:100%;height:1px;background:#eaecf0}.zen-tp__actions{display:flex;gap:12px}.zen-tp__btn{display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:all .15s ease;white-space:nowrap;box-shadow:0 1px 2px #1018280d}.zen-tp__btn--clear{background:#fff;border:1px solid #D0D5DD;color:#344054}.zen-tp__btn--clear:hover{background:#fafafa}.zen-tp__btn--apply{background:#136ab6;border:1px solid #136AB6;color:#fff}.zen-tp__btn--apply:hover{background:#115d9f}\n"] }]
|
|
7152
7155
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { mode: [{
|
|
7153
7156
|
type: Input
|
|
7154
7157
|
}], label: [{
|
|
@@ -7782,12 +7785,12 @@ class ZenduDatePickerDropdownComponent {
|
|
|
7782
7785
|
return false;
|
|
7783
7786
|
return moment(day.date).isSame(moment(this._selectedEnd), 'day');
|
|
7784
7787
|
}
|
|
7785
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7786
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenduDatePickerDropdownComponent, 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" }, 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 <!-- Trigger Button -->\n <button class=\"dropdown-trigger\"\n #triggerBtn\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 <!-- Dropdown Panel -->\n <div class=\"dropdown-menu\" *ngIf=\"isOpen\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n <ng-container *ngIf=\"type === 'range' && !mobile\">\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n <div class=\"preset-item\"\n *ngFor=\"let preset of activePresets\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n </div>\n\n <div class=\"sidebar-divider\"></div>\n\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\n <div class=\"calendar-divider\"></div>\n\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\n <!-- Time Picker -->\n <ng-container *ngIf=\"timePicker\">\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n </ng-container>\n\n <div class=\"bottom-divider\"></div>\n\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n <div class=\"marker-legend\" *ngIf=\"legendMarkers.length; else rangeInputs\">\n <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n </div>\n <ng-template #rangeInputs>\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 </ng-template>\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 </ng-container>\n\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n <ng-container *ngIf=\"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\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\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n\n <!-- Time Picker -->\n <ng-container *ngIf=\"timePicker\">\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n </ng-container>\n\n <div class=\"marker-legend standalone\" *ngIf=\"legendMarkers.length\">\n <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n </div>\n\n <div class=\"bottom-divider\"></div>\n\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 </ng-container>\n\n <!-- SINGLE DATE: single calendar + input + today button -->\n <ng-container *ngIf=\"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\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\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n\n <!-- Time Picker -->\n <ng-container *ngIf=\"timePicker\">\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n </ng-container>\n\n <div class=\"marker-legend standalone single\" *ngIf=\"legendMarkers.length\">\n <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"!autoApply\">\n <div class=\"bottom-divider\"></div>\n\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 </ng-container>\n </div>\n </ng-container>\n </div>\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection>\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-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]=\"_hoursDisplay\"\n (input)=\"onHoursInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours()\"\n (keydown)=\"onTimeKeydown($event, 'hours')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\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()\">\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]=\"_minutesDisplay\"\n (input)=\"onMinutesInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes()\"\n (keydown)=\"onTimeKeydown($event, 'minutes')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\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()\">\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]=\"_period === 'AM'\"\n (click)=\"setPeriod('AM')\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"_period === 'PM'\"\n (click)=\"setPeriod('PM')\">\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 <div class=\"cell header-cell\" *ngFor=\"let wd of weekDays\">{{ wd | translate }}</div>\n </div>\n <!-- Day rows -->\n <div class=\"day-row\" *ngFor=\"let row of dayRows\">\n <div class=\"cell day-cell\"\n *ngFor=\"let day of row.days\"\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 <div class=\"marker-dots\" *ngIf=\"day.markerColors?.length\">\n <span class=\"marker-dot\"\n *ngFor=\"let c of day.markerColors\"\n [style.background]=\"c || null\"></span>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;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-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}.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: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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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" }] }); }
|
|
7788
|
+
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 }); }
|
|
7789
|
+
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" }, 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 <!-- Trigger Button -->\n <button class=\"dropdown-trigger\"\n #triggerBtn\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 <!-- 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 -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\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 -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\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\"></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>\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-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]=\"_hoursDisplay\"\n (input)=\"onHoursInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours()\"\n (keydown)=\"onTimeKeydown($event, 'hours')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\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()\">\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]=\"_minutesDisplay\"\n (input)=\"onMinutesInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes()\"\n (keydown)=\"onTimeKeydown($event, 'minutes')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\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()\">\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]=\"_period === 'AM'\"\n (click)=\"setPeriod('AM')\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"_period === 'PM'\"\n (click)=\"setPeriod('PM')\">\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%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;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-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}.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: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 }); }
|
|
7787
7790
|
}
|
|
7788
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7791
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduDatePickerDropdownComponent, decorators: [{
|
|
7789
7792
|
type: Component,
|
|
7790
|
-
args: [{ selector: 'zen-date-picker-dropdown', template: "<div class=\"zen-dpd\">\n <!-- Trigger Button -->\n <button class=\"dropdown-trigger\"\n #triggerBtn\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 <!-- Dropdown Panel -->\n <div class=\"dropdown-menu\" *ngIf=\"isOpen\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n <ng-container *ngIf=\"type === 'range' && !mobile\">\n <!-- Presets sidebar -->\n <div class=\"presets-sidebar\">\n <div class=\"preset-item\"\n *ngFor=\"let preset of activePresets\"\n [class.active]=\"_activePreset === preset.label\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label | translate }}\n </div>\n </div>\n\n <div class=\"sidebar-divider\"></div>\n\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\n <div class=\"calendar-divider\"></div>\n\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\n <!-- Time Picker -->\n <ng-container *ngIf=\"timePicker\">\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n </ng-container>\n\n <div class=\"bottom-divider\"></div>\n\n <!-- Bottom panel: inputs (or legend) + actions -->\n <div class=\"bottom-panel\">\n <div class=\"marker-legend\" *ngIf=\"legendMarkers.length; else rangeInputs\">\n <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n </div>\n <ng-template #rangeInputs>\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 </ng-template>\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 </ng-container>\n\n <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n <ng-container *ngIf=\"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\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\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n\n <!-- Time Picker -->\n <ng-container *ngIf=\"timePicker\">\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n </ng-container>\n\n <div class=\"marker-legend standalone\" *ngIf=\"legendMarkers.length\">\n <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n </div>\n\n <div class=\"bottom-divider\"></div>\n\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 </ng-container>\n\n <!-- SINGLE DATE: single calendar + input + today button -->\n <ng-container *ngIf=\"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\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\n <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n </div>\n\n <!-- Time Picker -->\n <ng-container *ngIf=\"timePicker\">\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n </ng-container>\n\n <div class=\"marker-legend standalone single\" *ngIf=\"legendMarkers.length\">\n <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n <span class=\"legend-title\">{{ m.title | translate }}</span>\n </div>\n </div>\n\n <ng-container *ngIf=\"!autoApply\">\n <div class=\"bottom-divider\"></div>\n\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 </ng-container>\n </div>\n </ng-container>\n </div>\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection>\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-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]=\"_hoursDisplay\"\n (input)=\"onHoursInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours()\"\n (keydown)=\"onTimeKeydown($event, 'hours')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\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()\">\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]=\"_minutesDisplay\"\n (input)=\"onMinutesInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes()\"\n (keydown)=\"onTimeKeydown($event, 'minutes')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\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()\">\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]=\"_period === 'AM'\"\n (click)=\"setPeriod('AM')\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"_period === 'PM'\"\n (click)=\"setPeriod('PM')\">\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 <div class=\"cell header-cell\" *ngFor=\"let wd of weekDays\">{{ wd | translate }}</div>\n </div>\n <!-- Day rows -->\n <div class=\"day-row\" *ngFor=\"let row of dayRows\">\n <div class=\"cell day-cell\"\n *ngFor=\"let day of row.days\"\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 <div class=\"marker-dots\" *ngIf=\"day.markerColors?.length\">\n <span class=\"marker-dot\"\n *ngFor=\"let c of day.markerColors\"\n [style.background]=\"c || null\"></span>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;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-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}.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: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"] }]
|
|
7793
|
+
args: [{ selector: 'zen-date-picker-dropdown', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-dpd\">\n <!-- Trigger Button -->\n <button class=\"dropdown-trigger\"\n #triggerBtn\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 <!-- 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 -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\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 -->\n @if (timePicker) {\n <div class=\"bottom-divider\"></div>\n <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\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\"></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>\n <div class=\"time-picker-container\">\n <div class=\"time-picker-content\">\n <span class=\"time-picker-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]=\"_hoursDisplay\"\n (input)=\"onHoursInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampHours()\"\n (keydown)=\"onTimeKeydown($event, 'hours')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\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()\">\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]=\"_minutesDisplay\"\n (input)=\"onMinutesInput($event)\"\n (focus)=\"onTimeFocus($event)\"\n (blur)=\"clampMinutes()\"\n (keydown)=\"onTimeKeydown($event, 'minutes')\"\n maxlength=\"2\" />\n <div class=\"time-arrows\">\n <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\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()\">\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]=\"_period === 'AM'\"\n (click)=\"setPeriod('AM')\">\n AM\n </button>\n <button class=\"time-period-btn\"\n [class.active]=\"_period === 'PM'\"\n (click)=\"setPeriod('PM')\">\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%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;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-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}.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: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"] }]
|
|
7791
7794
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.TranslateService }, { type: undefined, decorators: [{
|
|
7792
7795
|
type: Optional
|
|
7793
7796
|
}, {
|
|
@@ -7938,12 +7941,12 @@ class ZenduFileUploaderComponent {
|
|
|
7938
7941
|
}
|
|
7939
7942
|
return files;
|
|
7940
7943
|
}
|
|
7941
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7942
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
7944
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduFileUploaderComponent, isStandalone: false, selector: "zen-file-uploader", inputs: { accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", disabled: "disabled", description: "description", progressType: "progressType", files: "files" }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"zen-fu\" [class.disabled]=\"disabled\">\n <!-- Drop Zone -->\n <div class=\"drop-zone\"\n [class.dragover]=\"isDragover\"\n (click)=\"openFileDialog()\">\n <div class=\"drop-zone-icon\">\n <zen-icon src=\"assets/ng-zenduit/icons/upload-cloud.svg\"></zen-icon>\n </div>\n <div class=\"drop-zone-text\">\n <span class=\"click-text\">{{ 'Click to upload' | translate }}</span>\n <span class=\"drag-text\">{{ 'or drag and drop' | translate }}</span>\n </div>\n <p class=\"drop-zone-description\">\n {{ description || ('SVG, PNG, JPG or GIF (max. 800x400px)' | translate) }}\n </p>\n </div>\n\n <input type=\"file\"\n #fileInput\n style=\"display:none\"\n [accept]=\"accept\"\n [multiple]=\"multiple\"\n (change)=\"onFileInput($event)\" />\n\n <!-- File Queue -->\n @if (files?.length) {\n <div class=\"file-queue\">\n <!-- Progress Bar Type -->\n @if (progressType === 'bar') {\n @for (item of files; track item) {\n <div class=\"file-item bar-type\"\n [class.complete]=\"item.status === 'complete'\">\n <div class=\"file-item-content\">\n <div class=\"file-icon-wrap\">\n <zen-icon class=\"file-icon\"\n [src]=\"getFileIcon(item.fileType)\">\n </zen-icon>\n </div>\n <div class=\"file-info\">\n <div class=\"file-text\">\n <p class=\"file-name\">{{ item.file.name }}</p>\n <p class=\"file-size\">{{ formatFileSize(item.file.size) }}</p>\n </div>\n <div class=\"progress-row\">\n <div class=\"progress-track\">\n <div class=\"progress-fill\" [style.width.%]=\"item.progress\"></div>\n </div>\n <span class=\"progress-label\">{{ item.progress }}%</span>\n </div>\n </div>\n </div>\n @if (item.status === 'uploading') {\n <button class=\"file-action\"\n (click)=\"removeFile(item)\">\n <zen-icon class=\"trash-icon\"\n src=\"assets/ng-zenduit/icons/trash.svg\">\n </zen-icon>\n </button>\n }\n @if (item.status === 'complete') {\n <zen-icon class=\"check-icon\"\n src=\"assets/ng-zenduit/icons/check-circle.svg\">\n </zen-icon>\n }\n </div>\n }\n }\n <!-- Progress Fill Type -->\n @if (progressType === 'fill') {\n @for (item of files; track item) {\n <div class=\"file-item fill-type\"\n >\n <div class=\"fill-bg\" [style.width.%]=\"item.progress\"></div>\n <div class=\"file-item-content\">\n <div class=\"file-icon-wrap\">\n <zen-icon class=\"file-icon\"\n [src]=\"getFileIcon(item.fileType)\">\n </zen-icon>\n </div>\n <div class=\"file-info\">\n <p class=\"file-name\">{{ item.file.name }}</p>\n <p class=\"file-size\">{{ formatFileSize(item.file.size) }} – {{ item.progress }}% {{ 'uploaded' | translate }}</p>\n </div>\n </div>\n @if (item.status === 'uploading') {\n <zen-spinner\n class=\"file-spinner\"\n size=\"small\">\n </zen-spinner>\n }\n @if (item.status === 'complete') {\n <zen-icon class=\"check-icon\"\n src=\"assets/ng-zenduit/icons/check-circle.svg\">\n </zen-icon>\n }\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.zen-fu{font-family:Inter,sans-serif}.zen-fu.disabled{opacity:.5;pointer-events:none}.drop-zone{display:flex;flex-direction:column;align-items:center;padding:16px 24px;background:#fff;border:1px solid #EAECF0;border-radius:8px;cursor:pointer;transition:.2s;gap:12px}.drop-zone:hover,.drop-zone.dragover{background:#fafdff;border-color:#88c1f1}.drop-zone:hover .drop-zone-icon,.drop-zone.dragover .drop-zone-icon{background:#e3eefb;border-color:#f1f7fe}.drop-zone:hover .drop-zone-icon zen-icon,.drop-zone.dragover .drop-zone-icon zen-icon{background-color:#136ab6}.drop-zone:hover .drag-text,.drop-zone:hover .drop-zone-description,.drop-zone.dragover .drag-text,.drop-zone.dragover .drop-zone-description{color:#136ab6}.drop-zone-icon{width:40px;height:40px;background:#f2f4f7;border:6px solid #F9FAFB;border-radius:28px;display:flex;align-items:center;justify-content:center;transition:.2s}.drop-zone-icon zen-icon{width:20px;height:20px;background-color:#475467;transition:.2s}.drop-zone-text{display:flex;gap:4px;align-items:center;justify-content:center;font-size:14px;line-height:20px}.click-text{font-weight:500;color:#105494}.drag-text{font-weight:400;color:#667085;transition:.2s}.drop-zone-description{font-size:12px;line-height:18px;font-weight:400;color:#667085;text-align:center;margin:0;transition:.2s}.file-queue{display:flex;flex-direction:column;gap:12px;margin-top:16px}.file-item{display:flex;align-items:flex-start;gap:4px;padding:16px;background:#fff;border:1px solid #EAECF0;border-radius:8px;transition:.2s}.file-item.complete{border-color:#2188d9}.file-item-content{display:flex;flex:1;gap:16px;align-items:flex-start;min-width:0}.file-icon-wrap{width:28px;height:28px;position:relative;flex-shrink:0}.file-icon-wrap:before{content:\"\";position:absolute;top:-2px;left:-2px;width:32px;height:32px;background:#e3eefb;border:4px solid #F1F7FE;border-radius:28px}.file-icon-wrap .file-icon{position:relative;width:16px;height:16px;background-color:#136ab6;top:6px;left:6px}.file-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.file-text{display:flex;flex-direction:column;line-height:20px;font-size:14px}.file-name{font-weight:500;color:#344054;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-weight:400;color:#667085;margin:0}.progress-row{display:flex;align-items:center;gap:12px;width:100%}.progress-track{flex:1;height:8px;background:#f1f7fe;border-radius:4px;position:relative;overflow:hidden}.progress-fill{position:absolute;top:0;left:0;height:8px;background:#136ab6;border-radius:4px;transition:width .3s ease}.progress-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap;flex-shrink:0}.file-action{display:flex;align-items:center;justify-content:center;padding:8px;margin:-8px -8px -8px 0;border:none;background:transparent;cursor:pointer;border-radius:8px;appearance:none;outline:none;flex-shrink:0}.file-action:hover{background:#f9fafb}.file-action .trash-icon{width:20px;height:20px;background-color:#98a2b3}.check-icon{width:20px;height:20px;background-color:#136ab6;flex-shrink:0}.fill-type{position:relative;overflow:hidden;height:72px;padding:0}.fill-type .file-item-content{position:absolute;top:15px;left:17px;right:51px;z-index:1}.fill-type .file-info{gap:0}.fill-type .file-name,.fill-type .file-size{line-height:20px;font-size:14px}.fill-bg{position:absolute;top:-1px;left:-1px;bottom:-1px;background:#f9fafb;transition:width .3s ease}.file-spinner{position:absolute;z-index:1;right:15px;top:15px;width:32px;height:32px}.fill-type .check-icon{position:absolute;z-index:1;right:15px;top:15px}\n"], dependencies: [{ 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 }); }
|
|
7943
7946
|
}
|
|
7944
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7947
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduFileUploaderComponent, decorators: [{
|
|
7945
7948
|
type: Component,
|
|
7946
|
-
args: [{ selector: 'zen-file-uploader', template: "<div class=\"zen-fu\" [class.disabled]=\"disabled\">\n
|
|
7949
|
+
args: [{ selector: 'zen-file-uploader', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-fu\" [class.disabled]=\"disabled\">\n <!-- Drop Zone -->\n <div class=\"drop-zone\"\n [class.dragover]=\"isDragover\"\n (click)=\"openFileDialog()\">\n <div class=\"drop-zone-icon\">\n <zen-icon src=\"assets/ng-zenduit/icons/upload-cloud.svg\"></zen-icon>\n </div>\n <div class=\"drop-zone-text\">\n <span class=\"click-text\">{{ 'Click to upload' | translate }}</span>\n <span class=\"drag-text\">{{ 'or drag and drop' | translate }}</span>\n </div>\n <p class=\"drop-zone-description\">\n {{ description || ('SVG, PNG, JPG or GIF (max. 800x400px)' | translate) }}\n </p>\n </div>\n\n <input type=\"file\"\n #fileInput\n style=\"display:none\"\n [accept]=\"accept\"\n [multiple]=\"multiple\"\n (change)=\"onFileInput($event)\" />\n\n <!-- File Queue -->\n @if (files?.length) {\n <div class=\"file-queue\">\n <!-- Progress Bar Type -->\n @if (progressType === 'bar') {\n @for (item of files; track item) {\n <div class=\"file-item bar-type\"\n [class.complete]=\"item.status === 'complete'\">\n <div class=\"file-item-content\">\n <div class=\"file-icon-wrap\">\n <zen-icon class=\"file-icon\"\n [src]=\"getFileIcon(item.fileType)\">\n </zen-icon>\n </div>\n <div class=\"file-info\">\n <div class=\"file-text\">\n <p class=\"file-name\">{{ item.file.name }}</p>\n <p class=\"file-size\">{{ formatFileSize(item.file.size) }}</p>\n </div>\n <div class=\"progress-row\">\n <div class=\"progress-track\">\n <div class=\"progress-fill\" [style.width.%]=\"item.progress\"></div>\n </div>\n <span class=\"progress-label\">{{ item.progress }}%</span>\n </div>\n </div>\n </div>\n @if (item.status === 'uploading') {\n <button class=\"file-action\"\n (click)=\"removeFile(item)\">\n <zen-icon class=\"trash-icon\"\n src=\"assets/ng-zenduit/icons/trash.svg\">\n </zen-icon>\n </button>\n }\n @if (item.status === 'complete') {\n <zen-icon class=\"check-icon\"\n src=\"assets/ng-zenduit/icons/check-circle.svg\">\n </zen-icon>\n }\n </div>\n }\n }\n <!-- Progress Fill Type -->\n @if (progressType === 'fill') {\n @for (item of files; track item) {\n <div class=\"file-item fill-type\"\n >\n <div class=\"fill-bg\" [style.width.%]=\"item.progress\"></div>\n <div class=\"file-item-content\">\n <div class=\"file-icon-wrap\">\n <zen-icon class=\"file-icon\"\n [src]=\"getFileIcon(item.fileType)\">\n </zen-icon>\n </div>\n <div class=\"file-info\">\n <p class=\"file-name\">{{ item.file.name }}</p>\n <p class=\"file-size\">{{ formatFileSize(item.file.size) }} – {{ item.progress }}% {{ 'uploaded' | translate }}</p>\n </div>\n </div>\n @if (item.status === 'uploading') {\n <zen-spinner\n class=\"file-spinner\"\n size=\"small\">\n </zen-spinner>\n }\n @if (item.status === 'complete') {\n <zen-icon class=\"check-icon\"\n src=\"assets/ng-zenduit/icons/check-circle.svg\">\n </zen-icon>\n }\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.zen-fu{font-family:Inter,sans-serif}.zen-fu.disabled{opacity:.5;pointer-events:none}.drop-zone{display:flex;flex-direction:column;align-items:center;padding:16px 24px;background:#fff;border:1px solid #EAECF0;border-radius:8px;cursor:pointer;transition:.2s;gap:12px}.drop-zone:hover,.drop-zone.dragover{background:#fafdff;border-color:#88c1f1}.drop-zone:hover .drop-zone-icon,.drop-zone.dragover .drop-zone-icon{background:#e3eefb;border-color:#f1f7fe}.drop-zone:hover .drop-zone-icon zen-icon,.drop-zone.dragover .drop-zone-icon zen-icon{background-color:#136ab6}.drop-zone:hover .drag-text,.drop-zone:hover .drop-zone-description,.drop-zone.dragover .drag-text,.drop-zone.dragover .drop-zone-description{color:#136ab6}.drop-zone-icon{width:40px;height:40px;background:#f2f4f7;border:6px solid #F9FAFB;border-radius:28px;display:flex;align-items:center;justify-content:center;transition:.2s}.drop-zone-icon zen-icon{width:20px;height:20px;background-color:#475467;transition:.2s}.drop-zone-text{display:flex;gap:4px;align-items:center;justify-content:center;font-size:14px;line-height:20px}.click-text{font-weight:500;color:#105494}.drag-text{font-weight:400;color:#667085;transition:.2s}.drop-zone-description{font-size:12px;line-height:18px;font-weight:400;color:#667085;text-align:center;margin:0;transition:.2s}.file-queue{display:flex;flex-direction:column;gap:12px;margin-top:16px}.file-item{display:flex;align-items:flex-start;gap:4px;padding:16px;background:#fff;border:1px solid #EAECF0;border-radius:8px;transition:.2s}.file-item.complete{border-color:#2188d9}.file-item-content{display:flex;flex:1;gap:16px;align-items:flex-start;min-width:0}.file-icon-wrap{width:28px;height:28px;position:relative;flex-shrink:0}.file-icon-wrap:before{content:\"\";position:absolute;top:-2px;left:-2px;width:32px;height:32px;background:#e3eefb;border:4px solid #F1F7FE;border-radius:28px}.file-icon-wrap .file-icon{position:relative;width:16px;height:16px;background-color:#136ab6;top:6px;left:6px}.file-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.file-text{display:flex;flex-direction:column;line-height:20px;font-size:14px}.file-name{font-weight:500;color:#344054;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-weight:400;color:#667085;margin:0}.progress-row{display:flex;align-items:center;gap:12px;width:100%}.progress-track{flex:1;height:8px;background:#f1f7fe;border-radius:4px;position:relative;overflow:hidden}.progress-fill{position:absolute;top:0;left:0;height:8px;background:#136ab6;border-radius:4px;transition:width .3s ease}.progress-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap;flex-shrink:0}.file-action{display:flex;align-items:center;justify-content:center;padding:8px;margin:-8px -8px -8px 0;border:none;background:transparent;cursor:pointer;border-radius:8px;appearance:none;outline:none;flex-shrink:0}.file-action:hover{background:#f9fafb}.file-action .trash-icon{width:20px;height:20px;background-color:#98a2b3}.check-icon{width:20px;height:20px;background-color:#136ab6;flex-shrink:0}.fill-type{position:relative;overflow:hidden;height:72px;padding:0}.fill-type .file-item-content{position:absolute;top:15px;left:17px;right:51px;z-index:1}.fill-type .file-info{gap:0}.fill-type .file-name,.fill-type .file-size{line-height:20px;font-size:14px}.fill-bg{position:absolute;top:-1px;left:-1px;bottom:-1px;background:#f9fafb;transition:width .3s ease}.file-spinner{position:absolute;z-index:1;right:15px;top:15px;width:32px;height:32px}.fill-type .check-icon{position:absolute;z-index:1;right:15px;top:15px}\n"] }]
|
|
7947
7950
|
}], propDecorators: { accept: [{
|
|
7948
7951
|
type: Input
|
|
7949
7952
|
}], multiple: [{
|
|
@@ -7997,12 +8000,12 @@ class ZenduAvatarComponent {
|
|
|
7997
8000
|
'zendu-avatar--focused': this.focused
|
|
7998
8001
|
};
|
|
7999
8002
|
}
|
|
8000
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8001
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8003
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8004
|
+
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 }); }
|
|
8002
8005
|
}
|
|
8003
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8006
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarComponent, decorators: [{
|
|
8004
8007
|
type: Component,
|
|
8005
|
-
args: [{ selector: 'zendu-avatar', template: "<div class=\"zendu-avatar\" [ngClass]=\"cssClasses\">\n <!-- Image avatar -->\n
|
|
8008
|
+
args: [{ selector: 'zendu-avatar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
8006
8009
|
}], propDecorators: { size: [{
|
|
8007
8010
|
type: Input
|
|
8008
8011
|
}], src: [{
|
|
@@ -8024,12 +8027,12 @@ class ZenduAvatarGroupComponent {
|
|
|
8024
8027
|
this.moreCount = 0;
|
|
8025
8028
|
this.showAddButton = false;
|
|
8026
8029
|
}
|
|
8027
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8028
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8030
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8031
|
+
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 }); }
|
|
8029
8032
|
}
|
|
8030
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarGroupComponent, decorators: [{
|
|
8031
8034
|
type: Component,
|
|
8032
|
-
args: [{ selector: 'zendu-avatar-group', template: "<div class=\"zendu-avatar-group\" [ngClass]=\"'zendu-avatar-group--' + size\">\n <div class=\"zendu-avatar-group__avatars\">\n
|
|
8035
|
+
args: [{ selector: 'zendu-avatar-group', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
8033
8036
|
}], propDecorators: { size: [{
|
|
8034
8037
|
type: Input
|
|
8035
8038
|
}], images: [{
|
|
@@ -8049,12 +8052,12 @@ class ZenduAvatarLabelGroupComponent {
|
|
|
8049
8052
|
get avatarSize() {
|
|
8050
8053
|
return this.size;
|
|
8051
8054
|
}
|
|
8052
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8053
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8055
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarLabelGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8056
|
+
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 }); }
|
|
8054
8057
|
}
|
|
8055
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarLabelGroupComponent, decorators: [{
|
|
8056
8059
|
type: Component,
|
|
8057
|
-
args: [{ selector: 'zendu-avatar-label-group', 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
|
|
8060
|
+
args: [{ selector: 'zendu-avatar-label-group', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
8058
8061
|
}], propDecorators: { size: [{
|
|
8059
8062
|
type: Input
|
|
8060
8063
|
}], src: [{
|
|
@@ -8086,12 +8089,12 @@ class ZenduAvatarProfilePhotoComponent {
|
|
|
8086
8089
|
get showPlaceholder() {
|
|
8087
8090
|
return !this.src && !this.text;
|
|
8088
8091
|
}
|
|
8089
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8090
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8092
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarProfilePhotoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8093
|
+
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 }); }
|
|
8091
8094
|
}
|
|
8092
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8095
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduAvatarProfilePhotoComponent, decorators: [{
|
|
8093
8096
|
type: Component,
|
|
8094
|
-
args: [{ selector: 'zendu-avatar-profile-photo', template: "<div class=\"zendu-avatar-profile-photo\" [ngClass]=\"'zendu-avatar-profile-photo--' + size\">\n <!-- Image -->\n
|
|
8097
|
+
args: [{ selector: 'zendu-avatar-profile-photo', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
8095
8098
|
}], propDecorators: { size: [{
|
|
8096
8099
|
type: Input
|
|
8097
8100
|
}], src: [{
|
|
@@ -8232,12 +8235,12 @@ class ZenduSliderComponent {
|
|
|
8232
8235
|
document.removeEventListener('touchmove', this.boundTouchMove);
|
|
8233
8236
|
document.removeEventListener('touchend', this.boundTouchEnd);
|
|
8234
8237
|
}
|
|
8235
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8236
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8238
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8239
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenduSliderComponent, isStandalone: false, selector: "zendu-slider", inputs: { min: "min", max: "max", step: "step", lowValue: "lowValue", highValue: "highValue", label: "label", suffix: "suffix", disabled: "disabled" }, outputs: { lowValueChange: "lowValueChange", highValueChange: "highValueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"zendu-slider\" [class.zendu-slider--disabled]=\"disabled\">\n\n <!-- Top floating labels -->\n @if (label === 'top-floating') {\n <div class=\"zendu-slider__tooltip zendu-slider__tooltip--top\" [style.left.%]=\"lowPercent\">\n <div class=\"zendu-slider__tooltip-content\">{{ formatValue(lowValue) }}</div>\n <div class=\"zendu-slider__tooltip-arrow zendu-slider__tooltip-arrow--down\"></div>\n </div>\n <div class=\"zendu-slider__tooltip zendu-slider__tooltip--top\" [style.left.%]=\"highPercent\">\n <div class=\"zendu-slider__tooltip-content\">{{ formatValue(highValue) }}</div>\n <div class=\"zendu-slider__tooltip-arrow zendu-slider__tooltip-arrow--down\"></div>\n </div>\n }\n\n <!-- Track -->\n <div class=\"zendu-slider__track\" #track (mousedown)=\"onTrackClick($event)\">\n <div class=\"zendu-slider__track-bg\"></div>\n <div class=\"zendu-slider__track-fill\"\n [style.left.%]=\"lowPercent\"\n [style.right.%]=\"100 - highPercent\"></div>\n\n <!-- Low thumb -->\n <div class=\"zendu-slider__thumb\"\n [style.left.%]=\"lowPercent\"\n (mousedown)=\"onThumbMouseDown($event, 'low')\"\n (touchstart)=\"onThumbTouchStart($event, 'low')\"></div>\n\n <!-- High thumb -->\n <div class=\"zendu-slider__thumb\"\n [style.left.%]=\"highPercent\"\n (mousedown)=\"onThumbMouseDown($event, 'high')\"\n (touchstart)=\"onThumbTouchStart($event, 'high')\"></div>\n </div>\n\n <!-- Bottom floating labels -->\n @if (label === 'bottom-floating') {\n <div class=\"zendu-slider__tooltip zendu-slider__tooltip--bottom\" [style.left.%]=\"lowPercent\">\n <div class=\"zendu-slider__tooltip-arrow zendu-slider__tooltip-arrow--up\"></div>\n <div class=\"zendu-slider__tooltip-content\">{{ formatValue(lowValue) }}</div>\n </div>\n <div class=\"zendu-slider__tooltip zendu-slider__tooltip--bottom\" [style.left.%]=\"highPercent\">\n <div class=\"zendu-slider__tooltip-arrow zendu-slider__tooltip-arrow--up\"></div>\n <div class=\"zendu-slider__tooltip-content\">{{ formatValue(highValue) }}</div>\n </div>\n }\n\n <!-- Bottom plain labels -->\n @if (label === 'bottom') {\n <div class=\"zendu-slider__label zendu-slider__label--bottom\" [style.left.%]=\"lowPercent\">\n {{ formatValue(lowValue) }}\n </div>\n <div class=\"zendu-slider__label zendu-slider__label--bottom\" [style.left.%]=\"highPercent\">\n {{ formatValue(highValue) }}\n </div>\n }\n</div>\n", styles: [".zendu-slider{position:relative;width:100%;padding:8px 0;-webkit-user-select:none;user-select:none}.zendu-slider--disabled{opacity:.5;pointer-events:none}.zendu-slider__track{position:relative;height:8px;cursor:pointer}.zendu-slider__track-bg{position:absolute;left:0;right:0;top:0;height:8px;background-color:#eaecf0;border-radius:4px}.zendu-slider__track-fill{position:absolute;top:0;height:8px;background-color:#136ab6;border-radius:4px}.zendu-slider__thumb{position:absolute;top:50%;width:24px;height:24px;margin-left:-12px;margin-top:-12px;background-color:#fff;border:1.5px solid #136AB6;border-radius:50%;cursor:grab;z-index:2;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.zendu-slider__thumb:hover{box-shadow:0 0 0 4px #136ab61f,0 1px 2px #1018280f,0 1px 3px #1018281a}.zendu-slider__thumb:active{cursor:grabbing;box-shadow:0 0 0 4px #136ab61f,0 1px 2px #1018280f,0 1px 3px #1018281a}.zendu-slider__label--bottom{position:absolute;top:100%;margin-top:8px;transform:translate(-50%);font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#101828;white-space:nowrap}.zendu-slider__tooltip{position:absolute;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;z-index:3;pointer-events:none}.zendu-slider__tooltip--top{bottom:100%;margin-bottom:4px}.zendu-slider__tooltip--bottom{top:100%;margin-top:4px}.zendu-slider__tooltip-content{background-color:#fff;border-radius:8px;padding:8px 12px;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px;color:#344054;white-space:nowrap;text-align:center;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814}.zendu-slider__tooltip-arrow{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent}.zendu-slider__tooltip-arrow--down{border-top:6px solid #FFFFFF}.zendu-slider__tooltip-arrow--up{border-bottom:6px solid #FFFFFF}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8237
8240
|
}
|
|
8238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenduSliderComponent, decorators: [{
|
|
8239
8242
|
type: Component,
|
|
8240
|
-
args: [{ selector: 'zendu-slider', template: "<div class=\"zendu-slider\" [class.zendu-slider--disabled]=\"disabled\">\n\n <!-- Top floating labels -->\n
|
|
8243
|
+
args: [{ selector: 'zendu-slider', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zendu-slider\" [class.zendu-slider--disabled]=\"disabled\">\n\n <!-- Top floating labels -->\n @if (label === 'top-floating') {\n <div class=\"zendu-slider__tooltip zendu-slider__tooltip--top\" [style.left.%]=\"lowPercent\">\n <div class=\"zendu-slider__tooltip-content\">{{ formatValue(lowValue) }}</div>\n <div class=\"zendu-slider__tooltip-arrow zendu-slider__tooltip-arrow--down\"></div>\n </div>\n <div class=\"zendu-slider__tooltip zendu-slider__tooltip--top\" [style.left.%]=\"highPercent\">\n <div class=\"zendu-slider__tooltip-content\">{{ formatValue(highValue) }}</div>\n <div class=\"zendu-slider__tooltip-arrow zendu-slider__tooltip-arrow--down\"></div>\n </div>\n }\n\n <!-- Track -->\n <div class=\"zendu-slider__track\" #track (mousedown)=\"onTrackClick($event)\">\n <div class=\"zendu-slider__track-bg\"></div>\n <div class=\"zendu-slider__track-fill\"\n [style.left.%]=\"lowPercent\"\n [style.right.%]=\"100 - highPercent\"></div>\n\n <!-- Low thumb -->\n <div class=\"zendu-slider__thumb\"\n [style.left.%]=\"lowPercent\"\n (mousedown)=\"onThumbMouseDown($event, 'low')\"\n (touchstart)=\"onThumbTouchStart($event, 'low')\"></div>\n\n <!-- High thumb -->\n <div class=\"zendu-slider__thumb\"\n [style.left.%]=\"highPercent\"\n (mousedown)=\"onThumbMouseDown($event, 'high')\"\n (touchstart)=\"onThumbTouchStart($event, 'high')\"></div>\n </div>\n\n <!-- Bottom floating labels -->\n @if (label === 'bottom-floating') {\n <div class=\"zendu-slider__tooltip zendu-slider__tooltip--bottom\" [style.left.%]=\"lowPercent\">\n <div class=\"zendu-slider__tooltip-arrow zendu-slider__tooltip-arrow--up\"></div>\n <div class=\"zendu-slider__tooltip-content\">{{ formatValue(lowValue) }}</div>\n </div>\n <div class=\"zendu-slider__tooltip zendu-slider__tooltip--bottom\" [style.left.%]=\"highPercent\">\n <div class=\"zendu-slider__tooltip-arrow zendu-slider__tooltip-arrow--up\"></div>\n <div class=\"zendu-slider__tooltip-content\">{{ formatValue(highValue) }}</div>\n </div>\n }\n\n <!-- Bottom plain labels -->\n @if (label === 'bottom') {\n <div class=\"zendu-slider__label zendu-slider__label--bottom\" [style.left.%]=\"lowPercent\">\n {{ formatValue(lowValue) }}\n </div>\n <div class=\"zendu-slider__label zendu-slider__label--bottom\" [style.left.%]=\"highPercent\">\n {{ formatValue(highValue) }}\n </div>\n }\n</div>\n", styles: [".zendu-slider{position:relative;width:100%;padding:8px 0;-webkit-user-select:none;user-select:none}.zendu-slider--disabled{opacity:.5;pointer-events:none}.zendu-slider__track{position:relative;height:8px;cursor:pointer}.zendu-slider__track-bg{position:absolute;left:0;right:0;top:0;height:8px;background-color:#eaecf0;border-radius:4px}.zendu-slider__track-fill{position:absolute;top:0;height:8px;background-color:#136ab6;border-radius:4px}.zendu-slider__thumb{position:absolute;top:50%;width:24px;height:24px;margin-left:-12px;margin-top:-12px;background-color:#fff;border:1.5px solid #136AB6;border-radius:50%;cursor:grab;z-index:2;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.zendu-slider__thumb:hover{box-shadow:0 0 0 4px #136ab61f,0 1px 2px #1018280f,0 1px 3px #1018281a}.zendu-slider__thumb:active{cursor:grabbing;box-shadow:0 0 0 4px #136ab61f,0 1px 2px #1018280f,0 1px 3px #1018281a}.zendu-slider__label--bottom{position:absolute;top:100%;margin-top:8px;transform:translate(-50%);font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#101828;white-space:nowrap}.zendu-slider__tooltip{position:absolute;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;z-index:3;pointer-events:none}.zendu-slider__tooltip--top{bottom:100%;margin-bottom:4px}.zendu-slider__tooltip--bottom{top:100%;margin-top:4px}.zendu-slider__tooltip-content{background-color:#fff;border-radius:8px;padding:8px 12px;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px;color:#344054;white-space:nowrap;text-align:center;box-shadow:0 4px 6px -2px #10182808,0 12px 16px -4px #10182814}.zendu-slider__tooltip-arrow{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent}.zendu-slider__tooltip-arrow--down{border-top:6px solid #FFFFFF}.zendu-slider__tooltip-arrow--up{border-bottom:6px solid #FFFFFF}\n"] }]
|
|
8241
8244
|
}], propDecorators: { min: [{
|
|
8242
8245
|
type: Input
|
|
8243
8246
|
}], max: [{
|
|
@@ -8325,12 +8328,12 @@ class ZenBadgeComponent {
|
|
|
8325
8328
|
event.stopPropagation();
|
|
8326
8329
|
this.remove.emit();
|
|
8327
8330
|
}
|
|
8328
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8329
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenBadgeComponent, 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<ng-container *ngIf=\"group; else standardBadge\">\n <div [class]=\"groupClasses\" (click)=\"onClick($event)\">\n\n <!-- Leading: inner badge first -->\n <ng-container *ngIf=\"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 <zen-icon *ngIf=\"showIcon\" class=\"zen-badge-group__icon\" name=\"arrow-right\"></zen-icon>\n </span>\n </ng-container>\n\n <!-- Trailing: message first, badge with optional icon last -->\n <ng-container *ngIf=\"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 <zen-icon *ngIf=\"showIcon\" class=\"zen-badge-group__badge-icon\" name=\"arrow-right\"></zen-icon>\n </span>\n </ng-container>\n\n </div>\n</ng-container>\n\n<!-- Standard badge mode -->\n<ng-template #standardBadge>\n <div [class]=\"hostClasses\" (click)=\"onClick($event)\">\n <span *ngIf=\"dot\" class=\"zen-badge__dot\"></span>\n\n <img *ngIf=\"imgSrc\" class=\"zen-badge__img\" [src]=\"imgSrc\" alt=\"\">\n\n <zen-icon *ngIf=\"hasIcon && !iconOnly && iconDirection === 'left'\" class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n\n <span *ngIf=\"!iconOnly\" class=\"zen-badge__text\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </span>\n\n <zen-icon *ngIf=\"iconOnly && hasIcon\" class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n\n <zen-icon *ngIf=\"hasIcon && !iconOnly && iconDirection === 'right'\" class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n\n <button *ngIf=\"removable\" 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 </div>\n</ng-template>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
8331
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8332
|
+
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 }); }
|
|
8330
8333
|
}
|
|
8331
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenBadgeComponent, decorators: [{
|
|
8332
8335
|
type: Component,
|
|
8333
|
-
args: [{ selector: 'zen-badge', template: "<!-- Badge Group mode -->\n<ng-container *ngIf=\"group; else standardBadge\">\n <div [class]=\"groupClasses\" (click)=\"onClick($event)\">\n\n <!-- Leading: inner badge first -->\n <ng-container *ngIf=\"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 <zen-icon *ngIf=\"showIcon\" class=\"zen-badge-group__icon\" name=\"arrow-right\"></zen-icon>\n </span>\n </ng-container>\n\n <!-- Trailing: message first, badge with optional icon last -->\n <ng-container *ngIf=\"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 <zen-icon *ngIf=\"showIcon\" class=\"zen-badge-group__badge-icon\" name=\"arrow-right\"></zen-icon>\n </span>\n </ng-container>\n\n </div>\n</ng-container>\n\n<!-- Standard badge mode -->\n<ng-template #standardBadge>\n <div [class]=\"hostClasses\" (click)=\"onClick($event)\">\n <span *ngIf=\"dot\" class=\"zen-badge__dot\"></span>\n\n <img *ngIf=\"imgSrc\" class=\"zen-badge__img\" [src]=\"imgSrc\" alt=\"\">\n\n <zen-icon *ngIf=\"hasIcon && !iconOnly && iconDirection === 'left'\" class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n\n <span *ngIf=\"!iconOnly\" class=\"zen-badge__text\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </span>\n\n <zen-icon *ngIf=\"iconOnly && hasIcon\" class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n\n <zen-icon *ngIf=\"hasIcon && !iconOnly && iconDirection === 'right'\" class=\"zen-badge__icon\"\n [name]=\"icon\" [src]=\"iconSrc\"></zen-icon>\n\n <button *ngIf=\"removable\" 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 </div>\n</ng-template>\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"] }]
|
|
8336
|
+
args: [{ selector: 'zen-badge', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
8334
8337
|
}], propDecorators: { size: [{
|
|
8335
8338
|
type: Input
|
|
8336
8339
|
}], color: [{
|
|
@@ -8566,12 +8569,12 @@ class ZenDropdownMenuComponent {
|
|
|
8566
8569
|
this.itemCheck.emit({ item, checked });
|
|
8567
8570
|
}
|
|
8568
8571
|
}
|
|
8569
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8570
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenDropdownMenuComponent, selector: "zen-dropdown-menu", inputs: { triggerType: "triggerType", buttonText: "buttonText", avatarSrc: "avatarSrc", items: "items", showCheckbox: "showCheckbox", showShortcut: "showShortcut", showIcon: "showIcon", showCount: "showCount", headerUser: "headerUser", showHeader: "showHeader", position: "position", offset: "offset", closeOnOutsideClick: "closeOnOutsideClick", scrollHandler: "scrollHandler" }, outputs: { itemClick: "itemClick", itemCheck: "itemCheck", openChange: "openChange", onClose: "onClose" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)", "window:wheel": "handleMouseScroll($event)", "window:keydown": "onWindowKeyDown($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"zen-dropdown-menu\" [class.zen-dropdown-menu--open]=\"isOpen\">\n \n <!-- TRIGGERS SECTION -->\n \n <!-- List Header Trigger -->\n <div \n *ngIf=\"showListHeader\" \n class=\"zen-dropdown-menu__list-header\"\n (click)=\"toggleDropdown()\">\n <div class=\"zen-dropdown-menu__user-info\">\n <img \n class=\"zen-dropdown-menu__user-avatar\" \n [src]=\"headerUser?.avatarSrc\"\n [alt]=\"headerUser?.name || 'User'\">\n <div class=\"zen-dropdown-menu__user-details\">\n <div class=\"zen-dropdown-menu__user-name text text-sm text-weight-medium\">{{ (headerUser?.name || 'User') | translate }}</div>\n <div class=\"zen-dropdown-menu__user-email text text-sm text-weight-regular\">{{ headerUser?.email }}</div>\n </div>\n </div>\n </div>\n \n <!-- Icon Button Trigger -->\n <button \n *ngIf=\"showIconTrigger\"\n class=\"zen-dropdown-menu__icon-button\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <zen-icon name=\"more-vertical\" [customColor]=\"'#667085'\"></zen-icon>\n </button>\n \n <!-- Button Trigger -->\n <button \n *ngIf=\"showButton\"\n class=\"zen-dropdown-menu__button\"\n [class.zen-dropdown-menu__button--focused]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <span class=\"zen-dropdown-menu__button-text text text-sm text-weight-medium\">{{ buttonText | translate }}</span>\n <zen-icon \n [name]=\"isOpen ? 'chevron-up' : 'chevron-down'\" \n [customColor]=\"'#667085'\"\n class=\"zen-dropdown-menu__button-icon\">\n </zen-icon>\n </button>\n \n <!-- Avatar Trigger -->\n <button \n *ngIf=\"showAvatar\"\n class=\"zen-dropdown-menu__avatar\"\n [class.zen-dropdown-menu__avatar--focused]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <img \n class=\"zen-dropdown-menu__avatar-img\" \n [src]=\"avatarSrc\"\n alt=\"User Avatar\">\n </button>\n \n <!-- DROPDOWN CONTENT SECTION -->\n <div class=\"zen-dropdown-menu__dropdown\" *ngIf=\"isOpen\" #dropdown \n [style.position]=\"'fixed'\" \n [style.opacity]=\"dropdownVisible ? 1 : 0\"\n [style.visibility]=\"dropdownVisible ? 'visible' : 'hidden'\">\n \n <!-- Header Section -->\n <div class=\"zen-dropdown-menu__header\" *ngIf=\"showHeader && headerUser\">\n <div class=\"zen-dropdown-menu__header-info\">\n <img \n class=\"zen-dropdown-menu__header-avatar\" \n [src]=\"headerUser.avatarSrc\"\n [alt]=\"headerUser.name\">\n <div class=\"zen-dropdown-menu__header-details\">\n <div class=\"zen-dropdown-menu__header-name text text-sm text-weight-medium\">{{ headerUser.name | translate }}</div>\n <div class=\"zen-dropdown-menu__header-email text text-sm text-weight-regular\">{{ headerUser.email }}</div>\n </div>\n </div>\n </div>\n\n <!-- Divider after header -->\n <div class=\"zen-dropdown-menu__divider\" *ngIf=\"showHeader && headerUser\"></div>\n\n <!-- Menu Items -->\n <div class=\"zen-dropdown-menu__content\">\n <ng-container *ngFor=\"let item of items\">\n <!-- Divider -->\n <div class=\"zen-dropdown-menu__divider\" *ngIf=\"item.divider\"></div>\n\n <!-- Menu Item -->\n <div \n class=\"zen-dropdown-menu__item\"\n *ngIf=\"!item.divider\"\n [class.zen-dropdown-menu__item--disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\">\n \n <!-- Checkbox variant -->\n <zen-checkbox\n *ngIf=\"showCheckbox\"\n class=\"zen-dropdown-menu__checkbox\"\n [checked]=\"item.checked || false\"\n [disabled]=\"item.disabled\"\n [size]=\"'sm'\"\n [label]=\"''\"\n (checkedChange)=\"onCheckboxChange(item, $event)\"\n (click)=\"$event.stopPropagation()\">\n </zen-checkbox>\n\n <!-- Icon -->\n <zen-icon\n *ngIf=\"showIcon && item.icon\"\n class=\"zen-dropdown-menu__item-icon\"\n [name]=\"item.icon\"\n [customColor]=\"'#344054'\">\n </zen-icon>\n\n <!-- Item Content -->\n <div class=\"zen-dropdown-menu__item-content\">\n <!-- Label -->\n <span class=\"zen-dropdown-menu__label text text-sm text-weight-regular\">\n {{ item.label | translate }}\n </span>\n\n <!-- Count number (shown at the end of the row) -->\n <span \n *ngIf=\"showCount && item.shortcut\"\n class=\"zen-dropdown-menu__count text text-xs text-weight-regular\">\n {{ item.shortcut }}\n </span>\n\n <!-- Shortcut -->\n <span \n *ngIf=\"showShortcut && item.shortcut && !showCount\"\n class=\"zen-dropdown-menu__shortcut text text-xs text-weight-regular\">\n {{ item.shortcut | translate }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n \n</div>", 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}}.zen-dropdown-menu{position:relative;display:inline-block}.zen-dropdown-menu__list-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;border-radius:8px;transition:background-color .2s ease}.zen-dropdown-menu__list-header:hover{background-color:#f9fafb}.zen-dropdown-menu__user-info{display:flex;align-items:center;gap:12px}.zen-dropdown-menu__user-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF}.zen-dropdown-menu__user-details{display:flex;flex-direction:column;gap:0}.zen-dropdown-menu__user-name{color:#344054;line-height:20px}.zen-dropdown-menu__user-email{color:#667085;line-height:20px}.zen-dropdown-menu__icon-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease}.zen-dropdown-menu__icon-button:hover{background-color:#f9fafb}.zen-dropdown-menu__icon-button:focus{outline:none;background-color:#f9fafb}.zen-dropdown-menu__trigger-icon{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;color:#344054;-webkit-user-select:none;user-select:none;line-height:1}.zen-dropdown-menu__button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;cursor:pointer;box-shadow:0 1px 2px #1018280d;transition:all .2s ease}.zen-dropdown-menu__button:hover{background-color:#f9fafb;border-color:#98a2b3}.zen-dropdown-menu__button:focus,.zen-dropdown-menu__button--focused{outline:none;border-color:#d0d5dd;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.zen-dropdown-menu__button-text{color:#344054;white-space:nowrap}.zen-dropdown-menu__button-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.zen-dropdown-menu__avatar{display:block;padding:0;border:none;background:transparent;cursor:pointer;border-radius:50%;transition:all .2s ease}.zen-dropdown-menu__avatar:focus,.zen-dropdown-menu__avatar--focused{outline:none;box-shadow:0 0 0 4px #e3eefb}.zen-dropdown-menu__avatar-img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF;transition:all .2s ease}.zen-dropdown-menu__dropdown{width:240px;background:#fff;border:1px solid #F2F4F7;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;overflow:hidden}.zen-dropdown-menu__header{padding:12px 16px;display:flex;align-items:center}.zen-dropdown-menu__header-info{display:flex;align-items:center;gap:12px;width:100%}.zen-dropdown-menu__header-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF;position:relative}.zen-dropdown-menu__header-avatar:after{content:\"\";position:absolute;bottom:0;right:0;width:10px;height:10px;background:#12b76a;border:1.5px solid #FFFFFF;border-radius:50%}.zen-dropdown-menu__header-details{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}.zen-dropdown-menu__header-name{color:#344054;line-height:20px}.zen-dropdown-menu__header-email{color:#667085;line-height:20px}.zen-dropdown-menu__divider{height:1px;background:#f2f4f7;width:100%}.zen-dropdown-menu__content{display:flex;flex-direction:column;background:#fff}.zen-dropdown-menu__item{display:flex;align-items:center;padding:10px 16px;cursor:pointer;transition:background-color .2s ease;gap:12px;min-height:40px}.zen-dropdown-menu__item:hover:not(.zen-dropdown-menu__item--disabled){background-color:#f9fafb}.zen-dropdown-menu__item--disabled{cursor:not-allowed;opacity:.5}.zen-dropdown-menu__checkbox{flex-shrink:0}.zen-dropdown-menu__item-icon{flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.zen-dropdown-menu__count{flex-shrink:0;color:#667085;min-width:16px;text-align:center}.zen-dropdown-menu__item-content{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0}.zen-dropdown-menu__label{color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.zen-dropdown-menu__shortcut{color:#667085;flex-shrink:0;margin-left:12px}.zen-dropdown-menu__item:has(.zen-dropdown-menu__checkbox) .zen-dropdown-menu__item-content{flex:1}.zen-dropdown-menu__item:has(.zen-dropdown-menu__checkbox) .zen-dropdown-menu__label{margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
8572
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenDropdownMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenDropdownMenuComponent, isStandalone: false, selector: "zen-dropdown-menu", inputs: { triggerType: "triggerType", buttonText: "buttonText", avatarSrc: "avatarSrc", items: "items", showCheckbox: "showCheckbox", showShortcut: "showShortcut", showIcon: "showIcon", showCount: "showCount", headerUser: "headerUser", showHeader: "showHeader", position: "position", offset: "offset", closeOnOutsideClick: "closeOnOutsideClick", scrollHandler: "scrollHandler" }, outputs: { itemClick: "itemClick", itemCheck: "itemCheck", openChange: "openChange", onClose: "onClose" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)", "window:wheel": "handleMouseScroll($event)", "window:keydown": "onWindowKeyDown($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"zen-dropdown-menu\" [class.zen-dropdown-menu--open]=\"isOpen\">\n\n <!-- TRIGGERS SECTION -->\n\n <!-- List Header Trigger -->\n @if (showListHeader) {\n <div\n class=\"zen-dropdown-menu__list-header\"\n (click)=\"toggleDropdown()\">\n <div class=\"zen-dropdown-menu__user-info\">\n <img\n class=\"zen-dropdown-menu__user-avatar\"\n [src]=\"headerUser?.avatarSrc\"\n [alt]=\"headerUser?.name || 'User'\">\n <div class=\"zen-dropdown-menu__user-details\">\n <div class=\"zen-dropdown-menu__user-name text text-sm text-weight-medium\">{{ (headerUser?.name || 'User') | translate }}</div>\n <div class=\"zen-dropdown-menu__user-email text text-sm text-weight-regular\">{{ headerUser?.email }}</div>\n </div>\n </div>\n </div>\n }\n\n <!-- Icon Button Trigger -->\n @if (showIconTrigger) {\n <button\n class=\"zen-dropdown-menu__icon-button\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <zen-icon name=\"more-vertical\" [customColor]=\"'#667085'\"></zen-icon>\n </button>\n }\n\n <!-- Button Trigger -->\n @if (showButton) {\n <button\n class=\"zen-dropdown-menu__button\"\n [class.zen-dropdown-menu__button--focused]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <span class=\"zen-dropdown-menu__button-text text text-sm text-weight-medium\">{{ buttonText | translate }}</span>\n <zen-icon\n [name]=\"isOpen ? 'chevron-up' : 'chevron-down'\"\n [customColor]=\"'#667085'\"\n class=\"zen-dropdown-menu__button-icon\">\n </zen-icon>\n </button>\n }\n\n <!-- Avatar Trigger -->\n @if (showAvatar) {\n <button\n class=\"zen-dropdown-menu__avatar\"\n [class.zen-dropdown-menu__avatar--focused]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <img\n class=\"zen-dropdown-menu__avatar-img\"\n [src]=\"avatarSrc\"\n alt=\"User Avatar\">\n </button>\n }\n\n <!-- DROPDOWN CONTENT SECTION -->\n @if (isOpen) {\n <div class=\"zen-dropdown-menu__dropdown\" #dropdown\n [style.position]=\"'fixed'\"\n [style.opacity]=\"dropdownVisible ? 1 : 0\"\n [style.visibility]=\"dropdownVisible ? 'visible' : 'hidden'\">\n <!-- Header Section -->\n @if (showHeader && headerUser) {\n <div class=\"zen-dropdown-menu__header\">\n <div class=\"zen-dropdown-menu__header-info\">\n <img\n class=\"zen-dropdown-menu__header-avatar\"\n [src]=\"headerUser.avatarSrc\"\n [alt]=\"headerUser.name\">\n <div class=\"zen-dropdown-menu__header-details\">\n <div class=\"zen-dropdown-menu__header-name text text-sm text-weight-medium\">{{ headerUser.name | translate }}</div>\n <div class=\"zen-dropdown-menu__header-email text text-sm text-weight-regular\">{{ headerUser.email }}</div>\n </div>\n </div>\n </div>\n }\n <!-- Divider after header -->\n @if (showHeader && headerUser) {\n <div class=\"zen-dropdown-menu__divider\"></div>\n }\n <!-- Menu Items -->\n <div class=\"zen-dropdown-menu__content\">\n @for (item of items; track item) {\n <!-- Divider -->\n @if (item.divider) {\n <div class=\"zen-dropdown-menu__divider\"></div>\n }\n <!-- Menu Item -->\n @if (!item.divider) {\n <div\n class=\"zen-dropdown-menu__item\"\n [class.zen-dropdown-menu__item--disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\">\n <!-- Checkbox variant -->\n @if (showCheckbox) {\n <zen-checkbox\n class=\"zen-dropdown-menu__checkbox\"\n [checked]=\"item.checked || false\"\n [disabled]=\"item.disabled\"\n [size]=\"'sm'\"\n [label]=\"''\"\n (checkedChange)=\"onCheckboxChange(item, $event)\"\n (click)=\"$event.stopPropagation()\">\n </zen-checkbox>\n }\n <!-- Icon -->\n @if (showIcon && item.icon) {\n <zen-icon\n class=\"zen-dropdown-menu__item-icon\"\n [name]=\"item.icon\"\n [customColor]=\"'#344054'\">\n </zen-icon>\n }\n <!-- Item Content -->\n <div class=\"zen-dropdown-menu__item-content\">\n <!-- Label -->\n <span class=\"zen-dropdown-menu__label text text-sm text-weight-regular\">\n {{ item.label | translate }}\n </span>\n <!-- Count number (shown at the end of the row) -->\n @if (showCount && item.shortcut) {\n <span\n class=\"zen-dropdown-menu__count text text-xs text-weight-regular\">\n {{ item.shortcut }}\n </span>\n }\n <!-- Shortcut -->\n @if (showShortcut && item.shortcut && !showCount) {\n <span\n class=\"zen-dropdown-menu__shortcut text text-xs text-weight-regular\">\n {{ item.shortcut | translate }}\n </span>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n }\n\n</div>", 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}}.zen-dropdown-menu{position:relative;display:inline-block}.zen-dropdown-menu__list-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;border-radius:8px;transition:background-color .2s ease}.zen-dropdown-menu__list-header:hover{background-color:#f9fafb}.zen-dropdown-menu__user-info{display:flex;align-items:center;gap:12px}.zen-dropdown-menu__user-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF}.zen-dropdown-menu__user-details{display:flex;flex-direction:column;gap:0}.zen-dropdown-menu__user-name{color:#344054;line-height:20px}.zen-dropdown-menu__user-email{color:#667085;line-height:20px}.zen-dropdown-menu__icon-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease}.zen-dropdown-menu__icon-button:hover{background-color:#f9fafb}.zen-dropdown-menu__icon-button:focus{outline:none;background-color:#f9fafb}.zen-dropdown-menu__trigger-icon{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;color:#344054;-webkit-user-select:none;user-select:none;line-height:1}.zen-dropdown-menu__button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;cursor:pointer;box-shadow:0 1px 2px #1018280d;transition:all .2s ease}.zen-dropdown-menu__button:hover{background-color:#f9fafb;border-color:#98a2b3}.zen-dropdown-menu__button:focus,.zen-dropdown-menu__button--focused{outline:none;border-color:#d0d5dd;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.zen-dropdown-menu__button-text{color:#344054;white-space:nowrap}.zen-dropdown-menu__button-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.zen-dropdown-menu__avatar{display:block;padding:0;border:none;background:transparent;cursor:pointer;border-radius:50%;transition:all .2s ease}.zen-dropdown-menu__avatar:focus,.zen-dropdown-menu__avatar--focused{outline:none;box-shadow:0 0 0 4px #e3eefb}.zen-dropdown-menu__avatar-img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF;transition:all .2s ease}.zen-dropdown-menu__dropdown{width:240px;background:#fff;border:1px solid #F2F4F7;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;overflow:hidden}.zen-dropdown-menu__header{padding:12px 16px;display:flex;align-items:center}.zen-dropdown-menu__header-info{display:flex;align-items:center;gap:12px;width:100%}.zen-dropdown-menu__header-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF;position:relative}.zen-dropdown-menu__header-avatar:after{content:\"\";position:absolute;bottom:0;right:0;width:10px;height:10px;background:#12b76a;border:1.5px solid #FFFFFF;border-radius:50%}.zen-dropdown-menu__header-details{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}.zen-dropdown-menu__header-name{color:#344054;line-height:20px}.zen-dropdown-menu__header-email{color:#667085;line-height:20px}.zen-dropdown-menu__divider{height:1px;background:#f2f4f7;width:100%}.zen-dropdown-menu__content{display:flex;flex-direction:column;background:#fff}.zen-dropdown-menu__item{display:flex;align-items:center;padding:10px 16px;cursor:pointer;transition:background-color .2s ease;gap:12px;min-height:40px}.zen-dropdown-menu__item:hover:not(.zen-dropdown-menu__item--disabled){background-color:#f9fafb}.zen-dropdown-menu__item--disabled{cursor:not-allowed;opacity:.5}.zen-dropdown-menu__checkbox{flex-shrink:0}.zen-dropdown-menu__item-icon{flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.zen-dropdown-menu__count{flex-shrink:0;color:#667085;min-width:16px;text-align:center}.zen-dropdown-menu__item-content{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0}.zen-dropdown-menu__label{color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.zen-dropdown-menu__shortcut{color:#667085;flex-shrink:0;margin-left:12px}.zen-dropdown-menu__item:has(.zen-dropdown-menu__checkbox) .zen-dropdown-menu__item-content{flex:1}.zen-dropdown-menu__item:has(.zen-dropdown-menu__checkbox) .zen-dropdown-menu__label{margin-left:0}\n"], dependencies: [{ kind: "component", type: ZenduCheckboxComponent, selector: "zen-checkbox", inputs: ["checked", "label", "labelColor", "disabled", "disableValueChange", "indeterminate", "imageUrl", "size", "supportingText"], outputs: ["checkedChange"] }, { 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 }); }
|
|
8571
8574
|
}
|
|
8572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8575
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenDropdownMenuComponent, decorators: [{
|
|
8573
8576
|
type: Component,
|
|
8574
|
-
args: [{ selector: 'zen-dropdown-menu', template: "<div class=\"zen-dropdown-menu\" [class.zen-dropdown-menu--open]=\"isOpen\">\n \n <!-- TRIGGERS SECTION -->\n \n <!-- List Header Trigger -->\n <div \n *ngIf=\"showListHeader\" \n class=\"zen-dropdown-menu__list-header\"\n (click)=\"toggleDropdown()\">\n <div class=\"zen-dropdown-menu__user-info\">\n <img \n class=\"zen-dropdown-menu__user-avatar\" \n [src]=\"headerUser?.avatarSrc\"\n [alt]=\"headerUser?.name || 'User'\">\n <div class=\"zen-dropdown-menu__user-details\">\n <div class=\"zen-dropdown-menu__user-name text text-sm text-weight-medium\">{{ (headerUser?.name || 'User') | translate }}</div>\n <div class=\"zen-dropdown-menu__user-email text text-sm text-weight-regular\">{{ headerUser?.email }}</div>\n </div>\n </div>\n </div>\n \n <!-- Icon Button Trigger -->\n <button \n *ngIf=\"showIconTrigger\"\n class=\"zen-dropdown-menu__icon-button\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <zen-icon name=\"more-vertical\" [customColor]=\"'#667085'\"></zen-icon>\n </button>\n \n <!-- Button Trigger -->\n <button \n *ngIf=\"showButton\"\n class=\"zen-dropdown-menu__button\"\n [class.zen-dropdown-menu__button--focused]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <span class=\"zen-dropdown-menu__button-text text text-sm text-weight-medium\">{{ buttonText | translate }}</span>\n <zen-icon \n [name]=\"isOpen ? 'chevron-up' : 'chevron-down'\" \n [customColor]=\"'#667085'\"\n class=\"zen-dropdown-menu__button-icon\">\n </zen-icon>\n </button>\n \n <!-- Avatar Trigger -->\n <button \n *ngIf=\"showAvatar\"\n class=\"zen-dropdown-menu__avatar\"\n [class.zen-dropdown-menu__avatar--focused]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <img \n class=\"zen-dropdown-menu__avatar-img\" \n [src]=\"avatarSrc\"\n alt=\"User Avatar\">\n </button>\n \n <!-- DROPDOWN CONTENT SECTION -->\n <div class=\"zen-dropdown-menu__dropdown\" *ngIf=\"isOpen\" #dropdown \n [style.position]=\"'fixed'\" \n [style.opacity]=\"dropdownVisible ? 1 : 0\"\n [style.visibility]=\"dropdownVisible ? 'visible' : 'hidden'\">\n \n <!-- Header Section -->\n <div class=\"zen-dropdown-menu__header\" *ngIf=\"showHeader && headerUser\">\n <div class=\"zen-dropdown-menu__header-info\">\n <img \n class=\"zen-dropdown-menu__header-avatar\" \n [src]=\"headerUser.avatarSrc\"\n [alt]=\"headerUser.name\">\n <div class=\"zen-dropdown-menu__header-details\">\n <div class=\"zen-dropdown-menu__header-name text text-sm text-weight-medium\">{{ headerUser.name | translate }}</div>\n <div class=\"zen-dropdown-menu__header-email text text-sm text-weight-regular\">{{ headerUser.email }}</div>\n </div>\n </div>\n </div>\n\n <!-- Divider after header -->\n <div class=\"zen-dropdown-menu__divider\" *ngIf=\"showHeader && headerUser\"></div>\n\n <!-- Menu Items -->\n <div class=\"zen-dropdown-menu__content\">\n <ng-container *ngFor=\"let item of items\">\n <!-- Divider -->\n <div class=\"zen-dropdown-menu__divider\" *ngIf=\"item.divider\"></div>\n\n <!-- Menu Item -->\n <div \n class=\"zen-dropdown-menu__item\"\n *ngIf=\"!item.divider\"\n [class.zen-dropdown-menu__item--disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\">\n \n <!-- Checkbox variant -->\n <zen-checkbox\n *ngIf=\"showCheckbox\"\n class=\"zen-dropdown-menu__checkbox\"\n [checked]=\"item.checked || false\"\n [disabled]=\"item.disabled\"\n [size]=\"'sm'\"\n [label]=\"''\"\n (checkedChange)=\"onCheckboxChange(item, $event)\"\n (click)=\"$event.stopPropagation()\">\n </zen-checkbox>\n\n <!-- Icon -->\n <zen-icon\n *ngIf=\"showIcon && item.icon\"\n class=\"zen-dropdown-menu__item-icon\"\n [name]=\"item.icon\"\n [customColor]=\"'#344054'\">\n </zen-icon>\n\n <!-- Item Content -->\n <div class=\"zen-dropdown-menu__item-content\">\n <!-- Label -->\n <span class=\"zen-dropdown-menu__label text text-sm text-weight-regular\">\n {{ item.label | translate }}\n </span>\n\n <!-- Count number (shown at the end of the row) -->\n <span \n *ngIf=\"showCount && item.shortcut\"\n class=\"zen-dropdown-menu__count text text-xs text-weight-regular\">\n {{ item.shortcut }}\n </span>\n\n <!-- Shortcut -->\n <span \n *ngIf=\"showShortcut && item.shortcut && !showCount\"\n class=\"zen-dropdown-menu__shortcut text text-xs text-weight-regular\">\n {{ item.shortcut | translate }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n \n</div>", 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}}.zen-dropdown-menu{position:relative;display:inline-block}.zen-dropdown-menu__list-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;border-radius:8px;transition:background-color .2s ease}.zen-dropdown-menu__list-header:hover{background-color:#f9fafb}.zen-dropdown-menu__user-info{display:flex;align-items:center;gap:12px}.zen-dropdown-menu__user-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF}.zen-dropdown-menu__user-details{display:flex;flex-direction:column;gap:0}.zen-dropdown-menu__user-name{color:#344054;line-height:20px}.zen-dropdown-menu__user-email{color:#667085;line-height:20px}.zen-dropdown-menu__icon-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease}.zen-dropdown-menu__icon-button:hover{background-color:#f9fafb}.zen-dropdown-menu__icon-button:focus{outline:none;background-color:#f9fafb}.zen-dropdown-menu__trigger-icon{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;color:#344054;-webkit-user-select:none;user-select:none;line-height:1}.zen-dropdown-menu__button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;cursor:pointer;box-shadow:0 1px 2px #1018280d;transition:all .2s ease}.zen-dropdown-menu__button:hover{background-color:#f9fafb;border-color:#98a2b3}.zen-dropdown-menu__button:focus,.zen-dropdown-menu__button--focused{outline:none;border-color:#d0d5dd;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.zen-dropdown-menu__button-text{color:#344054;white-space:nowrap}.zen-dropdown-menu__button-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.zen-dropdown-menu__avatar{display:block;padding:0;border:none;background:transparent;cursor:pointer;border-radius:50%;transition:all .2s ease}.zen-dropdown-menu__avatar:focus,.zen-dropdown-menu__avatar--focused{outline:none;box-shadow:0 0 0 4px #e3eefb}.zen-dropdown-menu__avatar-img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF;transition:all .2s ease}.zen-dropdown-menu__dropdown{width:240px;background:#fff;border:1px solid #F2F4F7;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;overflow:hidden}.zen-dropdown-menu__header{padding:12px 16px;display:flex;align-items:center}.zen-dropdown-menu__header-info{display:flex;align-items:center;gap:12px;width:100%}.zen-dropdown-menu__header-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF;position:relative}.zen-dropdown-menu__header-avatar:after{content:\"\";position:absolute;bottom:0;right:0;width:10px;height:10px;background:#12b76a;border:1.5px solid #FFFFFF;border-radius:50%}.zen-dropdown-menu__header-details{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}.zen-dropdown-menu__header-name{color:#344054;line-height:20px}.zen-dropdown-menu__header-email{color:#667085;line-height:20px}.zen-dropdown-menu__divider{height:1px;background:#f2f4f7;width:100%}.zen-dropdown-menu__content{display:flex;flex-direction:column;background:#fff}.zen-dropdown-menu__item{display:flex;align-items:center;padding:10px 16px;cursor:pointer;transition:background-color .2s ease;gap:12px;min-height:40px}.zen-dropdown-menu__item:hover:not(.zen-dropdown-menu__item--disabled){background-color:#f9fafb}.zen-dropdown-menu__item--disabled{cursor:not-allowed;opacity:.5}.zen-dropdown-menu__checkbox{flex-shrink:0}.zen-dropdown-menu__item-icon{flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.zen-dropdown-menu__count{flex-shrink:0;color:#667085;min-width:16px;text-align:center}.zen-dropdown-menu__item-content{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0}.zen-dropdown-menu__label{color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.zen-dropdown-menu__shortcut{color:#667085;flex-shrink:0;margin-left:12px}.zen-dropdown-menu__item:has(.zen-dropdown-menu__checkbox) .zen-dropdown-menu__item-content{flex:1}.zen-dropdown-menu__item:has(.zen-dropdown-menu__checkbox) .zen-dropdown-menu__label{margin-left:0}\n"] }]
|
|
8577
|
+
args: [{ selector: 'zen-dropdown-menu', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"zen-dropdown-menu\" [class.zen-dropdown-menu--open]=\"isOpen\">\n\n <!-- TRIGGERS SECTION -->\n\n <!-- List Header Trigger -->\n @if (showListHeader) {\n <div\n class=\"zen-dropdown-menu__list-header\"\n (click)=\"toggleDropdown()\">\n <div class=\"zen-dropdown-menu__user-info\">\n <img\n class=\"zen-dropdown-menu__user-avatar\"\n [src]=\"headerUser?.avatarSrc\"\n [alt]=\"headerUser?.name || 'User'\">\n <div class=\"zen-dropdown-menu__user-details\">\n <div class=\"zen-dropdown-menu__user-name text text-sm text-weight-medium\">{{ (headerUser?.name || 'User') | translate }}</div>\n <div class=\"zen-dropdown-menu__user-email text text-sm text-weight-regular\">{{ headerUser?.email }}</div>\n </div>\n </div>\n </div>\n }\n\n <!-- Icon Button Trigger -->\n @if (showIconTrigger) {\n <button\n class=\"zen-dropdown-menu__icon-button\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <zen-icon name=\"more-vertical\" [customColor]=\"'#667085'\"></zen-icon>\n </button>\n }\n\n <!-- Button Trigger -->\n @if (showButton) {\n <button\n class=\"zen-dropdown-menu__button\"\n [class.zen-dropdown-menu__button--focused]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <span class=\"zen-dropdown-menu__button-text text text-sm text-weight-medium\">{{ buttonText | translate }}</span>\n <zen-icon\n [name]=\"isOpen ? 'chevron-up' : 'chevron-down'\"\n [customColor]=\"'#667085'\"\n class=\"zen-dropdown-menu__button-icon\">\n </zen-icon>\n </button>\n }\n\n <!-- Avatar Trigger -->\n @if (showAvatar) {\n <button\n class=\"zen-dropdown-menu__avatar\"\n [class.zen-dropdown-menu__avatar--focused]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n type=\"button\">\n <img\n class=\"zen-dropdown-menu__avatar-img\"\n [src]=\"avatarSrc\"\n alt=\"User Avatar\">\n </button>\n }\n\n <!-- DROPDOWN CONTENT SECTION -->\n @if (isOpen) {\n <div class=\"zen-dropdown-menu__dropdown\" #dropdown\n [style.position]=\"'fixed'\"\n [style.opacity]=\"dropdownVisible ? 1 : 0\"\n [style.visibility]=\"dropdownVisible ? 'visible' : 'hidden'\">\n <!-- Header Section -->\n @if (showHeader && headerUser) {\n <div class=\"zen-dropdown-menu__header\">\n <div class=\"zen-dropdown-menu__header-info\">\n <img\n class=\"zen-dropdown-menu__header-avatar\"\n [src]=\"headerUser.avatarSrc\"\n [alt]=\"headerUser.name\">\n <div class=\"zen-dropdown-menu__header-details\">\n <div class=\"zen-dropdown-menu__header-name text text-sm text-weight-medium\">{{ headerUser.name | translate }}</div>\n <div class=\"zen-dropdown-menu__header-email text text-sm text-weight-regular\">{{ headerUser.email }}</div>\n </div>\n </div>\n </div>\n }\n <!-- Divider after header -->\n @if (showHeader && headerUser) {\n <div class=\"zen-dropdown-menu__divider\"></div>\n }\n <!-- Menu Items -->\n <div class=\"zen-dropdown-menu__content\">\n @for (item of items; track item) {\n <!-- Divider -->\n @if (item.divider) {\n <div class=\"zen-dropdown-menu__divider\"></div>\n }\n <!-- Menu Item -->\n @if (!item.divider) {\n <div\n class=\"zen-dropdown-menu__item\"\n [class.zen-dropdown-menu__item--disabled]=\"item.disabled\"\n (click)=\"onItemClick(item, $event)\">\n <!-- Checkbox variant -->\n @if (showCheckbox) {\n <zen-checkbox\n class=\"zen-dropdown-menu__checkbox\"\n [checked]=\"item.checked || false\"\n [disabled]=\"item.disabled\"\n [size]=\"'sm'\"\n [label]=\"''\"\n (checkedChange)=\"onCheckboxChange(item, $event)\"\n (click)=\"$event.stopPropagation()\">\n </zen-checkbox>\n }\n <!-- Icon -->\n @if (showIcon && item.icon) {\n <zen-icon\n class=\"zen-dropdown-menu__item-icon\"\n [name]=\"item.icon\"\n [customColor]=\"'#344054'\">\n </zen-icon>\n }\n <!-- Item Content -->\n <div class=\"zen-dropdown-menu__item-content\">\n <!-- Label -->\n <span class=\"zen-dropdown-menu__label text text-sm text-weight-regular\">\n {{ item.label | translate }}\n </span>\n <!-- Count number (shown at the end of the row) -->\n @if (showCount && item.shortcut) {\n <span\n class=\"zen-dropdown-menu__count text text-xs text-weight-regular\">\n {{ item.shortcut }}\n </span>\n }\n <!-- Shortcut -->\n @if (showShortcut && item.shortcut && !showCount) {\n <span\n class=\"zen-dropdown-menu__shortcut text text-xs text-weight-regular\">\n {{ item.shortcut | translate }}\n </span>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n }\n\n</div>", 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}}.zen-dropdown-menu{position:relative;display:inline-block}.zen-dropdown-menu__list-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;border-radius:8px;transition:background-color .2s ease}.zen-dropdown-menu__list-header:hover{background-color:#f9fafb}.zen-dropdown-menu__user-info{display:flex;align-items:center;gap:12px}.zen-dropdown-menu__user-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF}.zen-dropdown-menu__user-details{display:flex;flex-direction:column;gap:0}.zen-dropdown-menu__user-name{color:#344054;line-height:20px}.zen-dropdown-menu__user-email{color:#667085;line-height:20px}.zen-dropdown-menu__icon-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease}.zen-dropdown-menu__icon-button:hover{background-color:#f9fafb}.zen-dropdown-menu__icon-button:focus{outline:none;background-color:#f9fafb}.zen-dropdown-menu__trigger-icon{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;color:#344054;-webkit-user-select:none;user-select:none;line-height:1}.zen-dropdown-menu__button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #D0D5DD;border-radius:8px;cursor:pointer;box-shadow:0 1px 2px #1018280d;transition:all .2s ease}.zen-dropdown-menu__button:hover{background-color:#f9fafb;border-color:#98a2b3}.zen-dropdown-menu__button:focus,.zen-dropdown-menu__button--focused{outline:none;border-color:#d0d5dd;box-shadow:0 1px 2px #1018280d,0 0 0 4px #f2f4f7}.zen-dropdown-menu__button-text{color:#344054;white-space:nowrap}.zen-dropdown-menu__button-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.zen-dropdown-menu__avatar{display:block;padding:0;border:none;background:transparent;cursor:pointer;border-radius:50%;transition:all .2s ease}.zen-dropdown-menu__avatar:focus,.zen-dropdown-menu__avatar--focused{outline:none;box-shadow:0 0 0 4px #e3eefb}.zen-dropdown-menu__avatar-img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF;transition:all .2s ease}.zen-dropdown-menu__dropdown{width:240px;background:#fff;border:1px solid #F2F4F7;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;display:flex;flex-direction:column;overflow:hidden}.zen-dropdown-menu__header{padding:12px 16px;display:flex;align-items:center}.zen-dropdown-menu__header-info{display:flex;align-items:center;gap:12px;width:100%}.zen-dropdown-menu__header-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1.5px solid #FFFFFF;position:relative}.zen-dropdown-menu__header-avatar:after{content:\"\";position:absolute;bottom:0;right:0;width:10px;height:10px;background:#12b76a;border:1.5px solid #FFFFFF;border-radius:50%}.zen-dropdown-menu__header-details{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}.zen-dropdown-menu__header-name{color:#344054;line-height:20px}.zen-dropdown-menu__header-email{color:#667085;line-height:20px}.zen-dropdown-menu__divider{height:1px;background:#f2f4f7;width:100%}.zen-dropdown-menu__content{display:flex;flex-direction:column;background:#fff}.zen-dropdown-menu__item{display:flex;align-items:center;padding:10px 16px;cursor:pointer;transition:background-color .2s ease;gap:12px;min-height:40px}.zen-dropdown-menu__item:hover:not(.zen-dropdown-menu__item--disabled){background-color:#f9fafb}.zen-dropdown-menu__item--disabled{cursor:not-allowed;opacity:.5}.zen-dropdown-menu__checkbox{flex-shrink:0}.zen-dropdown-menu__item-icon{flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.zen-dropdown-menu__count{flex-shrink:0;color:#667085;min-width:16px;text-align:center}.zen-dropdown-menu__item-content{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0}.zen-dropdown-menu__label{color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.zen-dropdown-menu__shortcut{color:#667085;flex-shrink:0;margin-left:12px}.zen-dropdown-menu__item:has(.zen-dropdown-menu__checkbox) .zen-dropdown-menu__item-content{flex:1}.zen-dropdown-menu__item:has(.zen-dropdown-menu__checkbox) .zen-dropdown-menu__label{margin-left:0}\n"] }]
|
|
8575
8578
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { triggerType: [{
|
|
8576
8579
|
type: Input
|
|
8577
8580
|
}], buttonText: [{
|
|
@@ -8646,12 +8649,12 @@ class ZenTooltipPopupComponent {
|
|
|
8646
8649
|
get hasSupportingText() {
|
|
8647
8650
|
return !!this.supportingText;
|
|
8648
8651
|
}
|
|
8649
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8650
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8652
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8653
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenTooltipPopupComponent, isStandalone: false, selector: "zen-tooltip-popup", inputs: { text: "text", supportingText: "supportingText", theme: "theme", position: "position" }, ngImport: i0, template: "<div class=\"zen-tooltip\"\n [class.zen-tooltip--dark]=\"theme === 'dark'\"\n [class.zen-tooltip--light]=\"theme === 'light'\"\n [class.zen-tooltip--has-supporting]=\"hasSupportingText\"\n [attr.data-arrow]=\"arrowPosition\">\n\n <!-- Arrow: top (for bottom tooltip) \u2014 points up toward element -->\n @if (arrowPosition === 'top-center') {\n <svg\n class=\"zen-tooltip__arrow zen-tooltip__arrow--top\"\n width=\"16\" height=\"6\" viewBox=\"0 0 16 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 6L6.59 0.91C7.37 0.13 8.63 0.13 9.41 0.91L16 6H0Z\"\n [attr.fill]=\"theme === 'dark' ? '#101828' : '#FFFFFF'\" />\n </svg>\n }\n\n <!-- Arrow: left (for right tooltip) \u2014 points left toward element -->\n @if (arrowPosition === 'left') {\n <svg\n class=\"zen-tooltip__arrow zen-tooltip__arrow--left\"\n width=\"6\" height=\"16\" viewBox=\"0 0 6 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 0L0.91 6.59C0.13 7.37 0.13 8.63 0.91 9.41L6 16V0Z\"\n [attr.fill]=\"theme === 'dark' ? '#101828' : '#FFFFFF'\" />\n </svg>\n }\n\n <!-- Content -->\n <div class=\"zen-tooltip__content\">\n <p class=\"zen-tooltip__title\">{{ text }}</p>\n @if (hasSupportingText) {\n <p class=\"zen-tooltip__supporting\">{{ supportingText }}</p>\n }\n </div>\n\n <!-- Arrow: bottom (for top tooltip) \u2014 points down toward element -->\n @if (arrowPosition === 'bottom-center' || arrowPosition === 'bottom-left' || arrowPosition === 'bottom-right') {\n <svg\n class=\"zen-tooltip__arrow zen-tooltip__arrow--bottom\"\n [class.zen-tooltip__arrow--bottom-left]=\"arrowPosition === 'bottom-left'\"\n [class.zen-tooltip__arrow--bottom-right]=\"arrowPosition === 'bottom-right'\"\n width=\"16\" height=\"6\" viewBox=\"0 0 16 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16 0L9.41 5.09C8.63 5.87 7.37 5.87 6.59 5.09L0 0H16Z\"\n [attr.fill]=\"theme === 'dark' ? '#101828' : '#FFFFFF'\" />\n </svg>\n }\n\n <!-- Arrow: right (for left tooltip) \u2014 points right toward element -->\n @if (arrowPosition === 'right') {\n <svg\n class=\"zen-tooltip__arrow zen-tooltip__arrow--right\"\n width=\"6\" height=\"16\" viewBox=\"0 0 6 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 16L5.09 9.41C5.87 8.63 5.87 7.37 5.09 6.59L0 0V16Z\"\n [attr.fill]=\"theme === 'dark' ? '#101828' : '#FFFFFF'\" />\n </svg>\n }\n</div>\n", styles: [".zen-tooltip-overlay{pointer-events:none}.zen-tooltip{position:relative;display:inline-flex;pointer-events:none;filter:drop-shadow(0px 4px 6px rgba(16,24,40,.03)) drop-shadow(0px 12px 16px rgba(16,24,40,.08))}.zen-tooltip__content{border-radius:8px;max-width:320px}.zen-tooltip--dark .zen-tooltip__content{background-color:#101828}.zen-tooltip--light .zen-tooltip__content{background-color:#fff}.zen-tooltip:not(.zen-tooltip--has-supporting) .zen-tooltip__content{padding:8px 12px}.zen-tooltip--has-supporting .zen-tooltip__content{padding:12px}.zen-tooltip__title{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px}.zen-tooltip--dark .zen-tooltip__title{color:#fff}.zen-tooltip--light .zen-tooltip__title{color:#344054}.zen-tooltip:not(.zen-tooltip--has-supporting) .zen-tooltip__title{text-align:center;white-space:nowrap}.zen-tooltip__supporting{margin:4px 0 0;font-family:Inter,sans-serif;font-weight:400;font-size:12px;line-height:18px}.zen-tooltip--dark .zen-tooltip__supporting{color:#fff}.zen-tooltip--light .zen-tooltip__supporting{color:#667085}.zen-tooltip__arrow{display:block;flex-shrink:0}[data-arrow=bottom-center],[data-arrow=bottom-left],[data-arrow=bottom-right]{flex-direction:column;align-items:center}[data-arrow=bottom-center] .zen-tooltip__arrow--bottom,[data-arrow=bottom-left] .zen-tooltip__arrow--bottom,[data-arrow=bottom-right] .zen-tooltip__arrow--bottom{margin-top:-1px}[data-arrow=bottom-left]{align-items:flex-start}[data-arrow=bottom-left] .zen-tooltip__arrow--bottom-left{margin-left:12px}[data-arrow=bottom-right]{align-items:flex-end}[data-arrow=bottom-right] .zen-tooltip__arrow--bottom-right{margin-right:12px}[data-arrow=top-center]{flex-direction:column;align-items:center}[data-arrow=top-center] .zen-tooltip__arrow--top{margin-bottom:-1px}[data-arrow=left]{flex-direction:row;align-items:center}[data-arrow=left] .zen-tooltip__arrow--left{margin-right:-1px}[data-arrow=right]{flex-direction:row;align-items:center}[data-arrow=right] .zen-tooltip__arrow--right{margin-left:-1px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8651
8654
|
}
|
|
8652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8655
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipPopupComponent, decorators: [{
|
|
8653
8656
|
type: Component,
|
|
8654
|
-
args: [{ selector: 'zen-tooltip-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"zen-tooltip\"\n
|
|
8657
|
+
args: [{ selector: 'zen-tooltip-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"zen-tooltip\"\n [class.zen-tooltip--dark]=\"theme === 'dark'\"\n [class.zen-tooltip--light]=\"theme === 'light'\"\n [class.zen-tooltip--has-supporting]=\"hasSupportingText\"\n [attr.data-arrow]=\"arrowPosition\">\n\n <!-- Arrow: top (for bottom tooltip) \u2014 points up toward element -->\n @if (arrowPosition === 'top-center') {\n <svg\n class=\"zen-tooltip__arrow zen-tooltip__arrow--top\"\n width=\"16\" height=\"6\" viewBox=\"0 0 16 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 6L6.59 0.91C7.37 0.13 8.63 0.13 9.41 0.91L16 6H0Z\"\n [attr.fill]=\"theme === 'dark' ? '#101828' : '#FFFFFF'\" />\n </svg>\n }\n\n <!-- Arrow: left (for right tooltip) \u2014 points left toward element -->\n @if (arrowPosition === 'left') {\n <svg\n class=\"zen-tooltip__arrow zen-tooltip__arrow--left\"\n width=\"6\" height=\"16\" viewBox=\"0 0 6 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 0L0.91 6.59C0.13 7.37 0.13 8.63 0.91 9.41L6 16V0Z\"\n [attr.fill]=\"theme === 'dark' ? '#101828' : '#FFFFFF'\" />\n </svg>\n }\n\n <!-- Content -->\n <div class=\"zen-tooltip__content\">\n <p class=\"zen-tooltip__title\">{{ text }}</p>\n @if (hasSupportingText) {\n <p class=\"zen-tooltip__supporting\">{{ supportingText }}</p>\n }\n </div>\n\n <!-- Arrow: bottom (for top tooltip) \u2014 points down toward element -->\n @if (arrowPosition === 'bottom-center' || arrowPosition === 'bottom-left' || arrowPosition === 'bottom-right') {\n <svg\n class=\"zen-tooltip__arrow zen-tooltip__arrow--bottom\"\n [class.zen-tooltip__arrow--bottom-left]=\"arrowPosition === 'bottom-left'\"\n [class.zen-tooltip__arrow--bottom-right]=\"arrowPosition === 'bottom-right'\"\n width=\"16\" height=\"6\" viewBox=\"0 0 16 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M16 0L9.41 5.09C8.63 5.87 7.37 5.87 6.59 5.09L0 0H16Z\"\n [attr.fill]=\"theme === 'dark' ? '#101828' : '#FFFFFF'\" />\n </svg>\n }\n\n <!-- Arrow: right (for left tooltip) \u2014 points right toward element -->\n @if (arrowPosition === 'right') {\n <svg\n class=\"zen-tooltip__arrow zen-tooltip__arrow--right\"\n width=\"6\" height=\"16\" viewBox=\"0 0 6 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 16L5.09 9.41C5.87 8.63 5.87 7.37 5.09 6.59L0 0V16Z\"\n [attr.fill]=\"theme === 'dark' ? '#101828' : '#FFFFFF'\" />\n </svg>\n }\n</div>\n", styles: [".zen-tooltip-overlay{pointer-events:none}.zen-tooltip{position:relative;display:inline-flex;pointer-events:none;filter:drop-shadow(0px 4px 6px rgba(16,24,40,.03)) drop-shadow(0px 12px 16px rgba(16,24,40,.08))}.zen-tooltip__content{border-radius:8px;max-width:320px}.zen-tooltip--dark .zen-tooltip__content{background-color:#101828}.zen-tooltip--light .zen-tooltip__content{background-color:#fff}.zen-tooltip:not(.zen-tooltip--has-supporting) .zen-tooltip__content{padding:8px 12px}.zen-tooltip--has-supporting .zen-tooltip__content{padding:12px}.zen-tooltip__title{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:18px}.zen-tooltip--dark .zen-tooltip__title{color:#fff}.zen-tooltip--light .zen-tooltip__title{color:#344054}.zen-tooltip:not(.zen-tooltip--has-supporting) .zen-tooltip__title{text-align:center;white-space:nowrap}.zen-tooltip__supporting{margin:4px 0 0;font-family:Inter,sans-serif;font-weight:400;font-size:12px;line-height:18px}.zen-tooltip--dark .zen-tooltip__supporting{color:#fff}.zen-tooltip--light .zen-tooltip__supporting{color:#667085}.zen-tooltip__arrow{display:block;flex-shrink:0}[data-arrow=bottom-center],[data-arrow=bottom-left],[data-arrow=bottom-right]{flex-direction:column;align-items:center}[data-arrow=bottom-center] .zen-tooltip__arrow--bottom,[data-arrow=bottom-left] .zen-tooltip__arrow--bottom,[data-arrow=bottom-right] .zen-tooltip__arrow--bottom{margin-top:-1px}[data-arrow=bottom-left]{align-items:flex-start}[data-arrow=bottom-left] .zen-tooltip__arrow--bottom-left{margin-left:12px}[data-arrow=bottom-right]{align-items:flex-end}[data-arrow=bottom-right] .zen-tooltip__arrow--bottom-right{margin-right:12px}[data-arrow=top-center]{flex-direction:column;align-items:center}[data-arrow=top-center] .zen-tooltip__arrow--top{margin-bottom:-1px}[data-arrow=left]{flex-direction:row;align-items:center}[data-arrow=left] .zen-tooltip__arrow--left{margin-right:-1px}[data-arrow=right]{flex-direction:row;align-items:center}[data-arrow=right] .zen-tooltip__arrow--right{margin-left:-1px}\n"] }]
|
|
8655
8658
|
}], propDecorators: { text: [{
|
|
8656
8659
|
type: Input
|
|
8657
8660
|
}], supportingText: [{
|
|
@@ -8766,13 +8769,14 @@ class ZenTooltipDirective {
|
|
|
8766
8769
|
];
|
|
8767
8770
|
}
|
|
8768
8771
|
}
|
|
8769
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8770
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
8772
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, deps: [{ token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8773
|
+
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 }); }
|
|
8771
8774
|
}
|
|
8772
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8775
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenTooltipDirective, decorators: [{
|
|
8773
8776
|
type: Directive,
|
|
8774
8777
|
args: [{
|
|
8775
|
-
selector: '[zenTooltip]'
|
|
8778
|
+
selector: '[zenTooltip]',
|
|
8779
|
+
standalone: false
|
|
8776
8780
|
}]
|
|
8777
8781
|
}], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { text: [{
|
|
8778
8782
|
type: Input,
|
|
@@ -8817,12 +8821,12 @@ class ZenEldStatusComponent {
|
|
|
8817
8821
|
get abbreviation() {
|
|
8818
8822
|
return STATUS_ABBREVIATIONS[this.status] || 'OFF';
|
|
8819
8823
|
}
|
|
8820
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8821
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
8824
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenEldStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8825
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenEldStatusComponent, isStandalone: false, selector: "zen-eld-status", inputs: { status: "status" }, ngImport: i0, template: "<span [class]=\"hostClasses\">{{ abbreviation }}</span>\n", styles: [".zen-eld-status{display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border-radius:6px;font-family:Inter,sans-serif;font-weight:500;font-size:10px;line-height:18px;color:#fff;white-space:nowrap}.zen-eld-status--on-duty{background-color:#12497a}.zen-eld-status--off-duty{background-color:#667085}.zen-eld-status--driving{background-color:#039855}.zen-eld-status--sleeper{background-color:#dc6803}.zen-eld-status--personal-conveyance,.zen-eld-status--yard-move{background-color:#0e9384}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8822
8826
|
}
|
|
8823
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8827
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenEldStatusComponent, decorators: [{
|
|
8824
8828
|
type: Component,
|
|
8825
|
-
args: [{ selector: 'zen-eld-status', template: "<span [class]=\"hostClasses\">{{ abbreviation }}</span>\n", styles: [".zen-eld-status{display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border-radius:6px;font-family:Inter,sans-serif;font-weight:500;font-size:10px;line-height:18px;color:#fff;white-space:nowrap}.zen-eld-status--on-duty{background-color:#12497a}.zen-eld-status--off-duty{background-color:#667085}.zen-eld-status--driving{background-color:#039855}.zen-eld-status--sleeper{background-color:#dc6803}.zen-eld-status--personal-conveyance,.zen-eld-status--yard-move{background-color:#0e9384}\n"] }]
|
|
8829
|
+
args: [{ selector: 'zen-eld-status', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<span [class]=\"hostClasses\">{{ abbreviation }}</span>\n", styles: [".zen-eld-status{display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border-radius:6px;font-family:Inter,sans-serif;font-weight:500;font-size:10px;line-height:18px;color:#fff;white-space:nowrap}.zen-eld-status--on-duty{background-color:#12497a}.zen-eld-status--off-duty{background-color:#667085}.zen-eld-status--driving{background-color:#039855}.zen-eld-status--sleeper{background-color:#dc6803}.zen-eld-status--personal-conveyance,.zen-eld-status--yard-move{background-color:#0e9384}\n"] }]
|
|
8826
8830
|
}], propDecorators: { status: [{
|
|
8827
8831
|
type: Input
|
|
8828
8832
|
}] } });
|
|
@@ -8849,12 +8853,12 @@ class ZenNavSearchComponent {
|
|
|
8849
8853
|
onSearch() {
|
|
8850
8854
|
this.search.emit(this.value);
|
|
8851
8855
|
}
|
|
8852
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8853
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
8856
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenNavSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ZenNavSearchComponent, isStandalone: false, selector: "zen-nav-search", inputs: { placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange", search: "search" }, ngImport: i0, template: "<div [class]=\"hostClasses\"\n (mouseenter)=\"hovered = true\"\n (mouseleave)=\"hovered = false\">\n <zen-icon class=\"zen-nav-search__icon\" name=\"search\" [customColor]=\"'#D0D5DD'\"></zen-icon>\n <input class=\"zen-nav-search__input\"\n type=\"text\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (keyup.enter)=\"onSearch()\" />\n</div>\n", styles: [".zen-nav-search{display:flex;align-items:center;gap:8px;height:32px;padding:6px 12px;border-radius:8px;border:1px solid #475467;background:#ffffff0d;box-shadow:0 1px 2px #1018280d;box-sizing:border-box;transition:background-color .2s}.zen-nav-search--hover{background:#ffffff26}.zen-nav-search__icon{display:inline-block;flex-shrink:0;width:20px;height:20px}.zen-nav-search__input{background:transparent;border:none;outline:none;color:#d0d5dd;font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;width:100%;padding:0}.zen-nav-search__input::placeholder{color:#d0d5dd}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8854
8858
|
}
|
|
8855
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenNavSearchComponent, decorators: [{
|
|
8856
8860
|
type: Component,
|
|
8857
|
-
args: [{ selector: 'zen-nav-search', template: "<div [class]=\"hostClasses\"\n (mouseenter)=\"hovered = true\"\n (mouseleave)=\"hovered = false\">\n <zen-icon class=\"zen-nav-search__icon\" name=\"search\" [customColor]=\"'#D0D5DD'\"></zen-icon>\n <input class=\"zen-nav-search__input\"\n type=\"text\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (keyup.enter)=\"onSearch()\" />\n</div>\n", styles: [".zen-nav-search{display:flex;align-items:center;gap:8px;height:32px;padding:6px 12px;border-radius:8px;border:1px solid #475467;background:#ffffff0d;box-shadow:0 1px 2px #1018280d;box-sizing:border-box;transition:background-color .2s}.zen-nav-search--hover{background:#ffffff26}.zen-nav-search__icon{display:inline-block;flex-shrink:0;width:20px;height:20px}.zen-nav-search__input{background:transparent;border:none;outline:none;color:#d0d5dd;font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;width:100%;padding:0}.zen-nav-search__input::placeholder{color:#d0d5dd}\n"] }]
|
|
8861
|
+
args: [{ selector: 'zen-nav-search', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"hostClasses\"\n (mouseenter)=\"hovered = true\"\n (mouseleave)=\"hovered = false\">\n <zen-icon class=\"zen-nav-search__icon\" name=\"search\" [customColor]=\"'#D0D5DD'\"></zen-icon>\n <input class=\"zen-nav-search__input\"\n type=\"text\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (keyup.enter)=\"onSearch()\" />\n</div>\n", styles: [".zen-nav-search{display:flex;align-items:center;gap:8px;height:32px;padding:6px 12px;border-radius:8px;border:1px solid #475467;background:#ffffff0d;box-shadow:0 1px 2px #1018280d;box-sizing:border-box;transition:background-color .2s}.zen-nav-search--hover{background:#ffffff26}.zen-nav-search__icon{display:inline-block;flex-shrink:0;width:20px;height:20px}.zen-nav-search__input{background:transparent;border:none;outline:none;color:#d0d5dd;font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;width:100%;padding:0}.zen-nav-search__input::placeholder{color:#d0d5dd}\n"] }]
|
|
8858
8862
|
}], propDecorators: { placeholder: [{
|
|
8859
8863
|
type: Input
|
|
8860
8864
|
}], value: [{
|
|
@@ -8883,12 +8887,12 @@ class ZenSubmoduleItemComponent {
|
|
|
8883
8887
|
onActivate() {
|
|
8884
8888
|
this.activate.emit();
|
|
8885
8889
|
}
|
|
8886
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8887
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8890
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSubmoduleItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8891
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenSubmoduleItemComponent, isStandalone: false, selector: "zen-submodule-item", inputs: { label: "label", icon: "icon", current: "current" }, outputs: { activate: "activate" }, ngImport: i0, template: "<button [class]=\"hostClasses\" (click)=\"onActivate()\" type=\"button\">\n @if (icon) {\n <zen-icon class=\"zen-submodule-item__icon\"\n [name]=\"icon\" [customColor]=\"iconColor\"></zen-icon>\n }\n <span class=\"zen-submodule-item__label\">{{ label }}</span>\n</button>\n", styles: [".zen-submodule-item{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border-radius:8px;border:none;background:transparent;cursor:pointer;font-family:Inter,sans-serif;transition:background-color .2s}.zen-submodule-item:hover:not(.zen-submodule-item--current){background:#ffffff1a}.zen-submodule-item--current{background-color:#136ab6;border:1px solid #136AB6;box-shadow:0 1px 2px #1018280d}.zen-submodule-item__icon{display:inline-block;flex-shrink:0;width:20px;height:20px}.zen-submodule-item__label{font-weight:500;font-size:14px;line-height:20px;white-space:nowrap;color:#667085}.zen-submodule-item--current .zen-submodule-item__label{color:#fff}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8888
8892
|
}
|
|
8889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSubmoduleItemComponent, decorators: [{
|
|
8890
8894
|
type: Component,
|
|
8891
|
-
args: [{ selector: 'zen-submodule-item', template: "<button [class]=\"hostClasses\" (click)=\"onActivate()\" type=\"button\">\n <zen-icon
|
|
8895
|
+
args: [{ selector: 'zen-submodule-item', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<button [class]=\"hostClasses\" (click)=\"onActivate()\" type=\"button\">\n @if (icon) {\n <zen-icon class=\"zen-submodule-item__icon\"\n [name]=\"icon\" [customColor]=\"iconColor\"></zen-icon>\n }\n <span class=\"zen-submodule-item__label\">{{ label }}</span>\n</button>\n", styles: [".zen-submodule-item{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border-radius:8px;border:none;background:transparent;cursor:pointer;font-family:Inter,sans-serif;transition:background-color .2s}.zen-submodule-item:hover:not(.zen-submodule-item--current){background:#ffffff1a}.zen-submodule-item--current{background-color:#136ab6;border:1px solid #136AB6;box-shadow:0 1px 2px #1018280d}.zen-submodule-item__icon{display:inline-block;flex-shrink:0;width:20px;height:20px}.zen-submodule-item__label{font-weight:500;font-size:14px;line-height:20px;white-space:nowrap;color:#667085}.zen-submodule-item--current .zen-submodule-item__label{color:#fff}\n"] }]
|
|
8892
8896
|
}], propDecorators: { label: [{
|
|
8893
8897
|
type: Input
|
|
8894
8898
|
}], icon: [{
|
|
@@ -8932,12 +8936,12 @@ class ZenSubpageItemComponent {
|
|
|
8932
8936
|
onMouseLeave() {
|
|
8933
8937
|
this._hovered = false;
|
|
8934
8938
|
}
|
|
8935
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8936
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
8939
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSubpageItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8940
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenSubpageItemComponent, isStandalone: false, selector: "zen-subpage-item", inputs: { type: "type", state: "state", label: "label", eldStatus: "eldStatus" }, outputs: { activate: "activate" }, ngImport: i0, template: "<div [class]=\"hostClasses\"\n (click)=\"onActivate()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\">\n <zen-icon class=\"zen-subpage-item__icon\"\n [name]=\"typeIcon\"\n [customColor]=\"iconColor\"></zen-icon>\n <span class=\"zen-subpage-item__label\">{{ label }}</span>\n @if (type === 'driver' && eldStatus) {\n <zen-eld-status\n [status]=\"eldStatus\"\n class=\"zen-subpage-item__eld\"></zen-eld-status>\n }\n</div>\n", styles: [".zen-subpage-item{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .2s;box-sizing:border-box}.zen-subpage-item--vehicle{gap:12px;padding:8px 12px;overflow:hidden}.zen-subpage-item--driver{gap:8px;padding:8px 12px}.zen-subpage-item--default{background:transparent}.zen-subpage-item--hover{background-color:#e3eefb}.zen-subpage-item--focused{background-color:#136ab6;border:1px solid #136AB6}.zen-subpage-item__icon{display:inline-block;flex-shrink:0;width:20px;height:20px}.zen-subpage-item__label{font-family:Inter,sans-serif;font-size:14px;line-height:20px;white-space:nowrap;font-weight:500;color:#1d2939}.zen-subpage-item--focused .zen-subpage-item__label{color:#fff;font-weight:600}.zen-subpage-item__eld{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: ZenEldStatusComponent, selector: "zen-eld-status", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
8937
8941
|
}
|
|
8938
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenSubpageItemComponent, decorators: [{
|
|
8939
8943
|
type: Component,
|
|
8940
|
-
args: [{ selector: 'zen-subpage-item', template: "<div [class]=\"hostClasses\"\n
|
|
8944
|
+
args: [{ selector: 'zen-subpage-item', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"hostClasses\"\n (click)=\"onActivate()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\">\n <zen-icon class=\"zen-subpage-item__icon\"\n [name]=\"typeIcon\"\n [customColor]=\"iconColor\"></zen-icon>\n <span class=\"zen-subpage-item__label\">{{ label }}</span>\n @if (type === 'driver' && eldStatus) {\n <zen-eld-status\n [status]=\"eldStatus\"\n class=\"zen-subpage-item__eld\"></zen-eld-status>\n }\n</div>\n", styles: [".zen-subpage-item{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .2s;box-sizing:border-box}.zen-subpage-item--vehicle{gap:12px;padding:8px 12px;overflow:hidden}.zen-subpage-item--driver{gap:8px;padding:8px 12px}.zen-subpage-item--default{background:transparent}.zen-subpage-item--hover{background-color:#e3eefb}.zen-subpage-item--focused{background-color:#136ab6;border:1px solid #136AB6}.zen-subpage-item__icon{display:inline-block;flex-shrink:0;width:20px;height:20px}.zen-subpage-item__label{font-family:Inter,sans-serif;font-size:14px;line-height:20px;white-space:nowrap;font-weight:500;color:#1d2939}.zen-subpage-item--focused .zen-subpage-item__label{color:#fff;font-weight:600}.zen-subpage-item__eld{flex-shrink:0}\n"] }]
|
|
8941
8945
|
}], propDecorators: { type: [{
|
|
8942
8946
|
type: Input
|
|
8943
8947
|
}], state: [{
|
|
@@ -9003,12 +9007,12 @@ class ZenModulePopupComponent {
|
|
|
9003
9007
|
this.close.emit();
|
|
9004
9008
|
}
|
|
9005
9009
|
}
|
|
9006
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9007
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
9010
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenModulePopupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9011
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenModulePopupComponent, isStandalone: false, selector: "zen-module-popup", inputs: { module: "module", items: "items", isOpen: "isOpen" }, outputs: { itemClick: "itemClick", close: "close" }, host: { listeners: { "document:mousedown": "onDocumentClick($event)" } }, ngImport: i0, template: "@if (isOpen) {\n <div [class]=\"hostClasses\">\n <!-- Header -->\n <div class=\"zen-module-popup__header\">\n <zen-icon class=\"zen-module-popup__header-icon\"\n [name]=\"moduleIcon\"\n [customColor]=\"'#98A2B3'\"></zen-icon>\n <span class=\"zen-module-popup__header-label\">{{ moduleLabel }}</span>\n </div>\n <div class=\"zen-module-popup__divider\"></div>\n <!-- Items -->\n <div class=\"zen-module-popup__items\">\n @for (item of items; track item) {\n <div\n class=\"zen-module-popup__item\"\n (click)=\"onItemClick(item)\">\n {{ item.label }}\n </div>\n }\n </div>\n </div>\n}\n", styles: [".zen-module-popup{display:flex;flex-direction:column;width:177px;background:#fff;border:1px solid #F2F4F7;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;overflow:hidden}.zen-module-popup--more{width:189px}.zen-module-popup__header{display:flex;align-items:center;gap:12px;padding:10px 16px}.zen-module-popup__header-icon{display:inline-block;flex-shrink:0;width:16px;height:16px}.zen-module-popup__header-label{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#98a2b3;white-space:nowrap}.zen-module-popup__divider{height:1px;width:100%;background-color:#f2f4f7}.zen-module-popup__items{display:flex;flex-direction:column}.zen-module-popup__item{display:flex;align-items:center;padding:10px 16px;font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#344054;cursor:pointer;transition:background-color .15s;white-space:nowrap}.zen-module-popup__item:hover{background-color:#f9fafb}\n"], dependencies: [{ kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
9008
9012
|
}
|
|
9009
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenModulePopupComponent, decorators: [{
|
|
9010
9014
|
type: Component,
|
|
9011
|
-
args: [{ selector: 'zen-module-popup', template: "
|
|
9015
|
+
args: [{ selector: 'zen-module-popup', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (isOpen) {\n <div [class]=\"hostClasses\">\n <!-- Header -->\n <div class=\"zen-module-popup__header\">\n <zen-icon class=\"zen-module-popup__header-icon\"\n [name]=\"moduleIcon\"\n [customColor]=\"'#98A2B3'\"></zen-icon>\n <span class=\"zen-module-popup__header-label\">{{ moduleLabel }}</span>\n </div>\n <div class=\"zen-module-popup__divider\"></div>\n <!-- Items -->\n <div class=\"zen-module-popup__items\">\n @for (item of items; track item) {\n <div\n class=\"zen-module-popup__item\"\n (click)=\"onItemClick(item)\">\n {{ item.label }}\n </div>\n }\n </div>\n </div>\n}\n", styles: [".zen-module-popup{display:flex;flex-direction:column;width:177px;background:#fff;border:1px solid #F2F4F7;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;overflow:hidden}.zen-module-popup--more{width:189px}.zen-module-popup__header{display:flex;align-items:center;gap:12px;padding:10px 16px}.zen-module-popup__header-icon{display:inline-block;flex-shrink:0;width:16px;height:16px}.zen-module-popup__header-label{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#98a2b3;white-space:nowrap}.zen-module-popup__divider{height:1px;width:100%;background-color:#f2f4f7}.zen-module-popup__items{display:flex;flex-direction:column}.zen-module-popup__item{display:flex;align-items:center;padding:10px 16px;font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#344054;cursor:pointer;transition:background-color .15s;white-space:nowrap}.zen-module-popup__item:hover{background-color:#f9fafb}\n"] }]
|
|
9012
9016
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { module: [{
|
|
9013
9017
|
type: Input
|
|
9014
9018
|
}], items: [{
|
|
@@ -9195,12 +9199,12 @@ class ZenChartComponent {
|
|
|
9195
9199
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
9196
9200
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
9197
9201
|
}
|
|
9198
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9199
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
9202
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenChartComponent, isStandalone: false, selector: "zen-chart", inputs: { chartStyle: "chartStyle", legend: "legend", axisLabels: "axisLabels", labels: "labels", datasets: "datasets", xAxisLabel: "xAxisLabel", yAxisLabel: "yAxisLabel", stacked: "stacked", colors: "colors", breakpoint: "breakpoint" }, outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"hostClasses\">\n\n <!-- Legend: top position -->\n @if (legend === 'top') {\n <div class=\"zen-chart__legend\">\n @for (ds of datasets; track ds; let i = $index) {\n <div class=\"zen-chart__legend-item\">\n <span class=\"zen-chart__legend-dot\" [style.background-color]=\"getColor(i)\"></span>\n <span class=\"zen-chart__legend-label\">{{ ds.label }}</span>\n </div>\n }\n </div>\n }\n\n <!-- Y-axis label + chart canvas -->\n <div class=\"zen-chart__body\">\n @if (axisLabels && yAxisLabel) {\n <div class=\"zen-chart__y-label\">\n <span>{{ yAxisLabel }}</span>\n </div>\n }\n <div class=\"zen-chart__canvas-wrapper\">\n <canvas baseChart\n [type]=\"chartStyle\"\n [data]=\"chartData\"\n [options]=\"chartOptions\"\n (chartClick)=\"onChartClick($event)\">\n </canvas>\n </div>\n </div>\n\n <!-- X-axis label -->\n @if (axisLabels && xAxisLabel) {\n <div class=\"zen-chart__x-label\">\n <span>{{ xAxisLabel }}</span>\n </div>\n }\n\n <!-- Legend: right position -->\n @if (legend === 'right') {\n <div class=\"zen-chart__legend\">\n @for (ds of datasets; track ds; let i = $index) {\n <div class=\"zen-chart__legend-item\">\n <span class=\"zen-chart__legend-dot\" [style.background-color]=\"getColor(i)\"></span>\n <span class=\"zen-chart__legend-label\">{{ ds.label }}</span>\n </div>\n }\n </div>\n }\n\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.zen-chart{display:flex;flex-direction:column;width:100%;height:100%;font-family:Inter,sans-serif}.zen-chart__body{display:flex;flex:1;min-height:0;overflow:hidden}.zen-chart__canvas-wrapper{position:relative;flex:1;min-width:0;min-height:0}.zen-chart__canvas-wrapper canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}.zen-chart__y-label{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;padding-bottom:24px}.zen-chart__y-label span{transform:rotate(-90deg);white-space:nowrap;font-size:12px;font-weight:500;line-height:18px;color:#667085}.zen-chart__x-label{display:flex;justify-content:center;padding-top:8px}.zen-chart__x-label span{font-size:12px;font-weight:500;line-height:18px;color:#667085}.zen-chart__legend-item{display:inline-flex;align-items:center;gap:8px}.zen-chart__legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.zen-chart__legend-label{font-size:14px;font-weight:400;line-height:20px;color:#667085}.zen-chart--legend-top>.zen-chart__legend{display:flex;flex-direction:row;justify-content:flex-end;gap:13px;margin-bottom:0}.zen-chart--legend-right{flex-direction:row;flex-wrap:wrap}.zen-chart--legend-right>.zen-chart__body{flex:1;min-width:0}.zen-chart--legend-right>.zen-chart__legend{display:flex;flex-direction:column;gap:4px;margin-left:16px;padding-top:0;width:70px}.zen-chart--legend-right>.zen-chart__x-label{width:100%}.zen-chart--legend-false>.zen-chart__legend{display:none}.zen-chart--mobile>.zen-chart__legend{gap:8px}.zen-chart--mobile .zen-chart__legend-label{font-size:12px;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i1$3.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
9200
9204
|
}
|
|
9201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9205
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenChartComponent, decorators: [{
|
|
9202
9206
|
type: Component,
|
|
9203
|
-
args: [{ selector: 'zen-chart', template: "<div [class]=\"hostClasses\">\n\n <!-- Legend: top position -->\n
|
|
9207
|
+
args: [{ selector: 'zen-chart', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"hostClasses\">\n\n <!-- Legend: top position -->\n @if (legend === 'top') {\n <div class=\"zen-chart__legend\">\n @for (ds of datasets; track ds; let i = $index) {\n <div class=\"zen-chart__legend-item\">\n <span class=\"zen-chart__legend-dot\" [style.background-color]=\"getColor(i)\"></span>\n <span class=\"zen-chart__legend-label\">{{ ds.label }}</span>\n </div>\n }\n </div>\n }\n\n <!-- Y-axis label + chart canvas -->\n <div class=\"zen-chart__body\">\n @if (axisLabels && yAxisLabel) {\n <div class=\"zen-chart__y-label\">\n <span>{{ yAxisLabel }}</span>\n </div>\n }\n <div class=\"zen-chart__canvas-wrapper\">\n <canvas baseChart\n [type]=\"chartStyle\"\n [data]=\"chartData\"\n [options]=\"chartOptions\"\n (chartClick)=\"onChartClick($event)\">\n </canvas>\n </div>\n </div>\n\n <!-- X-axis label -->\n @if (axisLabels && xAxisLabel) {\n <div class=\"zen-chart__x-label\">\n <span>{{ xAxisLabel }}</span>\n </div>\n }\n\n <!-- Legend: right position -->\n @if (legend === 'right') {\n <div class=\"zen-chart__legend\">\n @for (ds of datasets; track ds; let i = $index) {\n <div class=\"zen-chart__legend-item\">\n <span class=\"zen-chart__legend-dot\" [style.background-color]=\"getColor(i)\"></span>\n <span class=\"zen-chart__legend-label\">{{ ds.label }}</span>\n </div>\n }\n </div>\n }\n\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.zen-chart{display:flex;flex-direction:column;width:100%;height:100%;font-family:Inter,sans-serif}.zen-chart__body{display:flex;flex:1;min-height:0;overflow:hidden}.zen-chart__canvas-wrapper{position:relative;flex:1;min-width:0;min-height:0}.zen-chart__canvas-wrapper canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}.zen-chart__y-label{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;padding-bottom:24px}.zen-chart__y-label span{transform:rotate(-90deg);white-space:nowrap;font-size:12px;font-weight:500;line-height:18px;color:#667085}.zen-chart__x-label{display:flex;justify-content:center;padding-top:8px}.zen-chart__x-label span{font-size:12px;font-weight:500;line-height:18px;color:#667085}.zen-chart__legend-item{display:inline-flex;align-items:center;gap:8px}.zen-chart__legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.zen-chart__legend-label{font-size:14px;font-weight:400;line-height:20px;color:#667085}.zen-chart--legend-top>.zen-chart__legend{display:flex;flex-direction:row;justify-content:flex-end;gap:13px;margin-bottom:0}.zen-chart--legend-right{flex-direction:row;flex-wrap:wrap}.zen-chart--legend-right>.zen-chart__body{flex:1;min-width:0}.zen-chart--legend-right>.zen-chart__legend{display:flex;flex-direction:column;gap:4px;margin-left:16px;padding-top:0;width:70px}.zen-chart--legend-right>.zen-chart__x-label{width:100%}.zen-chart--legend-false>.zen-chart__legend{display:none}.zen-chart--mobile>.zen-chart__legend{gap:8px}.zen-chart--mobile .zen-chart__legend-label{font-size:12px;line-height:18px}\n"] }]
|
|
9204
9208
|
}], propDecorators: { chartStyle: [{
|
|
9205
9209
|
type: Input
|
|
9206
9210
|
}], legend: [{
|
|
@@ -9268,12 +9272,12 @@ class ZenStepBaseComponent {
|
|
|
9268
9272
|
case 'lg': return 16;
|
|
9269
9273
|
}
|
|
9270
9274
|
}
|
|
9271
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZenStepBaseComponent, 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 <ng-container *ngIf=\"type === 'top'\">\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n <div class=\"zen-step-base__content\" *ngIf=\"title || description\">\n <p class=\"zen-step-base__title\" *ngIf=\"title\">{{ title }}</p>\n <p class=\"zen-step-base__description\" *ngIf=\"description\">{{ description }}</p>\n </div>\n </ng-container>\n\n <!-- ============ TYPE: ICON ONLY (minimal-icons) ============ -->\n <ng-container *ngIf=\"type === 'icon-only'\">\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n </ng-container>\n\n <!-- ============ TYPE: TEXT LINE ============ -->\n <ng-container *ngIf=\"type === 'text-line'\">\n <div class=\"zen-step-base__bar\"></div>\n <div class=\"zen-step-base__content\" *ngIf=\"title || description\">\n <p class=\"zen-step-base__title\" *ngIf=\"title\">{{ title }}</p>\n <p class=\"zen-step-base__description\" *ngIf=\"description\">{{ description }}</p>\n </div>\n </ng-container>\n\n <!-- ============ TYPE: ICON LEFT (icons-text vertical) ============ -->\n <ng-container *ngIf=\"type === 'icon-left'\">\n <div class=\"zen-step-base__icon-col\">\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n <div *ngIf=\"showConnector\"\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 </div>\n <div class=\"zen-step-base__content\" *ngIf=\"title || description\">\n <p class=\"zen-step-base__title\" *ngIf=\"title\">{{ title }}</p>\n <p class=\"zen-step-base__description\" *ngIf=\"description\">{{ description }}</p>\n </div>\n </ng-container>\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 <svg *ngIf=\"status === 'complete'\"\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 <!-- Current / Incomplete: dot -->\n <span *ngIf=\"status !== 'complete'\"\n class=\"zen-step-base__dot\"\n [style.width.px]=\"dotSize\"\n [style.height.px]=\"dotSize\">\n </span>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
9275
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenStepBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9276
|
+
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 }); }
|
|
9273
9277
|
}
|
|
9274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenStepBaseComponent, decorators: [{
|
|
9275
9279
|
type: Component,
|
|
9276
|
-
args: [{ selector: 'zen-step-base', template: "<div [class]=\"hostClasses\">\n\n <!-- ============ TYPE: TOP (icons-centered) ============ -->\n <ng-container *ngIf=\"type === 'top'\">\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n <div class=\"zen-step-base__content\" *ngIf=\"title || description\">\n <p class=\"zen-step-base__title\" *ngIf=\"title\">{{ title }}</p>\n <p class=\"zen-step-base__description\" *ngIf=\"description\">{{ description }}</p>\n </div>\n </ng-container>\n\n <!-- ============ TYPE: ICON ONLY (minimal-icons) ============ -->\n <ng-container *ngIf=\"type === 'icon-only'\">\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n </ng-container>\n\n <!-- ============ TYPE: TEXT LINE ============ -->\n <ng-container *ngIf=\"type === 'text-line'\">\n <div class=\"zen-step-base__bar\"></div>\n <div class=\"zen-step-base__content\" *ngIf=\"title || description\">\n <p class=\"zen-step-base__title\" *ngIf=\"title\">{{ title }}</p>\n <p class=\"zen-step-base__description\" *ngIf=\"description\">{{ description }}</p>\n </div>\n </ng-container>\n\n <!-- ============ TYPE: ICON LEFT (icons-text vertical) ============ -->\n <ng-container *ngIf=\"type === 'icon-left'\">\n <div class=\"zen-step-base__icon-col\">\n <ng-container *ngTemplateOutlet=\"iconTpl\"></ng-container>\n <div *ngIf=\"showConnector\"\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 </div>\n <div class=\"zen-step-base__content\" *ngIf=\"title || description\">\n <p class=\"zen-step-base__title\" *ngIf=\"title\">{{ title }}</p>\n <p class=\"zen-step-base__description\" *ngIf=\"description\">{{ description }}</p>\n </div>\n </ng-container>\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 <svg *ngIf=\"status === 'complete'\"\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 <!-- Current / Incomplete: dot -->\n <span *ngIf=\"status !== 'complete'\"\n class=\"zen-step-base__dot\"\n [style.width.px]=\"dotSize\"\n [style.height.px]=\"dotSize\">\n </span>\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"] }]
|
|
9280
|
+
args: [{ selector: 'zen-step-base', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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"] }]
|
|
9277
9281
|
}], propDecorators: { type: [{
|
|
9278
9282
|
type: Input
|
|
9279
9283
|
}], size: [{
|
|
@@ -9320,12 +9324,12 @@ class ZenProgressStepsComponent {
|
|
|
9320
9324
|
return 'current';
|
|
9321
9325
|
return 'incomplete';
|
|
9322
9326
|
}
|
|
9323
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9324
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
9327
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenProgressStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9328
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ZenProgressStepsComponent, isStandalone: false, selector: "zen-progress-steps", inputs: { type: "type", size: "size", theme: "theme", steps: "steps", currentStep: "currentStep", showText: "showText", connector: "connector" }, ngImport: i0, template: "<div [class]=\"hostClasses\">\n\n <!-- ============ ICONS CENTERED ============ -->\n @if (type === 'icons-centered') {\n <div class=\"zen-progress-steps__row\">\n <!-- Lines behind icons -->\n <div class=\"zen-progress-steps__lines\">\n @for (step of steps; track step; let i = $index; let last = $last) {\n @if (!last) {\n <div\n class=\"zen-progress-steps__line\"\n [class.zen-progress-steps__line--complete]=\"i < currentStep\"\n [class.zen-progress-steps__line--incomplete]=\"i >= currentStep\">\n </div>\n }\n }\n </div>\n <!-- Step columns -->\n @for (step of steps; track step; let i = $index) {\n <zen-step-base\n class=\"zen-progress-steps__step\"\n type=\"top\"\n [size]=\"size\"\n [theme]=\"theme\"\n [status]=\"getStepStatus(i)\"\n [title]=\"step.title || ''\"\n [description]=\"step.description || ''\">\n </zen-step-base>\n }\n </div>\n }\n\n <!-- ============ MINIMAL ICONS / MINIMAL ICONS CONNECTED ============ -->\n @if (type === 'minimal-icons' || type === 'minimal-icons-connected') {\n <div class=\"zen-progress-steps__row zen-progress-steps__row--inline\">\n @for (step of steps; track step; let i = $index; let last = $last) {\n <zen-step-base class=\"zen-progress-steps__step--minimal\"\n type=\"icon-only\"\n [size]=\"size\"\n [theme]=\"theme\"\n [status]=\"getStepStatus(i)\">\n </zen-step-base>\n @if (!last) {\n <div\n class=\"zen-progress-steps__line zen-progress-steps__line--horizontal\"\n [class.zen-progress-steps__line--complete]=\"i < currentStep\"\n [class.zen-progress-steps__line--incomplete]=\"i >= currentStep\">\n </div>\n }\n }\n </div>\n <!-- Optional text row -->\n @if (showText) {\n <div class=\"zen-progress-steps__text-row\">\n @for (step of steps; track step; let i = $index) {\n <zen-step-base\n class=\"zen-progress-steps__text-step\"\n type=\"text-line\"\n [size]=\"size\"\n [theme]=\"theme\"\n [status]=\"getStepStatus(i)\"\n [title]=\"step.title || ''\"\n [description]=\"step.description || ''\">\n </zen-step-base>\n }\n </div>\n }\n }\n\n <!-- ============ TEXT LINE ============ -->\n @if (type === 'text-line') {\n <div class=\"zen-progress-steps__row zen-progress-steps__row--text-line\">\n @for (step of steps; track step; let i = $index) {\n <zen-step-base\n class=\"zen-progress-steps__step\"\n type=\"text-line\"\n [size]=\"size\"\n [theme]=\"theme\"\n [status]=\"getStepStatus(i)\"\n [title]=\"step.title || ''\"\n [description]=\"step.description || ''\">\n </zen-step-base>\n }\n </div>\n }\n\n <!-- ============ ICONS TEXT (Vertical) ============ -->\n @if (type === 'icons-text') {\n <div class=\"zen-progress-steps__column\">\n @for (step of steps; track step; let i = $index; let last = $last) {\n <zen-step-base\n class=\"zen-progress-steps__step\"\n type=\"icon-left\"\n [size]=\"size\"\n [theme]=\"theme\"\n [status]=\"getStepStatus(i)\"\n [title]=\"step.title || ''\"\n [description]=\"step.description || ''\"\n [showConnector]=\"connector && !last\">\n </zen-step-base>\n }\n </div>\n }\n\n</div>\n", styles: [".zen-progress-steps{display:flex;flex-direction:column;font-family:Inter,sans-serif;width:100%}.zen-progress-steps__line{flex-shrink:0}.zen-progress-steps__line--complete{background-color:#136ab6}.zen-progress-steps__line--incomplete{background-color:#eaecf0}.zen-progress-steps--icons-centered .zen-progress-steps__row{display:flex;align-items:flex-start;position:relative}.zen-progress-steps--icons-centered .zen-progress-steps__step{flex:1 0 0;position:relative;z-index:1}.zen-progress-steps--icons-centered .zen-progress-steps__lines{position:absolute;left:0;right:0;display:flex;z-index:0}.zen-progress-steps--icons-centered .zen-progress-steps__line{flex:1 0 0;height:2px}.zen-progress-steps--icons-centered.zen-progress-steps--sm .zen-progress-steps__lines{top:11px;left:60px;right:60px}.zen-progress-steps--icons-centered.zen-progress-steps--md .zen-progress-steps__lines{top:15px;left:60px;right:60px}.zen-progress-steps--icons-centered.zen-progress-steps--lg .zen-progress-steps__lines{top:19px;left:60px;right:60px}.zen-progress-steps--minimal-icons .zen-progress-steps__row--inline,.zen-progress-steps--minimal-icons-connected .zen-progress-steps__row--inline{display:flex;align-items:center;justify-content:center}.zen-progress-steps--minimal-icons .zen-progress-steps__step--minimal,.zen-progress-steps--minimal-icons-connected .zen-progress-steps__step--minimal{flex-shrink:0}.zen-progress-steps--minimal-icons .zen-progress-steps__line--horizontal,.zen-progress-steps--minimal-icons-connected .zen-progress-steps__line--horizontal{width:80px;height:2px;flex-shrink:0}.zen-progress-steps--minimal-icons .zen-progress-steps__text-row,.zen-progress-steps--minimal-icons-connected .zen-progress-steps__text-row{display:flex;margin-top:12px}.zen-progress-steps--minimal-icons .zen-progress-steps__text-row .zen-progress-steps__text-step,.zen-progress-steps--minimal-icons-connected .zen-progress-steps__text-row .zen-progress-steps__text-step{flex:1 0 0;text-align:center}.zen-progress-steps--text-line .zen-progress-steps__row--text-line{display:flex;align-items:flex-start;gap:16px}.zen-progress-steps--text-line .zen-progress-steps__step{flex:1 0 0}.zen-progress-steps--icons-text .zen-progress-steps__column{display:flex;flex-direction:column;align-items:flex-start}.zen-progress-steps--icons-text .zen-progress-steps__step{width:100%}\n"], dependencies: [{ kind: "component", type: ZenStepBaseComponent, selector: "zen-step-base", inputs: ["type", "size", "theme", "status", "title", "description", "showConnector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
9325
9329
|
}
|
|
9326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ZenProgressStepsComponent, decorators: [{
|
|
9327
9331
|
type: Component,
|
|
9328
|
-
args: [{ selector: 'zen-progress-steps', template: "<div [class]=\"hostClasses\">\n\n <!-- ============ ICONS CENTERED ============ -->\n
|
|
9332
|
+
args: [{ selector: 'zen-progress-steps', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [class]=\"hostClasses\">\n\n <!-- ============ ICONS CENTERED ============ -->\n @if (type === 'icons-centered') {\n <div class=\"zen-progress-steps__row\">\n <!-- Lines behind icons -->\n <div class=\"zen-progress-steps__lines\">\n @for (step of steps; track step; let i = $index; let last = $last) {\n @if (!last) {\n <div\n class=\"zen-progress-steps__line\"\n [class.zen-progress-steps__line--complete]=\"i < currentStep\"\n [class.zen-progress-steps__line--incomplete]=\"i >= currentStep\">\n </div>\n }\n }\n </div>\n <!-- Step columns -->\n @for (step of steps; track step; let i = $index) {\n <zen-step-base\n class=\"zen-progress-steps__step\"\n type=\"top\"\n [size]=\"size\"\n [theme]=\"theme\"\n [status]=\"getStepStatus(i)\"\n [title]=\"step.title || ''\"\n [description]=\"step.description || ''\">\n </zen-step-base>\n }\n </div>\n }\n\n <!-- ============ MINIMAL ICONS / MINIMAL ICONS CONNECTED ============ -->\n @if (type === 'minimal-icons' || type === 'minimal-icons-connected') {\n <div class=\"zen-progress-steps__row zen-progress-steps__row--inline\">\n @for (step of steps; track step; let i = $index; let last = $last) {\n <zen-step-base class=\"zen-progress-steps__step--minimal\"\n type=\"icon-only\"\n [size]=\"size\"\n [theme]=\"theme\"\n [status]=\"getStepStatus(i)\">\n </zen-step-base>\n @if (!last) {\n <div\n class=\"zen-progress-steps__line zen-progress-steps__line--horizontal\"\n [class.zen-progress-steps__line--complete]=\"i < currentStep\"\n [class.zen-progress-steps__line--incomplete]=\"i >= currentStep\">\n </div>\n }\n }\n </div>\n <!-- Optional text row -->\n @if (showText) {\n <div class=\"zen-progress-steps__text-row\">\n @for (step of steps; track step; let i = $index) {\n <zen-step-base\n class=\"zen-progress-steps__text-step\"\n type=\"text-line\"\n [size]=\"size\"\n [theme]=\"theme\"\n [status]=\"getStepStatus(i)\"\n [title]=\"step.title || ''\"\n [description]=\"step.description || ''\">\n </zen-step-base>\n }\n </div>\n }\n }\n\n <!-- ============ TEXT LINE ============ -->\n @if (type === 'text-line') {\n <div class=\"zen-progress-steps__row zen-progress-steps__row--text-line\">\n @for (step of steps; track step; let i = $index) {\n <zen-step-base\n class=\"zen-progress-steps__step\"\n type=\"text-line\"\n [size]=\"size\"\n [theme]=\"theme\"\n [status]=\"getStepStatus(i)\"\n [title]=\"step.title || ''\"\n [description]=\"step.description || ''\">\n </zen-step-base>\n }\n </div>\n }\n\n <!-- ============ ICONS TEXT (Vertical) ============ -->\n @if (type === 'icons-text') {\n <div class=\"zen-progress-steps__column\">\n @for (step of steps; track step; let i = $index; let last = $last) {\n <zen-step-base\n class=\"zen-progress-steps__step\"\n type=\"icon-left\"\n [size]=\"size\"\n [theme]=\"theme\"\n [status]=\"getStepStatus(i)\"\n [title]=\"step.title || ''\"\n [description]=\"step.description || ''\"\n [showConnector]=\"connector && !last\">\n </zen-step-base>\n }\n </div>\n }\n\n</div>\n", styles: [".zen-progress-steps{display:flex;flex-direction:column;font-family:Inter,sans-serif;width:100%}.zen-progress-steps__line{flex-shrink:0}.zen-progress-steps__line--complete{background-color:#136ab6}.zen-progress-steps__line--incomplete{background-color:#eaecf0}.zen-progress-steps--icons-centered .zen-progress-steps__row{display:flex;align-items:flex-start;position:relative}.zen-progress-steps--icons-centered .zen-progress-steps__step{flex:1 0 0;position:relative;z-index:1}.zen-progress-steps--icons-centered .zen-progress-steps__lines{position:absolute;left:0;right:0;display:flex;z-index:0}.zen-progress-steps--icons-centered .zen-progress-steps__line{flex:1 0 0;height:2px}.zen-progress-steps--icons-centered.zen-progress-steps--sm .zen-progress-steps__lines{top:11px;left:60px;right:60px}.zen-progress-steps--icons-centered.zen-progress-steps--md .zen-progress-steps__lines{top:15px;left:60px;right:60px}.zen-progress-steps--icons-centered.zen-progress-steps--lg .zen-progress-steps__lines{top:19px;left:60px;right:60px}.zen-progress-steps--minimal-icons .zen-progress-steps__row--inline,.zen-progress-steps--minimal-icons-connected .zen-progress-steps__row--inline{display:flex;align-items:center;justify-content:center}.zen-progress-steps--minimal-icons .zen-progress-steps__step--minimal,.zen-progress-steps--minimal-icons-connected .zen-progress-steps__step--minimal{flex-shrink:0}.zen-progress-steps--minimal-icons .zen-progress-steps__line--horizontal,.zen-progress-steps--minimal-icons-connected .zen-progress-steps__line--horizontal{width:80px;height:2px;flex-shrink:0}.zen-progress-steps--minimal-icons .zen-progress-steps__text-row,.zen-progress-steps--minimal-icons-connected .zen-progress-steps__text-row{display:flex;margin-top:12px}.zen-progress-steps--minimal-icons .zen-progress-steps__text-row .zen-progress-steps__text-step,.zen-progress-steps--minimal-icons-connected .zen-progress-steps__text-row .zen-progress-steps__text-step{flex:1 0 0;text-align:center}.zen-progress-steps--text-line .zen-progress-steps__row--text-line{display:flex;align-items:flex-start;gap:16px}.zen-progress-steps--text-line .zen-progress-steps__step{flex:1 0 0}.zen-progress-steps--icons-text .zen-progress-steps__column{display:flex;flex-direction:column;align-items:flex-start}.zen-progress-steps--icons-text .zen-progress-steps__step{width:100%}\n"] }]
|
|
9329
9333
|
}], propDecorators: { type: [{
|
|
9330
9334
|
type: Input
|
|
9331
9335
|
}], size: [{
|
|
@@ -9342,13 +9346,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9342
9346
|
type: Input
|
|
9343
9347
|
}] } });
|
|
9344
9348
|
|
|
9345
|
-
// AoT requires an exported function for factories
|
|
9346
|
-
function HttpLoaderFactory(httpClient) {
|
|
9347
|
-
return new TranslateHttpLoader(httpClient);
|
|
9348
|
-
}
|
|
9349
9349
|
class NgZenduitModule {
|
|
9350
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9351
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
9350
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgZenduitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
9351
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: NgZenduitModule, declarations: [ZenduCheckboxComponent,
|
|
9352
9352
|
ZenduToggleComponent,
|
|
9353
9353
|
ZenduToggleSlideComponent,
|
|
9354
9354
|
ZenduSearchBoxComponent,
|
|
@@ -9404,11 +9404,10 @@ class NgZenduitModule {
|
|
|
9404
9404
|
ZenStepBaseComponent], imports: [CommonModule,
|
|
9405
9405
|
FormsModule,
|
|
9406
9406
|
DragDropModule,
|
|
9407
|
-
|
|
9407
|
+
SignaturePadComponent,
|
|
9408
9408
|
ReactiveFormsModule,
|
|
9409
|
-
HttpClientModule,
|
|
9410
9409
|
OverlayModule,
|
|
9411
|
-
|
|
9410
|
+
BaseChartDirective, i2.TranslateModule], exports: [ZenduCheckboxComponent,
|
|
9412
9411
|
ZenduToggleComponent,
|
|
9413
9412
|
ZenduToggleSlideComponent,
|
|
9414
9413
|
ZenduSearchBoxComponent,
|
|
@@ -9457,28 +9456,26 @@ class NgZenduitModule {
|
|
|
9457
9456
|
ZenChartComponent,
|
|
9458
9457
|
ZenProgressStepsComponent,
|
|
9459
9458
|
ZenStepBaseComponent] }); }
|
|
9460
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
9459
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgZenduitModule, providers: [
|
|
9461
9460
|
OpenCVService,
|
|
9461
|
+
provideCharts(withDefaultRegisterables()),
|
|
9462
|
+
provideHttpClient(withXhr(), withInterceptorsFromDi()),
|
|
9462
9463
|
], imports: [CommonModule,
|
|
9463
9464
|
FormsModule,
|
|
9464
9465
|
DragDropModule,
|
|
9465
|
-
|
|
9466
|
+
SignaturePadComponent,
|
|
9466
9467
|
ReactiveFormsModule,
|
|
9467
|
-
HttpClientModule,
|
|
9468
9468
|
OverlayModule,
|
|
9469
|
-
NgChartsModule,
|
|
9470
9469
|
TranslateModule.forRoot({
|
|
9471
|
-
loader: {
|
|
9472
|
-
|
|
9473
|
-
|
|
9474
|
-
|
|
9475
|
-
}
|
|
9470
|
+
loader: provideTranslateHttpLoader({
|
|
9471
|
+
prefix: '/assets/i18n/',
|
|
9472
|
+
suffix: '.json'
|
|
9473
|
+
})
|
|
9476
9474
|
})] }); }
|
|
9477
9475
|
}
|
|
9478
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NgZenduitModule, decorators: [{
|
|
9479
9477
|
type: NgModule,
|
|
9480
|
-
args: [{
|
|
9481
|
-
declarations: [
|
|
9478
|
+
args: [{ declarations: [
|
|
9482
9479
|
ZenduCheckboxComponent,
|
|
9483
9480
|
ZenduToggleComponent,
|
|
9484
9481
|
ZenduToggleSlideComponent,
|
|
@@ -9534,26 +9531,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9534
9531
|
ZenProgressStepsComponent,
|
|
9535
9532
|
ZenStepBaseComponent
|
|
9536
9533
|
],
|
|
9537
|
-
providers: [
|
|
9538
|
-
OpenCVService,
|
|
9539
|
-
],
|
|
9540
|
-
imports: [
|
|
9541
|
-
CommonModule,
|
|
9542
|
-
FormsModule,
|
|
9543
|
-
DragDropModule,
|
|
9544
|
-
AngularSignaturePadModule,
|
|
9545
|
-
ReactiveFormsModule,
|
|
9546
|
-
HttpClientModule,
|
|
9547
|
-
OverlayModule,
|
|
9548
|
-
NgChartsModule,
|
|
9549
|
-
TranslateModule.forRoot({
|
|
9550
|
-
loader: {
|
|
9551
|
-
provide: TranslateLoader,
|
|
9552
|
-
useFactory: HttpLoaderFactory,
|
|
9553
|
-
deps: [HttpClient]
|
|
9554
|
-
}
|
|
9555
|
-
})
|
|
9556
|
-
],
|
|
9557
9534
|
exports: [
|
|
9558
9535
|
ZenduCheckboxComponent,
|
|
9559
9536
|
ZenduToggleComponent,
|
|
@@ -9604,8 +9581,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9604
9581
|
ZenChartComponent,
|
|
9605
9582
|
ZenProgressStepsComponent,
|
|
9606
9583
|
ZenStepBaseComponent
|
|
9607
|
-
]
|
|
9608
|
-
|
|
9584
|
+
], imports: [CommonModule,
|
|
9585
|
+
FormsModule,
|
|
9586
|
+
DragDropModule,
|
|
9587
|
+
SignaturePadComponent,
|
|
9588
|
+
ReactiveFormsModule,
|
|
9589
|
+
OverlayModule,
|
|
9590
|
+
BaseChartDirective,
|
|
9591
|
+
TranslateModule.forRoot({
|
|
9592
|
+
loader: provideTranslateHttpLoader({
|
|
9593
|
+
prefix: '/assets/i18n/',
|
|
9594
|
+
suffix: '.json'
|
|
9595
|
+
})
|
|
9596
|
+
})], providers: [
|
|
9597
|
+
OpenCVService,
|
|
9598
|
+
provideCharts(withDefaultRegisterables()),
|
|
9599
|
+
provideHttpClient(withXhr(), withInterceptorsFromDi()),
|
|
9600
|
+
] }]
|
|
9609
9601
|
}] });
|
|
9610
9602
|
|
|
9611
9603
|
/*
|
|
@@ -9616,5 +9608,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
9616
9608
|
* Generated bundle index. Do not edit.
|
|
9617
9609
|
*/
|
|
9618
9610
|
|
|
9619
|
-
export { DATEPICKER_POSITION,
|
|
9611
|
+
export { DATEPICKER_POSITION, NgZenduitModule, ZEN_DATE_PICKER_DEFAULT_PRESETS, ZEN_ICON_CONFIG, ZenBadgeComponent, ZenButtonComponent, ZenChartComponent, ZenDropdownMenuComponent, ZenEldStatusComponent, ZenLiveViewPlayerComponent, ZenModulePopupComponent, ZenNavSearchComponent, ZenNotifyService, ZenProgressStepsComponent, ZenStepBaseComponent, ZenSubmoduleItemComponent, ZenSubpageItemComponent, ZenTooltipDirective, ZenTooltipPopupComponent, ZenduAvatarComponent, ZenduAvatarGroupComponent, ZenduAvatarLabelGroupComponent, ZenduAvatarProfilePhotoComponent, ZenduCardBlockComponent, ZenduCheckboxComponent, ZenduColorPickerComponent, ZenduColumnConfigurationComponent, ZenduDatePickerDropdownComponent, ZenduDatepickerComponent, ZenduDocScanner, ZenduFileUpload, ZenduFileUploaderComponent, ZenduFilterComponent, ZenduGroupsComponent, ZenduIconComponent, ZenduInputComponent, ZenduLocationSearch, ZenduMapComponent, ZenduMapPreviewComponent, ZenduPaginationBarComponent, ZenduPhoneInputComponent, ZenduProgress, ZenduRadioButtonComponent, ZenduSearchBoxComponent, ZenduSelectButtonDirective, ZenduSelectComponent, ZenduSelectOptionDirective, ZenduSelectValueDirective, ZenduSliderComponent, ZenduSortHeaderComponent, ZenduSpinner, ZenduTimepickerComponent, ZenduToggleComponent, ZenduToggleSlideComponent };
|
|
9620
9612
|
//# sourceMappingURL=ng-zenduit.mjs.map
|