ng-zenduit 2.0.2 → 2.0.7

package/fesm2015/ng-zenduit.mjs

@@ -3101,10 +3101,10 @@ class ZenduPhoneInputComponent {
     }
 }
 ZenduPhoneInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduPhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZenduPhoneInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduPhoneInputComponent, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"phone-input-component\">\n   <div class=\"material-input\">\n      <a class=\"country-select\"\n         (click)=\"toggle()\">\n         <img class=\"country-flag\"\n              [src]=\"selectedCountry.flag\">\n         <i class=\"material-icons expand-icon\"\n            [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n         <div class=\"code\">{{ selectedCountry.countryCallingCode }}</div>\n      </a>\n      <input class=\"phone-input\"\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             #input>\n   </div>\n\n   <div class=\"action-menu country-dropdown-list\"\n        *ngIf=\"isExpanded\">\n      <div class=\"action-menu-body\">\n         <!--Country's List-->\n         <a class=\"action-item\"\n            *ngFor=\"let country of countryList\"\n            [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n            (click)=\"countryChanged(country)\">\n            <img class=\"country-flag\"\n                 [src]=\"country.flag\">\n            <div>{{ country.countryName }}</div>\n            <div>{{ country.countryCallingCode }}</div>\n         </a>\n\n         <!--Custom Country-->\n         <a class=\"action-item\"\n            [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n            (click)=\"countryChanged(customCountry)\">\n            <img class=\"country-flag\"\n                 [src]=\"customCountry.flag\">\n            <div>{{ customCountry.countryName }}</div>\n            <div>{{ customCountry.countryCallingCode }}</div>\n         </a>\n      </div>\n   </div>\n</div>\n", styles: [".phone-input-component{position:relative;width:100%}.phone-input-component .material-input,.phone-input-component .zen-input{display:flex;align-items:center;gap:8px}.phone-input-component .material-input .country-select,.phone-input-component .zen-input .country-select{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none}.phone-input-component .material-input .country-select .expand-icon,.phone-input-component .zen-input .country-select .expand-icon{color:#60636c;transition:.3s}.phone-input-component .material-input .country-select .expand-icon.active,.phone-input-component .zen-input .country-select .expand-icon.active{color:#2188d9;transform:rotate(180deg)}.phone-input-component .material-input .country-select .code,.phone-input-component .zen-input .country-select .code{font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333}.phone-input-component .material-input .country-select:focus .expand-icon,.phone-input-component .zen-input .country-select:focus .expand-icon{color:#2188d9}.phone-input-component .material-input .phone-input,.phone-input-component .zen-input .phone-input{flex:1;border:none;outline:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333;background:transparent}.phone-input-component .country-dropdown-list{width:inherit;margin-top:8px}\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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+ZenduPhoneInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduPhoneInputComponent, selector: "zen-phone-input", inputs: { phone: "phone", maxLength: "maxLength", disabled: "disabled", width: "width" }, outputs: { phoneChange: "phoneChange", validChange: "validChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"phone-input-component\" [style.width]=\"width\">\n   <div class=\"material-input\">\n      <a class=\"country-select\"\n         (click)=\"toggle()\">\n         <img class=\"country-flag\"\n              [src]=\"selectedCountry.flag\">\n         <i class=\"material-icons expand-icon\"\n            [ngClass]=\"{'active': isExpanded}\">expand_less</i>\n         <div class=\"code\">{{ selectedCountry.countryCallingCode }}</div>\n      </a>\n      <input class=\"phone-input\"\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             #input>\n   </div>\n\n   <div class=\"action-menu country-dropdown-list\"\n        *ngIf=\"isExpanded\">\n      <div class=\"action-menu-body\">\n         <!--Country's List-->\n         <a class=\"action-item\"\n            *ngFor=\"let country of countryList\"\n            [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n            (click)=\"countryChanged(country)\">\n            <img class=\"country-flag\"\n                 [src]=\"country.flag\">\n            <div>{{ country.countryName }}</div>\n            <div>{{ country.countryCallingCode }}</div>\n         </a>\n\n         <!--Custom Country-->\n         <a class=\"action-item\"\n            [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n            (click)=\"countryChanged(customCountry)\">\n            <img class=\"country-flag\"\n                 [src]=\"customCountry.flag\">\n            <div>{{ customCountry.countryName }}</div>\n            <div>{{ customCountry.countryCallingCode }}</div>\n         </a>\n      </div>\n   </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.phone-input-component{position:relative;width:100%}.phone-input-component .material-input,.phone-input-component .zen-input{display:flex;align-items:center;gap:4px;border:1px solid #D0D5DD;border-radius:10px;padding:8px 14px;background:#FFFFFF;transition:border-color .2s;box-sizing:border-box}.phone-input-component .material-input:focus-within,.phone-input-component .zen-input:focus-within{border-color:#2188d9;z-index:1;position:relative}.phone-input-component .material-input .country-select,.phone-input-component .zen-input .country-select{display:flex;align-items:center;gap:4px;cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;flex-shrink:0}.phone-input-component .material-input .country-select .country-flag,.phone-input-component .zen-input .country-select .country-flag{width:24px;height:24px;object-fit:contain}.phone-input-component .material-input .country-select .expand-icon,.phone-input-component .zen-input .country-select .expand-icon{color:#2188d9;font-size:20px;transition:transform .3s}.phone-input-component .material-input .country-select .expand-icon.active,.phone-input-component .zen-input .country-select .expand-icon.active{transform:rotate(180deg)}.phone-input-component .material-input .country-select .code,.phone-input-component .zen-input .country-select .code{font-style:normal;font-weight:500;font-size:15px;line-height:24px;color:#333;min-width:32px}.phone-input-component .material-input .country-select:focus .expand-icon,.phone-input-component .zen-input .country-select:focus .expand-icon{color:#2188d9}.phone-input-component .material-input .phone-input,.phone-input-component .zen-input .phone-input{flex:1;border:none;outline:none;font-style:normal;font-weight:400;font-size:15px;line-height:24px;color:#333;background:transparent;min-width:0}.phone-input-component .country-dropdown-list{width:100%;margin-top:6px;border-radius:12px;box-shadow:0 2px 8px #0000000f,0 1px 3px #0000000a}.phone-input-component .country-dropdown-list .action-menu-body{padding:6px 0}.phone-input-component .country-dropdown-list .action-menu-body .action-item{padding:10px 16px;gap:12px;font-size:16px;font-weight:400;line-height:24px;color:#333}.phone-input-component .country-dropdown-list .action-menu-body .action-item .country-flag{width:28px;height:28px;border-radius:50%;object-fit:cover}.phone-input-component .country-dropdown-list .action-menu-body .action-item.active{background:#F0F4F8}.phone-input-component .country-dropdown-list .action-menu-body .action-item:hover{background:#F4F9FD}\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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduPhoneInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'zen-phone-input', template: "<div class=\"phone-input-component\">\n   <div class=\"material-input\">\n      <a class=\"country-select\"\n         (click)=\"toggle()\">\n         <img class=\"country-flag\"\n              [src]=\"selectedCountry.flag\">\n         <i class=\"material-icons expand-icon\"\n            [ngClass]=\"{'active': isExpanded}\">expand_more</i>\n         <div class=\"code\">{{ selectedCountry.countryCallingCode }}</div>\n      </a>\n      <input class=\"phone-input\"\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             #input>\n   </div>\n\n   <div class=\"action-menu country-dropdown-list\"\n        *ngIf=\"isExpanded\">\n      <div class=\"action-menu-body\">\n         <!--Country's List-->\n         <a class=\"action-item\"\n            *ngFor=\"let country of countryList\"\n            [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n            (click)=\"countryChanged(country)\">\n            <img class=\"country-flag\"\n                 [src]=\"country.flag\">\n            <div>{{ country.countryName }}</div>\n            <div>{{ country.countryCallingCode }}</div>\n         </a>\n\n         <!--Custom Country-->\n         <a class=\"action-item\"\n            [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n            (click)=\"countryChanged(customCountry)\">\n            <img class=\"country-flag\"\n                 [src]=\"customCountry.flag\">\n            <div>{{ customCountry.countryName }}</div>\n            <div>{{ customCountry.countryCallingCode }}</div>\n         </a>\n      </div>\n   </div>\n</div>\n", styles: [".phone-input-component{position:relative;width:100%}.phone-input-component .material-input,.phone-input-component .zen-input{display:flex;align-items:center;gap:8px}.phone-input-component .material-input .country-select,.phone-input-component .zen-input .country-select{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none}.phone-input-component .material-input .country-select .expand-icon,.phone-input-component .zen-input .country-select .expand-icon{color:#60636c;transition:.3s}.phone-input-component .material-input .country-select .expand-icon.active,.phone-input-component .zen-input .country-select .expand-icon.active{color:#2188d9;transform:rotate(180deg)}.phone-input-component .material-input .country-select .code,.phone-input-component .zen-input .country-select .code{font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333}.phone-input-component .material-input .country-select:focus .expand-icon,.phone-input-component .zen-input .country-select:focus .expand-icon{color:#2188d9}.phone-input-component .material-input .phone-input,.phone-input-component .zen-input .phone-input{flex:1;border:none;outline:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#333;background:transparent}.phone-input-component .country-dropdown-list{width:inherit;margin-top:8px}\n"] }]
