ng-zenduit 2.0.17 → 2.0.19

package/esm2020/lib/date-picker-dropdown/zendu-date-picker-dropdown.component.mjs

@@ -605,10 +605,10 @@ export class ZenduDatePickerDropdownComponent {
     }
 }
 ZenduDatePickerDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduDatePickerDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1.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", dateMarkers: "dateMarkers", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint", timePicker: "timePicker", autoApply: "autoApply" }, outputs: { dateChange: "dateChange", startDateChange: "startDateChange", endDateChange: "endDateChange", rangeChange: "rangeChange" }, host: { listeners: { "window:resize": "onResize()", "window:mousedown": "outsideHandling($event)" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-dpd\">\n    <!-- Trigger Button -->\n    <button class=\"dropdown-trigger\"\n            #triggerBtn\n            [disabled]=\"disabled\"\n            [class.active]=\"isOpen\"\n            [class.has-value]=\"hasValue\"\n            (click)=\"toggle()\">\n        <zen-icon class=\"trigger-icon\"\n                  src=\"assets/ng-zenduit/icons/calendar.svg\">\n        </zen-icon>\n        <span class=\"trigger-label\">{{ triggerLabel }}</span>\n    </button>\n\n    <!-- Dropdown Panel -->\n    <div class=\"dropdown-menu\" *ngIf=\"isOpen\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n        <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n        <ng-container *ngIf=\"type === 'range' && !mobile\">\n            <!-- Presets sidebar -->\n            <div class=\"presets-sidebar\">\n                <div class=\"preset-item\"\n                     *ngFor=\"let preset of activePresets\"\n                     [class.active]=\"_activePreset === preset.label\"\n                     (click)=\"selectPreset(preset)\">\n                    {{ preset.label | translate }}\n                </div>\n            </div>\n\n            <div class=\"sidebar-divider\"></div>\n\n            <!-- Calendars + bottom panel -->\n            <div class=\"calendars-container\">\n                <div class=\"dual-calendars\">\n                    <!-- Left calendar -->\n                    <div class=\"calendar-panel\">\n                        <div class=\"calendar-content\">\n                            <div class=\"month-header\">\n                                <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                                </button>\n                                <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                                <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                                </button>\n                            </div>\n                            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n                        </div>\n                    </div>\n\n                    <div class=\"calendar-divider\"></div>\n\n                    <!-- Right calendar -->\n                    <div class=\"calendar-panel\">\n                        <div class=\"calendar-content\">\n                            <div class=\"month-header\">\n                                <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                                </button>\n                                <span class=\"month-title\">{{ rightDaysTitle }}</span>\n                                <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                                </button>\n                            </div>\n                            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"bottom-divider\"></div>\n\n                <!-- Bottom panel: inputs (or legend) + actions -->\n                <div class=\"bottom-panel\">\n                    <div class=\"marker-legend\" *ngIf=\"legendMarkers.length; else rangeInputs\">\n                        <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                            <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                            <span class=\"legend-title\">{{ m.title | translate }}</span>\n                        </div>\n                    </div>\n                    <ng-template #rangeInputs>\n                        <div class=\"input-fields\">\n                            <div class=\"date-input\">\n                                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                                    {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n                                </span>\n                            </div>\n                            <span class=\"date-separator\">&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                    </ng-template>\n                    <div class=\"actions\">\n                        <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                        <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n        <ng-container *ngIf=\"type === 'range' && mobile\">\n            <div class=\"single-calendar-container\">\n                <div class=\"calendar-content\">\n                    <div class=\"month-header\">\n                        <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                        </button>\n                        <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                        <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                        </button>\n                    </div>\n\n                    <!-- Range inputs -->\n                    <div class=\"mobile-range-inputs\">\n                        <div class=\"date-input compact\">\n                            <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                                {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n                            </span>\n                        </div>\n                        <span class=\"date-separator\">&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                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"marker-legend standalone\" *ngIf=\"legendMarkers.length\">\n                    <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                        <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                        <span class=\"legend-title\">{{ m.title | translate }}</span>\n                    </div>\n                </div>\n\n                <div class=\"bottom-divider\"></div>\n\n                <div class=\"bottom-panel compact\">\n                    <div class=\"actions full-width\">\n                        <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                        <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- SINGLE DATE: single calendar + input + today button -->\n        <ng-container *ngIf=\"type === 'single'\">\n            <div class=\"single-calendar-container\">\n                <div class=\"calendar-content\">\n                    <div class=\"month-header\">\n                        <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                        </button>\n                        <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                        <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                        </button>\n                    </div>\n\n                    <!-- Date input + Today button -->\n                    <div class=\"single-actions-row\">\n                        <div class=\"date-input flex-1\">\n                            <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n                                {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n                            </span>\n                        </div>\n                        <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n                    </div>\n\n                    <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n                </div>\n\n                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"marker-legend standalone single\" *ngIf=\"legendMarkers.length\">\n                    <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                        <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                        <span class=\"legend-title\">{{ m.title | translate }}</span>\n                    </div>\n                </div>\n\n                <ng-container *ngIf=\"!autoApply\">\n                    <div class=\"bottom-divider\"></div>\n\n                    <div class=\"bottom-panel compact\">\n                        <div class=\"actions full-width\">\n                            <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                            <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection>\n    <div class=\"time-picker-container\">\n        <div class=\"time-picker-content\">\n            <span class=\"time-picker-label\">{{ 'Select a time' | translate }}</span>\n            <div class=\"time-picker-row\">\n                <div class=\"time-fields\">\n                    <!-- Hours -->\n                    <div class=\"time-input-group\">\n                        <div class=\"time-input-box\">\n                            <input class=\"time-input\"\n                                   type=\"text\"\n                                   aria-label=\"Hours\"\n                                   inputmode=\"numeric\"\n                                   autocomplete=\"off\"\n                                   [value]=\"_hoursDisplay\"\n                                   (input)=\"onHoursInput($event)\"\n                                   (focus)=\"onTimeFocus($event)\"\n                                   (blur)=\"clampHours()\"\n                                   (keydown)=\"onTimeKeydown($event, 'hours')\"\n                                   maxlength=\"2\" />\n                            <div class=\"time-arrows\">\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                                </button>\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                                </button>\n                            </div>\n                        </div>\n                        <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n                    </div>\n\n                    <!-- Colon separator -->\n                    <div class=\"time-colon\">:</div>\n\n                    <!-- Minutes -->\n                    <div class=\"time-input-group\">\n                        <div class=\"time-input-box\">\n                            <input class=\"time-input\"\n                                   type=\"text\"\n                                   aria-label=\"Minutes\"\n                                   inputmode=\"numeric\"\n                                   autocomplete=\"off\"\n                                   [value]=\"_minutesDisplay\"\n                                   (input)=\"onMinutesInput($event)\"\n                                   (focus)=\"onTimeFocus($event)\"\n                                   (blur)=\"clampMinutes()\"\n                                   (keydown)=\"onTimeKeydown($event, 'minutes')\"\n                                   maxlength=\"2\" />\n                            <div class=\"time-arrows\">\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                                </button>\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                                </button>\n                            </div>\n                        </div>\n                        <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n                    </div>\n                </div>\n\n                <!-- AM/PM toggle -->\n                <div class=\"time-period-toggle\">\n                    <button class=\"time-period-btn\"\n                            [class.active]=\"_period === 'AM'\"\n                            (click)=\"setPeriod('AM')\">\n                        AM\n                    </button>\n                    <button class=\"time-period-btn\"\n                            [class.active]=\"_period === 'PM'\"\n                            (click)=\"setPeriod('PM')\">\n                        PM\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n    <div class=\"dates-grid\">\n        <!-- Week day headers -->\n        <div class=\"week-header\">\n            <div class=\"cell header-cell\" *ngFor=\"let wd of weekDays\">{{ wd | translate }}</div>\n        </div>\n        <!-- Day rows -->\n        <div class=\"day-row\" *ngFor=\"let row of dayRows\">\n            <div class=\"cell day-cell\"\n                 *ngFor=\"let day of row.days\"\n                 [class.outside]=\"day.isOutside\"\n                 [class.selected]=\"day.selected\"\n                 [class.today]=\"isToday(day)\"\n                 [class.disabled]=\"day.isDisabled\"\n                 [class.in-range]=\"isInRange(day)\"\n                 [class.range-start]=\"isRangeStart(day)\"\n                 [class.range-end]=\"isRangeEnd(day)\"\n                 (click)=\"selectDay(day)\">\n                <span class=\"day-number\">{{ day.lbl }}</span>\n                <div class=\"marker-dots\" *ngIf=\"day.markerColors?.length\">\n                    <span class=\"marker-dot\"\n                          *ngFor=\"let c of day.markerColors\"\n                          [style.background]=\"c || null\"></span>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#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{position:fixed;z-index:1200;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-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#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 .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#FFFFFF!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#FFFFFF;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#F2F4F7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:rgba(102,112,133,.12)}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#FFFFFF;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#F1F7FE;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#F9FAFB}.bottom-divider{height:1px;min-height:1px;background:#EAECF0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+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", dateMarkers: "dateMarkers", placeholder: "placeholder", mobileBreakpoint: "mobileBreakpoint", timePicker: "timePicker", autoApply: "autoApply" }, outputs: { dateChange: "dateChange", startDateChange: "startDateChange", endDateChange: "endDateChange", rangeChange: "rangeChange" }, host: { listeners: { "window:resize": "onResize()", "window:mousedown": "outsideHandling($event)" } }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"zen-dpd\">\n    <!-- Trigger Button -->\n    <button class=\"dropdown-trigger\"\n            #triggerBtn\n            [disabled]=\"disabled\"\n            [class.active]=\"isOpen\"\n            [class.has-value]=\"hasValue\"\n            (click)=\"toggle()\">\n        <zen-icon class=\"trigger-icon\"\n                  src=\"assets/ng-zenduit/icons/calendar.svg\">\n        </zen-icon>\n        <span class=\"trigger-label\">{{ triggerLabel }}</span>\n    </button>\n\n    <!-- Dropdown Panel -->\n    <div class=\"dropdown-menu\" *ngIf=\"isOpen\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n        <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n        <ng-container *ngIf=\"type === 'range' && !mobile\">\n            <!-- Presets sidebar -->\n            <div class=\"presets-sidebar\">\n                <div class=\"preset-item\"\n                     *ngFor=\"let preset of activePresets\"\n                     [class.active]=\"_activePreset === preset.label\"\n                     (click)=\"selectPreset(preset)\">\n                    {{ preset.label | translate }}\n                </div>\n            </div>\n\n            <div class=\"sidebar-divider\"></div>\n\n            <!-- Calendars + bottom panel -->\n            <div class=\"calendars-container\">\n                <div class=\"dual-calendars\">\n                    <!-- Left calendar -->\n                    <div class=\"calendar-panel\">\n                        <div class=\"calendar-content\">\n                            <div class=\"month-header\">\n                                <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                                </button>\n                                <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                                <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                                </button>\n                            </div>\n                            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n                        </div>\n                    </div>\n\n                    <div class=\"calendar-divider\"></div>\n\n                    <!-- Right calendar -->\n                    <div class=\"calendar-panel\">\n                        <div class=\"calendar-content\">\n                            <div class=\"month-header\">\n                                <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                                </button>\n                                <span class=\"month-title\">{{ rightDaysTitle }}</span>\n                                <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                                </button>\n                            </div>\n                            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"bottom-divider\"></div>\n\n                <!-- Bottom panel: inputs (or legend) + actions -->\n                <div class=\"bottom-panel\">\n                    <div class=\"marker-legend\" *ngIf=\"legendMarkers.length; else rangeInputs\">\n                        <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                            <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                            <span class=\"legend-title\">{{ m.title | translate }}</span>\n                        </div>\n                    </div>\n                    <ng-template #rangeInputs>\n                        <div class=\"input-fields\">\n                            <div class=\"date-input\">\n                                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                                    {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n                                </span>\n                            </div>\n                            <span class=\"date-separator\">&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                    </ng-template>\n                    <div class=\"actions\">\n                        <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                        <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n        <ng-container *ngIf=\"type === 'range' && mobile\">\n            <div class=\"single-calendar-container\">\n                <div class=\"calendar-content\">\n                    <div class=\"month-header\">\n                        <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                        </button>\n                        <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                        <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                        </button>\n                    </div>\n\n                    <!-- Range inputs -->\n                    <div class=\"mobile-range-inputs\">\n                        <div class=\"date-input compact\">\n                            <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                                {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n                            </span>\n                        </div>\n                        <span class=\"date-separator\">&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                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"marker-legend standalone\" *ngIf=\"legendMarkers.length\">\n                    <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                        <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                        <span class=\"legend-title\">{{ m.title | translate }}</span>\n                    </div>\n                </div>\n\n                <div class=\"bottom-divider\"></div>\n\n                <div class=\"bottom-panel compact\">\n                    <div class=\"actions full-width\">\n                        <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                        <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- SINGLE DATE: single calendar + input + today button -->\n        <ng-container *ngIf=\"type === 'single'\">\n            <div class=\"single-calendar-container\">\n                <div class=\"calendar-content\">\n                    <div class=\"month-header\">\n                        <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                        </button>\n                        <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                        <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                        </button>\n                    </div>\n\n                    <!-- Date input + Today button -->\n                    <div class=\"single-actions-row\">\n                        <div class=\"date-input flex-1\">\n                            <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n                                {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n                            </span>\n                        </div>\n                        <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n                    </div>\n\n                    <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n                </div>\n\n                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"marker-legend standalone single\" *ngIf=\"legendMarkers.length\">\n                    <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                        <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                        <span class=\"legend-title\">{{ m.title | translate }}</span>\n                    </div>\n                </div>\n\n                <ng-container *ngIf=\"!autoApply\">\n                    <div class=\"bottom-divider\"></div>\n\n                    <div class=\"bottom-panel compact\">\n                        <div class=\"actions full-width\">\n                            <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                            <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection>\n    <div class=\"time-picker-container\">\n        <div class=\"time-picker-content\">\n            <span class=\"time-picker-label\">{{ 'Select a time' | translate }}</span>\n            <div class=\"time-picker-row\">\n                <div class=\"time-fields\">\n                    <!-- Hours -->\n                    <div class=\"time-input-group\">\n                        <div class=\"time-input-box\">\n                            <input class=\"time-input\"\n                                   type=\"text\"\n                                   aria-label=\"Hours\"\n                                   inputmode=\"numeric\"\n                                   autocomplete=\"off\"\n                                   [value]=\"_hoursDisplay\"\n                                   (input)=\"onHoursInput($event)\"\n                                   (focus)=\"onTimeFocus($event)\"\n                                   (blur)=\"clampHours()\"\n                                   (keydown)=\"onTimeKeydown($event, 'hours')\"\n                                   maxlength=\"2\" />\n                            <div class=\"time-arrows\">\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                                </button>\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                                </button>\n                            </div>\n                        </div>\n                        <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n                    </div>\n\n                    <!-- Colon separator -->\n                    <div class=\"time-colon\">:</div>\n\n                    <!-- Minutes -->\n                    <div class=\"time-input-group\">\n                        <div class=\"time-input-box\">\n                            <input class=\"time-input\"\n                                   type=\"text\"\n                                   aria-label=\"Minutes\"\n                                   inputmode=\"numeric\"\n                                   autocomplete=\"off\"\n                                   [value]=\"_minutesDisplay\"\n                                   (input)=\"onMinutesInput($event)\"\n                                   (focus)=\"onTimeFocus($event)\"\n                                   (blur)=\"clampMinutes()\"\n                                   (keydown)=\"onTimeKeydown($event, 'minutes')\"\n                                   maxlength=\"2\" />\n                            <div class=\"time-arrows\">\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                                </button>\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                                </button>\n                            </div>\n                        </div>\n                        <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n                    </div>\n                </div>\n\n                <!-- AM/PM toggle -->\n                <div class=\"time-period-toggle\">\n                    <button class=\"time-period-btn\"\n                            [class.active]=\"_period === 'AM'\"\n                            (click)=\"setPeriod('AM')\">\n                        AM\n                    </button>\n                    <button class=\"time-period-btn\"\n                            [class.active]=\"_period === 'PM'\"\n                            (click)=\"setPeriod('PM')\">\n                        PM\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n    <div class=\"dates-grid\">\n        <!-- Week day headers -->\n        <div class=\"week-header\">\n            <div class=\"cell header-cell\" *ngFor=\"let wd of weekDays\">{{ wd | translate }}</div>\n        </div>\n        <!-- Day rows -->\n        <div class=\"day-row\" *ngFor=\"let row of dayRows\">\n            <div class=\"cell day-cell\"\n                 *ngFor=\"let day of row.days\"\n                 [class.outside]=\"day.isOutside\"\n                 [class.selected]=\"day.selected\"\n                 [class.today]=\"isToday(day)\"\n                 [class.disabled]=\"day.isDisabled\"\n                 [class.in-range]=\"isInRange(day)\"\n                 [class.range-start]=\"isRangeStart(day)\"\n                 [class.range-end]=\"isRangeEnd(day)\"\n                 (click)=\"selectDay(day)\">\n                <span class=\"day-number\">{{ day.lbl }}</span>\n                <div class=\"marker-dots\" *ngIf=\"day.markerColors?.length\">\n                    <span class=\"marker-dot\"\n                          *ngFor=\"let c of day.markerColors\"\n                          [style.background]=\"c || null\"></span>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#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{position:fixed;z-index:1200;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-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#F1F7FE;color:#105494}.presets-sidebar .preset-item.active{background:#F1F7FE;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#EAECF0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#EAECF0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;-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 .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#FFFFFF!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#FFFFFF;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#F2F4F7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:rgba(102,112,133,.12)}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#FFFFFF;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#F1F7FE;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#F9FAFB}.bottom-divider{height:1px;min-height:1px;background:#EAECF0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "pipe", type: i1.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: "<div class=\"zen-dpd\">\n    <!-- Trigger Button -->\n    <button class=\"dropdown-trigger\"\n            #triggerBtn\n            [disabled]=\"disabled\"\n            [class.active]=\"isOpen\"\n            [class.has-value]=\"hasValue\"\n            (click)=\"toggle()\">\n        <zen-icon class=\"trigger-icon\"\n                  src=\"assets/ng-zenduit/icons/calendar.svg\">\n        </zen-icon>\n        <span class=\"trigger-label\">{{ triggerLabel }}</span>\n    </button>\n\n    <!-- Dropdown Panel -->\n    <div class=\"dropdown-menu\" *ngIf=\"isOpen\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n        <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n        <ng-container *ngIf=\"type === 'range' && !mobile\">\n            <!-- Presets sidebar -->\n            <div class=\"presets-sidebar\">\n                <div class=\"preset-item\"\n                     *ngFor=\"let preset of activePresets\"\n                     [class.active]=\"_activePreset === preset.label\"\n                     (click)=\"selectPreset(preset)\">\n                    {{ preset.label | translate }}\n                </div>\n            </div>\n\n            <div class=\"sidebar-divider\"></div>\n\n            <!-- Calendars + bottom panel -->\n            <div class=\"calendars-container\">\n                <div class=\"dual-calendars\">\n                    <!-- Left calendar -->\n                    <div class=\"calendar-panel\">\n                        <div class=\"calendar-content\">\n                            <div class=\"month-header\">\n                                <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                                </button>\n                                <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                                <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                                </button>\n                            </div>\n                            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n                        </div>\n                    </div>\n\n                    <div class=\"calendar-divider\"></div>\n\n                    <!-- Right calendar -->\n                    <div class=\"calendar-panel\">\n                        <div class=\"calendar-content\">\n                            <div class=\"month-header\">\n                                <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                                </button>\n                                <span class=\"month-title\">{{ rightDaysTitle }}</span>\n                                <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                                </button>\n                            </div>\n                            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"bottom-divider\"></div>\n\n                <!-- Bottom panel: inputs (or legend) + actions -->\n                <div class=\"bottom-panel\">\n                    <div class=\"marker-legend\" *ngIf=\"legendMarkers.length; else rangeInputs\">\n                        <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                            <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                            <span class=\"legend-title\">{{ m.title | translate }}</span>\n                        </div>\n                    </div>\n                    <ng-template #rangeInputs>\n                        <div class=\"input-fields\">\n                            <div class=\"date-input\">\n                                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                                    {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n                                </span>\n                            </div>\n                            <span class=\"date-separator\">&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                    </ng-template>\n                    <div class=\"actions\">\n                        <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                        <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n        <ng-container *ngIf=\"type === 'range' && mobile\">\n            <div class=\"single-calendar-container\">\n                <div class=\"calendar-content\">\n                    <div class=\"month-header\">\n                        <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                        </button>\n                        <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                        <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                        </button>\n                    </div>\n\n                    <!-- Range inputs -->\n                    <div class=\"mobile-range-inputs\">\n                        <div class=\"date-input compact\">\n                            <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                                {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n                            </span>\n                        </div>\n                        <span class=\"date-separator\">&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                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"marker-legend standalone\" *ngIf=\"legendMarkers.length\">\n                    <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                        <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                        <span class=\"legend-title\">{{ m.title | translate }}</span>\n                    </div>\n                </div>\n\n                <div class=\"bottom-divider\"></div>\n\n                <div class=\"bottom-panel compact\">\n                    <div class=\"actions full-width\">\n                        <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                        <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- SINGLE DATE: single calendar + input + today button -->\n        <ng-container *ngIf=\"type === 'single'\">\n            <div class=\"single-calendar-container\">\n                <div class=\"calendar-content\">\n                    <div class=\"month-header\">\n                        <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                        </button>\n                        <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                        <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                        </button>\n                    </div>\n\n                    <!-- Date input + Today button -->\n                    <div class=\"single-actions-row\">\n                        <div class=\"date-input flex-1\">\n                            <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n                                {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n                            </span>\n                        </div>\n                        <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n                    </div>\n\n                    <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n                </div>\n\n                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"marker-legend standalone single\" *ngIf=\"legendMarkers.length\">\n                    <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                        <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                        <span class=\"legend-title\">{{ m.title | translate }}</span>\n                    </div>\n                </div>\n\n                <ng-container *ngIf=\"!autoApply\">\n                    <div class=\"bottom-divider\"></div>\n\n                    <div class=\"bottom-panel compact\">\n                        <div class=\"actions full-width\">\n                            <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                            <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection>\n    <div class=\"time-picker-container\">\n        <div class=\"time-picker-content\">\n            <span class=\"time-picker-label\">{{ 'Select a time' | translate }}</span>\n            <div class=\"time-picker-row\">\n                <div class=\"time-fields\">\n                    <!-- Hours -->\n                    <div class=\"time-input-group\">\n                        <div class=\"time-input-box\">\n                            <input class=\"time-input\"\n                                   type=\"text\"\n                                   aria-label=\"Hours\"\n                                   inputmode=\"numeric\"\n                                   autocomplete=\"off\"\n                                   [value]=\"_hoursDisplay\"\n                                   (input)=\"onHoursInput($event)\"\n                                   (focus)=\"onTimeFocus($event)\"\n                                   (blur)=\"clampHours()\"\n                                   (keydown)=\"onTimeKeydown($event, 'hours')\"\n                                   maxlength=\"2\" />\n                            <div class=\"time-arrows\">\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                                </button>\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                                </button>\n                            </div>\n                        </div>\n                        <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n                    </div>\n\n                    <!-- Colon separator -->\n                    <div class=\"time-colon\">:</div>\n\n                    <!-- Minutes -->\n                    <div class=\"time-input-group\">\n                        <div class=\"time-input-box\">\n                            <input class=\"time-input\"\n                                   type=\"text\"\n                                   aria-label=\"Minutes\"\n                                   inputmode=\"numeric\"\n                                   autocomplete=\"off\"\n                                   [value]=\"_minutesDisplay\"\n                                   (input)=\"onMinutesInput($event)\"\n                                   (focus)=\"onTimeFocus($event)\"\n                                   (blur)=\"clampMinutes()\"\n                                   (keydown)=\"onTimeKeydown($event, 'minutes')\"\n                                   maxlength=\"2\" />\n                            <div class=\"time-arrows\">\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                                </button>\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                                </button>\n                            </div>\n                        </div>\n                        <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n                    </div>\n                </div>\n\n                <!-- AM/PM toggle -->\n                <div class=\"time-period-toggle\">\n                    <button class=\"time-period-btn\"\n                            [class.active]=\"_period === 'AM'\"\n                            (click)=\"setPeriod('AM')\">\n                        AM\n                    </button>\n                    <button class=\"time-period-btn\"\n                            [class.active]=\"_period === 'PM'\"\n                            (click)=\"setPeriod('PM')\">\n                        PM\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n    <div class=\"dates-grid\">\n        <!-- Week day headers -->\n        <div class=\"week-header\">\n            <div class=\"cell header-cell\" *ngFor=\"let wd of weekDays\">{{ wd | translate }}</div>\n        </div>\n        <!-- Day rows -->\n        <div class=\"day-row\" *ngFor=\"let row of dayRows\">\n            <div class=\"cell day-cell\"\n                 *ngFor=\"let day of row.days\"\n                 [class.outside]=\"day.isOutside\"\n                 [class.selected]=\"day.selected\"\n                 [class.today]=\"isToday(day)\"\n                 [class.disabled]=\"day.isDisabled\"\n                 [class.in-range]=\"isInRange(day)\"\n                 [class.range-start]=\"isRangeStart(day)\"\n                 [class.range-end]=\"isRangeEnd(day)\"\n                 (click)=\"selectDay(day)\">\n                <span class=\"day-number\">{{ day.lbl }}</span>\n                <div class=\"marker-dots\" *ngIf=\"day.markerColors?.length\">\n                    <span class=\"marker-dot\"\n                          *ngFor=\"let c of day.markerColors\"\n                          [style.background]=\"c || null\"></span>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#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{position:fixed;z-index:1200;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-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#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 .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#FFFFFF!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#FFFFFF;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#F2F4F7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:rgba(102,112,133,.12)}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#FFFFFF;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#F1F7FE;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#F9FAFB}.bottom-divider{height:1px;min-height:1px;background:#EAECF0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#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"] }]
