@brickclay-org/ui 0.0.75 → 0.0.77

package/fesm2022/brickclay-org-ui.mjs

@@ -317,7 +317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
-class CalendarManagerService {
+class BkCalendarManagerService {
     calendarInstances = new Set();
     closeAllSubject = new Subject();
     closeAll$ = this.closeAllSubject.asObservable();
@@ -348,10 +348,17 @@ class CalendarManagerService {
         this.closeAllSubject.next();
         this.calendarInstances.forEach(closeFn => closeFn());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarManagerService, providedIn: 'root' });
+    getOnlyDate(input) {
+        const date = new Date(input);
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCalendarManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCalendarManagerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCalendarManagerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2111,7 +2118,7 @@ class BkCustomCalendar {
         const dd = date.getDate().toString().padStart(2, '0');
         return `${yyyy}-${mm}-${dd}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCustomCalendar, deps: [{ token: CalendarManagerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkCustomCalendar, deps: [{ token: BkCalendarManagerService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkCustomCalendar, isStandalone: true, selector: "bk-custom-calendar", inputs: { enableTimepicker: "enableTimepicker", autoApply: "autoApply", closeOnAutoApply: "closeOnAutoApply", showCancel: "showCancel", linkedCalendars: "linkedCalendars", singleDatePicker: "singleDatePicker", showWeekNumbers: "showWeekNumbers", showISOWeekNumbers: "showISOWeekNumbers", customRangeDirection: "customRangeDirection", lockStartDate: "lockStartDate", position: "position", drop: "drop", dualCalendar: "dualCalendar", showRanges: "showRanges", timeFormat: "timeFormat", enableSeconds: "enableSeconds", customRanges: "customRanges", multiDateSelection: "multiDateSelection", maxDate: "maxDate", minDate: "minDate", placeholder: "placeholder", opens: "opens", inline: "inline", appendToBody: "appendToBody", isDisplayCrossIcon: "isDisplayCrossIcon", hasError: "hasError", errorMessage: "errorMessage", showCancelApply: "showCancelApply", selectedValue: "selectedValue", displayFormat: "displayFormat", required: "required" }, outputs: { selected: "selected", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:scroll": "onWindowEvents()", "window:resize": "onWindowEvents()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2129,7 +2136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             multi: true,
                         },
                     ], template: "<div class=\"calendar-container relative\" [class.open]=\"show\" [class.inline-mode]=\"inline\" [class.disabled]=\"disabled\">\r\n  <!-- Input field -->\r\n  <div #inputWrapper class=\"input-wrapper\" *ngIf=\"!inline\">\r\n    <input\r\n      type=\"text\"\r\n      (click)=\"!disabled && toggle()\"\r\n      (blur)=\"markAsTouched()\"\r\n      readonly\r\n      [value]=\"getDisplayValue()\"\r\n      [placeholder]=\"placeholder\"\r\n      [attr.disabled]=\"disabled ? true : null\"\r\n      [class.hasError]=\"hasError\"\r\n      class=\"calendar-input\">\r\n      <!-- *ngIf=\"!getDisplayValue()\" -->\r\n\r\n    <span class=\"calendar-icon\" >\r\n      <img alt=\"calendar\" class=\"calendar-icon-img\" [src]='brickclayIcons.calenderIcon'/>\r\n    </span>\r\n    <button class=\"clear-btn\" *ngIf=\"getDisplayValue() && isDisplayCrossIcon\" (click)=\"clear(); $event.stopPropagation()\" title=\"Clear\">\u00D7</button>\r\n  </div>\r\n\r\n  <!-- Calendar Popup / Inline -->\r\n  <div class=\"calendar-popup\"\r\n       [class.inline-calendar]=\"inline\"\r\n       [class.append-to-body]=\"appendToBody && !inline\"\r\n       [style.position]=\"appendToBody && !inline ? 'fixed' : null\"\r\n       [style.top]=\"appendToBody && !inline && drop !== 'up' ? dropdownStyle.top : null\"\r\n       [style.bottom]=\"appendToBody && !inline && drop === 'up' ? dropdownStyle.bottom : null\"\r\n       [style.left]=\"appendToBody && !inline ? dropdownStyle.left : null\"\r\n       [ngClass]=\"{\r\n         'position-right': !inline && !appendToBody && opens === 'right',\r\n         'position-center': !inline && !appendToBody && opens === 'center',\r\n         'drop-up': !inline && drop === 'up',\r\n         'has-ranges': showRanges && customRanges,\r\n         'dual-calendar-mode': dualCalendar\r\n       }\"\r\n       *ngIf=\"inline || show\">\r\n\r\n    <!-- RANGES -->\r\n    <div class=\"ranges\" *ngIf=\"showRanges && customRanges\">\r\n      <button\r\n        *ngFor=\"let rangeKey of rangeOrder\"\r\n        (click)=\"chooseRange(rangeKey)\"\r\n        [class.active]=\"activeRange === rangeKey\"\r\n        [class.custom-range]=\"rangeKey === 'Custom Range'\"\r\n        class=\"range-btn\"\r\n        [disabled]=\"rangeKey === 'Custom Range'\">\r\n        {{ rangeKey }}\r\n      </button>\r\n    </div>\r\n<div class=\"\" [ngClass]=\"showRanges ? 'w-100 flex-grow-1' : ''\">\r\n\r\n\r\n    <!-- SINGLE CALENDAR -->\r\n    <div *ngIf=\"!dualCalendar\" class=\"calendar-wrapper\">\r\n      <div class=\"header\">\r\n        <!-- <button (click)=\"prevMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-left-gray.svg\" alt=\"arrow-left\" class=\"arrow-left\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"prevMonth()\" matTooltip=\"Prev month\"\r\n                    >\r\n                    <img alt=\"prev\" class=\"h-3 w-3\" [src]=\"brickclayIcons.arrowleft\"/>\r\n                </button>\r\n        <span class=\"month-year\">{{ getMonthName(month) }} {{ year }}</span>\r\n        <!-- <button (click)=\"nextMonth()\" class=\"nav-btn\" type=\"button\">\r\n          <img src=\"assets/calender/pagination-right-gray.svg\" alt=\"arrow-right\" class=\"arrow-right\">\r\n        </button> -->\r\n        <button class=\"nav-btn\" type=\"button\" (click)=\"nextMonth()\" matTooltip=\"Next month\"\r\n                    >\r\n                   <img alt=\"next\" class=\"h-3 w-3\"  [src]='brickclayIcons.arrowRight'/>\r\n                    <!--<img src=\"assets/calender/pagination-right-gray.svg\" alt=\"next\" class=\"h-3 w-3\" /> -->\r\n                </button>\r\n      </div>\r\n\r\n      <table class=\"calendar-table\">\r\n        <thead>\r\n          <tr>\r\n            <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let week of calendar\">\r\n            <td\r\n              *ngFor=\"let dayObj of week\"\r\n              (click)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && selectDate(dayObj.day)\"\r\n              (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(year, month, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n              (mouseleave)=\"onDateLeave()\"\r\n              [class.active]=\"dayObj.currentMonth && isDateSelected(year, month, dayObj.day)\"\r\n              [class.in-range]=\"dayObj.currentMonth && isDateInRange(year, month, dayObj.day)\"\r\n              [class.other-month]=\"!dayObj.currentMonth\"\r\n              [class.disabled]=\"isDateDisabled(year, month, dayObj.day)\"\r\n              [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(year, month, dayObj.day)\"\r\n              [class.today]=\"dayObj.currentMonth && isToday(year, month, dayObj.day)\"\r\n              class=\"calendar-day\">\r\n              {{ dayObj.day }}\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n\r\n      <!-- Single Calendar Time Picker -->\r\n      <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n        <div class=\"timepicker-label\">Time</div>\r\n        <div class=\"timepicker-controls\">\r\n          <bk-time-picker\r\n            pickerId=\"single-time\"\r\n            [label]=\"''\"\r\n            [value]=\"getSingleTimePickerDisplay()\"\r\n            [closePicker]=\"shouldClosePicker('single-time')\"\r\n            (timeChange)=\"onSingleTimePickerChange($event)\"\r\n            (pickerOpened)=\"onTimePickerOpened($event)\"\r\n            (pickerClosed)=\"onTimePickerClosed($event)\">\r\n          </bk-time-picker>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DUAL CALENDAR -->\r\n    <div class=\"dual-calendar\" *ngIf=\"dualCalendar\">\r\n      <!-- LEFT CALENDAR -->\r\n      <div class=\"calendar-left\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\" [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(leftMonth) }} {{ leftYear }}</span>\r\n          <button (click)=\"nextLeftMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\">\r\n          <thead>\r\n            <tr>\r\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of leftCalendar\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && selectDate(dayObj.day, false)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(leftYear, leftMonth, dayObj.day) && onDateHover(dayObj.day, false)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(leftYear, leftMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(leftYear, leftMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(leftYear, leftMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(leftYear, leftMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(leftYear, leftMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- Start Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">Start Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-start\"\r\n              [label]=\"''\"\r\n              [value]=\"getDualTimePickerDisplay(true)\"\r\n              [closePicker]=\"shouldClosePicker('dual-start')\"\r\n              (timeChange)=\"onDualTimePickerChange($event, true)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- RIGHT CALENDAR -->\r\n      <div class=\"calendar-right\">\r\n        <div class=\"header\">\r\n          <button (click)=\"prevRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n            <img alt=\"arrow-left\" class=\"arrow-left\"  [src]=\"brickclayIcons.arrowleft\"/>\r\n          </button>\r\n          <span class=\"month-year\">{{ getMonthName(rightMonth) }} {{ rightYear }}</span>\r\n          <button (click)=\"nextRightMonth()\" class=\"nav-btn\" type=\"button\">\r\n              <img alt=\"arrow-right\" class=\"arrow-right\" [src]='brickclayIcons.arrowRight'/>\r\n          </button>\r\n        </div>\r\n        <table class=\"calendar-table\">\r\n          <thead>\r\n            <tr>\r\n              <th *ngFor=\"let d of ['Mo','Tu','We','Th','Fr','Sa','Su']\" class=\"weekday-header\">{{ d }}</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let week of rightCalendar\">\r\n              <td\r\n                *ngFor=\"let dayObj of week\"\r\n                (click)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && selectDate(dayObj.day, true)\"\r\n                (mouseenter)=\"dayObj.currentMonth && !isDateDisabled(rightYear, rightMonth, dayObj.day) && onDateHover(dayObj.day, true)\"\r\n                (mouseleave)=\"onDateLeave()\"\r\n                [class.active]=\"dayObj.currentMonth && isDateSelected(rightYear, rightMonth, dayObj.day)\"\r\n                [class.in-range]=\"dayObj.currentMonth && isDateInRange(rightYear, rightMonth, dayObj.day)\"\r\n                [class.other-month]=\"!dayObj.currentMonth\"\r\n                [class.disabled]=\"isDateDisabled(rightYear, rightMonth, dayObj.day)\"\r\n                [class.multi-selected]=\"multiDateSelection && isDateInMultiSelection(rightYear, rightMonth, dayObj.day)\"\r\n                [class.today]=\"dayObj.currentMonth && isToday(rightYear, rightMonth, dayObj.day)\"\r\n                class=\"calendar-day\">\r\n                {{ dayObj.day }}\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n\r\n        <!-- End Time Picker for Dual Calendar -->\r\n        <div *ngIf=\"enableTimepicker\" class=\"timepicker-section\">\r\n          <div class=\"timepicker-label\">End Time</div>\r\n          <div class=\"timepicker-controls\">\r\n            <bk-time-picker\r\n              pickerId=\"dual-end\"\r\n              [label]=\"''\"\r\n              [value]=\"getDualTimePickerDisplay(false)\"\r\n              [closePicker]=\"shouldClosePicker('dual-end')\"\r\n              (timeChange)=\"onDualTimePickerChange($event, false)\"\r\n              (pickerOpened)=\"onTimePickerOpened($event)\"\r\n              (pickerClosed)=\"onTimePickerClosed($event)\">\r\n            </bk-time-picker>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\" *ngIf=\"!inline && showCancelApply\">\r\n      <button *ngIf=\"showCancel\" (click)=\"cancel()\" class=\"btn-cancel\" type=\"button\">Cancel</button>\r\n      <button (click)=\"apply()\" class=\"btn-apply\" type=\"button\">Apply</button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n@if (hasError){\r\n<p class=\"calender-error\">{{errorMessage}}</p>\r\n}\r\n", styles: [".calendar-container,.calendar-container *{font-family:Inter,sans-serif!important}.calendar-container{position:relative;display:inline-block;width:100%}.input-wrapper{position:relative;display:flex;align-items:center}.calendar-input{width:100%;padding:9px 12px 9px 36px;border:1px solid #E3E3E7;border-radius:4px;font-size:14px;line-height:20px;cursor:pointer;background:#fff;transition:all .2s}.calendar-input::placeholder{color:#6b7080}.calendar-input.hasError{border-color:#f34050}.calendar-input:focus{outline:none;border-color:#999}.calendar-icon{position:absolute;left:12px;pointer-events:none;font-size:18px}.clear-btn{position:absolute;right:9px;background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s;top:8px}.clear-btn:hover{color:#333}.calendar-popup{position:absolute;top:110%;left:0;width:320px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;animation:slideDown .2s ease-out}.calendar-popup.inline-calendar{position:relative;top:0;left:0;width:100%;margin-top:0;animation:none;box-shadow:0 2px 8px #0000001a}.calendar-container.inline-mode{display:block;width:100%}.calendar-popup.dual-calendar-mode{width:600px}.calendar-popup.dual-calendar-mode.has-ranges{width:730px}.calendar-popup.has-ranges{width:450px}.calendar-popup.dual-calendar-mode.has-ranges .dual-calendar{border-left:1px solid #eee}.calendar-popup.drop-up{top:auto;bottom:110%;animation:slideUp .2s ease-out}.calendar-popup.position-right{left:auto;right:0}.calendar-popup.position-center{left:50%;transform:translate(-50%)}.calendar-popup.append-to-body{z-index:10000}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ranges{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eee;min-width:150px;padding-right:8px}.range-btn{padding:7px 10px;border:1px solid transparent;background:transparent;border-radius:4px;cursor:pointer;text-align:left;font-size:14px;transition:all .2s;color:#838383;font-weight:500}.range-btn:hover{background:#f5f5f5;color:#000}.range-btn.active{background:#f0f0f0;color:#000;font-weight:500}.calendar-wrapper{padding:0 12px 12px;border-left:1px solid #eee}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.month-year{font-size:15px;font-weight:500;color:#333;flex:1;text-align:center;text-transform:capitalize}.nav-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:11.5px 14px;color:#666;border-radius:4px;transition:all .2s;line-height:1;height:30px;width:30px;display:flex;justify-content:center;align-items:center}.nav-btn:hover{background:#f0f0f0;color:#000}.nav-btn img{width:auto;max-width:none!important}.calendar-table{width:100%;border-collapse:collapse;text-align:center}.weekday-header{font-size:12px;color:#7e7e7e;font-weight:600;padding:8px 4px;letter-spacing:.3px}.calendar-day{padding:8px 4px;font-size:14px;cursor:pointer;border-radius:6px;transition:all .2s;position:relative;color:#333;font-weight:500;line-height:1.5}.calendar-day:hover:not(.disabled):not(.other-month){background:#efefef;color:#000}.calendar-day.other-month{color:#ccc;cursor:default}.calendar-day.disabled{color:#ddd;cursor:not-allowed;opacity:.5}.calendar-day.active{background:#000!important;color:#fff!important;font-weight:600}.calendar-day.today{font-weight:600}.calendar-day.today:not(.active){background:#e5e4e4}.calendar-day.active:hover{background:#000!important}.calendar-day.in-range{background:#f5f5f5;color:#333;border-radius:0;position:relative}.calendar-day.in-range:hover{background:#e8e8e8}.calendar-day.in-range:before{content:\"\";position:absolute;inset:0;background:#f5f5f5;z-index:-1}.calendar-day.in-range:hover:before{background:#e8e8e8}.calendar-day.multi-selected{background:#4caf50;color:#fff;font-weight:600;border-radius:6px}.calendar-day.multi-selected:hover{background:#45a049}.dual-calendar{display:flex;width:100%;border-left:1px solid #eee}.calendar-left,.calendar-right{flex:1;min-width:0;padding:0 12px 12px}.calendar-popup.has-ranges{display:flex;flex-direction:row}.calendar-popup.has-ranges .ranges{margin-bottom:0;border-bottom:none;padding:10px}.calendar-popup.has-ranges .dual-calendar,.calendar-popup.has-ranges .calendar-wrapper{flex:1}.calendar-right .header{justify-content:space-between}.calendar-right .header .month-year{text-align:center;flex:1}.timepicker-section{margin-top:12px;padding-top:12px;border-top:1px solid #eee}.timepicker-label{font-size:12px;font-weight:500;color:#000;margin-bottom:4px;letter-spacing:-.28px}.custom-time-picker{display:flex;flex-direction:column;gap:8px;align-items:start}.time-input-group{display:flex;align-items:center;justify-content:center;gap:8px;background:#f8f9fa;padding:12px;border-radius:8px;border:1px solid #e0e0e0}.time-control{display:flex;flex-direction:column;align-items:center}.time-btn{background:#fff;border:1px solid #ddd;width:28px;height:20px;cursor:pointer;font-size:10px;color:#666;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.time-btn:hover{background:#e4e4e4;color:#fff;border-color:#e4e4e4}.time-btn.up{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.time-btn.down{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.time-input{width:40px;height:32px;text-align:center;border:1px solid #ddd;border-radius:4px;font-size:16px;font-weight:600;background:#fff;color:#333}.time-separator{font-size:18px;font-weight:600;color:#666;margin:0 2px}.ampm-control{display:flex;flex-direction:column;gap:4px;margin-left:8px}.ampm-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;color:#666;transition:all .2s;min-width:45px}.ampm-btn:hover{background:#f0f0f0}.ampm-btn.active{background:#000;color:#fff;border-color:#000}.html5-time-input{margin-top:8px;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;width:100%;max-width:120px}.footer{padding:12px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eee}.btn-cancel,.btn-apply{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.btn-cancel{background:#fff;color:#666;border:1px solid #ddd}.btn-cancel:hover{background:#f5f5f5;border-color:#bbb}.btn-apply{background:#000;color:#fff}.btn-apply:hover{background:#333}.btn-apply:active{transform:translateY(0)}@media (max-width: 768px){.calendar-popup{width:100%;max-width:320px}.calendar-popup.dual-calendar-mode{width:100%;max-width:100%}.calendar-popup.has-ranges{flex-direction:column}.calendar-popup.has-ranges .ranges{border-right:none;border-bottom:1px solid #eee;padding-right:0;margin-right:0;padding-bottom:16px;margin-bottom:16px}.dual-calendar{flex-direction:column}.time-input-group{flex-wrap:wrap;justify-content:center}}.ranges::-webkit-scrollbar{width:6px}.ranges::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.ranges::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.ranges::-webkit-scrollbar-thumb:hover{background:#555}.w-100{width:100%}.flex-grow-1{flex-grow:1}.calender-error{margin-top:6px;color:#f34050;font-size:14px;line-height:20px}\n"] }]
-        }], ctorParameters: () => [{ type: CalendarManagerService }], propDecorators: { enableTimepicker: [{
+        }], ctorParameters: () => [{ type: BkCalendarManagerService }], propDecorators: { enableTimepicker: [{
                 type: Input
             }], autoApply: [{
                 type: Input
@@ -2549,12 +2556,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CommonModule,
                         BkCustomCalendar,
                         BkScheduledDatePicker,
-                        BkTimePicker
+                        BkTimePicker,
                     ],
                     exports: [
                         BkCustomCalendar,
                         BkScheduledDatePicker,
-                        BkTimePicker
+                        BkTimePicker,
                     ]
                 }]
         }] });
@@ -6918,6 +6925,7 @@ class BkFilePicker {
     errorMessage = '';
     hasError = false;
     draggable = true;
+    description = '';
     set required(val) {
         this._required = val;
         this._onValidatorChange?.();
@@ -7055,7 +7063,7 @@ class BkFilePicker {
         input.dispatchEvent(new Event('change', { bubbles: true }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFilePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkFilePicker, isStandalone: true, selector: "bk-file-picker", inputs: { id: "id", name: "name", accept: "accept", multi: "multi", disable: "disable", errorMessage: "errorMessage", hasError: "hasError", draggable: "draggable", required: "required" }, outputs: { change: "change", error: "error", cancel: "cancel" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkFilePicker, isStandalone: true, selector: "bk-file-picker", inputs: { id: "id", name: "name", accept: "accept", multi: "multi", disable: "disable", errorMessage: "errorMessage", hasError: "hasError", draggable: "draggable", description: "description", required: "required" }, outputs: { change: "change", error: "error", cancel: "cancel" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkFilePicker),
@@ -7066,7 +7074,7 @@ class BkFilePicker {
                 useExisting: forwardRef(() => BkFilePicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-picker-wrapper\">\n  <input\n    #fileInput\n    type=\"file\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [accept]=\"accept\"\n    [multiple]=\"multi\"\n    [disabled]=\"disable\"\n    [required]=\"required\"\n    class=\"file-picker__input\"\n    (cancel)=\"onCancel()\"\n    (change)=\"onFileChange($event)\"\n  />\n\n  <div\n    class=\"file-picker\"\n  [ngClass]=\"{\n    'file-picker--default': pickerState === 'default',\n    'file-picker--active': pickerState === 'active',\n    'file-picker--disabled': pickerState === 'disabled',\n    'file-picker-has-error': hasError\n  }\"\n  (click)=\"onContainerClick()\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  role=\"button\"\n  [attr.aria-disabled]=\"disable\"\n  tabindex=\"0\"\n>\n  <svg\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"file-picker__icon\">\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n      stroke-width=\"7.14\"/>\n    <g clip-path=\"url(#clip0_1_149094)\">\n      <path\n        d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n        [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"/>\n    </g>\n    <defs>\n      <clipPath id=\"clip0_1_149094\">\n        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n      </clipPath>\n    </defs>\n  </svg>\n  <p\n    class=\"file-picker__text-primary\"\n    [ngClass]=\"{\n      'file-picker__text-primary--default': pickerState === 'default',\n      'file-picker__text-primary--active': pickerState === 'active',\n      'file-picker__text-primary--disabled': pickerState === 'disabled'\n    }\">\n    <span\n      [ngClass]=\"{\n        'file-picker__text-primary-bold--default': pickerState === 'default',\n        'file-picker__text-primary-bold--active': pickerState === 'active',\n        'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n      }\">Click to upload</span> or drag and drop\n  </p>\n  <p\n    class=\"file-picker__text-secondary\"\n    [ngClass]=\"{\n      'file-picker__text-secondary--default': pickerState === 'default',\n      'file-picker__text-secondary--active': pickerState === 'active',\n      'file-picker__text-secondary--disabled': pickerState === 'disabled'\n    }\">SVG, PNG, JPG or GIF (max. 800x400px)</p>\n  </div>\n\n  @if (hasError) {\n    @if (errorMessage) {\n      <p class=\"file-picker-error\">{{ errorMessage }}</p>\n    }\n  }\n</div>\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-picker-wrapper\">\n  <input\n    #fileInput\n    type=\"file\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [accept]=\"accept\"\n    [multiple]=\"multi\"\n    [disabled]=\"disable\"\n    [required]=\"required\"\n    class=\"file-picker__input\"\n    (cancel)=\"onCancel()\"\n    (change)=\"onFileChange($event)\"\n  />\n\n  <div\n    class=\"file-picker\"\n  [ngClass]=\"{\n    'file-picker--default': pickerState === 'default',\n    'file-picker--active': pickerState === 'active',\n    'file-picker--disabled': pickerState === 'disabled',\n    'file-picker-has-error': hasError\n  }\"\n  (click)=\"onContainerClick()\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  role=\"button\"\n  [attr.aria-disabled]=\"disable\"\n  tabindex=\"0\"\n>\n  <svg\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"file-picker__icon\">\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n      stroke-width=\"7.14\"/>\n    <g clip-path=\"url(#clip0_1_149094)\">\n      <path\n        d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n        [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"/>\n    </g>\n    <defs>\n      <clipPath id=\"clip0_1_149094\">\n        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n      </clipPath>\n    </defs>\n  </svg>\n  <p\n    class=\"file-picker__text-primary\"\n    [ngClass]=\"{\n      'file-picker__text-primary--default': pickerState === 'default',\n      'file-picker__text-primary--active': pickerState === 'active',\n      'file-picker__text-primary--disabled': pickerState === 'disabled'\n    }\">\n    <span\n      [ngClass]=\"{\n        'file-picker__text-primary-bold--default': pickerState === 'default',\n        'file-picker__text-primary-bold--active': pickerState === 'active',\n        'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n      }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\n  </p>\n  <p\n    class=\"file-picker__text-secondary\"\n    [ngClass]=\"{\n      'file-picker__text-secondary--default': pickerState === 'default',\n      'file-picker__text-secondary--active': pickerState === 'active',\n      'file-picker__text-secondary--disabled': pickerState === 'disabled'\n    }\">{{description}}</p>\n  </div>\n\n  @if (hasError) {\n    @if (errorMessage) {\n      <p class=\"file-picker-error\">{{ errorMessage }}</p>\n    }\n  }\n</div>\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkFilePicker, decorators: [{
             type: Component,
@@ -7081,7 +7089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => BkFilePicker),
                             multi: true,
                         },
-                    ], template: "<div class=\"file-picker-wrapper\">\n  <input\n    #fileInput\n    type=\"file\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [accept]=\"accept\"\n    [multiple]=\"multi\"\n    [disabled]=\"disable\"\n    [required]=\"required\"\n    class=\"file-picker__input\"\n    (cancel)=\"onCancel()\"\n    (change)=\"onFileChange($event)\"\n  />\n\n  <div\n    class=\"file-picker\"\n  [ngClass]=\"{\n    'file-picker--default': pickerState === 'default',\n    'file-picker--active': pickerState === 'active',\n    'file-picker--disabled': pickerState === 'disabled',\n    'file-picker-has-error': hasError\n  }\"\n  (click)=\"onContainerClick()\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  role=\"button\"\n  [attr.aria-disabled]=\"disable\"\n  tabindex=\"0\"\n>\n  <svg\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"file-picker__icon\">\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n      stroke-width=\"7.14\"/>\n    <g clip-path=\"url(#clip0_1_149094)\">\n      <path\n        d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n        [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"/>\n    </g>\n    <defs>\n      <clipPath id=\"clip0_1_149094\">\n        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n      </clipPath>\n    </defs>\n  </svg>\n  <p\n    class=\"file-picker__text-primary\"\n    [ngClass]=\"{\n      'file-picker__text-primary--default': pickerState === 'default',\n      'file-picker__text-primary--active': pickerState === 'active',\n      'file-picker__text-primary--disabled': pickerState === 'disabled'\n    }\">\n    <span\n      [ngClass]=\"{\n        'file-picker__text-primary-bold--default': pickerState === 'default',\n        'file-picker__text-primary-bold--active': pickerState === 'active',\n        'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n      }\">Click to upload</span> or drag and drop\n  </p>\n  <p\n    class=\"file-picker__text-secondary\"\n    [ngClass]=\"{\n      'file-picker__text-secondary--default': pickerState === 'default',\n      'file-picker__text-secondary--active': pickerState === 'active',\n      'file-picker__text-secondary--disabled': pickerState === 'disabled'\n    }\">SVG, PNG, JPG or GIF (max. 800x400px)</p>\n  </div>\n\n  @if (hasError) {\n    @if (errorMessage) {\n      <p class=\"file-picker-error\">{{ errorMessage }}</p>\n    }\n  }\n</div>\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"] }]
+                    ], template: "<div class=\"file-picker-wrapper\">\n  <input\n    #fileInput\n    type=\"file\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [accept]=\"accept\"\n    [multiple]=\"multi\"\n    [disabled]=\"disable\"\n    [required]=\"required\"\n    class=\"file-picker__input\"\n    (cancel)=\"onCancel()\"\n    (change)=\"onFileChange($event)\"\n  />\n\n  <div\n    class=\"file-picker\"\n  [ngClass]=\"{\n    'file-picker--default': pickerState === 'default',\n    'file-picker--active': pickerState === 'active',\n    'file-picker--disabled': pickerState === 'disabled',\n    'file-picker-has-error': hasError\n  }\"\n  (click)=\"onContainerClick()\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  role=\"button\"\n  [attr.aria-disabled]=\"disable\"\n  tabindex=\"0\"\n>\n  <svg\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    class=\"file-picker__icon\">\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.fill]=\"pickerState === 'active' ? '#C7E2FF' : pickerState === 'disabled' ? '#F4F4F6' : '#F4F4F6'\"/>\n    <rect\n      x=\"3.57007\"\n      y=\"3.56995\"\n      width=\"40\"\n      height=\"40\"\n      rx=\"20\"\n      [attr.stroke]=\"pickerState === 'active' ? '#E5F3FF' : pickerState === 'disabled' ? '#F9FAFA' : '#F9FAFA'\"\n      stroke-width=\"7.14\"/>\n    <g clip-path=\"url(#clip0_1_149094)\">\n      <path\n        d=\"M23.5702 20.2366V23.5699M23.5702 26.9032H23.5785M31.9035 23.5699C31.9035 28.1723 28.1725 31.9032 23.5702 31.9032C18.9678 31.9032 15.2368 28.1723 15.2368 23.5699C15.2368 18.9675 18.9678 15.2366 23.5702 15.2366C28.1725 15.2366 31.9035 18.9675 31.9035 23.5699Z\"\n        [attr.stroke]=\"pickerState === 'active' ? '#1434CB' : pickerState === 'disabled' ? '#868997' : '#868997'\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"/>\n    </g>\n    <defs>\n      <clipPath id=\"clip0_1_149094\">\n        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(13.5701 13.5699)\"/>\n      </clipPath>\n    </defs>\n  </svg>\n  <p\n    class=\"file-picker__text-primary\"\n    [ngClass]=\"{\n      'file-picker__text-primary--default': pickerState === 'default',\n      'file-picker__text-primary--active': pickerState === 'active',\n      'file-picker__text-primary--disabled': pickerState === 'disabled'\n    }\">\n    <span\n      [ngClass]=\"{\n        'file-picker__text-primary-bold--default': pickerState === 'default',\n        'file-picker__text-primary-bold--active': pickerState === 'active',\n        'file-picker__text-primary-bold--disabled': pickerState === 'disabled'\n      }\">Click to upload</span>{{draggable ? ' or drag and drop' : '' }}\n  </p>\n  <p\n    class=\"file-picker__text-secondary\"\n    [ngClass]=\"{\n      'file-picker__text-secondary--default': pickerState === 'default',\n      'file-picker__text-secondary--active': pickerState === 'active',\n      'file-picker__text-secondary--disabled': pickerState === 'disabled'\n    }\">{{description}}</p>\n  </div>\n\n  @if (hasError) {\n    @if (errorMessage) {\n      <p class=\"file-picker-error\">{{ errorMessage }}</p>\n    }\n  }\n</div>\n", styles: [".file-picker-wrapper{@apply relative w-full;}.file-picker__input{@apply absolute opacity-0 w-0 h-0 overflow-hidden pointer-events-none;}.file-picker{@apply py-4 px-6 inline-flex flex-col justify-center items-center rounded-lg cursor-pointer transition-all duration-200 w-full relative;}.file-picker-has-error{@apply border-[#d11e14];}.file-picker-error{@apply text-xs text-[#E7000B] font-normal;}.file-picker--default{@apply border border-[#E5F3FF] bg-white;}.file-picker--active{@apply border border-[#E5F3FF] bg-[#F4FAFF];}.file-picker--disabled{@apply border border-[#D6D7DC] bg-[#F4F4F6] opacity-60 cursor-not-allowed;}.file-picker__icon{@apply mb-3;}.file-picker__text-primary{@apply font-normal text-sm tracking-normal mb-1;}.file-picker__text-primary--default,.file-picker__text-primary--active{@apply text-[#1B223A];}.file-picker__text-primary--disabled{@apply text-[#A1A3AE];}.file-picker__text-primary-bold--default,.file-picker__text-primary-bold--active{@apply font-medium text-[#102BA5];}.file-picker__text-primary-bold--disabled{@apply font-medium text-[#A1A3AE];}.file-picker__text-secondary{@apply font-normal text-xs leading-[18px];}.file-picker__text-secondary--default,.file-picker__text-secondary--active{@apply text-[#6B7080];}.file-picker__text-secondary--disabled{@apply text-[#A1A3AE];}.file-picker__file-item{@apply p-4 border border-[#EFEFF1] rounded-lg bg-white flex items-start justify-between mb-1;}.file-picker__file-content{@apply flex gap-4;}.file-picker__file-info-title{@apply font-medium text-sm text-[#1B223A];}.file-picker__file-info-size{@apply text-[#1B223A] font-normal text-sm;}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -7098,6 +7106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], draggable: [{
                 type: Input
+            }], description: [{
+                type: Input
             }], required: [{
                 type: Input
             }], change: [{
@@ -7288,5 +7298,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
+export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BkAvatar, BkAvatarUploader, BkBadge, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkPagination, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkValidator, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map