+            args: [{ selector: 'zen-phone-input', template: "<div class=\"phone-input-component\" [style.width]=\"width\">\n   <div class=\"material-input\">\n      <a class=\"country-select\"\n         (click)=\"toggle()\">\n         <img class=\"country-flag\"\n              [src]=\"selectedCountry.flag\">\n         <i class=\"material-icons expand-icon\"\n            [ngClass]=\"{'active': isExpanded}\">expand_less</i>\n         <div class=\"code\">{{ selectedCountry.countryCallingCode }}</div>\n      </a>\n      <input class=\"phone-input\"\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             #input>\n   </div>\n\n   <div class=\"action-menu country-dropdown-list\"\n        *ngIf=\"isExpanded\">\n      <div class=\"action-menu-body\">\n         <!--Country's List-->\n         <a class=\"action-item\"\n            *ngFor=\"let country of countryList\"\n            [ngClass]=\"{'active': selectedCountry.countryName === country.countryName}\"\n            (click)=\"countryChanged(country)\">\n            <img class=\"country-flag\"\n                 [src]=\"country.flag\">\n            <div>{{ country.countryName }}</div>\n            <div>{{ country.countryCallingCode }}</div>\n         </a>\n\n         <!--Custom Country-->\n         <a class=\"action-item\"\n            [ngClass]=\"{'active': selectedCountry.countryName === customCountry.countryName}\"\n            (click)=\"countryChanged(customCountry)\">\n            <img class=\"country-flag\"\n                 [src]=\"customCountry.flag\">\n            <div>{{ customCountry.countryName }}</div>\n            <div>{{ customCountry.countryCallingCode }}</div>\n         </a>\n      </div>\n   </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.phone-input-component{position:relative;width:100%}.phone-input-component .material-input,.phone-input-component .zen-input{display:flex;align-items:center;gap:4px;border:1px solid #D0D5DD;border-radius:10px;padding:8px 14px;background:#FFFFFF;transition:border-color .2s;box-sizing:border-box}.phone-input-component .material-input:focus-within,.phone-input-component .zen-input:focus-within{border-color:#2188d9;z-index:1;position:relative}.phone-input-component .material-input .country-select,.phone-input-component .zen-input .country-select{display:flex;align-items:center;gap:4px;cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;flex-shrink:0}.phone-input-component .material-input .country-select .country-flag,.phone-input-component .zen-input .country-select .country-flag{width:24px;height:24px;object-fit:contain}.phone-input-component .material-input .country-select .expand-icon,.phone-input-component .zen-input .country-select .expand-icon{color:#2188d9;font-size:20px;transition:transform .3s}.phone-input-component .material-input .country-select .expand-icon.active,.phone-input-component .zen-input .country-select .expand-icon.active{transform:rotate(180deg)}.phone-input-component .material-input .country-select .code,.phone-input-component .zen-input .country-select .code{font-style:normal;font-weight:500;font-size:15px;line-height:24px;color:#333;min-width:32px}.phone-input-component .material-input .country-select:focus .expand-icon,.phone-input-component .zen-input .country-select:focus .expand-icon{color:#2188d9}.phone-input-component .material-input .phone-input,.phone-input-component .zen-input .phone-input{flex:1;border:none;outline:none;font-style:normal;font-weight:400;font-size:15px;line-height:24px;color:#333;background:transparent;min-width:0}.phone-input-component .country-dropdown-list{width:100%;margin-top:6px;border-radius:12px;box-shadow:0 2px 8px #0000000f,0 1px 3px #0000000a}.phone-input-component .country-dropdown-list .action-menu-body{padding:6px 0}.phone-input-component .country-dropdown-list .action-menu-body .action-item{padding:10px 16px;gap:12px;font-size:16px;font-weight:400;line-height:24px;color:#333}.phone-input-component .country-dropdown-list .action-menu-body .action-item .country-flag{width:28px;height:28px;border-radius:50%;object-fit:cover}.phone-input-component .country-dropdown-list .action-menu-body .action-item.active{background:#F0F4F8}.phone-input-component .country-dropdown-list .action-menu-body .action-item:hover{background:#F4F9FD}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { phone: [{
                 type: Input
             }], maxLength: [{
@@ -3115,6 +3115,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }], disabled: [{
                 type: Input
+            }], width: [{
+                type: Input
             }] } });
 
 class ZenduSortHeaderComponent {
@@ -5992,10 +5994,10 @@ class ZenduTimepickerComponent {
     }
 }
 ZenduTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduTimepickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ZenduTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduTimepickerComponent, selector: "zen-timepicker", inputs: { mode: "mode", label: "label", value: "value", showSeconds: "showSeconds", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange", apply: "apply", clear: "clear" }, host: { listeners: { "window:mousedown": "outsideClick($event)" } }, viewQueries: [{ propertyName: "pickerPopup", first: true, predicate: ["pickerPopup"], descendants: true }], 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      <!-- Scroll Columns -->\n      <div class=\"zen-tp__columns\">\n        <!-- Hours -->\n        <div class=\"zen-tp__scroll-group\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'hours')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let h of hours\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"h === selectedHours\"\n                 (click)=\"selectHour(h)\">\n              {{ formatNum(h) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator\">{{ hourSeparator }}</span>\n\n        <!-- Minutes -->\n        <div class=\"zen-tp__scroll-group\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'minutes')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let m of minutes\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"m === selectedMinutes\"\n                 (click)=\"selectMinute(m)\">\n              {{ formatNum(m) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator\" *ngIf=\"showSeconds && mode === 'clock'\">:</span>\n        <span class=\"zen-tp__separator zen-tp__separator--unit\" *ngIf=\"mode === 'duration'\">min</span>\n\n        <!-- Seconds -->\n        <div class=\"zen-tp__scroll-group\" *ngIf=\"showSeconds\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'seconds')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let s of seconds\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"s === selectedSeconds\"\n                 (click)=\"selectSecond(s)\">\n              {{ formatNum(s) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator zen-tp__separator--unit\"\n              *ngIf=\"mode === 'duration' && showSeconds\">\n          sec\n        </span>\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                  [class.zen-tp__period-btn--active]=\"selectedPeriod === 'AM'\"\n                  (click)=\"selectPeriod('AM')\">\n            AM\n          </button>\n          <button class=\"zen-tp__period-btn\"\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\" [class.zen-tp__actions--full]=\"mode === 'duration'\">\n        <button class=\"zen-tp__btn zen-tp__btn--clear\" (click)=\"onClear()\">Clear</button>\n        <button class=\"zen-tp__btn zen-tp__btn--apply\" (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;transition:.3s;background:var(--color-white-primary, #ffffff);-webkit-appearance:none;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:16px;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.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;border-color:var(--color-white-tint-3, #e0e0e0)}.zen-tp__toggle--disabled .zen-tp__display{color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--disabled .zen-tp__icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.zen-tp__toggle--readonly .zen-tp__display{color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--readonly .zen-tp__icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.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:#ffffff;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__columns{display:flex;align-items:center;gap:24px}.zen-tp__scroll-group{position:relative;width:38px;height:126px;overflow:hidden}.zen-tp__scroll-col{width:100%;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;-ms-overflow-style:none;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none}.zen-tp__scroll-col::-webkit-scrollbar{display:none}.zen-tp__scroll-col:active{cursor:grabbing}.zen-tp__scroll-spacer{height:42px;flex-shrink:0}.zen-tp__scroll-item{height:42px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;scroll-snap-align:center;cursor:pointer;transition:opacity .15s ease;opacity:.4;position:relative;z-index:1}.zen-tp__scroll-item--selected{opacity:1}.zen-tp__highlight{position:absolute;top:50%;left:0;right:0;height:42px;transform:translateY(-50%);background:#f2f4f7;border-radius:8px;pointer-events:none;z-index:0}.zen-tp__fade{position:absolute;left:0;right:0;height:44px;pointer-events:none;z-index:2}.zen-tp__fade--top{top:0;background:linear-gradient(to bottom,#ffffff,rgba(255,255,255,0))}.zen-tp__fade--bottom{bottom:0;background:linear-gradient(to top,#ffffff,rgba(255,255,255,0))}.zen-tp__separator{font-size:14px;font-weight:500;line-height:20px;color:#667085;flex-shrink:0;-webkit-user-select:none;user-select:none}.zen-tp__period{display:flex;flex-direction:column;gap:16px;flex-shrink:0}.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:#ffffff;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__actions--full{width:100%}.zen-tp__actions--full .zen-tp__btn{flex:1}.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:#ffffff;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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src"] }] });
+ZenduTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduTimepickerComponent, selector: "zen-timepicker", inputs: { mode: "mode", label: "label", value: "value", showSeconds: "showSeconds", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange", apply: "apply", clear: "clear" }, host: { listeners: { "window:mousedown": "outsideClick($event)" } }, viewQueries: [{ propertyName: "pickerPopup", first: true, predicate: ["pickerPopup"], descendants: true }], 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      <!-- Scroll Columns -->\n      <div class=\"zen-tp__columns\">\n        <!-- Hours -->\n        <div class=\"zen-tp__scroll-group\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'hours')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let h of hours\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"h === selectedHours\"\n                 (click)=\"selectHour(h)\">\n              {{ formatNum(h) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator\">{{ hourSeparator }}</span>\n\n        <!-- Minutes -->\n        <div class=\"zen-tp__scroll-group\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'minutes')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let m of minutes\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"m === selectedMinutes\"\n                 (click)=\"selectMinute(m)\">\n              {{ formatNum(m) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator\" *ngIf=\"showSeconds && mode === 'clock'\">:</span>\n        <span class=\"zen-tp__separator zen-tp__separator--unit\" *ngIf=\"mode === 'duration'\">min</span>\n\n        <!-- Seconds -->\n        <div class=\"zen-tp__scroll-group\" *ngIf=\"showSeconds\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'seconds')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let s of seconds\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"s === selectedSeconds\"\n                 (click)=\"selectSecond(s)\">\n              {{ formatNum(s) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator zen-tp__separator--unit\"\n              *ngIf=\"mode === 'duration' && showSeconds\">\n          sec\n        </span>\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                  [class.zen-tp__period-btn--active]=\"selectedPeriod === 'AM'\"\n                  (click)=\"selectPeriod('AM')\">\n            AM\n          </button>\n          <button class=\"zen-tp__period-btn\"\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\" [class.zen-tp__actions--full]=\"mode === 'duration'\">\n        <button class=\"zen-tp__btn zen-tp__btn--clear\" (click)=\"onClear()\">Clear</button>\n        <button class=\"zen-tp__btn zen-tp__btn--apply\" (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;transition:.3s;background:var(--color-white-primary, #ffffff);-webkit-appearance:none;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:16px;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.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;border-color:var(--color-white-tint-3, #e0e0e0)}.zen-tp__toggle--disabled .zen-tp__display{color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--disabled .zen-tp__icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.zen-tp__toggle--readonly .zen-tp__display{color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--readonly .zen-tp__icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.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:#FFFFFF;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__columns{display:flex;align-items:center;gap:24px}.zen-tp__scroll-group{position:relative;width:38px;height:126px;overflow:hidden}.zen-tp__scroll-col{width:100%;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;-ms-overflow-style:none;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none}.zen-tp__scroll-col::-webkit-scrollbar{display:none}.zen-tp__scroll-col:active{cursor:grabbing}.zen-tp__scroll-spacer{height:42px;flex-shrink:0}.zen-tp__scroll-item{height:42px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;scroll-snap-align:center;cursor:pointer;transition:opacity .15s ease;opacity:.4;position:relative;z-index:1}.zen-tp__scroll-item--selected{opacity:1}.zen-tp__highlight{position:absolute;top:50%;left:0;right:0;height:42px;transform:translateY(-50%);background:#F2F4F7;border-radius:8px;pointer-events:none;z-index:0}.zen-tp__fade{position:absolute;left:0;right:0;height:44px;pointer-events:none;z-index:2}.zen-tp__fade--top{top:0;background:linear-gradient(to bottom,#FFFFFF,rgba(255,255,255,0))}.zen-tp__fade--bottom{bottom:0;background:linear-gradient(to top,#FFFFFF,rgba(255,255,255,0))}.zen-tp__separator{font-size:14px;font-weight:500;line-height:20px;color:#667085;flex-shrink:0;-webkit-user-select:none;user-select:none}.zen-tp__period{display:flex;flex-direction:column;gap:16px;flex-shrink:0}.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:#FFFFFF;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__actions--full{width:100%}.zen-tp__actions--full .zen-tp__btn{flex:1}.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:#FFFFFF;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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduTimepickerComponent, decorators: [{
             type: Component,
-            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      <!-- Scroll Columns -->\n      <div class=\"zen-tp__columns\">\n        <!-- Hours -->\n        <div class=\"zen-tp__scroll-group\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'hours')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let h of hours\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"h === selectedHours\"\n                 (click)=\"selectHour(h)\">\n              {{ formatNum(h) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator\">{{ hourSeparator }}</span>\n\n        <!-- Minutes -->\n        <div class=\"zen-tp__scroll-group\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'minutes')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let m of minutes\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"m === selectedMinutes\"\n                 (click)=\"selectMinute(m)\">\n              {{ formatNum(m) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator\" *ngIf=\"showSeconds && mode === 'clock'\">:</span>\n        <span class=\"zen-tp__separator zen-tp__separator--unit\" *ngIf=\"mode === 'duration'\">min</span>\n\n        <!-- Seconds -->\n        <div class=\"zen-tp__scroll-group\" *ngIf=\"showSeconds\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'seconds')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let s of seconds\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"s === selectedSeconds\"\n                 (click)=\"selectSecond(s)\">\n              {{ formatNum(s) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator zen-tp__separator--unit\"\n              *ngIf=\"mode === 'duration' && showSeconds\">\n          sec\n        </span>\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                  [class.zen-tp__period-btn--active]=\"selectedPeriod === 'AM'\"\n                  (click)=\"selectPeriod('AM')\">\n            AM\n          </button>\n          <button class=\"zen-tp__period-btn\"\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\" [class.zen-tp__actions--full]=\"mode === 'duration'\">\n        <button class=\"zen-tp__btn zen-tp__btn--clear\" (click)=\"onClear()\">Clear</button>\n        <button class=\"zen-tp__btn zen-tp__btn--apply\" (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;transition:.3s;background:var(--color-white-primary, #ffffff);-webkit-appearance:none;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:16px;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.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;border-color:var(--color-white-tint-3, #e0e0e0)}.zen-tp__toggle--disabled .zen-tp__display{color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--disabled .zen-tp__icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.zen-tp__toggle--readonly .zen-tp__display{color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--readonly .zen-tp__icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.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:#ffffff;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__columns{display:flex;align-items:center;gap:24px}.zen-tp__scroll-group{position:relative;width:38px;height:126px;overflow:hidden}.zen-tp__scroll-col{width:100%;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;-ms-overflow-style:none;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none}.zen-tp__scroll-col::-webkit-scrollbar{display:none}.zen-tp__scroll-col:active{cursor:grabbing}.zen-tp__scroll-spacer{height:42px;flex-shrink:0}.zen-tp__scroll-item{height:42px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;scroll-snap-align:center;cursor:pointer;transition:opacity .15s ease;opacity:.4;position:relative;z-index:1}.zen-tp__scroll-item--selected{opacity:1}.zen-tp__highlight{position:absolute;top:50%;left:0;right:0;height:42px;transform:translateY(-50%);background:#f2f4f7;border-radius:8px;pointer-events:none;z-index:0}.zen-tp__fade{position:absolute;left:0;right:0;height:44px;pointer-events:none;z-index:2}.zen-tp__fade--top{top:0;background:linear-gradient(to bottom,#ffffff,rgba(255,255,255,0))}.zen-tp__fade--bottom{bottom:0;background:linear-gradient(to top,#ffffff,rgba(255,255,255,0))}.zen-tp__separator{font-size:14px;font-weight:500;line-height:20px;color:#667085;flex-shrink:0;-webkit-user-select:none;user-select:none}.zen-tp__period{display:flex;flex-direction:column;gap:16px;flex-shrink:0}.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:#ffffff;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__actions--full{width:100%}.zen-tp__actions--full .zen-tp__btn{flex:1}.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:#ffffff;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"] }]
+            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      <!-- Scroll Columns -->\n      <div class=\"zen-tp__columns\">\n        <!-- Hours -->\n        <div class=\"zen-tp__scroll-group\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'hours')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let h of hours\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"h === selectedHours\"\n                 (click)=\"selectHour(h)\">\n              {{ formatNum(h) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator\">{{ hourSeparator }}</span>\n\n        <!-- Minutes -->\n        <div class=\"zen-tp__scroll-group\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'minutes')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let m of minutes\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"m === selectedMinutes\"\n                 (click)=\"selectMinute(m)\">\n              {{ formatNum(m) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator\" *ngIf=\"showSeconds && mode === 'clock'\">:</span>\n        <span class=\"zen-tp__separator zen-tp__separator--unit\" *ngIf=\"mode === 'duration'\">min</span>\n\n        <!-- Seconds -->\n        <div class=\"zen-tp__scroll-group\" *ngIf=\"showSeconds\">\n          <div class=\"zen-tp__scroll-col\"\n               #scrollCol\n               (scroll)=\"onScroll($event, 'seconds')\"\n               (mousedown)=\"onMouseDown($event, scrollCol)\"\n               (mousemove)=\"onMouseMove($event, scrollCol)\"\n               (mouseup)=\"onMouseUp()\"\n               (mouseleave)=\"onMouseUp()\">\n            <div class=\"zen-tp__scroll-spacer\"></div>\n            <div *ngFor=\"let s of seconds\"\n                 class=\"zen-tp__scroll-item\"\n                 [class.zen-tp__scroll-item--selected]=\"s === selectedSeconds\"\n                 (click)=\"selectSecond(s)\">\n              {{ formatNum(s) }}\n            </div>\n            <div class=\"zen-tp__scroll-spacer\"></div>\n          </div>\n          <div class=\"zen-tp__fade zen-tp__fade--top\"></div>\n          <div class=\"zen-tp__fade zen-tp__fade--bottom\"></div>\n          <div class=\"zen-tp__highlight\"></div>\n        </div>\n\n        <span class=\"zen-tp__separator zen-tp__separator--unit\"\n              *ngIf=\"mode === 'duration' && showSeconds\">\n          sec\n        </span>\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                  [class.zen-tp__period-btn--active]=\"selectedPeriod === 'AM'\"\n                  (click)=\"selectPeriod('AM')\">\n            AM\n          </button>\n          <button class=\"zen-tp__period-btn\"\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\" [class.zen-tp__actions--full]=\"mode === 'duration'\">\n        <button class=\"zen-tp__btn zen-tp__btn--clear\" (click)=\"onClear()\">Clear</button>\n        <button class=\"zen-tp__btn zen-tp__btn--apply\" (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;transition:.3s;background:var(--color-white-primary, #ffffff);-webkit-appearance:none;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:16px;font-weight:400;line-height:130%;color:var(--color-grey-primary, #4f4f4f)}.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;border-color:var(--color-white-tint-3, #e0e0e0)}.zen-tp__toggle--disabled .zen-tp__display{color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--disabled .zen-tp__icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--readonly{cursor:default;border-color:var(--color-white-tint-3, #e0e0e0)}.zen-tp__toggle--readonly .zen-tp__display{color:var(--color-white-tint-3, #e0e0e0)!important}.zen-tp__toggle--readonly .zen-tp__icon{background-color:var(--color-white-tint-3, #e0e0e0)!important}.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:#FFFFFF;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__columns{display:flex;align-items:center;gap:24px}.zen-tp__scroll-group{position:relative;width:38px;height:126px;overflow:hidden}.zen-tp__scroll-col{width:100%;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;-ms-overflow-style:none;scrollbar-width:none;cursor:grab;-webkit-user-select:none;user-select:none}.zen-tp__scroll-col::-webkit-scrollbar{display:none}.zen-tp__scroll-col:active{cursor:grabbing}.zen-tp__scroll-spacer{height:42px;flex-shrink:0}.zen-tp__scroll-item{height:42px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;scroll-snap-align:center;cursor:pointer;transition:opacity .15s ease;opacity:.4;position:relative;z-index:1}.zen-tp__scroll-item--selected{opacity:1}.zen-tp__highlight{position:absolute;top:50%;left:0;right:0;height:42px;transform:translateY(-50%);background:#F2F4F7;border-radius:8px;pointer-events:none;z-index:0}.zen-tp__fade{position:absolute;left:0;right:0;height:44px;pointer-events:none;z-index:2}.zen-tp__fade--top{top:0;background:linear-gradient(to bottom,#FFFFFF,rgba(255,255,255,0))}.zen-tp__fade--bottom{bottom:0;background:linear-gradient(to top,#FFFFFF,rgba(255,255,255,0))}.zen-tp__separator{font-size:14px;font-weight:500;line-height:20px;color:#667085;flex-shrink:0;-webkit-user-select:none;user-select:none}.zen-tp__period{display:flex;flex-direction:column;gap:16px;flex-shrink:0}.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:#FFFFFF;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__actions--full{width:100%}.zen-tp__actions--full .zen-tp__btn{flex:1}.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:#FFFFFF;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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { mode: [{
                 type: Input
             }], label: [{
@@ -6026,6 +6028,823 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['window:mousedown', ['$event']]
             }] } });
 