+            args: [{ selector: 'zen-date-picker-dropdown', template: "<div class=\"zen-dpd\">\n    <!-- Trigger Button -->\n    <button class=\"dropdown-trigger\"\n            #triggerBtn\n            [disabled]=\"disabled\"\n            [class.active]=\"isOpen\"\n            [class.has-value]=\"hasValue\"\n            (click)=\"toggle()\">\n        <zen-icon class=\"trigger-icon\"\n                  src=\"assets/ng-zenduit/icons/calendar.svg\">\n        </zen-icon>\n        <span class=\"trigger-label\">{{ triggerLabel }}</span>\n    </button>\n\n    <!-- Dropdown Panel -->\n    <div class=\"dropdown-menu\" *ngIf=\"isOpen\" [class.mobile]=\"mobile\" [ngStyle]=\"dropdownStyle\">\n        <!-- RANGE DESKTOP: presets sidebar + dual calendar -->\n        <ng-container *ngIf=\"type === 'range' && !mobile\">\n            <!-- Presets sidebar -->\n            <div class=\"presets-sidebar\">\n                <div class=\"preset-item\"\n                     *ngFor=\"let preset of activePresets\"\n                     [class.active]=\"_activePreset === preset.label\"\n                     (click)=\"selectPreset(preset)\">\n                    {{ preset.label | translate }}\n                </div>\n            </div>\n\n            <div class=\"sidebar-divider\"></div>\n\n            <!-- Calendars + bottom panel -->\n            <div class=\"calendars-container\">\n                <div class=\"dual-calendars\">\n                    <!-- Left calendar -->\n                    <div class=\"calendar-panel\">\n                        <div class=\"calendar-content\">\n                            <div class=\"month-header\">\n                                <button class=\"nav-btn\" (click)=\"leftPrevMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                                </button>\n                                <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                                <button class=\"nav-btn\" (click)=\"leftNextMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                                </button>\n                            </div>\n                            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n                        </div>\n                    </div>\n\n                    <div class=\"calendar-divider\"></div>\n\n                    <!-- Right calendar -->\n                    <div class=\"calendar-panel\">\n                        <div class=\"calendar-content\">\n                            <div class=\"month-header\">\n                                <button class=\"nav-btn\" (click)=\"rightPrevMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                                </button>\n                                <span class=\"month-title\">{{ rightDaysTitle }}</span>\n                                <button class=\"nav-btn\" (click)=\"rightNextMonth()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                                </button>\n                            </div>\n                            <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: rightDayRows }\"></ng-container>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"bottom-divider\"></div>\n\n                <!-- Bottom panel: inputs (or legend) + actions -->\n                <div class=\"bottom-panel\">\n                    <div class=\"marker-legend\" *ngIf=\"legendMarkers.length; else rangeInputs\">\n                        <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                            <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                            <span class=\"legend-title\">{{ m.title | translate }}</span>\n                        </div>\n                    </div>\n                    <ng-template #rangeInputs>\n                        <div class=\"input-fields\">\n                            <div class=\"date-input\">\n                                <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                                    {{ _selectedStart ? formattedStartDate : ('Start date' | translate) }}\n                                </span>\n                            </div>\n                            <span class=\"date-separator\">&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                    </ng-template>\n                    <div class=\"actions\">\n                        <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                        <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- RANGE MOBILE: single calendar with dual inputs on top -->\n        <ng-container *ngIf=\"type === 'range' && mobile\">\n            <div class=\"single-calendar-container\">\n                <div class=\"calendar-content\">\n                    <div class=\"month-header\">\n                        <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                        </button>\n                        <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                        <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                        </button>\n                    </div>\n\n                    <!-- Range inputs -->\n                    <div class=\"mobile-range-inputs\">\n                        <div class=\"date-input compact\">\n                            <span class=\"date-input-text\" [class.placeholder]=\"!_selectedStart\">\n                                {{ _selectedStart ? formattedStartDate : ('Select date' | translate) }}\n                            </span>\n                        </div>\n                        <span class=\"date-separator\">&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                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"marker-legend standalone\" *ngIf=\"legendMarkers.length\">\n                    <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                        <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                        <span class=\"legend-title\">{{ m.title | translate }}</span>\n                    </div>\n                </div>\n\n                <div class=\"bottom-divider\"></div>\n\n                <div class=\"bottom-panel compact\">\n                    <div class=\"actions full-width\">\n                        <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                        <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- SINGLE DATE: single calendar + input + today button -->\n        <ng-container *ngIf=\"type === 'single'\">\n            <div class=\"single-calendar-container\">\n                <div class=\"calendar-content\">\n                    <div class=\"month-header\">\n                        <button class=\"nav-btn\" (click)=\"prevMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-left.svg\"></zen-icon>\n                        </button>\n                        <span class=\"month-title\">{{ leftDaysTitle }}</span>\n                        <button class=\"nav-btn\" (click)=\"nextMonth()\">\n                            <zen-icon src=\"assets/ng-zenduit/icons/arrow-right.svg\"></zen-icon>\n                        </button>\n                    </div>\n\n                    <!-- Date input + Today button -->\n                    <div class=\"single-actions-row\">\n                        <div class=\"date-input flex-1\">\n                            <span class=\"date-input-text\" [class.placeholder]=\"!_selectedDate\">\n                                {{ _selectedDate ? formattedSelectedDate : ('Select date' | translate) }}\n                            </span>\n                        </div>\n                        <button class=\"btn-today\" (click)=\"goToToday()\">{{ 'Today' | translate }}</button>\n                    </div>\n\n                    <ng-container *ngTemplateOutlet=\"calendarGrid; context: { $implicit: leftDayRows }\"></ng-container>\n                </div>\n\n                <!-- Time Picker -->\n                <ng-container *ngIf=\"timePicker\">\n                    <div class=\"bottom-divider\"></div>\n                    <ng-container *ngTemplateOutlet=\"timePickerSection\"></ng-container>\n                </ng-container>\n\n                <div class=\"marker-legend standalone single\" *ngIf=\"legendMarkers.length\">\n                    <div class=\"legend-item\" *ngFor=\"let m of legendMarkers\">\n                        <span class=\"legend-dot\" [style.background]=\"m.color || null\"></span>\n                        <span class=\"legend-title\">{{ m.title | translate }}</span>\n                    </div>\n                </div>\n\n                <ng-container *ngIf=\"!autoApply\">\n                    <div class=\"bottom-divider\"></div>\n\n                    <div class=\"bottom-panel compact\">\n                        <div class=\"actions full-width\">\n                            <button class=\"btn-cancel\" (click)=\"cancel()\">{{ 'Cancel' | translate }}</button>\n                            <button class=\"btn-apply\" [disabled]=\"!canApply\" (click)=\"apply()\">{{ 'Apply' | translate }}</button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<!-- Shared time picker template -->\n<ng-template #timePickerSection>\n    <div class=\"time-picker-container\">\n        <div class=\"time-picker-content\">\n            <span class=\"time-picker-label\">{{ 'Select a time' | translate }}</span>\n            <div class=\"time-picker-row\">\n                <div class=\"time-fields\">\n                    <!-- Hours -->\n                    <div class=\"time-input-group\">\n                        <div class=\"time-input-box\">\n                            <input class=\"time-input\"\n                                   type=\"text\"\n                                   aria-label=\"Hours\"\n                                   inputmode=\"numeric\"\n                                   autocomplete=\"off\"\n                                   [value]=\"_hoursDisplay\"\n                                   (input)=\"onHoursInput($event)\"\n                                   (focus)=\"onTimeFocus($event)\"\n                                   (blur)=\"clampHours()\"\n                                   (keydown)=\"onTimeKeydown($event, 'hours')\"\n                                   maxlength=\"2\" />\n                            <div class=\"time-arrows\">\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementHours()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                                </button>\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementHours()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                                </button>\n                            </div>\n                        </div>\n                        <span class=\"time-input-label\">{{ 'HRS' | translate }}</span>\n                    </div>\n\n                    <!-- Colon separator -->\n                    <div class=\"time-colon\">:</div>\n\n                    <!-- Minutes -->\n                    <div class=\"time-input-group\">\n                        <div class=\"time-input-box\">\n                            <input class=\"time-input\"\n                                   type=\"text\"\n                                   aria-label=\"Minutes\"\n                                   inputmode=\"numeric\"\n                                   autocomplete=\"off\"\n                                   [value]=\"_minutesDisplay\"\n                                   (input)=\"onMinutesInput($event)\"\n                                   (focus)=\"onTimeFocus($event)\"\n                                   (blur)=\"clampMinutes()\"\n                                   (keydown)=\"onTimeKeydown($event, 'minutes')\"\n                                   maxlength=\"2\" />\n                            <div class=\"time-arrows\">\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"incrementMinutes()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-up-small.svg\"></zen-icon>\n                                </button>\n                                <button class=\"time-arrow-btn\" type=\"button\" tabindex=\"-1\" (click)=\"decrementMinutes()\">\n                                    <zen-icon src=\"assets/ng-zenduit/icons/arrow-down-small.svg\"></zen-icon>\n                                </button>\n                            </div>\n                        </div>\n                        <span class=\"time-input-label\">{{ 'MIN' | translate }}</span>\n                    </div>\n                </div>\n\n                <!-- AM/PM toggle -->\n                <div class=\"time-period-toggle\">\n                    <button class=\"time-period-btn\"\n                            [class.active]=\"_period === 'AM'\"\n                            (click)=\"setPeriod('AM')\">\n                        AM\n                    </button>\n                    <button class=\"time-period-btn\"\n                            [class.active]=\"_period === 'PM'\"\n                            (click)=\"setPeriod('PM')\">\n                        PM\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Shared calendar grid template -->\n<ng-template #calendarGrid let-dayRows>\n    <div class=\"dates-grid\">\n        <!-- Week day headers -->\n        <div class=\"week-header\">\n            <div class=\"cell header-cell\" *ngFor=\"let wd of weekDays\">{{ wd | translate }}</div>\n        </div>\n        <!-- Day rows -->\n        <div class=\"day-row\" *ngFor=\"let row of dayRows\">\n            <div class=\"cell day-cell\"\n                 *ngFor=\"let day of row.days\"\n                 [class.outside]=\"day.isOutside\"\n                 [class.selected]=\"day.selected\"\n                 [class.today]=\"isToday(day)\"\n                 [class.disabled]=\"day.isDisabled\"\n                 [class.in-range]=\"isInRange(day)\"\n                 [class.range-start]=\"isRangeStart(day)\"\n                 [class.range-end]=\"isRangeEnd(day)\"\n                 (click)=\"selectDay(day)\">\n                <span class=\"day-number\">{{ day.lbl }}</span>\n                <div class=\"marker-dots\" *ngIf=\"day.markerColors?.length\">\n                    <span class=\"marker-dot\"\n                          *ngFor=\"let c of day.markerColors\"\n                          [style.background]=\"c || null\"></span>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{display:block;position:relative;width:100%}.zen-dpd{position:relative;width:100%}.dropdown-trigger{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:#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{position:fixed;z-index:1200;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-y:auto;overflow-x:hidden;width:max-content}.presets-sidebar{display:flex;flex-direction:column;gap:4px;padding:12px 16px;min-width:160px}.presets-sidebar .preset-item{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:400;line-height:20px;color:#344054;cursor:pointer;white-space:nowrap;transition:.15s}.presets-sidebar .preset-item:hover{background:#F1F7FE;color:#105494}.presets-sidebar .preset-item.active{background:#F1F7FE;color:#105494;font-weight:500}.sidebar-divider{width:1px;background:#EAECF0;align-self:stretch}.calendars-container{display:flex;flex-direction:column}.dual-calendars{display:flex}.calendar-divider{width:1px;background:#EAECF0;align-self:stretch}.calendar-panel{width:328px;overflow:hidden}.calendar-content{display:flex;flex-direction:column;padding:20px 24px;gap:12px}.single-calendar-container{display:flex;flex-direction:column;width:328px}.month-header{display:flex;align-items:center;justify-content:space-between;width:280px}.nav-btn{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:none;background:transparent;cursor:pointer;-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 .marker-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:3px}.day-cell .marker-dots .marker-dot{width:5px;height:5px;border-radius:50%;background:#105494}.day-cell.outside .marker-dots .marker-dot{opacity:.4}.day-cell.selected .marker-dots .marker-dot{background:#FFFFFF!important}.time-picker-container{display:flex;flex-direction:column;padding:16px;background:#FFFFFF;width:100%}.time-picker-content{display:flex;flex-direction:column;gap:16px}.time-picker-label{font-size:14px;font-weight:500;line-height:20px;color:#1d2939}.time-picker-row{display:flex;align-items:flex-start;gap:16px}.time-fields{display:flex;gap:8px;align-items:flex-start}.time-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.time-input-box{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:72px;padding:6px 6px 6px 12px;background:#F2F4F7;border:1px solid #E5E7EB;border-radius:8px;box-sizing:border-box}.time-input{width:24px;border:none;background:transparent;font-size:16px;font-weight:500;line-height:24px;color:#1d2939;text-align:center;outline:none;padding:0;font-family:Inter,sans-serif;-moz-appearance:textfield}.time-input::-webkit-outer-spin-button,.time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.time-arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:20px;height:100%}.time-arrow-btn{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;border-radius:2px;transition:.15s}.time-arrow-btn:hover{background:rgba(102,112,133,.12)}.time-arrow-btn zen-icon{width:14px;height:14px;background-color:#667085}.time-input-label{font-size:10px;font-weight:500;line-height:normal;color:#667085;text-transform:uppercase;letter-spacing:.02em}.time-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4px;height:44px;font-size:14px;font-weight:500;line-height:20px;color:#667085}.time-period-toggle{display:flex;gap:8px;align-items:center;height:44px;align-self:flex-start}.time-period-btn{display:flex;align-items:center;justify-content:center;padding:10px 14px;height:36px;box-sizing:border-box;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;transition:.15s;white-space:nowrap;background:#FFFFFF;border:1px solid #D0D5DD;box-shadow:0 1px 2px #1018280d;color:#344054}.time-period-btn.active{background:#F1F7FE;border-color:#f1f7fe;color:#105494}.time-period-btn:hover:not(.active){background:#F9FAFB}.bottom-divider{height:1px;min-height:1px;background:#EAECF0;width:100%;flex-shrink:0}.bottom-panel{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 24px}.bottom-panel.compact{justify-content:flex-end}.marker-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.marker-legend.standalone{padding:12px 24px 16px}.marker-legend.standalone.single{padding-top:0}.marker-legend .legend-item{display:flex;align-items:center;gap:6px}.marker-legend .legend-dot{width:8px;height:8px;border-radius:50%;background:#105494}.marker-legend .legend-title{font-size:14px;font-weight:400;line-height:20px;color:#344054}.input-fields{display:flex;gap:12px;align-items:center}.input-fields .date-input{width:128px}.actions{display:flex;gap:12px}.actions.full-width,.actions.full-width .btn-cancel,.actions.full-width .btn-apply{flex:1}.btn-cancel{display:flex;align-items:center;justify-content:center;padding:10px 16px;min-width:109px;background:#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.TranslateService }]; }, propDecorators: { type: [{
                 type: Input
             }], date: [{

package/esm2020/lib/file-uploader/zendu-file-uploader.component.mjs

@@ -106,10 +106,10 @@ export class ZenduFileUploaderComponent {
     }
 }
 ZenduFileUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZenduFileUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduFileUploaderComponent, selector: "zen-file-uploader", inputs: { accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", disabled: "disabled", description: "description", progressType: "progressType", files: "files" }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"zen-fu\" [class.disabled]=\"disabled\">\n    <!-- Drop Zone -->\n    <div class=\"drop-zone\"\n         [class.dragover]=\"isDragover\"\n         (click)=\"openFileDialog()\">\n        <div class=\"drop-zone-icon\">\n            <zen-icon src=\"assets/ng-zenduit/icons/upload-cloud.svg\"></zen-icon>\n        </div>\n        <div class=\"drop-zone-text\">\n            <span class=\"click-text\">{{ 'Click to upload' | translate }}</span>\n            <span class=\"drag-text\">{{ 'or drag and drop' | translate }}</span>\n        </div>\n        <p class=\"drop-zone-description\">\n            {{ description || ('SVG, PNG, JPG or GIF (max. 800x400px)' | translate) }}\n        </p>\n    </div>\n\n    <input type=\"file\"\n           #fileInput\n           hidden\n           [accept]=\"accept\"\n           [multiple]=\"multiple\"\n           (change)=\"onFileInput($event)\" />\n\n    <!-- File Queue -->\n    <div class=\"file-queue\" *ngIf=\"files?.length\">\n\n        <!-- Progress Bar Type -->\n        <ng-container *ngIf=\"progressType === 'bar'\">\n            <div class=\"file-item bar-type\"\n                 *ngFor=\"let item of files\"\n                 [class.complete]=\"item.status === 'complete'\">\n                <div class=\"file-item-content\">\n                    <div class=\"file-icon-wrap\">\n                        <zen-icon class=\"file-icon\"\n                                  [src]=\"getFileIcon(item.fileType)\">\n                        </zen-icon>\n                    </div>\n                    <div class=\"file-info\">\n                        <div class=\"file-text\">\n                            <p class=\"file-name\">{{ item.file.name }}</p>\n                            <p class=\"file-size\">{{ formatFileSize(item.file.size) }}</p>\n                        </div>\n                        <div class=\"progress-row\">\n                            <div class=\"progress-track\">\n                                <div class=\"progress-fill\" [style.width.%]=\"item.progress\"></div>\n                            </div>\n                            <span class=\"progress-label\">{{ item.progress }}%</span>\n                        </div>\n                    </div>\n                </div>\n                <button class=\"file-action\"\n                        *ngIf=\"item.status === 'uploading'\"\n                        (click)=\"removeFile(item)\">\n                    <zen-icon class=\"trash-icon\"\n                              src=\"assets/ng-zenduit/icons/trash.svg\">\n                    </zen-icon>\n                </button>\n                <zen-icon class=\"check-icon\"\n                          *ngIf=\"item.status === 'complete'\"\n                          src=\"assets/ng-zenduit/icons/check-circle.svg\">\n                </zen-icon>\n            </div>\n        </ng-container>\n\n        <!-- Progress Fill Type -->\n        <ng-container *ngIf=\"progressType === 'fill'\">\n            <div class=\"file-item fill-type\"\n                 *ngFor=\"let item of files\">\n                <div class=\"fill-bg\" [style.width.%]=\"item.progress\"></div>\n                <div class=\"file-item-content\">\n                    <div class=\"file-icon-wrap\">\n                        <zen-icon class=\"file-icon\"\n                                  [src]=\"getFileIcon(item.fileType)\">\n                        </zen-icon>\n                    </div>\n                    <div class=\"file-info\">\n                        <p class=\"file-name\">{{ item.file.name }}</p>\n                        <p class=\"file-size\">{{ formatFileSize(item.file.size) }} &ndash; {{ item.progress }}% {{ 'uploaded' | translate }}</p>\n                    </div>\n                </div>\n                <zen-spinner *ngIf=\"item.status === 'uploading'\"\n                             class=\"file-spinner\"\n                             size=\"small\">\n                </zen-spinner>\n                <zen-icon class=\"check-icon\"\n                          *ngIf=\"item.status === 'complete'\"\n                          src=\"assets/ng-zenduit/icons/check-circle.svg\">\n                </zen-icon>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}.zen-fu{font-family:Inter,sans-serif}.zen-fu.disabled{opacity:.5;pointer-events:none}.drop-zone{display:flex;flex-direction:column;align-items:center;padding:16px 24px;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;cursor:pointer;transition:.2s;gap:12px}.drop-zone:hover,.drop-zone.dragover{background:#FAFDFF;border-color:#88c1f1}.drop-zone:hover .drop-zone-icon,.drop-zone.dragover .drop-zone-icon{background:#E3EEFB;border-color:#f1f7fe}.drop-zone:hover .drop-zone-icon zen-icon,.drop-zone.dragover .drop-zone-icon zen-icon{background-color:#136ab6}.drop-zone:hover .drag-text,.drop-zone:hover .drop-zone-description,.drop-zone.dragover .drag-text,.drop-zone.dragover .drop-zone-description{color:#136ab6}.drop-zone-icon{width:40px;height:40px;background:#F2F4F7;border:6px solid #F9FAFB;border-radius:28px;display:flex;align-items:center;justify-content:center;transition:.2s}.drop-zone-icon zen-icon{width:20px;height:20px;background-color:#475467;transition:.2s}.drop-zone-text{display:flex;gap:4px;align-items:center;justify-content:center;font-size:14px;line-height:20px}.click-text{font-weight:500;color:#105494}.drag-text{font-weight:400;color:#667085;transition:.2s}.drop-zone-description{font-size:12px;line-height:18px;font-weight:400;color:#667085;text-align:center;margin:0;transition:.2s}.file-queue{display:flex;flex-direction:column;gap:12px;margin-top:16px}.file-item{display:flex;align-items:flex-start;gap:4px;padding:16px;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;transition:.2s}.file-item.complete{border-color:#2188d9}.file-item-content{display:flex;flex:1;gap:16px;align-items:flex-start;min-width:0}.file-icon-wrap{width:28px;height:28px;position:relative;flex-shrink:0}.file-icon-wrap:before{content:\"\";position:absolute;top:-2px;left:-2px;width:32px;height:32px;background:#E3EEFB;border:4px solid #F1F7FE;border-radius:28px}.file-icon-wrap .file-icon{position:relative;width:16px;height:16px;background-color:#136ab6;top:6px;left:6px}.file-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.file-text{display:flex;flex-direction:column;line-height:20px;font-size:14px}.file-name{font-weight:500;color:#344054;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-weight:400;color:#667085;margin:0}.progress-row{display:flex;align-items:center;gap:12px;width:100%}.progress-track{flex:1;height:8px;background:#F1F7FE;border-radius:4px;position:relative;overflow:hidden}.progress-fill{position:absolute;top:0;left:0;height:8px;background:#136AB6;border-radius:4px;transition:width .3s ease}.progress-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap;flex-shrink:0}.file-action{display:flex;align-items:center;justify-content:center;padding:8px;margin:-8px -8px -8px 0;border:none;background:transparent;cursor:pointer;border-radius:8px;-webkit-appearance:none;appearance:none;outline:none;flex-shrink:0}.file-action:hover{background:#F9FAFB}.file-action .trash-icon{width:20px;height:20px;background-color:#98a2b3}.check-icon{width:20px;height:20px;background-color:#136ab6;flex-shrink:0}.fill-type{position:relative;overflow:hidden;height:72px;padding:0}.fill-type .file-item-content{position:absolute;top:15px;left:17px;right:51px;z-index:1}.fill-type .file-info{gap:0}.fill-type .file-name,.fill-type .file-size{line-height:20px;font-size:14px}.fill-bg{position:absolute;top:-1px;left:-1px;bottom:-1px;background:#F9FAFB;transition:width .3s ease}.file-spinner{position:absolute;z-index:1;right:15px;top:15px;width:32px;height:32px}.fill-type .check-icon{position:absolute;z-index:1;right:15px;top:15px}\n"], dependencies: [{ kind: "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: i2.ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: i3.ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+ZenduFileUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ZenduFileUploaderComponent, selector: "zen-file-uploader", inputs: { accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", disabled: "disabled", description: "description", progressType: "progressType", files: "files" }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"zen-fu\" [class.disabled]=\"disabled\">\n    <!-- Drop Zone -->\n    <div class=\"drop-zone\"\n         [class.dragover]=\"isDragover\"\n         (click)=\"openFileDialog()\">\n        <div class=\"drop-zone-icon\">\n            <zen-icon src=\"assets/ng-zenduit/icons/upload-cloud.svg\"></zen-icon>\n        </div>\n        <div class=\"drop-zone-text\">\n            <span class=\"click-text\">{{ 'Click to upload' | translate }}</span>\n            <span class=\"drag-text\">{{ 'or drag and drop' | translate }}</span>\n        </div>\n        <p class=\"drop-zone-description\">\n            {{ description || ('SVG, PNG, JPG or GIF (max. 800x400px)' | translate) }}\n        </p>\n    </div>\n\n    <input type=\"file\"\n           #fileInput\n           style=\"display:none\"\n           [accept]=\"accept\"\n           [multiple]=\"multiple\"\n           (change)=\"onFileInput($event)\" />\n\n    <!-- File Queue -->\n    <div class=\"file-queue\" *ngIf=\"files?.length\">\n\n        <!-- Progress Bar Type -->\n        <ng-container *ngIf=\"progressType === 'bar'\">\n            <div class=\"file-item bar-type\"\n                 *ngFor=\"let item of files\"\n                 [class.complete]=\"item.status === 'complete'\">\n                <div class=\"file-item-content\">\n                    <div class=\"file-icon-wrap\">\n                        <zen-icon class=\"file-icon\"\n                                  [src]=\"getFileIcon(item.fileType)\">\n                        </zen-icon>\n                    </div>\n                    <div class=\"file-info\">\n                        <div class=\"file-text\">\n                            <p class=\"file-name\">{{ item.file.name }}</p>\n                            <p class=\"file-size\">{{ formatFileSize(item.file.size) }}</p>\n                        </div>\n                        <div class=\"progress-row\">\n                            <div class=\"progress-track\">\n                                <div class=\"progress-fill\" [style.width.%]=\"item.progress\"></div>\n                            </div>\n                            <span class=\"progress-label\">{{ item.progress }}%</span>\n                        </div>\n                    </div>\n                </div>\n                <button class=\"file-action\"\n                        *ngIf=\"item.status === 'uploading'\"\n                        (click)=\"removeFile(item)\">\n                    <zen-icon class=\"trash-icon\"\n                              src=\"assets/ng-zenduit/icons/trash.svg\">\n                    </zen-icon>\n                </button>\n                <zen-icon class=\"check-icon\"\n                          *ngIf=\"item.status === 'complete'\"\n                          src=\"assets/ng-zenduit/icons/check-circle.svg\">\n                </zen-icon>\n            </div>\n        </ng-container>\n\n        <!-- Progress Fill Type -->\n        <ng-container *ngIf=\"progressType === 'fill'\">\n            <div class=\"file-item fill-type\"\n                 *ngFor=\"let item of files\">\n                <div class=\"fill-bg\" [style.width.%]=\"item.progress\"></div>\n                <div class=\"file-item-content\">\n                    <div class=\"file-icon-wrap\">\n                        <zen-icon class=\"file-icon\"\n                                  [src]=\"getFileIcon(item.fileType)\">\n                        </zen-icon>\n                    </div>\n                    <div class=\"file-info\">\n                        <p class=\"file-name\">{{ item.file.name }}</p>\n                        <p class=\"file-size\">{{ formatFileSize(item.file.size) }} &ndash; {{ item.progress }}% {{ 'uploaded' | translate }}</p>\n                    </div>\n                </div>\n                <zen-spinner *ngIf=\"item.status === 'uploading'\"\n                             class=\"file-spinner\"\n                             size=\"small\">\n                </zen-spinner>\n                <zen-icon class=\"check-icon\"\n                          *ngIf=\"item.status === 'complete'\"\n                          src=\"assets/ng-zenduit/icons/check-circle.svg\">\n                </zen-icon>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}.zen-fu{font-family:Inter,sans-serif}.zen-fu.disabled{opacity:.5;pointer-events:none}.drop-zone{display:flex;flex-direction:column;align-items:center;padding:16px 24px;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;cursor:pointer;transition:.2s;gap:12px}.drop-zone:hover,.drop-zone.dragover{background:#FAFDFF;border-color:#88c1f1}.drop-zone:hover .drop-zone-icon,.drop-zone.dragover .drop-zone-icon{background:#E3EEFB;border-color:#f1f7fe}.drop-zone:hover .drop-zone-icon zen-icon,.drop-zone.dragover .drop-zone-icon zen-icon{background-color:#136ab6}.drop-zone:hover .drag-text,.drop-zone:hover .drop-zone-description,.drop-zone.dragover .drag-text,.drop-zone.dragover .drop-zone-description{color:#136ab6}.drop-zone-icon{width:40px;height:40px;background:#F2F4F7;border:6px solid #F9FAFB;border-radius:28px;display:flex;align-items:center;justify-content:center;transition:.2s}.drop-zone-icon zen-icon{width:20px;height:20px;background-color:#475467;transition:.2s}.drop-zone-text{display:flex;gap:4px;align-items:center;justify-content:center;font-size:14px;line-height:20px}.click-text{font-weight:500;color:#105494}.drag-text{font-weight:400;color:#667085;transition:.2s}.drop-zone-description{font-size:12px;line-height:18px;font-weight:400;color:#667085;text-align:center;margin:0;transition:.2s}.file-queue{display:flex;flex-direction:column;gap:12px;margin-top:16px}.file-item{display:flex;align-items:flex-start;gap:4px;padding:16px;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;transition:.2s}.file-item.complete{border-color:#2188d9}.file-item-content{display:flex;flex:1;gap:16px;align-items:flex-start;min-width:0}.file-icon-wrap{width:28px;height:28px;position:relative;flex-shrink:0}.file-icon-wrap:before{content:\"\";position:absolute;top:-2px;left:-2px;width:32px;height:32px;background:#E3EEFB;border:4px solid #F1F7FE;border-radius:28px}.file-icon-wrap .file-icon{position:relative;width:16px;height:16px;background-color:#136ab6;top:6px;left:6px}.file-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.file-text{display:flex;flex-direction:column;line-height:20px;font-size:14px}.file-name{font-weight:500;color:#344054;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-weight:400;color:#667085;margin:0}.progress-row{display:flex;align-items:center;gap:12px;width:100%}.progress-track{flex:1;height:8px;background:#F1F7FE;border-radius:4px;position:relative;overflow:hidden}.progress-fill{position:absolute;top:0;left:0;height:8px;background:#136AB6;border-radius:4px;transition:width .3s ease}.progress-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap;flex-shrink:0}.file-action{display:flex;align-items:center;justify-content:center;padding:8px;margin:-8px -8px -8px 0;border:none;background:transparent;cursor:pointer;border-radius:8px;-webkit-appearance:none;appearance:none;outline:none;flex-shrink:0}.file-action:hover{background:#F9FAFB}.file-action .trash-icon{width:20px;height:20px;background-color:#98a2b3}.check-icon{width:20px;height:20px;background-color:#136ab6;flex-shrink:0}.fill-type{position:relative;overflow:hidden;height:72px;padding:0}.fill-type .file-item-content{position:absolute;top:15px;left:17px;right:51px;z-index:1}.fill-type .file-info{gap:0}.fill-type .file-name,.fill-type .file-size{line-height:20px;font-size:14px}.fill-bg{position:absolute;top:-1px;left:-1px;bottom:-1px;background:#F9FAFB;transition:width .3s ease}.file-spinner{position:absolute;z-index:1;right:15px;top:15px;width:32px;height:32px}.fill-type .check-icon{position:absolute;z-index:1;right:15px;top:15px}\n"], dependencies: [{ kind: "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: i2.ZenduIconComponent, selector: "zen-icon", inputs: ["src", "name", "size", "color", "theme", "customColor"] }, { kind: "component", type: i3.ZenduSpinner, selector: "zen-spinner", inputs: ["size"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ZenduFileUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'zen-file-uploader', template: "<div class=\"zen-fu\" [class.disabled]=\"disabled\">\n    <!-- Drop Zone -->\n    <div class=\"drop-zone\"\n         [class.dragover]=\"isDragover\"\n         (click)=\"openFileDialog()\">\n        <div class=\"drop-zone-icon\">\n            <zen-icon src=\"assets/ng-zenduit/icons/upload-cloud.svg\"></zen-icon>\n        </div>\n        <div class=\"drop-zone-text\">\n            <span class=\"click-text\">{{ 'Click to upload' | translate }}</span>\n            <span class=\"drag-text\">{{ 'or drag and drop' | translate }}</span>\n        </div>\n        <p class=\"drop-zone-description\">\n            {{ description || ('SVG, PNG, JPG or GIF (max. 800x400px)' | translate) }}\n        </p>\n    </div>\n\n    <input type=\"file\"\n           #fileInput\n           hidden\n           [accept]=\"accept\"\n           [multiple]=\"multiple\"\n           (change)=\"onFileInput($event)\" />\n\n    <!-- File Queue -->\n    <div class=\"file-queue\" *ngIf=\"files?.length\">\n\n        <!-- Progress Bar Type -->\n        <ng-container *ngIf=\"progressType === 'bar'\">\n            <div class=\"file-item bar-type\"\n                 *ngFor=\"let item of files\"\n                 [class.complete]=\"item.status === 'complete'\">\n                <div class=\"file-item-content\">\n                    <div class=\"file-icon-wrap\">\n                        <zen-icon class=\"file-icon\"\n                                  [src]=\"getFileIcon(item.fileType)\">\n                        </zen-icon>\n                    </div>\n                    <div class=\"file-info\">\n                        <div class=\"file-text\">\n                            <p class=\"file-name\">{{ item.file.name }}</p>\n                            <p class=\"file-size\">{{ formatFileSize(item.file.size) }}</p>\n                        </div>\n                        <div class=\"progress-row\">\n                            <div class=\"progress-track\">\n                                <div class=\"progress-fill\" [style.width.%]=\"item.progress\"></div>\n                            </div>\n                            <span class=\"progress-label\">{{ item.progress }}%</span>\n                        </div>\n                    </div>\n                </div>\n                <button class=\"file-action\"\n                        *ngIf=\"item.status === 'uploading'\"\n                        (click)=\"removeFile(item)\">\n                    <zen-icon class=\"trash-icon\"\n                              src=\"assets/ng-zenduit/icons/trash.svg\">\n                    </zen-icon>\n                </button>\n                <zen-icon class=\"check-icon\"\n                          *ngIf=\"item.status === 'complete'\"\n                          src=\"assets/ng-zenduit/icons/check-circle.svg\">\n                </zen-icon>\n            </div>\n        </ng-container>\n\n        <!-- Progress Fill Type -->\n        <ng-container *ngIf=\"progressType === 'fill'\">\n            <div class=\"file-item fill-type\"\n                 *ngFor=\"let item of files\">\n                <div class=\"fill-bg\" [style.width.%]=\"item.progress\"></div>\n                <div class=\"file-item-content\">\n                    <div class=\"file-icon-wrap\">\n                        <zen-icon class=\"file-icon\"\n                                  [src]=\"getFileIcon(item.fileType)\">\n                        </zen-icon>\n                    </div>\n                    <div class=\"file-info\">\n                        <p class=\"file-name\">{{ item.file.name }}</p>\n                        <p class=\"file-size\">{{ formatFileSize(item.file.size) }} &ndash; {{ item.progress }}% {{ 'uploaded' | translate }}</p>\n                    </div>\n                </div>\n                <zen-spinner *ngIf=\"item.status === 'uploading'\"\n                             class=\"file-spinner\"\n                             size=\"small\">\n                </zen-spinner>\n                <zen-icon class=\"check-icon\"\n                          *ngIf=\"item.status === 'complete'\"\n                          src=\"assets/ng-zenduit/icons/check-circle.svg\">\n                </zen-icon>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}.zen-fu{font-family:Inter,sans-serif}.zen-fu.disabled{opacity:.5;pointer-events:none}.drop-zone{display:flex;flex-direction:column;align-items:center;padding:16px 24px;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;cursor:pointer;transition:.2s;gap:12px}.drop-zone:hover,.drop-zone.dragover{background:#FAFDFF;border-color:#88c1f1}.drop-zone:hover .drop-zone-icon,.drop-zone.dragover .drop-zone-icon{background:#E3EEFB;border-color:#f1f7fe}.drop-zone:hover .drop-zone-icon zen-icon,.drop-zone.dragover .drop-zone-icon zen-icon{background-color:#136ab6}.drop-zone:hover .drag-text,.drop-zone:hover .drop-zone-description,.drop-zone.dragover .drag-text,.drop-zone.dragover .drop-zone-description{color:#136ab6}.drop-zone-icon{width:40px;height:40px;background:#F2F4F7;border:6px solid #F9FAFB;border-radius:28px;display:flex;align-items:center;justify-content:center;transition:.2s}.drop-zone-icon zen-icon{width:20px;height:20px;background-color:#475467;transition:.2s}.drop-zone-text{display:flex;gap:4px;align-items:center;justify-content:center;font-size:14px;line-height:20px}.click-text{font-weight:500;color:#105494}.drag-text{font-weight:400;color:#667085;transition:.2s}.drop-zone-description{font-size:12px;line-height:18px;font-weight:400;color:#667085;text-align:center;margin:0;transition:.2s}.file-queue{display:flex;flex-direction:column;gap:12px;margin-top:16px}.file-item{display:flex;align-items:flex-start;gap:4px;padding:16px;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;transition:.2s}.file-item.complete{border-color:#2188d9}.file-item-content{display:flex;flex:1;gap:16px;align-items:flex-start;min-width:0}.file-icon-wrap{width:28px;height:28px;position:relative;flex-shrink:0}.file-icon-wrap:before{content:\"\";position:absolute;top:-2px;left:-2px;width:32px;height:32px;background:#E3EEFB;border:4px solid #F1F7FE;border-radius:28px}.file-icon-wrap .file-icon{position:relative;width:16px;height:16px;background-color:#136ab6;top:6px;left:6px}.file-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.file-text{display:flex;flex-direction:column;line-height:20px;font-size:14px}.file-name{font-weight:500;color:#344054;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-weight:400;color:#667085;margin:0}.progress-row{display:flex;align-items:center;gap:12px;width:100%}.progress-track{flex:1;height:8px;background:#F1F7FE;border-radius:4px;position:relative;overflow:hidden}.progress-fill{position:absolute;top:0;left:0;height:8px;background:#136AB6;border-radius:4px;transition:width .3s ease}.progress-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap;flex-shrink:0}.file-action{display:flex;align-items:center;justify-content:center;padding:8px;margin:-8px -8px -8px 0;border:none;background:transparent;cursor:pointer;border-radius:8px;-webkit-appearance:none;appearance:none;outline:none;flex-shrink:0}.file-action:hover{background:#F9FAFB}.file-action .trash-icon{width:20px;height:20px;background-color:#98a2b3}.check-icon{width:20px;height:20px;background-color:#136ab6;flex-shrink:0}.fill-type{position:relative;overflow:hidden;height:72px;padding:0}.fill-type .file-item-content{position:absolute;top:15px;left:17px;right:51px;z-index:1}.fill-type .file-info{gap:0}.fill-type .file-name,.fill-type .file-size{line-height:20px;font-size:14px}.fill-bg{position:absolute;top:-1px;left:-1px;bottom:-1px;background:#F9FAFB;transition:width .3s ease}.file-spinner{position:absolute;z-index:1;right:15px;top:15px;width:32px;height:32px}.fill-type .check-icon{position:absolute;z-index:1;right:15px;top:15px}\n"] }]