+const EMOJI_CATEGORIES = [
+    {
+        key: 'smileys', label: 'Smileys', icon: '😀',
+        emojis: ['😀', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '😉', '😊', '🥰', '😍', '😘', '😋', '😛', '😜', '🤔', '😏', '🙄', '😬', '😴', '🤯']
+    },
+    {
+        key: 'gestures', label: 'Gestures', icon: '👋',
+        emojis: ['👋', '✋', '👌', '✌', '🤞', '🤙', '👍', '👎', '👏', '🙌', '🤝', '🙏']
+    },
+    {
+        key: 'hearts', label: 'Hearts', icon: '❤️',
+        emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '💔', '💕', '💖']
+    },
+    {
+        key: 'objects', label: 'Objects', icon: '⭐',
+        emojis: ['⭐', '🔥', '✨', '🎉', '🏆', '💯', '✅', '❌', '⚡', '💡', '🔔', '🔗']
+    },
+];
+class ZenduCommentTextareaComponent {
+    constructor() {
+        this.value = '';
+        this.valueChange = new EventEmitter();
+        this.label = '';
+        this.placeholder = 'Enter a comment...';
+        this.rows = 4;
+        this.fileTypes = '*/*';
+        this.loading = false;
+        this.addComment = new EventEmitter();
+        this.filesChanged = new EventEmitter();
+        this.save = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.editing = false;
+        this.emojiPickerOpen = false;
+        this.emojiCategories = EMOJI_CATEGORIES;
+        this.activeEmojiCategory = EMOJI_CATEGORIES[0].key;
+        this.attachments = [];
+    }
+    ngOnInit() {
+        var _a;
+        if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.editing = true;
+        }
+    }
+    onDocumentClick(event) {
+        if (!this.emojiPickerOpen)
+            return;
+        const target = event.target;
+        if (!target.closest('.zen-emoji-picker') && !target.closest('.zen-comment-textarea__icon-btn[title="Emoji"]')) {
+            this.emojiPickerOpen = false;
+        }
+    }
+    onInput(value) {
+        this.value = value;
+        this.valueChange.emit(value);
+        this.editing = value.length > 0 || this.attachments.length > 0;
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.onAddComment();
+        }
+    }
+    onAddComment() {
+        if (this.loading)
+            return;
+        if (this.value.trim() || this.attachments.length) {
+            this.addComment.emit({ text: this.value, files: this.attachments.map(a => a.file) });
+        }
+    }
+    onSave() {
+        if (this.loading)
+            return;
+        if (this.value.trim() || this.attachments.length) {
+            this.save.emit({ text: this.value, files: this.attachments.map(a => a.file) });
+        }
+    }
+    reset() {
+        this.value = '';
+        this.valueChange.emit(this.value);
+        this.attachments = [];
+        this.filesChanged.emit([]);
+        this.editing = false;
+    }
+    onCancel() {
+        this.value = '';
+        this.valueChange.emit(this.value);
+        this.attachments = [];
+        this.filesChanged.emit([]);
+        this.editing = false;
+        this.cancel.emit();
+    }
+    toggleEmojiPicker() {
+        this.emojiPickerOpen = !this.emojiPickerOpen;
+    }
+    selectEmoji(emoji) {
+        this.value += emoji;
+        this.valueChange.emit(this.value);
+        this.editing = true;
+        this.emojiPickerOpen = false;
+    }
+    setEmojiCategory(key) {
+        this.activeEmojiCategory = key;
+    }
+    get activeEmojis() {
+        const cat = this.emojiCategories.find(c => c.key === this.activeEmojiCategory);
+        return cat ? cat.emojis : [];
+    }
+    onFileInput(event) {
+        var _a;
+        const input = event.target;
+        if (!((_a = input.files) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        for (let i = 0; i < input.files.length; i++) {
+            const file = input.files[i];
+            this.attachments.push({
+                file,
+                name: file.name,
+                size: this.formatFileSize(file.size),
+                progress: 100,
+                complete: true,
+            });
+        }
+        this.editing = true;
+        this.filesChanged.emit(this.attachments.map(a => a.file));
+        input.value = '';
+    }
+    removeAttachment(index) {
+        this.attachments.splice(index, 1);
+        this.filesChanged.emit(this.attachments.map(a => a.file));
+        if (!this.attachments.length && !this.value) {
+            this.editing = false;
+        }
+    }
+    getFileIcon(name) {
+        var _a;
+        const ext = ((_a = name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+        if (['pdf', 'doc', 'docx', 'txt', 'xls', 'xlsx', 'csv', 'ppt', 'pptx'].includes(ext))
+            return 'document';
+        if (['mp4', 'mov', 'avi', 'mkv', 'webm', 'flv'].includes(ext))
+            return 'video';
+        return 'misc';
+    }
+    formatFileSize(bytes) {
+        if (bytes < 1024)
+            return bytes + ' B';
+        if (bytes < 1024 * 1024)
+            return (bytes / 1024).toFixed(0) + ' KB';
+        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+}
+ZenduCommentTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCommentTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduCommentTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduCommentTextareaComponent, selector: "zen-comment-textarea", inputs: { value: "value", label: "label", placeholder: "placeholder", rows: "rows", fileTypes: "fileTypes", loading: "loading" }, outputs: { valueChange: "valueChange", addComment: "addComment", filesChanged: "filesChanged", save: "save", cancel: "cancel" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"zen-comment-textarea\" [class.zen-comment-textarea--loading]=\"loading\">\n  <!-- Label -->\n  <label *ngIf=\"label\" class=\"zen-comment-textarea__label\">{{ label }}</label>\n\n  <!-- Main box (top: attachments + textarea, bottom: toolbar) -->\n  <div class=\"zen-comment-textarea__input-wrapper\">\n    <!-- Attachments inside the textarea area -->\n    <div class=\"zen-comment-textarea__attachments\" *ngIf=\"attachments.length\">\n      <div class=\"zen-attachment\"\n           *ngFor=\"let att of attachments; let i = index\">\n        <div class=\"zen-attachment__content\">\n          <div class=\"zen-attachment__icon\" [ngSwitch]=\"getFileIcon(att.name)\">\n            <svg *ngSwitchCase=\"'document'\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <polyline points=\"14,2 14,8 20,8\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n            <svg *ngSwitchCase=\"'video'\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2.18\" ry=\"2.18\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"22\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"17\" y1=\"2\" x2=\"17\" y2=\"22\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n            <svg *ngSwitchCase=\"'misc'\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <polyline points=\"16,16 12,12 8,16\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n          <div class=\"zen-attachment__info\">\n            <div class=\"zen-attachment__name\">{{ att.name }}</div>\n            <div class=\"zen-attachment__size\">{{ att.size }}</div>\n          </div>\n        </div>\n        <button type=\"button\" class=\"zen-attachment__remove\" (click)=\"removeAttachment(i)\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polyline points=\"3,6 5,6 21,6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n\n    <!-- Textarea -->\n    <textarea class=\"zen-comment-textarea__input\"\n              [rows]=\"rows\"\n              [placeholder]=\"placeholder\"\n              [value]=\"value\"\n              [disabled]=\"loading\"\n              (input)=\"onInput($any($event.target).value)\"\n              (keydown)=\"onKeydown($event)\"></textarea>\n  </div>\n\n  <!-- Toolbar (bottom part with rounded bottom corners) -->\n  <div class=\"zen-comment-textarea__toolbar\">\n    <div class=\"zen-comment-textarea__toolbar-divider\"></div>\n\n    <div class=\"zen-comment-textarea__toolbar-content\">\n      <!-- Icon buttons -->\n      <div class=\"zen-comment-textarea__toolbar-icons\">\n        <div class=\"zen-comment-textarea__emoji-wrapper\">\n          <button type=\"button\"\n                  class=\"zen-comment-textarea__icon-btn\"\n                  [class.zen-comment-textarea__icon-btn--active]=\"emojiPickerOpen\"\n                  title=\"Emoji\"\n                  (click)=\"toggleEmojiPicker()\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n\n          <!-- Emoji picker -->\n          <div class=\"zen-emoji-picker\" *ngIf=\"emojiPickerOpen\">\n            <div class=\"zen-emoji-picker__grid\">\n              <button type=\"button\"\n                      class=\"zen-emoji-picker__emoji\"\n                      *ngFor=\"let emoji of activeEmojis\"\n                      (click)=\"selectEmoji(emoji)\">\n                {{ emoji }}\n              </button>\n            </div>\n            <div class=\"zen-emoji-picker__categories\">\n              <button type=\"button\"\n                      class=\"zen-emoji-picker__category\"\n                      [class.zen-emoji-picker__category--active]=\"cat.key === activeEmojiCategory\"\n                      *ngFor=\"let cat of emojiCategories\"\n                      (click)=\"setEmojiCategory(cat.key)\">\n                {{ cat.icon }}\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <button type=\"button\"\n                class=\"zen-comment-textarea__icon-btn\"\n                title=\"Attach file\"\n                (click)=\"fileInput.click()\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M21.44 11.05L12.25 20.24C11.1242 21.3658 9.59723 21.9983 8.00505 21.9983C6.41286 21.9983 4.88589 21.3658 3.76005 20.24C2.6342 19.1142 2.00171 17.5872 2.00171 15.995C2.00171 14.4029 2.6342 12.8759 3.76005 11.75L12.95 2.56C13.7006 1.80944 14.7186 1.3877 15.78 1.3877C16.8415 1.3877 17.8595 1.80944 18.61 2.56C19.3606 3.31057 19.7823 4.32863 19.7823 5.39C19.7823 6.45138 19.3606 7.46944 18.61 8.22L9.41005 17.41C9.03476 17.7853 8.52573 17.9961 7.99505 17.9961C7.46436 17.9961 6.95533 17.7853 6.58005 17.41C6.20476 17.0347 5.99389 16.5257 5.99389 15.995C5.99389 15.4644 6.20476 14.9553 6.58005 14.58L15.07 6.1\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <input type=\"file\" #fileInput [accept]=\"fileTypes\" multiple hidden (change)=\"onFileInput($event)\" />\n      </div>\n\n      <!-- Right side actions -->\n      <div class=\"zen-comment-textarea__actions\" *ngIf=\"!editing\">\n        <span class=\"zen-comment-textarea__hint\">Press enter</span>\n        <svg class=\"zen-comment-textarea__return-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M3.33337 12.5L6.66671 15.8333M3.33337 12.5L6.66671 9.16667M3.33337 12.5H13.3334C14.2175 12.5 15.0653 12.1488 15.6904 11.5237C16.3155 10.8986 16.6667 10.0507 16.6667 9.16667V4.16667\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <span class=\"zen-comment-textarea__hint\">to</span>\n        <button type=\"button\" class=\"zen-comment-textarea__add-btn\" [disabled]=\"loading\" (click)=\"onAddComment()\">\n          <span class=\"zen-comment-textarea__spinner\" *ngIf=\"loading\"></span>\n          {{ loading ? 'Sending...' : 'Add Comment' }}\n        </button>\n      </div>\n\n      <div class=\"zen-comment-textarea__actions\" *ngIf=\"editing\">\n        <button type=\"button\" class=\"zen-comment-textarea__cancel-btn\" [disabled]=\"loading\" (click)=\"onCancel()\">\n          Cancel\n        </button>\n        <button type=\"button\" class=\"zen-comment-textarea__save-btn\" [disabled]=\"loading\" (click)=\"onSave()\">\n          <span class=\"zen-comment-textarea__spinner\" *ngIf=\"loading\"></span>\n          {{ loading ? 'Saving...' : 'Save' }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".zen-comment-textarea{display:flex;flex-direction:column;width:100%}.zen-comment-textarea--loading{opacity:.7;pointer-events:none}.zen-comment-textarea__spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:zen-spin .6s linear infinite;vertical-align:middle;margin-right:4px}.zen-comment-textarea__label{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#344054;margin-bottom:6px}.zen-comment-textarea__input-wrapper{background:#FFFFFF;border:1px solid #D0D5DD;border-bottom:none;border-radius:8px 8px 0 0;box-shadow:0 1px 2px #1018280d}.zen-comment-textarea__attachments{display:flex;flex-direction:column;gap:8px;padding:10px 14px 0}.zen-comment-textarea__input{display:block;width:100%;min-height:86px;padding:10px 14px 0;border:none;outline:none;resize:vertical;font-family:Inter,sans-serif;font-weight:400;font-size:16px;line-height:24px;color:#101828;background:transparent;box-sizing:border-box}.zen-comment-textarea__input::placeholder{color:#667085}.zen-comment-textarea__toolbar{background:#FFFFFF;border:1px solid #D0D5DD;border-top:none;border-radius:0 0 8px 8px;padding:0 14px 8px}.zen-comment-textarea__toolbar-divider{height:1px;background:#EAECF0;margin-bottom:8px}.zen-comment-textarea__toolbar-content{display:flex;align-items:center;justify-content:space-between}.zen-comment-textarea__toolbar-icons{display:flex;gap:4px;align-items:center}.zen-comment-textarea__emoji-wrapper{position:relative}.zen-comment-textarea__icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:8px;cursor:pointer;padding:8px}.zen-comment-textarea__icon-btn:hover,.zen-comment-textarea__icon-btn--active{background:#F2F4F7}.zen-comment-textarea__icon-btn svg{flex-shrink:0}.zen-comment-textarea__actions{display:flex;align-items:center;gap:6px}.zen-comment-textarea__hint{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#667085}.zen-comment-textarea__return-icon{flex-shrink:0}.zen-comment-textarea__add-btn{border:none;background:transparent;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#105494;cursor:pointer;padding:0}.zen-comment-textarea__add-btn:hover{text-decoration:underline}.zen-comment-textarea__cancel-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;background:#FFFFFF;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:pointer}.zen-comment-textarea__cancel-btn:hover{background:#F9FAFB}.zen-comment-textarea__save-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;background:#136AB6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer}.zen-comment-textarea__save-btn:hover{background:#105494;border-color:#105494}.zen-attachment{display:flex;align-items:center;gap:4px;padding:12px;background:#F9FAFB;border:1px solid #EAECF0;border-radius:8px}.zen-attachment__content{display:flex;flex:1;gap:12px;align-items:center;min-width:0}.zen-attachment__icon{flex-shrink:0;width:32px;height:32px;background:#E3EEFB;border:4px solid #F1F7FE;border-radius:28px;display:flex;align-items:center;justify-content:center}.zen-attachment__info{flex:1;min-width:0}.zen-attachment__name{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zen-attachment__size{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#667085}.zen-attachment__remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:8px;cursor:pointer;padding:8px;margin:-8px}.zen-attachment__remove:hover{background:#F2F4F7}.zen-emoji-picker{position:absolute;bottom:calc(100% + 4px);left:0;z-index:1000;background:#FFFFFF;border:1px solid #EAECF0;border-radius:12px;box-shadow:0 4px 16px #1018281f;width:320px;overflow:hidden}.zen-emoji-picker__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:12px;max-height:200px;overflow-y:auto}.zen-emoji-picker__emoji{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:20px;line-height:1;padding:0}.zen-emoji-picker__emoji:hover{background:#F2F4F7}.zen-emoji-picker__categories{display:flex;gap:4px;padding:8px 12px;border-top:1px solid #EAECF0}.zen-emoji-picker__category{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:16px;padding:0}.zen-emoji-picker__category:hover{background:#F2F4F7}.zen-emoji-picker__category--active{background:#E3EEFB}@keyframes zen-spin{to{transform:rotate(360deg)}}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCommentTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-comment-textarea', template: "<div class=\"zen-comment-textarea\" [class.zen-comment-textarea--loading]=\"loading\">\n  <!-- Label -->\n  <label *ngIf=\"label\" class=\"zen-comment-textarea__label\">{{ label }}</label>\n\n  <!-- Main box (top: attachments + textarea, bottom: toolbar) -->\n  <div class=\"zen-comment-textarea__input-wrapper\">\n    <!-- Attachments inside the textarea area -->\n    <div class=\"zen-comment-textarea__attachments\" *ngIf=\"attachments.length\">\n      <div class=\"zen-attachment\"\n           *ngFor=\"let att of attachments; let i = index\">\n        <div class=\"zen-attachment__content\">\n          <div class=\"zen-attachment__icon\" [ngSwitch]=\"getFileIcon(att.name)\">\n            <svg *ngSwitchCase=\"'document'\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <polyline points=\"14,2 14,8 20,8\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n            <svg *ngSwitchCase=\"'video'\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2.18\" ry=\"2.18\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"22\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"17\" y1=\"2\" x2=\"17\" y2=\"22\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n            <svg *ngSwitchCase=\"'misc'\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <polyline points=\"16,16 12,12 8,16\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n          <div class=\"zen-attachment__info\">\n            <div class=\"zen-attachment__name\">{{ att.name }}</div>\n            <div class=\"zen-attachment__size\">{{ att.size }}</div>\n          </div>\n        </div>\n        <button type=\"button\" class=\"zen-attachment__remove\" (click)=\"removeAttachment(i)\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polyline points=\"3,6 5,6 21,6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n\n    <!-- Textarea -->\n    <textarea class=\"zen-comment-textarea__input\"\n              [rows]=\"rows\"\n              [placeholder]=\"placeholder\"\n              [value]=\"value\"\n              [disabled]=\"loading\"\n              (input)=\"onInput($any($event.target).value)\"\n              (keydown)=\"onKeydown($event)\"></textarea>\n  </div>\n\n  <!-- Toolbar (bottom part with rounded bottom corners) -->\n  <div class=\"zen-comment-textarea__toolbar\">\n    <div class=\"zen-comment-textarea__toolbar-divider\"></div>\n\n    <div class=\"zen-comment-textarea__toolbar-content\">\n      <!-- Icon buttons -->\n      <div class=\"zen-comment-textarea__toolbar-icons\">\n        <div class=\"zen-comment-textarea__emoji-wrapper\">\n          <button type=\"button\"\n                  class=\"zen-comment-textarea__icon-btn\"\n                  [class.zen-comment-textarea__icon-btn--active]=\"emojiPickerOpen\"\n                  title=\"Emoji\"\n                  (click)=\"toggleEmojiPicker()\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n\n          <!-- Emoji picker -->\n          <div class=\"zen-emoji-picker\" *ngIf=\"emojiPickerOpen\">\n            <div class=\"zen-emoji-picker__grid\">\n              <button type=\"button\"\n                      class=\"zen-emoji-picker__emoji\"\n                      *ngFor=\"let emoji of activeEmojis\"\n                      (click)=\"selectEmoji(emoji)\">\n                {{ emoji }}\n              </button>\n            </div>\n            <div class=\"zen-emoji-picker__categories\">\n              <button type=\"button\"\n                      class=\"zen-emoji-picker__category\"\n                      [class.zen-emoji-picker__category--active]=\"cat.key === activeEmojiCategory\"\n                      *ngFor=\"let cat of emojiCategories\"\n                      (click)=\"setEmojiCategory(cat.key)\">\n                {{ cat.icon }}\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <button type=\"button\"\n                class=\"zen-comment-textarea__icon-btn\"\n                title=\"Attach file\"\n                (click)=\"fileInput.click()\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M21.44 11.05L12.25 20.24C11.1242 21.3658 9.59723 21.9983 8.00505 21.9983C6.41286 21.9983 4.88589 21.3658 3.76005 20.24C2.6342 19.1142 2.00171 17.5872 2.00171 15.995C2.00171 14.4029 2.6342 12.8759 3.76005 11.75L12.95 2.56C13.7006 1.80944 14.7186 1.3877 15.78 1.3877C16.8415 1.3877 17.8595 1.80944 18.61 2.56C19.3606 3.31057 19.7823 4.32863 19.7823 5.39C19.7823 6.45138 19.3606 7.46944 18.61 8.22L9.41005 17.41C9.03476 17.7853 8.52573 17.9961 7.99505 17.9961C7.46436 17.9961 6.95533 17.7853 6.58005 17.41C6.20476 17.0347 5.99389 16.5257 5.99389 15.995C5.99389 15.4644 6.20476 14.9553 6.58005 14.58L15.07 6.1\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <input type=\"file\" #fileInput [accept]=\"fileTypes\" multiple hidden (change)=\"onFileInput($event)\" />\n      </div>\n\n      <!-- Right side actions -->\n      <div class=\"zen-comment-textarea__actions\" *ngIf=\"!editing\">\n        <span class=\"zen-comment-textarea__hint\">Press enter</span>\n        <svg class=\"zen-comment-textarea__return-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M3.33337 12.5L6.66671 15.8333M3.33337 12.5L6.66671 9.16667M3.33337 12.5H13.3334C14.2175 12.5 15.0653 12.1488 15.6904 11.5237C16.3155 10.8986 16.6667 10.0507 16.6667 9.16667V4.16667\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <span class=\"zen-comment-textarea__hint\">to</span>\n        <button type=\"button\" class=\"zen-comment-textarea__add-btn\" [disabled]=\"loading\" (click)=\"onAddComment()\">\n          <span class=\"zen-comment-textarea__spinner\" *ngIf=\"loading\"></span>\n          {{ loading ? 'Sending...' : 'Add Comment' }}\n        </button>\n      </div>\n\n      <div class=\"zen-comment-textarea__actions\" *ngIf=\"editing\">\n        <button type=\"button\" class=\"zen-comment-textarea__cancel-btn\" [disabled]=\"loading\" (click)=\"onCancel()\">\n          Cancel\n        </button>\n        <button type=\"button\" class=\"zen-comment-textarea__save-btn\" [disabled]=\"loading\" (click)=\"onSave()\">\n          <span class=\"zen-comment-textarea__spinner\" *ngIf=\"loading\"></span>\n          {{ loading ? 'Saving...' : 'Save' }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".zen-comment-textarea{display:flex;flex-direction:column;width:100%}.zen-comment-textarea--loading{opacity:.7;pointer-events:none}.zen-comment-textarea__spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:zen-spin .6s linear infinite;vertical-align:middle;margin-right:4px}.zen-comment-textarea__label{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#344054;margin-bottom:6px}.zen-comment-textarea__input-wrapper{background:#FFFFFF;border:1px solid #D0D5DD;border-bottom:none;border-radius:8px 8px 0 0;box-shadow:0 1px 2px #1018280d}.zen-comment-textarea__attachments{display:flex;flex-direction:column;gap:8px;padding:10px 14px 0}.zen-comment-textarea__input{display:block;width:100%;min-height:86px;padding:10px 14px 0;border:none;outline:none;resize:vertical;font-family:Inter,sans-serif;font-weight:400;font-size:16px;line-height:24px;color:#101828;background:transparent;box-sizing:border-box}.zen-comment-textarea__input::placeholder{color:#667085}.zen-comment-textarea__toolbar{background:#FFFFFF;border:1px solid #D0D5DD;border-top:none;border-radius:0 0 8px 8px;padding:0 14px 8px}.zen-comment-textarea__toolbar-divider{height:1px;background:#EAECF0;margin-bottom:8px}.zen-comment-textarea__toolbar-content{display:flex;align-items:center;justify-content:space-between}.zen-comment-textarea__toolbar-icons{display:flex;gap:4px;align-items:center}.zen-comment-textarea__emoji-wrapper{position:relative}.zen-comment-textarea__icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:8px;cursor:pointer;padding:8px}.zen-comment-textarea__icon-btn:hover,.zen-comment-textarea__icon-btn--active{background:#F2F4F7}.zen-comment-textarea__icon-btn svg{flex-shrink:0}.zen-comment-textarea__actions{display:flex;align-items:center;gap:6px}.zen-comment-textarea__hint{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#667085}.zen-comment-textarea__return-icon{flex-shrink:0}.zen-comment-textarea__add-btn{border:none;background:transparent;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#105494;cursor:pointer;padding:0}.zen-comment-textarea__add-btn:hover{text-decoration:underline}.zen-comment-textarea__cancel-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;background:#FFFFFF;border:1px solid #D0D5DD;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#344054;cursor:pointer}.zen-comment-textarea__cancel-btn:hover{background:#F9FAFB}.zen-comment-textarea__save-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;background:#136AB6;border:1px solid #136AB6;border-radius:8px;box-shadow:0 1px 2px #1018280d;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#fff;cursor:pointer}.zen-comment-textarea__save-btn:hover{background:#105494;border-color:#105494}.zen-attachment{display:flex;align-items:center;gap:4px;padding:12px;background:#F9FAFB;border:1px solid #EAECF0;border-radius:8px}.zen-attachment__content{display:flex;flex:1;gap:12px;align-items:center;min-width:0}.zen-attachment__icon{flex-shrink:0;width:32px;height:32px;background:#E3EEFB;border:4px solid #F1F7FE;border-radius:28px;display:flex;align-items:center;justify-content:center}.zen-attachment__info{flex:1;min-width:0}.zen-attachment__name{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zen-attachment__size{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#667085}.zen-attachment__remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:8px;cursor:pointer;padding:8px;margin:-8px}.zen-attachment__remove:hover{background:#F2F4F7}.zen-emoji-picker{position:absolute;bottom:calc(100% + 4px);left:0;z-index:1000;background:#FFFFFF;border:1px solid #EAECF0;border-radius:12px;box-shadow:0 4px 16px #1018281f;width:320px;overflow:hidden}.zen-emoji-picker__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:12px;max-height:200px;overflow-y:auto}.zen-emoji-picker__emoji{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:20px;line-height:1;padding:0}.zen-emoji-picker__emoji:hover{background:#F2F4F7}.zen-emoji-picker__categories{display:flex;gap:4px;padding:8px 12px;border-top:1px solid #EAECF0}.zen-emoji-picker__category{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:16px;padding:0}.zen-emoji-picker__category:hover{background:#F2F4F7}.zen-emoji-picker__category--active{background:#E3EEFB}@keyframes zen-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], fileTypes: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], addComment: [{
+                type: Output
+            }], filesChanged: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class ZenduCommentItemComponent {
+    constructor() {
+        this.showConnector = true;
+        this.editable = true;
+        this.deletable = true;
+        this.loading = false;
+        this.edit = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.saveEdit = new EventEmitter();
+        this.cancelEdit = new EventEmitter();
+        this.editing = false;
+        this.editValue = '';
+        this.wasLoading = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['loading'] && this.wasLoading && !this.loading && this.editing) {
+            this.editing = false;
+            this.editValue = '';
+        }
+        this.wasLoading = this.loading;
+    }
+    get isEditable() {
+        var _a;
+        return this.editable && (((_a = this.comment) === null || _a === void 0 ? void 0 : _a.editable) !== false);
+    }
+    get isDeletable() {
+        var _a;
+        return this.deletable && (((_a = this.comment) === null || _a === void 0 ? void 0 : _a.deletable) !== false);
+    }
+    get initials() {
+        var _a;
+        if (!((_a = this.comment) === null || _a === void 0 ? void 0 : _a.authorName))
+            return '';
+        return this.comment.authorName
+            .split(' ')
+            .map(n => n[0])
+            .join('')
+            .substring(0, 2)
+            .toUpperCase();
+    }
+    onEdit() {
+        if (this.loading)
+            return;
+        this.editing = true;
+        this.editValue = this.comment.text;
+        this.edit.emit(this.comment);
+    }
+    onDelete() {
+        if (this.loading)
+            return;
+        this.delete.emit(this.comment);
+    }
+    onSaveEdit(event) {
+        this.saveEdit.emit({ comment: this.comment, text: event.text });
+    }
+    onCancelEdit() {
+        this.editing = false;
+        this.editValue = '';
+        this.cancelEdit.emit(this.comment);
+    }
+    getFileIcon(name) {
+        var _a;
+        const ext = ((_a = name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+        if (['pdf', 'doc', 'docx', 'txt', 'xls', 'xlsx', 'csv', 'ppt', 'pptx'].includes(ext))
+            return 'document';
+        if (['mp4', 'mov', 'avi', 'mkv', 'webm', 'flv'].includes(ext))
+            return 'video';
+        return 'misc';
+    }
+}
+ZenduCommentItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduCommentItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduCommentItemComponent, selector: "zen-comment-item", inputs: { comment: "comment", showConnector: "showConnector", editable: "editable", deletable: "deletable", loading: "loading" }, outputs: { edit: "edit", delete: "delete", saveEdit: "saveEdit", cancelEdit: "cancelEdit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-comment-item\" [class.zen-comment-item--loading]=\"loading\">\n\n  <div class=\"zen-comment-item__left\">\n    <!-- Avatar -->\n    <div class=\"zen-comment-item__avatar\">\n      <img *ngIf=\"comment.authorAvatar\"\n           [src]=\"comment.authorAvatar\"\n           [alt]=\"comment.authorName\"\n           class=\"zen-comment-item__avatar-img\" />\n      <span *ngIf=\"!comment.authorAvatar\" class=\"zen-comment-item__avatar-initials\">\n        {{ initials }}\n      </span>\n      <span *ngIf=\"comment.online\" class=\"zen-comment-item__online-dot\"></span>\n    </div>\n    <!-- Connector line -->\n    <div *ngIf=\"showConnector\" class=\"zen-comment-item__connector\"></div>\n  </div>\n\n  <div class=\"zen-comment-item__body\">\n    <!-- Header: name + time -->\n    <div class=\"zen-comment-item__header\">\n      <span class=\"zen-comment-item__author\">{{ comment.authorName }}</span>\n      <span class=\"zen-comment-item__time\">{{ comment.timestamp }}</span>\n    </div>\n\n    <!-- Default view -->\n    <ng-container *ngIf=\"!editing\">\n      <p class=\"zen-comment-item__text\">{{ comment.text }}</p>\n\n      <!-- Attachments -->\n      <div class=\"zen-comment-item__attachment\"\n           *ngFor=\"let att of comment.attachments\">\n        <div class=\"zen-comment-item__attachment-icon\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <polyline points=\"14,2 14,8 20,8\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"zen-comment-item__attachment-info\">\n          <div class=\"zen-comment-item__attachment-name\">{{ att.name }}</div>\n          <div class=\"zen-comment-item__attachment-size\">{{ att.size }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Edit view -->\n    <ng-container *ngIf=\"editing\">\n      <zen-comment-textarea\n        [(value)]=\"editValue\"\n        [loading]=\"loading\"\n        (save)=\"onSaveEdit($event)\"\n        (cancel)=\"onCancelEdit()\">\n      </zen-comment-textarea>\n    </ng-container>\n  </div>\n\n  <!-- Actions (always visible, individually controllable) -->\n  <div class=\"zen-comment-item__actions\" *ngIf=\"(isEditable || isDeletable) && !editing\">\n    <button *ngIf=\"isDeletable\"\n            type=\"button\"\n            class=\"zen-comment-item__action-btn\"\n            title=\"Delete\"\n            [disabled]=\"loading\"\n            (click)=\"onDelete()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <polyline points=\"3,6 5,6 21,6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button *ngIf=\"isEditable\"\n            type=\"button\"\n            class=\"zen-comment-item__action-btn\"\n            title=\"Edit\"\n            [disabled]=\"loading\"\n            (click)=\"onEdit()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M17 3C17.2626 2.73735 17.5744 2.52901 17.9176 2.38687C18.2608 2.24473 18.6286 2.17157 19 2.17157C19.3714 2.17157 19.7392 2.24473 20.0824 2.38687C20.4256 2.52901 20.7374 2.73735 21 3C21.2626 3.26264 21.471 3.57444 21.6131 3.9176C21.7553 4.26077 21.8284 4.62856 21.8284 5C21.8284 5.37143 21.7553 5.73923 21.6131 6.08239C21.471 6.42555 21.2626 6.73735 21 7L7.5 20.5L2 22L3.5 16.5L17 3Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".zen-comment-item{display:flex;align-items:flex-start;width:100%}.zen-comment-item--loading{opacity:.7;pointer-events:none}.zen-comment-item__left{display:flex;flex-direction:column;align-items:center;gap:4px;padding-bottom:4px;flex-shrink:0}.zen-comment-item__avatar{position:relative;width:32px;height:32px;border-radius:200px;background:#C7B9DA;overflow:visible;flex-shrink:0}.zen-comment-item__avatar-img{width:32px;height:32px;border-radius:200px;object-fit:cover}.zen-comment-item__avatar-initials{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:200px;font-family:Inter,sans-serif;font-weight:500;font-size:12px;color:#fff}.zen-comment-item__online-dot{position:absolute;bottom:0;right:0;width:8px;height:8px;background:#12B76A;border:1.5px solid #fff;border-radius:4px}.zen-comment-item__connector{flex:1;width:2px;min-height:8px;background:#EAECF0;border-radius:2px}.zen-comment-item__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding-bottom:32px;margin-left:12px}.zen-comment-item__header{display:flex;align-items:center;gap:8px;white-space:nowrap}.zen-comment-item__author{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#344054}.zen-comment-item__time{font-family:Inter,sans-serif;font-weight:400;font-size:12px;line-height:18px;color:#667085}.zen-comment-item__text{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#667085;margin:0;word-break:break-word}.zen-comment-item__attachment{display:flex;align-items:flex-start;gap:12px}.zen-comment-item__attachment-icon{flex-shrink:0;width:32px;height:32px;background:#E3EEFB;border:4px solid #F1F7FE;border-radius:28px;display:flex;align-items:center;justify-content:center}.zen-comment-item__attachment-info{min-width:0}.zen-comment-item__attachment-name{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zen-comment-item__attachment-size{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#667085}.zen-comment-item__actions{display:flex;align-items:center;flex-shrink:0}.zen-comment-item__action-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;border-radius:8px;cursor:pointer;padding:10px}.zen-comment-item__action-btn:hover{background:#F2F4F7}\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: ZenduCommentTextareaComponent, selector: "zen-comment-textarea", inputs: ["value", "label", "placeholder", "rows", "fileTypes", "loading"], outputs: ["valueChange", "addComment", "filesChanged", "save", "cancel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCommentItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-comment-item', template: "<div class=\"zen-comment-item\" [class.zen-comment-item--loading]=\"loading\">\n\n  <div class=\"zen-comment-item__left\">\n    <!-- Avatar -->\n    <div class=\"zen-comment-item__avatar\">\n      <img *ngIf=\"comment.authorAvatar\"\n           [src]=\"comment.authorAvatar\"\n           [alt]=\"comment.authorName\"\n           class=\"zen-comment-item__avatar-img\" />\n      <span *ngIf=\"!comment.authorAvatar\" class=\"zen-comment-item__avatar-initials\">\n        {{ initials }}\n      </span>\n      <span *ngIf=\"comment.online\" class=\"zen-comment-item__online-dot\"></span>\n    </div>\n    <!-- Connector line -->\n    <div *ngIf=\"showConnector\" class=\"zen-comment-item__connector\"></div>\n  </div>\n\n  <div class=\"zen-comment-item__body\">\n    <!-- Header: name + time -->\n    <div class=\"zen-comment-item__header\">\n      <span class=\"zen-comment-item__author\">{{ comment.authorName }}</span>\n      <span class=\"zen-comment-item__time\">{{ comment.timestamp }}</span>\n    </div>\n\n    <!-- Default view -->\n    <ng-container *ngIf=\"!editing\">\n      <p class=\"zen-comment-item__text\">{{ comment.text }}</p>\n\n      <!-- Attachments -->\n      <div class=\"zen-comment-item__attachment\"\n           *ngFor=\"let att of comment.attachments\">\n        <div class=\"zen-comment-item__attachment-icon\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <polyline points=\"14,2 14,8 20,8\" stroke=\"#136AB6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div class=\"zen-comment-item__attachment-info\">\n          <div class=\"zen-comment-item__attachment-name\">{{ att.name }}</div>\n          <div class=\"zen-comment-item__attachment-size\">{{ att.size }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Edit view -->\n    <ng-container *ngIf=\"editing\">\n      <zen-comment-textarea\n        [(value)]=\"editValue\"\n        [loading]=\"loading\"\n        (save)=\"onSaveEdit($event)\"\n        (cancel)=\"onCancelEdit()\">\n      </zen-comment-textarea>\n    </ng-container>\n  </div>\n\n  <!-- Actions (always visible, individually controllable) -->\n  <div class=\"zen-comment-item__actions\" *ngIf=\"(isEditable || isDeletable) && !editing\">\n    <button *ngIf=\"isDeletable\"\n            type=\"button\"\n            class=\"zen-comment-item__action-btn\"\n            title=\"Delete\"\n            [disabled]=\"loading\"\n            (click)=\"onDelete()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <polyline points=\"3,6 5,6 21,6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button *ngIf=\"isEditable\"\n            type=\"button\"\n            class=\"zen-comment-item__action-btn\"\n            title=\"Edit\"\n            [disabled]=\"loading\"\n            (click)=\"onEdit()\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M17 3C17.2626 2.73735 17.5744 2.52901 17.9176 2.38687C18.2608 2.24473 18.6286 2.17157 19 2.17157C19.3714 2.17157 19.7392 2.24473 20.0824 2.38687C20.4256 2.52901 20.7374 2.73735 21 3C21.2626 3.26264 21.471 3.57444 21.6131 3.9176C21.7553 4.26077 21.8284 4.62856 21.8284 5C21.8284 5.37143 21.7553 5.73923 21.6131 6.08239C21.471 6.42555 21.2626 6.73735 21 7L7.5 20.5L2 22L3.5 16.5L17 3Z\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [".zen-comment-item{display:flex;align-items:flex-start;width:100%}.zen-comment-item--loading{opacity:.7;pointer-events:none}.zen-comment-item__left{display:flex;flex-direction:column;align-items:center;gap:4px;padding-bottom:4px;flex-shrink:0}.zen-comment-item__avatar{position:relative;width:32px;height:32px;border-radius:200px;background:#C7B9DA;overflow:visible;flex-shrink:0}.zen-comment-item__avatar-img{width:32px;height:32px;border-radius:200px;object-fit:cover}.zen-comment-item__avatar-initials{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:200px;font-family:Inter,sans-serif;font-weight:500;font-size:12px;color:#fff}.zen-comment-item__online-dot{position:absolute;bottom:0;right:0;width:8px;height:8px;background:#12B76A;border:1.5px solid #fff;border-radius:4px}.zen-comment-item__connector{flex:1;width:2px;min-height:8px;background:#EAECF0;border-radius:2px}.zen-comment-item__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding-bottom:32px;margin-left:12px}.zen-comment-item__header{display:flex;align-items:center;gap:8px;white-space:nowrap}.zen-comment-item__author{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#344054}.zen-comment-item__time{font-family:Inter,sans-serif;font-weight:400;font-size:12px;line-height:18px;color:#667085}.zen-comment-item__text{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#667085;margin:0;word-break:break-word}.zen-comment-item__attachment{display:flex;align-items:flex-start;gap:12px}.zen-comment-item__attachment-icon{flex-shrink:0;width:32px;height:32px;background:#E3EEFB;border:4px solid #F1F7FE;border-radius:28px;display:flex;align-items:center;justify-content:center}.zen-comment-item__attachment-info{min-width:0}.zen-comment-item__attachment-name{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#344054;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zen-comment-item__attachment-size{font-family:Inter,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#667085}.zen-comment-item__actions{display:flex;align-items:center;flex-shrink:0}.zen-comment-item__action-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;border-radius:8px;cursor:pointer;padding:10px}.zen-comment-item__action-btn:hover{background:#F2F4F7}\n"] }]
+        }], propDecorators: { comment: [{
+                type: Input
+            }], showConnector: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], deletable: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], edit: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], saveEdit: [{
+                type: Output
+            }], cancelEdit: [{
+                type: Output
+            }] } });
+
+class ZenduCommentListComponent {
+    constructor() {
+        this.comments = [];
+        this.collapsible = true;
+        this.expanded = false;
+        this.editable = true;
+        this.deletable = true;
+        this.loadingCommentId = null;
+        this.expandedChange = new EventEmitter();
+        this.editComment = new EventEmitter();
+        this.deleteComment = new EventEmitter();
+        this.saveEditComment = new EventEmitter();
+        this.cancelEditComment = new EventEmitter();
+    }
+    toggle() {
+        this.expanded = !this.expanded;
+        this.expandedChange.emit(this.expanded);
+    }
+}
+ZenduCommentListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCommentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZenduCommentListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduCommentListComponent, selector: "zen-comment-list", inputs: { comments: "comments", collapsible: "collapsible", expanded: "expanded", editable: "editable", deletable: "deletable", loadingCommentId: "loadingCommentId" }, outputs: { expandedChange: "expandedChange", editComment: "editComment", deleteComment: "deleteComment", saveEditComment: "saveEditComment", cancelEditComment: "cancelEditComment" }, ngImport: i0, template: "<div class=\"zen-comment-list\">\n  <!-- Toggle button (only when collapsible) -->\n  <button *ngIf=\"collapsible\" type=\"button\" class=\"zen-comment-list__toggle\" (click)=\"toggle()\">\n    <span class=\"zen-comment-list__toggle-text\">\n      {{ expanded ? 'Hide' : 'Show' }} Comments ({{ comments.length }})\n    </span>\n    <svg class=\"zen-comment-list__toggle-icon\"\n         [class.zen-comment-list__toggle-icon--up]=\"expanded\"\n         width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Comments list -->\n  <div class=\"zen-comment-list__items\" *ngIf=\"!collapsible || expanded\">\n    <zen-comment-item\n      *ngFor=\"let c of comments; let last = last\"\n      [comment]=\"c\"\n      [showConnector]=\"!last\"\n      [editable]=\"editable\"\n      [deletable]=\"deletable\"\n      [loading]=\"loadingCommentId === c.id\"\n      (edit)=\"editComment.emit($event)\"\n      (delete)=\"deleteComment.emit($event)\"\n      (saveEdit)=\"saveEditComment.emit($event)\"\n      (cancelEdit)=\"cancelEditComment.emit($event)\">\n    </zen-comment-item>\n  </div>\n</div>\n", styles: [".zen-comment-list{display:flex;flex-direction:column;gap:16px;width:100%}.zen-comment-list__toggle{display:flex;align-items:center;gap:8px;border:none;background:transparent;cursor:pointer;padding:0}.zen-comment-list__toggle-text{font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#667085}.zen-comment-list__toggle-icon{flex-shrink:0;transition:transform .2s ease}.zen-comment-list__toggle-icon--up{transform:rotate(180deg)}.zen-comment-list__items{display:flex;flex-direction:column}\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: ZenduCommentItemComponent, selector: "zen-comment-item", inputs: ["comment", "showConnector", "editable", "deletable", "loading"], outputs: ["edit", "delete", "saveEdit", "cancelEdit"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduCommentListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-comment-list', template: "<div class=\"zen-comment-list\">\n  <!-- Toggle button (only when collapsible) -->\n  <button *ngIf=\"collapsible\" type=\"button\" class=\"zen-comment-list__toggle\" (click)=\"toggle()\">\n    <span class=\"zen-comment-list__toggle-text\">\n      {{ expanded ? 'Hide' : 'Show' }} Comments ({{ comments.length }})\n    </span>\n    <svg class=\"zen-comment-list__toggle-icon\"\n         [class.zen-comment-list__toggle-icon--up]=\"expanded\"\n         width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Comments list -->\n  <div class=\"zen-comment-list__items\" *ngIf=\"!collapsible || expanded\">\n    <zen-comment-item\n      *ngFor=\"let c of comments; let last = last\"\n      [comment]=\"c\"\n      [showConnector]=\"!last\"\n      [editable]=\"editable\"\n      [deletable]=\"deletable\"\n      [loading]=\"loadingCommentId === c.id\"\n      (edit)=\"editComment.emit($event)\"\n      (delete)=\"deleteComment.emit($event)\"\n      (saveEdit)=\"saveEditComment.emit($event)\"\n      (cancelEdit)=\"cancelEditComment.emit($event)\">\n    </zen-comment-item>\n  </div>\n</div>\n", styles: [".zen-comment-list{display:flex;flex-direction:column;gap:16px;width:100%}.zen-comment-list__toggle{display:flex;align-items:center;gap:8px;border:none;background:transparent;cursor:pointer;padding:0}.zen-comment-list__toggle-text{font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#667085}.zen-comment-list__toggle-icon{flex-shrink:0;transition:transform .2s ease}.zen-comment-list__toggle-icon--up{transform:rotate(180deg)}.zen-comment-list__items{display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { comments: [{
+                type: Input
+            }], collapsible: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], deletable: [{
+                type: Input
+            }], loadingCommentId: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
+            }], editComment: [{
+                type: Output
+            }], deleteComment: [{
+                type: Output
+            }], saveEditComment: [{
+                type: Output
+            }], cancelEditComment: [{
+                type: Output
+            }] } });
+
+const MOBILE_BREAKPOINT = 768;
+class ZenduDatePickerDropdownComponent {
+    constructor(_element, overlay, viewContainerRef, _translate) {
+        this._element = _element;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this._translate = _translate;
+        this.type = 'single';
+        this.date = null;
+        this.dateChange = new EventEmitter();
+        this.startDate = null;
+        this.startDateChange = new EventEmitter();
+        this.endDate = null;
+        this.endDateChange = new EventEmitter();
+        this.rangeChange = new EventEmitter();
+        this.presets = null;
+        this.minDate = null;
+        this.maxDate = null;
+        this.disabled = false;
+        this.highlightDays = [];
+        this.placeholder = '';
+        this.mobileBreakpoint = MOBILE_BREAKPOINT;
+        this.mobile = false;
+        this.isOpen = false;
+        // Left calendar state
+        this.leftCurrentSlot = new Date();
+        this.leftDayRows = [];
+        this.leftDaysTitle = '';
+        // Right calendar state (for range desktop)
+        this.rightCurrentSlot = new Date();
+        this.rightDayRows = [];
+        this.rightDaysTitle = '';
+        this.weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sat', 'Su'];
+        // Internal selection state
+        this._selectedDate = null;
+        this._selectedStart = null;
+        this._selectedEnd = null;
+        this._activePreset = null;
+        this.overlayRef = null;
+        this.defaultPresets = [
+            {
+                label: 'Today',
+                getRange: () => ({
+                    start: moment().startOf('day').toDate(),
+                    end: moment().endOf('day').toDate()
+                })
+            },
+            {
+                label: 'Yesterday',
+                getRange: () => ({
+                    start: moment().subtract(1, 'day').startOf('day').toDate(),
+                    end: moment().subtract(1, 'day').endOf('day').toDate()
+                })
+            },
+            {
+                label: 'This week',
+                getRange: () => ({
+                    start: moment().startOf('isoWeek').toDate(),
+                    end: moment().endOf('isoWeek').toDate()
+                })
+            },
+            {
+                label: 'Last week',
+                getRange: () => ({
+                    start: moment().subtract(1, 'week').startOf('isoWeek').toDate(),
+                    end: moment().subtract(1, 'week').endOf('isoWeek').toDate()
+                })
+            },
+            {
+                label: 'This month',
+                getRange: () => ({
+                    start: moment().startOf('month').toDate(),
+                    end: moment().endOf('month').toDate()
+                })
+            },
+            {
+                label: 'Last month',
+                getRange: () => ({
+                    start: moment().subtract(1, 'month').startOf('month').toDate(),
+                    end: moment().subtract(1, 'month').endOf('month').toDate()
+                })
+            },
+            {
+                label: 'This year',
+                getRange: () => ({
+                    start: moment().startOf('year').toDate(),
+                    end: moment().endOf('year').toDate()
+                })
+            },
+            {
+                label: 'Last year',
+                getRange: () => ({
+                    start: moment().subtract(1, 'year').startOf('year').toDate(),
+                    end: moment().subtract(1, 'year').endOf('year').toDate()
+                })
+            },
+            {
+                label: 'All time',
+                getRange: () => ({
+                    start: new Date(2000, 0, 1),
+                    end: moment().endOf('day').toDate()
+                })
+            }
+        ];
+    }
+    ngOnInit() {
+        this.checkMobile();
+    }
+    onResize() {
+        this.checkMobile();
+    }
+    checkMobile() {
+        this.mobile = window.innerWidth < this.mobileBreakpoint;
+    }
+    ngOnChanges(changes) {
+        if (changes['date'] && this.date) {
+            this._selectedDate = new Date(this.date);
+        }
+        if (changes['startDate'] && this.startDate) {
+            this._selectedStart = new Date(this.startDate);
+        }
+        if (changes['endDate'] && this.endDate) {
+            this._selectedEnd = new Date(this.endDate);
+        }
+    }
+    ngOnDestroy() {
+        this.closeOverlay();
+    }
+    outsideHandling(event) {
+        if (!document.body.contains(event.target))
+            return;
+        if (this._element.nativeElement.contains(event.target))
+            return;
+        // Check if click is inside overlay
+        if (this.overlayRef) {
+            const overlayElement = this.overlayRef.overlayElement;
+            if (overlayElement && overlayElement.contains(event.target))
+                return;
+        }
+        this.close();
+    }
+    get activePresets() {
+        return this.presets || this.defaultPresets;
+    }
+    get showPresetsSidebar() {
+        return this.type === 'range' && !this.mobile;
+    }
+    get showDualCalendars() {
+        return this.type === 'range' && !this.mobile;
+    }
+    get triggerLabel() {
+        if (this.type === 'single') {
+            if (this.date) {
+                return this.formatDate(this.date);
+            }
+            return this.placeholder || this._translate.instant('Select date');
+        }
+        if (this.startDate && this.endDate) {
+            return `${this.formatDate(this.startDate)} - ${this.formatDate(this.endDate)}`;
+        }
+        return this.placeholder || this._translate.instant('Select dates');
+    }
+    get hasValue() {
+        if (this.type === 'single')
+            return !!this.date;
+        return !!(this.startDate && this.endDate);
+    }
+    get formattedSelectedDate() {
+        return this._selectedDate ? this.formatDate(this._selectedDate) : '';
+    }
+    get formattedStartDate() {
+        return this._selectedStart ? this.formatDate(this._selectedStart) : '';
+    }
+    get formattedEndDate() {
+        return this._selectedEnd ? this.formatDate(this._selectedEnd) : '';
+    }
+    formatDate(date) {
+        const enMonth = moment(date).format('MMM');
+        const translatedMonth = this._translate.instant(enMonth);
+        return moment(date).format('MMM D, YYYY').replace(enMonth, translatedMonth);
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        this.isOpen = true;
+        this._selectedDate = this.date ? new Date(this.date) : null;
+        this._selectedStart = this.startDate ? new Date(this.startDate) : null;
+        this._selectedEnd = this.endDate ? new Date(this.endDate) : null;
+        this._activePreset = null;
+        if (this.type === 'single') {
+            this.leftCurrentSlot = this._selectedDate ? new Date(this._selectedDate) : new Date();
+        }
+        else {
+            this.leftCurrentSlot = this._selectedStart ? new Date(this._selectedStart) : new Date();
+            this.rightCurrentSlot = moment(this.leftCurrentSlot).add(1, 'month').toDate();
+        }
+        this.updateCalendars();
+        this.createOverlay();
+    }
+    close() {
+        this.isOpen = false;
+        this.closeOverlay();
+    }
+    createOverlay() {
+        const position = {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top'
+        };
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(this.triggerBtn)
+            .withPositions([
+            position,
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
+        ])
+            .withFlexibleDimensions(false)
+            .withDefaultOffsetY(8)
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: 'zen-date-picker-dropdown-overlay',
+        });
+        this.overlayRef.attach(new TemplatePortal(this.dropdownTemplate, this.viewContainerRef));
+        this.overlayRef.backdropClick().subscribe(() => {
+            this.close();
+        });
+    }
+    closeOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    // Calendar navigation
+    leftPrevMonth() {
+        this.leftCurrentSlot = moment(this.leftCurrentSlot).subtract(1, 'month').toDate();
+        if (this.showDualCalendars) {
+            this.rightCurrentSlot = moment(this.leftCurrentSlot).add(1, 'month').toDate();
+        }
+        this.updateCalendars();
+    }
+    leftNextMonth() {
+        this.leftCurrentSlot = moment(this.leftCurrentSlot).add(1, 'month').toDate();
+        if (this.showDualCalendars) {
+            this.rightCurrentSlot = moment(this.leftCurrentSlot).add(1, 'month').toDate();
+        }
+        this.updateCalendars();
+    }
+    rightPrevMonth() {
+        this.rightCurrentSlot = moment(this.rightCurrentSlot).subtract(1, 'month').toDate();
+        this.leftCurrentSlot = moment(this.rightCurrentSlot).subtract(1, 'month').toDate();
+        this.updateCalendars();
+    }
+    rightNextMonth() {
+        this.rightCurrentSlot = moment(this.rightCurrentSlot).add(1, 'month').toDate();
+        this.leftCurrentSlot = moment(this.rightCurrentSlot).subtract(1, 'month').toDate();
+        this.updateCalendars();
+    }
+    // For mobile/single mode when there's only one calendar
+    prevMonth() {
+        this.leftPrevMonth();
+    }
+    nextMonth() {
+        this.leftNextMonth();
+    }
+    selectDay(day) {
+        if (day.isDisabled || day.isOutside)
+            return;
+        if (this.type === 'single') {
+            this._selectedDate = new Date(day.date);
+        }
+        else {
+            // Range selection logic
+            if (!this._selectedStart || (this._selectedStart && this._selectedEnd)) {
+                // Start new selection
+                this._selectedStart = new Date(day.date);
+                this._selectedEnd = null;
+                this._activePreset = null;
+            }
+            else {
+                // Complete the range
+                const newDate = new Date(day.date);
+                if (moment(newDate).isBefore(this._selectedStart)) {
+                    this._selectedEnd = new Date(this._selectedStart);
+                    this._selectedStart = newDate;
+                }
+                else {
+                    this._selectedEnd = newDate;
+                }
+            }
+        }
+        this.updateCalendars();
+    }
+    selectPreset(preset) {
+        const range = preset.getRange();
+        this._selectedStart = range.start;
+        this._selectedEnd = range.end;
+        this._activePreset = preset.label;
+        this.leftCurrentSlot = new Date(range.start);
+        if (this.showDualCalendars) {
+            this.rightCurrentSlot = moment(this.leftCurrentSlot).add(1, 'month').toDate();
+        }
+        this.updateCalendars();
+    }
+    goToToday() {
+        const today = new Date();
+        this._selectedDate = moment(today).startOf('day').toDate();
+        this.leftCurrentSlot = new Date(today);
+        this.updateCalendars();
+    }
+    apply() {
+        if (this.type === 'single') {
+            if (this._selectedDate) {
+                this.date = new Date(this._selectedDate);
+                this.dateChange.emit(this.date);
+            }
+        }
+        else {
+            if (this._selectedStart) {
+                this.startDate = new Date(this._selectedStart);
+                this.startDateChange.emit(this.startDate);
+            }
+            if (this._selectedEnd) {
+                this.endDate = new Date(this._selectedEnd);
+                this.endDateChange.emit(this.endDate);
+            }
+            if (this._selectedStart && this._selectedEnd) {
+                this.rangeChange.emit({ start: this.startDate, end: this.endDate });
+            }
+        }
+        this.close();
+    }
+    cancel() {
+        this.close();
+    }
+    get canApply() {
+        if (this.type === 'single')
+            return !!this._selectedDate;
+        return !!(this._selectedStart && this._selectedEnd);
+    }
+    updateCalendars() {
+        this.updateDays(this.leftCurrentSlot, 'left');
+        if (this.showDualCalendars) {
+            this.updateDays(this.rightCurrentSlot, 'right');
+        }
+    }
+    updateDays(slot, side) {
+        const enMonth = moment(slot).format('MMM');
+        const translatedMonth = this._translate.instant(enMonth);
+        const title = moment(slot).format('MMMM YYYY');
+        const dayRows = [];
+        let current = moment(slot).startOf('month').startOf('isoWeek');
+        const end = moment(slot).endOf('month').endOf('isoWeek');
+        const currentMonth = moment(slot).month();
+        while (current.isSameOrBefore(end)) {
+            const row = { days: [] };
+            dayRows.push(row);
+            for (let idx = 0; idx < 7; idx++) {
+                const isOutside = currentMonth !== current.month();
+                let isDisabled = false;
+                if (this.minDate && current.toDate() < this.minDate) {
+                    isDisabled = true;
+                }
+                else if (this.maxDate && current.toDate() > this.maxDate) {
+                    isDisabled = true;
+                }
+                let isHighlighted = false;
+                if (this.highlightDays && this.highlightDays.length) {
+                    isHighlighted = this.highlightDays.indexOf(current.valueOf()) >= 0;
+                }
+                const isSelected = isOutside ? false : this.isDaySelected(current);
+                row.days.push({
+                    date: current.toDate(),
+                    lbl: isOutside ? '' : current.date().toString(),
+                    isOutside,
+                    selected: isSelected,
+                    isDisabled: isOutside ? true : isDisabled,
+                    isHighlighted: isOutside ? false : isHighlighted
+                });
+                current = current.clone().add(1, 'day');
+            }
+        }
+        if (side === 'left') {
+            this.leftDayRows = dayRows;
+            this.leftDaysTitle = title;
+        }
+        else {
+            this.rightDayRows = dayRows;
+            this.rightDaysTitle = title;
+        }
+    }
+    isDaySelected(date) {
+        if (this.type === 'single') {
+            return this._selectedDate ? date.isSame(moment(this._selectedDate), 'day') : false;
+        }
+        if (this._selectedStart && date.isSame(moment(this._selectedStart), 'day'))
+            return true;
+        if (this._selectedEnd && date.isSame(moment(this._selectedEnd), 'day'))
+            return true;
+        return false;
+    }
+    isToday(day) {
+        if (day.isOutside)
+            return false;
+        return moment(day.date).isSame(moment(), 'day');
+    }
+    isInRange(day) {
+        if (day.isOutside)
+            return false;
+        if (this.type !== 'range' || !this._selectedStart || !this._selectedEnd)
+            return false;
+        const d = moment(day.date);
+        return d.isAfter(moment(this._selectedStart), 'day') && d.isBefore(moment(this._selectedEnd), 'day');
+    }
+    isRangeStart(day) {
+        if (day.isOutside)
+            return false;
+        if (this.type !== 'range' || !this._selectedStart)
+            return false;
+        return moment(day.date).isSame(moment(this._selectedStart), 'day');
+    }
+    isRangeEnd(day) {
+        if (day.isOutside)
+            return false;
+        if (this.type !== 'range' || !this._selectedEnd)
+            return false;
+        return moment(day.date).isSame(moment(this._selectedEnd), 'day');
+    }
+}
+ZenduDatePickerDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduDatePickerDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+ZenduDatePickerDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.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", highlightDays: "highlightDays", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint" }, 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 }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- 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<ng-template #dropdownTemplate>\n    <div class=\"dropdown-menu\" [class.mobile]=\"mobile\">\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                <div class=\"bottom-divider\"></div>\n\n                <!-- Bottom panel: inputs + actions -->\n                <div class=\"bottom-panel\">\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\">&ndash;</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                    <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\">&ndash;</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                <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                <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    </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                <span class=\"highlight-dot\" *ngIf=\"day.isHighlighted\"></span>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [".dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#FFFFFF;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;-webkit-appearance:none;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{display:inline-flex;background:#FFFFFF;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:hidden;width:max-content}::ng-deep .cdk-overlay-container{position:fixed;z-index:1200;pointer-events:none;top:0;left:0;height:100%;width:100%}::ng-deep .cdk-overlay-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:1200}::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1201;display:flex;flex-direction:column;min-width:1px;min-height:1px}::ng-deep .zen-date-picker-dropdown-overlay{position:absolute;width:max-content!important;pointer-events:auto}.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:#F9FAFB}.presets-sidebar .preset-item.active{background:#F9FAFB;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;-webkit-appearance:none;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:#FFFFFF;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;-webkit-appearance:none;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:#FFFFFF;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 .highlight-dot{position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.selected .highlight-dot{background:#FFFFFF}.day-cell.outside .highlight-dot{background:#98A2B3}.bottom-divider{height:1px;background:#EAECF0;width:100%}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.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:#FFFFFF;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;-webkit-appearance:none;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;-webkit-appearance:none;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: "component", type: ZenduIconComponent, selector: "zen-icon", inputs: ["src"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduDatePickerDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-date-picker-dropdown', template: "<!-- 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<ng-template #dropdownTemplate>\n    <div class=\"dropdown-menu\" [class.mobile]=\"mobile\">\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                <div class=\"bottom-divider\"></div>\n\n                <!-- Bottom panel: inputs + actions -->\n                <div class=\"bottom-panel\">\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\">&ndash;</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                    <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\">&ndash;</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                <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                <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    </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                <span class=\"highlight-dot\" *ngIf=\"day.isHighlighted\"></span>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [".dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#FFFFFF;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;-webkit-appearance:none;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{display:inline-flex;background:#FFFFFF;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:hidden;width:max-content}::ng-deep .cdk-overlay-container{position:fixed;z-index:1200;pointer-events:none;top:0;left:0;height:100%;width:100%}::ng-deep .cdk-overlay-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:1200}::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1201;display:flex;flex-direction:column;min-width:1px;min-height:1px}::ng-deep .zen-date-picker-dropdown-overlay{position:absolute;width:max-content!important;pointer-events:auto}.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:#F9FAFB}.presets-sidebar .preset-item.active{background:#F9FAFB;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;-webkit-appearance:none;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:#FFFFFF;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;-webkit-appearance:none;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:#FFFFFF;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 .highlight-dot{position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.selected .highlight-dot{background:#FFFFFF}.day-cell.outside .highlight-dot{background:#98A2B3}.bottom-divider{height:1px;background:#EAECF0;width:100%}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.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:#FFFFFF;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;-webkit-appearance:none;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;-webkit-appearance:none;appearance:none;outline:none;transition:.15s;white-space:nowrap}.btn-apply:hover{background:#105494}.btn-apply:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i2$1.TranslateService }]; }, propDecorators: { type: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }], startDate: [{
+                type: Input
+            }], startDateChange: [{
+                type: Output
+            }], endDate: [{
+                type: Input
+            }], endDateChange: [{
+                type: Output
+            }], rangeChange: [{
+                type: Output
+            }], presets: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], highlightDays: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], mobileBreakpoint: [{
+                type: Input
+            }], triggerBtn: [{
+                type: ViewChild,
+                args: ['triggerBtn']
+            }], dropdownTemplate: [{
+                type: ViewChild,
+                args: ['dropdownTemplate']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], outsideHandling: [{
+                type: HostListener,
+                args: ['window:mousedown', ['$event']]
+            }] } });
+
 // AoT requires an exported function for factories
 function HttpLoaderFactory(httpClient) {
     return new TranslateHttpLoader(httpClient);
@@ -6066,7 +6885,11 @@ NgZenduitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         ZenSnapshotPlayerComponent,
         ZenWebRTCPlayerComponent,
         ZenduSelectButtonDirective,
-        ZenduTimepickerComponent], imports: [CommonModule,
+        ZenduTimepickerComponent,
+        ZenduCommentTextareaComponent,
+        ZenduCommentItemComponent,
+        ZenduCommentListComponent,
+        ZenduDatePickerDropdownComponent], imports: [CommonModule,
         FormsModule,
         DragDropModule,
         AngularSignaturePadModule,
@@ -6100,7 +6923,11 @@ NgZenduitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         ZenduLocationSearch,
         ZenLiveViewPlayerComponent,
         ZenduSelectButtonDirective,
-        ZenduTimepickerComponent] });
+        ZenduTimepickerComponent,
+        ZenduCommentTextareaComponent,
+        ZenduCommentItemComponent,
+        ZenduCommentListComponent,
+        ZenduDatePickerDropdownComponent] });
 NgZenduitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NgZenduitModule, providers: [
         OpenCVService,
     ], imports: [CommonModule,
@@ -6154,7 +6981,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         ZenSnapshotPlayerComponent,
                         ZenWebRTCPlayerComponent,
                         ZenduSelectButtonDirective,
-                        ZenduTimepickerComponent
+                        ZenduTimepickerComponent,
+                        ZenduCommentTextareaComponent,
+                        ZenduCommentItemComponent,
+                        ZenduCommentListComponent,
+                        ZenduDatePickerDropdownComponent
                     ],
                     providers: [
                         OpenCVService,
@@ -6204,7 +7035,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         ZenduLocationSearch,
                         ZenLiveViewPlayerComponent,
                         ZenduSelectButtonDirective,
-                        ZenduTimepickerComponent
+                        ZenduTimepickerComponent,
+                        ZenduCommentTextareaComponent,
+                        ZenduCommentItemComponent,
+                        ZenduCommentListComponent,
+                        ZenduDatePickerDropdownComponent
                     ]
                 }]
         }] });
@@ -6217,5 +7052,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DATEPICKER_POSITION, HttpLoaderFactory, NgZenduitModule, ZenLiveViewPlayerComponent, ZenNotifyService, ZenduBreadcrumbs, ZenduCardBlockComponent, ZenduCheckboxComponent, ZenduColorPickerComponent, ZenduColumnConfigurationComponent, ZenduDatepickerComponent, ZenduDocScanner, ZenduFileUpload, ZenduFilterComponent, ZenduGroupsComponent, ZenduIconComponent, ZenduLocationSearch, ZenduMapComponent, ZenduMapPreviewComponent, ZenduPaginationBarComponent, ZenduPhoneInputComponent, ZenduProgress, ZenduRadioButtonComponent, ZenduSearchBoxComponent, ZenduSelectButtonDirective, ZenduSelectComponent, ZenduSelectOptionDirective, ZenduSelectValueDirective, ZenduSortHeaderComponent, ZenduSpinner, ZenduTimepickerComponent, ZenduToggleComponent, ZenduToggleSlideComponent };
+export { DATEPICKER_POSITION, HttpLoaderFactory, NgZenduitModule, ZenLiveViewPlayerComponent, ZenNotifyService, ZenduBreadcrumbs, ZenduCardBlockComponent, ZenduCheckboxComponent, ZenduColorPickerComponent, ZenduColumnConfigurationComponent, ZenduCommentItemComponent, ZenduCommentListComponent, ZenduCommentTextareaComponent, ZenduDatePickerDropdownComponent, ZenduDatepickerComponent, ZenduDocScanner, ZenduFileUpload, ZenduFilterComponent, ZenduGroupsComponent, ZenduIconComponent, ZenduLocationSearch, ZenduMapComponent, ZenduMapPreviewComponent, ZenduPaginationBarComponent, ZenduPhoneInputComponent, ZenduProgress, ZenduRadioButtonComponent, ZenduSearchBoxComponent, ZenduSelectButtonDirective, ZenduSelectComponent, ZenduSelectOptionDirective, ZenduSelectValueDirective, ZenduSortHeaderComponent, ZenduSpinner, ZenduTimepickerComponent, ZenduToggleComponent, ZenduToggleSlideComponent };
 //# sourceMappingURL=ng-zenduit.mjs.map