+            args: [{ selector: 'zen-file-uploader', template: "<div class=\"zen-fu\" [class.disabled]=\"disabled\">\n    <!-- Drop Zone -->\n    <div class=\"drop-zone\"\n         [class.dragover]=\"isDragover\"\n         (click)=\"openFileDialog()\">\n        <div class=\"drop-zone-icon\">\n            <zen-icon src=\"assets/ng-zenduit/icons/upload-cloud.svg\"></zen-icon>\n        </div>\n        <div class=\"drop-zone-text\">\n            <span class=\"click-text\">{{ 'Click to upload' | translate }}</span>\n            <span class=\"drag-text\">{{ 'or drag and drop' | translate }}</span>\n        </div>\n        <p class=\"drop-zone-description\">\n            {{ description || ('SVG, PNG, JPG or GIF (max. 800x400px)' | translate) }}\n        </p>\n    </div>\n\n    <input type=\"file\"\n           #fileInput\n           style=\"display:none\"\n           [accept]=\"accept\"\n           [multiple]=\"multiple\"\n           (change)=\"onFileInput($event)\" />\n\n    <!-- File Queue -->\n    <div class=\"file-queue\" *ngIf=\"files?.length\">\n\n        <!-- Progress Bar Type -->\n        <ng-container *ngIf=\"progressType === 'bar'\">\n            <div class=\"file-item bar-type\"\n                 *ngFor=\"let item of files\"\n                 [class.complete]=\"item.status === 'complete'\">\n                <div class=\"file-item-content\">\n                    <div class=\"file-icon-wrap\">\n                        <zen-icon class=\"file-icon\"\n                                  [src]=\"getFileIcon(item.fileType)\">\n                        </zen-icon>\n                    </div>\n                    <div class=\"file-info\">\n                        <div class=\"file-text\">\n                            <p class=\"file-name\">{{ item.file.name }}</p>\n                            <p class=\"file-size\">{{ formatFileSize(item.file.size) }}</p>\n                        </div>\n                        <div class=\"progress-row\">\n                            <div class=\"progress-track\">\n                                <div class=\"progress-fill\" [style.width.%]=\"item.progress\"></div>\n                            </div>\n                            <span class=\"progress-label\">{{ item.progress }}%</span>\n                        </div>\n                    </div>\n                </div>\n                <button class=\"file-action\"\n                        *ngIf=\"item.status === 'uploading'\"\n                        (click)=\"removeFile(item)\">\n                    <zen-icon class=\"trash-icon\"\n                              src=\"assets/ng-zenduit/icons/trash.svg\">\n                    </zen-icon>\n                </button>\n                <zen-icon class=\"check-icon\"\n                          *ngIf=\"item.status === 'complete'\"\n                          src=\"assets/ng-zenduit/icons/check-circle.svg\">\n                </zen-icon>\n            </div>\n        </ng-container>\n\n        <!-- Progress Fill Type -->\n        <ng-container *ngIf=\"progressType === 'fill'\">\n            <div class=\"file-item fill-type\"\n                 *ngFor=\"let item of files\">\n                <div class=\"fill-bg\" [style.width.%]=\"item.progress\"></div>\n                <div class=\"file-item-content\">\n                    <div class=\"file-icon-wrap\">\n                        <zen-icon class=\"file-icon\"\n                                  [src]=\"getFileIcon(item.fileType)\">\n                        </zen-icon>\n                    </div>\n                    <div class=\"file-info\">\n                        <p class=\"file-name\">{{ item.file.name }}</p>\n                        <p class=\"file-size\">{{ formatFileSize(item.file.size) }} &ndash; {{ item.progress }}% {{ 'uploaded' | translate }}</p>\n                    </div>\n                </div>\n                <zen-spinner *ngIf=\"item.status === 'uploading'\"\n                             class=\"file-spinner\"\n                             size=\"small\">\n                </zen-spinner>\n                <zen-icon class=\"check-icon\"\n                          *ngIf=\"item.status === 'complete'\"\n                          src=\"assets/ng-zenduit/icons/check-circle.svg\">\n                </zen-icon>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host{display:block}.zen-fu{font-family:Inter,sans-serif}.zen-fu.disabled{opacity:.5;pointer-events:none}.drop-zone{display:flex;flex-direction:column;align-items:center;padding:16px 24px;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;cursor:pointer;transition:.2s;gap:12px}.drop-zone:hover,.drop-zone.dragover{background:#FAFDFF;border-color:#88c1f1}.drop-zone:hover .drop-zone-icon,.drop-zone.dragover .drop-zone-icon{background:#E3EEFB;border-color:#f1f7fe}.drop-zone:hover .drop-zone-icon zen-icon,.drop-zone.dragover .drop-zone-icon zen-icon{background-color:#136ab6}.drop-zone:hover .drag-text,.drop-zone:hover .drop-zone-description,.drop-zone.dragover .drag-text,.drop-zone.dragover .drop-zone-description{color:#136ab6}.drop-zone-icon{width:40px;height:40px;background:#F2F4F7;border:6px solid #F9FAFB;border-radius:28px;display:flex;align-items:center;justify-content:center;transition:.2s}.drop-zone-icon zen-icon{width:20px;height:20px;background-color:#475467;transition:.2s}.drop-zone-text{display:flex;gap:4px;align-items:center;justify-content:center;font-size:14px;line-height:20px}.click-text{font-weight:500;color:#105494}.drag-text{font-weight:400;color:#667085;transition:.2s}.drop-zone-description{font-size:12px;line-height:18px;font-weight:400;color:#667085;text-align:center;margin:0;transition:.2s}.file-queue{display:flex;flex-direction:column;gap:12px;margin-top:16px}.file-item{display:flex;align-items:flex-start;gap:4px;padding:16px;background:#FFFFFF;border:1px solid #EAECF0;border-radius:8px;transition:.2s}.file-item.complete{border-color:#2188d9}.file-item-content{display:flex;flex:1;gap:16px;align-items:flex-start;min-width:0}.file-icon-wrap{width:28px;height:28px;position:relative;flex-shrink:0}.file-icon-wrap:before{content:\"\";position:absolute;top:-2px;left:-2px;width:32px;height:32px;background:#E3EEFB;border:4px solid #F1F7FE;border-radius:28px}.file-icon-wrap .file-icon{position:relative;width:16px;height:16px;background-color:#136ab6;top:6px;left:6px}.file-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.file-text{display:flex;flex-direction:column;line-height:20px;font-size:14px}.file-name{font-weight:500;color:#344054;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-weight:400;color:#667085;margin:0}.progress-row{display:flex;align-items:center;gap:12px;width:100%}.progress-track{flex:1;height:8px;background:#F1F7FE;border-radius:4px;position:relative;overflow:hidden}.progress-fill{position:absolute;top:0;left:0;height:8px;background:#136AB6;border-radius:4px;transition:width .3s ease}.progress-label{font-size:14px;font-weight:500;line-height:20px;color:#344054;white-space:nowrap;flex-shrink:0}.file-action{display:flex;align-items:center;justify-content:center;padding:8px;margin:-8px -8px -8px 0;border:none;background:transparent;cursor:pointer;border-radius:8px;-webkit-appearance:none;appearance:none;outline:none;flex-shrink:0}.file-action:hover{background:#F9FAFB}.file-action .trash-icon{width:20px;height:20px;background-color:#98a2b3}.check-icon{width:20px;height:20px;background-color:#136ab6;flex-shrink:0}.fill-type{position:relative;overflow:hidden;height:72px;padding:0}.fill-type .file-item-content{position:absolute;top:15px;left:17px;right:51px;z-index:1}.fill-type .file-info{gap:0}.fill-type .file-name,.fill-type .file-size{line-height:20px;font-size:14px}.fill-bg{position:absolute;top:-1px;left:-1px;bottom:-1px;background:#F9FAFB;transition:width .3s ease}.file-spinner{position:absolute;z-index:1;right:15px;top:15px;width:32px;height:32px}.fill-type .check-icon{position:absolute;z-index:1;right:15px;top:15px}\n"] }]
         }], propDecorators: { accept: [{
                 type: Input
             }], multiple: [{
@@ -141,4 +141,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: HostListener,
                 args: ['drop', ['$event']]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiemVuZHUtZmlsZS11cGxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy16ZW5kdWl0L3NyYy9saWIvZmlsZS11cGxvYWRlci96ZW5kdS1maWxlLXVwbG9hZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXplbmR1aXQvc3JjL2xpYi9maWxlLXVwbG9hZGVyL3plbmR1LWZpbGUtdXBsb2FkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUM5RSxNQUFNLGVBQWUsQ0FBQzs7Ozs7O0FBUXZCLE1BQU0sT0FBTywwQkFBMEI7SUFMdkM7UUFPYSxXQUFNLEdBQVcsR0FBRyxDQUFDO1FBQ3JCLGFBQVEsR0FBWSxJQUFJLENBQUM7UUFDekIsZ0JBQVcsR0FBVyxDQUFDLENBQUM7UUFDeEIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUN6QixpQkFBWSxHQUE2QixLQUFLLENBQUM7UUFDL0MsVUFBSyxHQUFxQixFQUFFLENBQUM7UUFFNUIsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBQzNDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQWtCLENBQUM7UUFJM0QsZUFBVSxHQUFHLEtBQUssQ0FBQztLQTRGdEI7SUF6RkcsVUFBVSxDQUFDLEdBQWM7UUFDckIsSUFBSSxJQUFJLENBQUMsUUFBUTtZQUFFLE9BQU87UUFDMUIsR0FBRyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3JCLEdBQUcsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUMzQixDQUFDO0lBR0QsV0FBVyxDQUFDLEdBQWM7UUFD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QyxJQUFJLENBQUMsQ0FBQztTQUNwQjtRQUNELE9BQU8sS0FBSyxDQUFDO0lBQ2pCLENBQUM7O3dIQTFHUSwwQkFBMEI7NEdBQTFCLDBCQUEwQixtaEJDVnZDLG9wSUE2RkE7NEZEbkZhLDBCQUEwQjtrQkFMdEMsU0FBUzsrQkFDSSxtQkFBbUI7OEJBTXBCLE1BQU07c0JBQWQsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUVJLGFBQWE7c0JBQXRCLE1BQU07Z0JBQ0csV0FBVztzQkFBcEIsTUFBTTtnQkFFaUIsU0FBUztzQkFBaEMsU0FBUzt1QkFBQyxXQUFXO2dCQUt0QixVQUFVO3NCQURULFlBQVk7dUJBQUMsVUFBVSxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVNwQyxXQUFXO3NCQURWLFlBQVk7dUJBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVFyQyxNQUFNO3NCQURMLFlBQVk7dUJBQUMsTUFBTSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3Q2hpbGRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGaWxlVXBsb2FkSXRlbSwgRmlsZVVwbG9hZGVyUHJvZ3Jlc3NUeXBlIH0gZnJvbSAnLi9maWxlLXVwbG9hZGVyLnR5cGVzJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd6ZW4tZmlsZS11cGxvYWRlcicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3plbmR1LWZpbGUtdXBsb2FkZXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3plbmR1LWZpbGUtdXBsb2FkZXIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBaZW5kdUZpbGVVcGxvYWRlckNvbXBvbmVudCB7XG5cbiAgICBASW5wdXQoKSBhY2NlcHQ6IHN0cmluZyA9ICcqJztcbiAgICBASW5wdXQoKSBtdWx0aXBsZTogYm9vbGVhbiA9IHRydWU7XG4gICAgQElucHV0KCkgbWF4RmlsZVNpemU6IG51bWJlciA9IDA7XG4gICAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBASW5wdXQoKSBkZXNjcmlwdGlvbjogc3RyaW5nID0gJyc7XG4gICAgQElucHV0KCkgcHJvZ3Jlc3NUeXBlOiBGaWxlVXBsb2FkZXJQcm9ncmVzc1R5cGUgPSAnYmFyJztcbiAgICBASW5wdXQoKSBmaWxlczogRmlsZVVwbG9hZEl0ZW1bXSA9IFtdO1xuXG4gICAgQE91dHB1dCgpIGZpbGVzU2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPEZpbGVbXT4oKTtcbiAgICBAT3V0cHV0KCkgZmlsZVJlbW92ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPEZpbGVVcGxvYWRJdGVtPigpO1xuXG4gICAgQFZpZXdDaGlsZCgnZmlsZUlucHV0JykgZmlsZUlucHV0ITogRWxlbWVudFJlZjxIVE1MSW5wdXRFbGVtZW50PjtcblxuICAgIGlzRHJhZ292ZXIgPSBmYWxzZTtcblxuICAgIEBIb3N0TGlzdGVuZXIoJ2RyYWdvdmVyJywgWyckZXZlbnQnXSlcbiAgICBvbkRyYWdPdmVyKGV2dDogRHJhZ0V2ZW50KSB7XG4gICAgICAgIGlmICh0aGlzLmRpc2FibGVkKSByZXR1cm47XG4gICAgICAgIGV2dC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBldnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIHRoaXMuaXNEcmFnb3ZlciA9IHRydWU7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcignZHJhZ2xlYXZlJywgWyckZXZlbnQnXSlcbiAgICBvbkRyYWdMZWF2ZShldnQ6IERyYWdFdmVudCkge1xuICAgICAgICBldnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgZXZ0LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgICB0aGlzLmlzRHJhZ292ZXIgPSBmYWxzZTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdkcm9wJywgWyckZXZlbnQnXSlcbiAgICBvbkRyb3AoZXZ0OiBEcmFnRXZlbnQpIHtcbiAgICAgICAgaWYgKHRoaXMuZGlzYWJsZWQpIHJldHVybjtcbiAgICAgICAgZXZ0LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGV2dC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgICAgdGhpcy5pc0RyYWdvdmVyID0gZmFsc2U7XG5cbiAgICAgICAgY29uc3QgZHQgPSBldnQuZGF0YVRyYW5zZmVyO1xuICAgICAgICBpZiAoZHQgJiYgZHQuZmlsZXMubGVuZ3RoKSB7XG4gICAgICAgICAgICBjb25zdCBmaWx0ZXJlZCA9IHRoaXMuZmlsdGVyRmlsZXMoZHQuZmlsZXMpO1xuICAgICAgICAgICAgaWYgKGZpbHRlcmVkLmxlbmd0aCkge1xuICAgICAgICAgICAgICAgIHRoaXMuZmlsZXNTZWxlY3RlZC5lbWl0KGZpbHRlcmVkKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgIG9wZW5GaWxlRGlhbG9nKCkge1xuICAgICAgICBpZiAodGhpcy5kaXNhYmxlZCkgcmV0dXJuO1xuICAgICAgICB0aGlzLmZpbGVJbnB1dC5uYXRpdmVFbGVtZW50LmNsaWNrKCk7XG4gICAgfVxuXG4gICAgb25GaWxlSW5wdXQoZXZ0OiBFdmVudCkge1xuICAgICAgICBjb25zdCBpbnB1dCA9IGV2dC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgICAgaWYgKGlucHV0LmZpbGVzICYmIGlucHV0LmZpbGVzLmxlbmd0aCkge1xuICAgICAgICAgICAgY29uc3QgZmlsZXM6IEZpbGVbXSA9IFtdO1xuICAgICAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCBpbnB1dC5maWxlcy5sZW5ndGg7IGkrKykge1xuICAgICAgICAgICAgICAgIGZpbGVzLnB1c2goaW5wdXQuZmlsZXNbaV0pO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgdGhpcy5maWxlc1NlbGVjdGVkLmVtaXQoZmlsZXMpO1xuICAgICAgICB9XG4gICAgICAgIGlucHV0LnZhbHVlID0gJyc7XG4gICAgfVxuXG4gICAgcmVtb3ZlRmlsZShpdGVtOiBGaWxlVXBsb2FkSXRlbSkge1xuICAgICAgICB0aGlzLmZpbGVSZW1vdmVkLmVtaXQoaXRlbSk7XG4gICAgfVxuXG4gICAgZ2V0RmlsZUljb24oZmlsZVR5cGU6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgICAgIHN3aXRjaCAoZmlsZVR5cGUpIHtcbiAgICAgICAgICAgIGNhc2UgJ3ZpZGVvJzogcmV0dXJuICdhc3NldHMvbmctemVuZHVpdC9pY29ucy9maWxtLnN2Zyc7XG4gICAgICAgICAgICBjYXNlICdtaXNjJzogcmV0dXJuICdhc3NldHMvbmctemVuZHVpdC9pY29ucy91cGxvYWQtY2xvdWQuc3ZnJztcbiAgICAgICAgICAgIGRlZmF1bHQ6IHJldHVybiAnYXNzZXRzL25nLXplbmR1aXQvaWNvbnMvZmlsZS11cGxvYWQuc3ZnJztcbiAgICAgICAgfVxuICAgIH1cblxuICAgIGZvcm1hdEZpbGVTaXplKGJ5dGVzOiBudW1iZXIpOiBzdHJpbmcge1xuICAgICAgICBpZiAoIWJ5dGVzKSByZXR1cm4gJzAgQic7XG4gICAgICAgIGlmIChieXRlcyA8IDEwMjQpIHJldHVybiBgJHtieXRlc30gQmA7XG4gICAgICAgIGlmIChieXRlcyA8IDEwMjQgKiAxMDI0KSByZXR1cm4gYCR7TWF0aC5yb3VuZChieXRlcyAvIDEwMjQpfSBLQmA7XG4gICAgICAgIGlmIChieXRlcyA8IDEwMjQgKiAxMDI0ICogMTAyNCkgcmV0dXJuIGAkeyhieXRlcyAvICgxMDI0ICogMTAyNCkpLnRvRml4ZWQoMSl9IE1CYDtcbiAgICAgICAgcmV0dXJuIGAkeyhieXRlcyAvICgxMDI0ICogMTAyNCAqIDEwMjQpKS50b0ZpeGVkKDEpfSBHQmA7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBmaWx0ZXJGaWxlcyhmaWxlTGlzdDogRmlsZUxpc3QpOiBGaWxlW10ge1xuICAgICAgICBjb25zdCBmaWxlczogRmlsZVtdID0gW107XG4gICAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgZmlsZUxpc3QubGVuZ3RoOyBpKyspIHtcbiAgICAgICAgICAgIGNvbnN0IGZpbGUgPSBmaWxlTGlzdFtpXTtcbiAgICAgICAgICAgIGlmICh0aGlzLm1heEZpbGVTaXplICYmIGZpbGUuc2l6ZSA+IHRoaXMubWF4RmlsZVNpemUpIGNvbnRpbnVlO1xuICAgICAgICAgICAgaWYgKHRoaXMuYWNjZXB0ICYmIHRoaXMuYWNjZXB0ICE9PSAnKicpIHtcbiAgICAgICAgICAgICAgICBjb25zdCBhY2NlcHRlZCA9IHRoaXMuYWNjZXB0LnNwbGl0KCcsJykubWFwKHQgPT4gdC50cmltKCkpO1xuICAgICAgICAgICAgICAgIGNvbnN0IG1hdGNoID0gYWNjZXB0ZWQuc29tZSh0eXBlID0+IHtcbiAgICAgICAgICAgICAgICAgICAgaWYgKHR5cGUuc3RhcnRzV2l0aCgnLicpKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gZmlsZS5uYW1lLnRvTG93ZXJDYXNlKCkuZW5kc1dpdGgodHlwZS50b0xvd2VyQ2FzZSgpKTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICBpZiAodHlwZS5lbmRzV2l0aCgnLyonKSkge1xuICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIGZpbGUudHlwZS5zdGFydHNXaXRoKHR5cGUucmVwbGFjZSgnLyonLCAnLycpKTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICByZXR1cm4gZmlsZS50eXBlID09PSB0eXBlO1xuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgICAgIGlmICghbWF0Y2gpIGNvbnRpbnVlO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgZmlsZXMucHVzaChmaWxlKTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gZmlsZXM7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInplbi1mdVwiIFtjbGFzcy5kaXNhYmxlZF09XCJkaXNhYmxlZFwiPlxuICAgIDwhLS0gRHJvcCBab25lIC0tPlxuICAgIDxkaXYgY2xhc3M9XCJkcm9wLXpvbmVcIlxuICAgICAgICAgW2NsYXNzLmRyYWdvdmVyXT1cImlzRHJhZ292ZXJcIlxuICAgICAgICAgKGNsaWNrKT1cIm9wZW5GaWxlRGlhbG9nKClcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImRyb3Atem9uZS1pY29uXCI+XG4gICAgICAgICAgICA8emVuLWljb24gc3JjPVwiYXNzZXRzL25nLXplbmR1aXQvaWNvbnMvdXBsb2FkLWNsb3VkLnN2Z1wiPjwvemVuLWljb24+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZHJvcC16b25lLXRleHRcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY2xpY2stdGV4dFwiPnt7ICdDbGljayB0byB1cGxvYWQnIHwgdHJhbnNsYXRlIH19PC9zcGFuPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJkcmFnLXRleHRcIj57eyAnb3IgZHJhZyBhbmQgZHJvcCcgfCB0cmFuc2xhdGUgfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8cCBjbGFzcz1cImRyb3Atem9uZS1kZXNjcmlwdGlvblwiPlxuICAgICAgICAgICAge3sgZGVzY3JpcHRpb24gfHwgKCdTVkcsIFBORywgSlBHIG9yIEdJRiAobWF4LiA4MDB4NDAwcHgpJyB8IHRyYW5zbGF0ZSkgfX1cbiAgICAgICAgPC9wPlxuICAgIDwvZGl2PlxuXG4gICAgPGlucHV0IHR5cGU9XCJmaWxlXCJcbiAgICAgICAgICAgI2ZpbGVJbnB1dFxuICAgICAgICAgICBoaWRkZW5cbiAgICAgICAgICAgW2FjY2VwdF09XCJhY2NlcHRcIlxuICAgICAgICAgICBbbXVsdGlwbGVdPVwibXVsdGlwbGVcIlxuICAgICAgICAgICAoY2hhbmdlKT1cIm9uRmlsZUlucHV0KCRldmVudClcIiAvPlxuXG4gICAgPCEtLSBGaWxlIFF1ZXVlIC0tPlxuICAgIDxkaXYgY2xhc3M9XCJmaWxlLXF1ZXVlXCIgKm5nSWY9XCJmaWxlcz8ubGVuZ3RoXCI+XG5cbiAgICAgICAgPCEtLSBQcm9ncmVzcyBCYXIgVHlwZSAtLT5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInByb2dyZXNzVHlwZSA9PT0gJ2JhcidcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmaWxlLWl0ZW0gYmFyLXR5cGVcIlxuICAgICAgICAgICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiBmaWxlc1wiXG4gICAgICAgICAgICAgICAgIFtjbGFzcy5jb21wbGV0ZV09XCJpdGVtLnN0YXR1cyA9PT0gJ2NvbXBsZXRlJ1wiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmaWxlLWl0ZW0tY29udGVudFwiPlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmlsZS1pY29uLXdyYXBcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDx6ZW4taWNvbiBjbGFzcz1cImZpbGUtaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgW3NyY109XCJnZXRGaWxlSWNvbihpdGVtLmZpbGVUeXBlKVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC96ZW4taWNvbj5cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmaWxlLWluZm9cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmaWxlLXRleHRcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cCBjbGFzcz1cImZpbGUtbmFtZVwiPnt7IGl0ZW0uZmlsZS5uYW1lIH19PC9wPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwIGNsYXNzPVwiZmlsZS1zaXplXCI+e3sgZm9ybWF0RmlsZVNpemUoaXRlbS5maWxlLnNpemUpIH19PC9wPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3Mtcm93XCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInByb2dyZXNzLXRyYWNrXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy1maWxsXCIgW3N0eWxlLndpZHRoLiVdPVwiaXRlbS5wcm9ncmVzc1wiPjwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwicHJvZ3Jlc3MtbGFiZWxcIj57eyBpdGVtLnByb2dyZXNzIH19JTwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8YnV0dG9uIGNsYXNzPVwiZmlsZS1hY3Rpb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJpdGVtLnN0YXR1cyA9PT0gJ3VwbG9hZGluZydcIlxuICAgICAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cInJlbW92ZUZpbGUoaXRlbSlcIj5cbiAgICAgICAgICAgICAgICAgICAgPHplbi1pY29uIGNsYXNzPVwidHJhc2gtaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzcmM9XCJhc3NldHMvbmctemVuZHVpdC9pY29ucy90cmFzaC5zdmdcIj5cbiAgICAgICAgICAgICAgICAgICAgPC96ZW4taWNvbj5cbiAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgICAgICA8emVuLWljb24gY2xhc3M9XCJjaGVjay1pY29uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJpdGVtLnN0YXR1cyA9PT0gJ2NvbXBsZXRlJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgIHNyYz1cImFzc2V0cy9uZy16ZW5kdWl0L2ljb25zL2NoZWNrLWNpcmNsZS5zdmdcIj5cbiAgICAgICAgICAgICAgICA8L3plbi1pY29uPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICAgIDwhLS0gUHJvZ3Jlc3MgRmlsbCBUeXBlIC0tPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwicHJvZ3Jlc3NUeXBlID09PSAnZmlsbCdcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmaWxlLWl0ZW0gZmlsbC10eXBlXCJcbiAgICAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgZmlsZXNcIj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmlsbC1iZ1wiIFtzdHlsZS53aWR0aC4lXT1cIml0ZW0ucHJvZ3Jlc3NcIj48L2Rpdj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmlsZS1pdGVtLWNvbnRlbnRcIj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZpbGUtaWNvbi13cmFwXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8emVuLWljb24gY2xhc3M9XCJmaWxlLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtzcmNdPVwiZ2V0RmlsZUljb24oaXRlbS5maWxlVHlwZSlcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvemVuLWljb24+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmlsZS1pbmZvXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8cCBjbGFzcz1cImZpbGUtbmFtZVwiPnt7IGl0ZW0uZmlsZS5uYW1lIH19PC9wPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHAgY2xhc3M9XCJmaWxlLXNpemVcIj57eyBmb3JtYXRGaWxlU2l6ZShpdGVtLmZpbGUuc2l6ZSkgfX0gJm5kYXNoOyB7eyBpdGVtLnByb2dyZXNzIH19JSB7eyAndXBsb2FkZWQnIHwgdHJhbnNsYXRlIH19PC9wPlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8emVuLXNwaW5uZXIgKm5nSWY9XCJpdGVtLnN0YXR1cyA9PT0gJ3VwbG9hZGluZydcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImZpbGUtc3Bpbm5lclwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiPlxuICAgICAgICAgICAgICAgIDwvemVuLXNwaW5uZXI+XG4gICAgICAgICAgICAgICAgPHplbi1pY29uIGNsYXNzPVwiY2hlY2staWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiaXRlbS5zdGF0dXMgPT09ICdjb21wbGV0ZSdcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICBzcmM9XCJhc3NldHMvbmctemVuZHVpdC9pY29ucy9jaGVjay1jaXJjbGUuc3ZnXCI+XG4gICAgICAgICAgICAgICAgPC96ZW4taWNvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiemVuZHUtZmlsZS11cGxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy16ZW5kdWl0L3NyYy9saWIvZmlsZS11cGxvYWRlci96ZW5kdS1maWxlLXVwbG9hZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXplbmR1aXQvc3JjL2xpYi9maWxlLXVwbG9hZGVyL3plbmR1LWZpbGUtdXBsb2FkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUM5RSxNQUFNLGVBQWUsQ0FBQzs7Ozs7O0FBUXZCLE1BQU0sT0FBTywwQkFBMEI7SUFMdkM7UUFPYSxXQUFNLEdBQVcsR0FBRyxDQUFDO1FBQ3JCLGFBQVEsR0FBWSxJQUFJLENBQUM7UUFDekIsZ0JBQVcsR0FBVyxDQUFDLENBQUM7UUFDeEIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUN6QixpQkFBWSxHQUE2QixLQUFLLENBQUM7UUFDL0MsVUFBSyxHQUFxQixFQUFFLENBQUM7UUFFNUIsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBQzNDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQWtCLENBQUM7UUFJM0QsZUFBVSxHQUFHLEtBQUssQ0FBQztLQTRGdEI7SUF6RkcsVUFBVSxDQUFDLEdBQWM7UUFDckIsSUFBSSxJQUFJLENBQUMsUUFBUTtZQUFFLE9BQU87UUFDMUIsR0FBRyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3JCLEdBQUcsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUMzQixDQUFDO0lBR0QsV0FBVyxDQUFDLEdBQWM7UUFD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QyxJQUFJLENBQUMsQ0FBQztTQUNwQjtRQUNELE9BQU8sS0FBSyxDQUFDO0lBQ2pCLENBQUM7O3dIQTFHUSwwQkFBMEI7NEdBQTFCLDBCQUEwQixtaEJDVnZDLG9xSUE2RkE7NEZEbkZhLDBCQUEwQjtrQkFMdEMsU0FBUzsrQkFDSSxtQkFBbUI7OEJBTXBCLE1BQU07c0JBQWQsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUVJLGFBQWE7c0JBQXRCLE1BQU07Z0JBQ0csV0FBVztzQkFBcEIsTUFBTTtnQkFFaUIsU0FBUztzQkFBaEMsU0FBUzt1QkFBQyxXQUFXO2dCQUt0QixVQUFVO3NCQURULFlBQVk7dUJBQUMsVUFBVSxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVNwQyxXQUFXO3NCQURWLFlBQVk7dUJBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVFyQyxNQUFNO3NCQURMLFlBQVk7dUJBQUMsTUFBTSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3Q2hpbGRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGaWxlVXBsb2FkSXRlbSwgRmlsZVVwbG9hZGVyUHJvZ3Jlc3NUeXBlIH0gZnJvbSAnLi9maWxlLXVwbG9hZGVyLnR5cGVzJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd6ZW4tZmlsZS11cGxvYWRlcicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3plbmR1LWZpbGUtdXBsb2FkZXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3plbmR1LWZpbGUtdXBsb2FkZXIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBaZW5kdUZpbGVVcGxvYWRlckNvbXBvbmVudCB7XG5cbiAgICBASW5wdXQoKSBhY2NlcHQ6IHN0cmluZyA9ICcqJztcbiAgICBASW5wdXQoKSBtdWx0aXBsZTogYm9vbGVhbiA9IHRydWU7XG4gICAgQElucHV0KCkgbWF4RmlsZVNpemU6IG51bWJlciA9IDA7XG4gICAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBASW5wdXQoKSBkZXNjcmlwdGlvbjogc3RyaW5nID0gJyc7XG4gICAgQElucHV0KCkgcHJvZ3Jlc3NUeXBlOiBGaWxlVXBsb2FkZXJQcm9ncmVzc1R5cGUgPSAnYmFyJztcbiAgICBASW5wdXQoKSBmaWxlczogRmlsZVVwbG9hZEl0ZW1bXSA9IFtdO1xuXG4gICAgQE91dHB1dCgpIGZpbGVzU2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPEZpbGVbXT4oKTtcbiAgICBAT3V0cHV0KCkgZmlsZVJlbW92ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPEZpbGVVcGxvYWRJdGVtPigpO1xuXG4gICAgQFZpZXdDaGlsZCgnZmlsZUlucHV0JykgZmlsZUlucHV0ITogRWxlbWVudFJlZjxIVE1MSW5wdXRFbGVtZW50PjtcblxuICAgIGlzRHJhZ292ZXIgPSBmYWxzZTtcblxuICAgIEBIb3N0TGlzdGVuZXIoJ2RyYWdvdmVyJywgWyckZXZlbnQnXSlcbiAgICBvbkRyYWdPdmVyKGV2dDogRHJhZ0V2ZW50KSB7XG4gICAgICAgIGlmICh0aGlzLmRpc2FibGVkKSByZXR1cm47XG4gICAgICAgIGV2dC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBldnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIHRoaXMuaXNEcmFnb3ZlciA9IHRydWU7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcignZHJhZ2xlYXZlJywgWyckZXZlbnQnXSlcbiAgICBvbkRyYWdMZWF2ZShldnQ6IERyYWdFdmVudCkge1xuICAgICAgICBldnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgZXZ0LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgICB0aGlzLmlzRHJhZ292ZXIgPSBmYWxzZTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdkcm9wJywgWyckZXZlbnQnXSlcbiAgICBvbkRyb3AoZXZ0OiBEcmFnRXZlbnQpIHtcbiAgICAgICAgaWYgKHRoaXMuZGlzYWJsZWQpIHJldHVybjtcbiAgICAgICAgZXZ0LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGV2dC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgICAgdGhpcy5pc0RyYWdvdmVyID0gZmFsc2U7XG5cbiAgICAgICAgY29uc3QgZHQgPSBldnQuZGF0YVRyYW5zZmVyO1xuICAgICAgICBpZiAoZHQgJiYgZHQuZmlsZXMubGVuZ3RoKSB7XG4gICAgICAgICAgICBjb25zdCBmaWx0ZXJlZCA9IHRoaXMuZmlsdGVyRmlsZXMoZHQuZmlsZXMpO1xuICAgICAgICAgICAgaWYgKGZpbHRlcmVkLmxlbmd0aCkge1xuICAgICAgICAgICAgICAgIHRoaXMuZmlsZXNTZWxlY3RlZC5lbWl0KGZpbHRlcmVkKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgIG9wZW5GaWxlRGlhbG9nKCkge1xuICAgICAgICBpZiAodGhpcy5kaXNhYmxlZCkgcmV0dXJuO1xuICAgICAgICB0aGlzLmZpbGVJbnB1dC5uYXRpdmVFbGVtZW50LmNsaWNrKCk7XG4gICAgfVxuXG4gICAgb25GaWxlSW5wdXQoZXZ0OiBFdmVudCkge1xuICAgICAgICBjb25zdCBpbnB1dCA9IGV2dC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudDtcbiAgICAgICAgaWYgKGlucHV0LmZpbGVzICYmIGlucHV0LmZpbGVzLmxlbmd0aCkge1xuICAgICAgICAgICAgY29uc3QgZmlsZXM6IEZpbGVbXSA9IFtdO1xuICAgICAgICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCBpbnB1dC5maWxlcy5sZW5ndGg7IGkrKykge1xuICAgICAgICAgICAgICAgIGZpbGVzLnB1c2goaW5wdXQuZmlsZXNbaV0pO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgdGhpcy5maWxlc1NlbGVjdGVkLmVtaXQoZmlsZXMpO1xuICAgICAgICB9XG4gICAgICAgIGlucHV0LnZhbHVlID0gJyc7XG4gICAgfVxuXG4gICAgcmVtb3ZlRmlsZShpdGVtOiBGaWxlVXBsb2FkSXRlbSkge1xuICAgICAgICB0aGlzLmZpbGVSZW1vdmVkLmVtaXQoaXRlbSk7XG4gICAgfVxuXG4gICAgZ2V0RmlsZUljb24oZmlsZVR5cGU6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgICAgIHN3aXRjaCAoZmlsZVR5cGUpIHtcbiAgICAgICAgICAgIGNhc2UgJ3ZpZGVvJzogcmV0dXJuICdhc3NldHMvbmctemVuZHVpdC9pY29ucy9maWxtLnN2Zyc7XG4gICAgICAgICAgICBjYXNlICdtaXNjJzogcmV0dXJuICdhc3NldHMvbmctemVuZHVpdC9pY29ucy91cGxvYWQtY2xvdWQuc3ZnJztcbiAgICAgICAgICAgIGRlZmF1bHQ6IHJldHVybiAnYXNzZXRzL25nLXplbmR1aXQvaWNvbnMvZmlsZS11cGxvYWQuc3ZnJztcbiAgICAgICAgfVxuICAgIH1cblxuICAgIGZvcm1hdEZpbGVTaXplKGJ5dGVzOiBudW1iZXIpOiBzdHJpbmcge1xuICAgICAgICBpZiAoIWJ5dGVzKSByZXR1cm4gJzAgQic7XG4gICAgICAgIGlmIChieXRlcyA8IDEwMjQpIHJldHVybiBgJHtieXRlc30gQmA7XG4gICAgICAgIGlmIChieXRlcyA8IDEwMjQgKiAxMDI0KSByZXR1cm4gYCR7TWF0aC5yb3VuZChieXRlcyAvIDEwMjQpfSBLQmA7XG4gICAgICAgIGlmIChieXRlcyA8IDEwMjQgKiAxMDI0ICogMTAyNCkgcmV0dXJuIGAkeyhieXRlcyAvICgxMDI0ICogMTAyNCkpLnRvRml4ZWQoMSl9IE1CYDtcbiAgICAgICAgcmV0dXJuIGAkeyhieXRlcyAvICgxMDI0ICogMTAyNCAqIDEwMjQpKS50b0ZpeGVkKDEpfSBHQmA7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBmaWx0ZXJGaWxlcyhmaWxlTGlzdDogRmlsZUxpc3QpOiBGaWxlW10ge1xuICAgICAgICBjb25zdCBmaWxlczogRmlsZVtdID0gW107XG4gICAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgZmlsZUxpc3QubGVuZ3RoOyBpKyspIHtcbiAgICAgICAgICAgIGNvbnN0IGZpbGUgPSBmaWxlTGlzdFtpXTtcbiAgICAgICAgICAgIGlmICh0aGlzLm1heEZpbGVTaXplICYmIGZpbGUuc2l6ZSA+IHRoaXMubWF4RmlsZVNpemUpIGNvbnRpbnVlO1xuICAgICAgICAgICAgaWYgKHRoaXMuYWNjZXB0ICYmIHRoaXMuYWNjZXB0ICE9PSAnKicpIHtcbiAgICAgICAgICAgICAgICBjb25zdCBhY2NlcHRlZCA9IHRoaXMuYWNjZXB0LnNwbGl0KCcsJykubWFwKHQgPT4gdC50cmltKCkpO1xuICAgICAgICAgICAgICAgIGNvbnN0IG1hdGNoID0gYWNjZXB0ZWQuc29tZSh0eXBlID0+IHtcbiAgICAgICAgICAgICAgICAgICAgaWYgKHR5cGUuc3RhcnRzV2l0aCgnLicpKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gZmlsZS5uYW1lLnRvTG93ZXJDYXNlKCkuZW5kc1dpdGgodHlwZS50b0xvd2VyQ2FzZSgpKTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICBpZiAodHlwZS5lbmRzV2l0aCgnLyonKSkge1xuICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIGZpbGUudHlwZS5zdGFydHNXaXRoKHR5cGUucmVwbGFjZSgnLyonLCAnLycpKTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICByZXR1cm4gZmlsZS50eXBlID09PSB0eXBlO1xuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgICAgIGlmICghbWF0Y2gpIGNvbnRpbnVlO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgZmlsZXMucHVzaChmaWxlKTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gZmlsZXM7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInplbi1mdVwiIFtjbGFzcy5kaXNhYmxlZF09XCJkaXNhYmxlZFwiPlxuICAgIDwhLS0gRHJvcCBab25lIC0tPlxuICAgIDxkaXYgY2xhc3M9XCJkcm9wLXpvbmVcIlxuICAgICAgICAgW2NsYXNzLmRyYWdvdmVyXT1cImlzRHJhZ292ZXJcIlxuICAgICAgICAgKGNsaWNrKT1cIm9wZW5GaWxlRGlhbG9nKClcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImRyb3Atem9uZS1pY29uXCI+XG4gICAgICAgICAgICA8emVuLWljb24gc3JjPVwiYXNzZXRzL25nLXplbmR1aXQvaWNvbnMvdXBsb2FkLWNsb3VkLnN2Z1wiPjwvemVuLWljb24+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZHJvcC16b25lLXRleHRcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY2xpY2stdGV4dFwiPnt7ICdDbGljayB0byB1cGxvYWQnIHwgdHJhbnNsYXRlIH19PC9zcGFuPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJkcmFnLXRleHRcIj57eyAnb3IgZHJhZyBhbmQgZHJvcCcgfCB0cmFuc2xhdGUgfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8cCBjbGFzcz1cImRyb3Atem9uZS1kZXNjcmlwdGlvblwiPlxuICAgICAgICAgICAge3sgZGVzY3JpcHRpb24gfHwgKCdTVkcsIFBORywgSlBHIG9yIEdJRiAobWF4LiA4MDB4NDAwcHgpJyB8IHRyYW5zbGF0ZSkgfX1cbiAgICAgICAgPC9wPlxuICAgIDwvZGl2PlxuXG4gICAgPGlucHV0IHR5cGU9XCJmaWxlXCJcbiAgICAgICAgICAgI2ZpbGVJbnB1dFxuICAgICAgICAgICBzdHlsZT1cImRpc3BsYXk6bm9uZVwiXG4gICAgICAgICAgIFthY2NlcHRdPVwiYWNjZXB0XCJcbiAgICAgICAgICAgW211bHRpcGxlXT1cIm11bHRpcGxlXCJcbiAgICAgICAgICAgKGNoYW5nZSk9XCJvbkZpbGVJbnB1dCgkZXZlbnQpXCIgLz5cblxuICAgIDwhLS0gRmlsZSBRdWV1ZSAtLT5cbiAgICA8ZGl2IGNsYXNzPVwiZmlsZS1xdWV1ZVwiICpuZ0lmPVwiZmlsZXM/Lmxlbmd0aFwiPlxuXG4gICAgICAgIDwhLS0gUHJvZ3Jlc3MgQmFyIFR5cGUgLS0+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJwcm9ncmVzc1R5cGUgPT09ICdiYXInXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmlsZS1pdGVtIGJhci10eXBlXCJcbiAgICAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgZmlsZXNcIlxuICAgICAgICAgICAgICAgICBbY2xhc3MuY29tcGxldGVdPVwiaXRlbS5zdGF0dXMgPT09ICdjb21wbGV0ZSdcIj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmlsZS1pdGVtLWNvbnRlbnRcIj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZpbGUtaWNvbi13cmFwXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8emVuLWljb24gY2xhc3M9XCJmaWxlLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtzcmNdPVwiZ2V0RmlsZUljb24oaXRlbS5maWxlVHlwZSlcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvemVuLWljb24+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmlsZS1pbmZvXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmlsZS10ZXh0XCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPHAgY2xhc3M9XCJmaWxlLW5hbWVcIj57eyBpdGVtLmZpbGUubmFtZSB9fTwvcD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cCBjbGFzcz1cImZpbGUtc2l6ZVwiPnt7IGZvcm1hdEZpbGVTaXplKGl0ZW0uZmlsZS5zaXplKSB9fTwvcD5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInByb2dyZXNzLXJvd1wiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy10cmFja1wiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtZmlsbFwiIFtzdHlsZS53aWR0aC4lXT1cIml0ZW0ucHJvZ3Jlc3NcIj48L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cInByb2dyZXNzLWxhYmVsXCI+e3sgaXRlbS5wcm9ncmVzcyB9fSU8L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cImZpbGUtYWN0aW9uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiaXRlbS5zdGF0dXMgPT09ICd1cGxvYWRpbmcnXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJyZW1vdmVGaWxlKGl0ZW0pXCI+XG4gICAgICAgICAgICAgICAgICAgIDx6ZW4taWNvbiBjbGFzcz1cInRyYXNoLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgc3JjPVwiYXNzZXRzL25nLXplbmR1aXQvaWNvbnMvdHJhc2guc3ZnXCI+XG4gICAgICAgICAgICAgICAgICAgIDwvemVuLWljb24+XG4gICAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICAgICAgPHplbi1pY29uIGNsYXNzPVwiY2hlY2staWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiaXRlbS5zdGF0dXMgPT09ICdjb21wbGV0ZSdcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICBzcmM9XCJhc3NldHMvbmctemVuZHVpdC9pY29ucy9jaGVjay1jaXJjbGUuc3ZnXCI+XG4gICAgICAgICAgICAgICAgPC96ZW4taWNvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgICAgICA8IS0tIFByb2dyZXNzIEZpbGwgVHlwZSAtLT5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInByb2dyZXNzVHlwZSA9PT0gJ2ZpbGwnXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmlsZS1pdGVtIGZpbGwtdHlwZVwiXG4gICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIGZpbGVzXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZpbGwtYmdcIiBbc3R5bGUud2lkdGguJV09XCJpdGVtLnByb2dyZXNzXCI+PC9kaXY+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZpbGUtaXRlbS1jb250ZW50XCI+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmaWxlLWljb24td3JhcFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHplbi1pY29uIGNsYXNzPVwiZmlsZS1pY29uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbc3JjXT1cImdldEZpbGVJY29uKGl0ZW0uZmlsZVR5cGUpXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L3plbi1pY29uPlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZpbGUtaW5mb1wiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHAgY2xhc3M9XCJmaWxlLW5hbWVcIj57eyBpdGVtLmZpbGUubmFtZSB9fTwvcD5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxwIGNsYXNzPVwiZmlsZS1zaXplXCI+e3sgZm9ybWF0RmlsZVNpemUoaXRlbS5maWxlLnNpemUpIH19ICZuZGFzaDsge3sgaXRlbS5wcm9ncmVzcyB9fSUge3sgJ3VwbG9hZGVkJyB8IHRyYW5zbGF0ZSB9fTwvcD5cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPHplbi1zcGlubmVyICpuZ0lmPVwiaXRlbS5zdGF0dXMgPT09ICd1cGxvYWRpbmcnXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJmaWxlLXNwaW5uZXJcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzaXplPVwic21hbGxcIj5cbiAgICAgICAgICAgICAgICA8L3plbi1zcGlubmVyPlxuICAgICAgICAgICAgICAgIDx6ZW4taWNvbiBjbGFzcz1cImNoZWNrLWljb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAqbmdJZj1cIml0ZW0uc3RhdHVzID09PSAnY29tcGxldGUnXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgc3JjPVwiYXNzZXRzL25nLXplbmR1aXQvaWNvbnMvY2hlY2stY2lyY2xlLnN2Z1wiPlxuICAgICAgICAgICAgICAgIDwvemVuLWljb24+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==