ngx-lite-form 1.1.9 → 1.2.0-pr.25.20250923034808
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-lite-form.mjs +609 -454
- package/fesm2022/ngx-lite-form.mjs.map +1 -1
- package/index.d.ts +115 -63
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, effect, Component, HostListener, ViewChild, signal, computed, NgModule, Injectable } from '@angular/core';
|
|
2
|
+
import { input, effect, Component, HostListener, ViewChild, signal, computed, output, NgModule, Injectable } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
@@ -129,7 +129,7 @@ class FormUtils {
|
|
|
129
129
|
missingRequirements.push('at least one number (0-9)');
|
|
130
130
|
}
|
|
131
131
|
// Check if the pattern requires special characters
|
|
132
|
-
if (patternRequiredValue.includes('(?=.*[@$!%*?&]') && !/[@$!%*?&^()_
|
|
132
|
+
if (patternRequiredValue.includes('(?=.*[@$!%*?&]') && !/[@$!%*?&^()_+\-=[]{}|;':"\\|,.<>?`#~]/.test(value)) {
|
|
133
133
|
missingRequirements.push('at least one special character (!@#$%^&*()_+-=[]{}|;\':",./<>?)');
|
|
134
134
|
}
|
|
135
135
|
// Check for minimum length in pattern (e.g., {8,} or {8,50})
|
|
@@ -157,7 +157,7 @@ class FormUtils {
|
|
|
157
157
|
if (!/\d/.test(value)) {
|
|
158
158
|
missingRequirements.push('at least one number (0-9)');
|
|
159
159
|
}
|
|
160
|
-
if (!/[@$!%*?&^()_
|
|
160
|
+
if (!/[@$!%*?&^()_+\-=[]{}|;':"\\|,.<>?`#~]/.test(value)) {
|
|
161
161
|
missingRequirements.push('at least one special character (!@#$%^&*()_+-=[]{}|;\':",./<>?)');
|
|
162
162
|
}
|
|
163
163
|
}
|
|
@@ -245,7 +245,7 @@ class FormUtils {
|
|
|
245
245
|
score += 1;
|
|
246
246
|
else
|
|
247
247
|
feedback.push('Add numbers');
|
|
248
|
-
if (/[@$!%*?&^()_
|
|
248
|
+
if (/[@$!%*?&^()_+\-=[]{}|;':"\\|,.<>?`#~]/.test(password))
|
|
249
249
|
score += 1;
|
|
250
250
|
else
|
|
251
251
|
feedback.push('Add special characters');
|
|
@@ -293,11 +293,11 @@ class LiteInput {
|
|
|
293
293
|
return FormUtils.getErrorMessages(this.control().formControl, this.control().label);
|
|
294
294
|
}
|
|
295
295
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteInput, isStandalone: true, selector: "lite-input", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lite-input\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <input type=\"text\" [formControl]=\"control().formControl\" placeholder=\"\" [ngClass]=\"{'invalid': hasErrors()}\" />\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().formControl.value }}</div>\n }\n</div>", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
296
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteInput, isStandalone: true, selector: "lite-input", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lite-input\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <input type=\"text\" [formControl]=\"control().formControl\" placeholder=\"\" [ngClass]=\"{'invalid': hasErrors()}\" />\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().formControl.value }}</div>\n }\n</div>", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
297
297
|
}
|
|
298
298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteInput, decorators: [{
|
|
299
299
|
type: Component,
|
|
300
|
-
args: [{ selector: 'lite-input', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"lite-input\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <input type=\"text\" [formControl]=\"control().formControl\" placeholder=\"\" [ngClass]=\"{'invalid': hasErrors()}\" />\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().formControl.value }}</div>\n }\n</div>", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"] }]
|
|
300
|
+
args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'lite-input', template: "<div class=\"lite-input\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <input type=\"text\" [formControl]=\"control().formControl\" placeholder=\"\" [ngClass]=\"{'invalid': hasErrors()}\" />\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().formControl.value }}</div>\n }\n</div>", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
301
301
|
}], ctorParameters: () => [] });
|
|
302
302
|
|
|
303
303
|
class LiteTextarea {
|
|
@@ -320,23 +320,23 @@ class LiteTextarea {
|
|
|
320
320
|
return FormUtils.getErrorMessages(this.control().formControl, this.control().label);
|
|
321
321
|
}
|
|
322
322
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
323
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteTextarea, isStandalone: true, selector: "lite-textarea", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lite-textarea\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <textarea [formControl]=\"control().formControl\" placeholder=\"\" rows=\"{{ control().rows }}\" [ngClass]=\"{'invalid': hasErrors()}\"></textarea>\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().formControl.value }}</div>\n }\n</div>", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
323
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteTextarea, isStandalone: true, selector: "lite-textarea", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lite-textarea\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <textarea [formControl]=\"control().formControl\" placeholder=\"\" rows=\"{{ control().rows }}\" [ngClass]=\"{'invalid': hasErrors()}\"></textarea>\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().formControl.value }}</div>\n }\n</div>", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
324
324
|
}
|
|
325
325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteTextarea, decorators: [{
|
|
326
326
|
type: Component,
|
|
327
|
-
args: [{ selector: 'lite-textarea', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"lite-textarea\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <textarea [formControl]=\"control().formControl\" placeholder=\"\" rows=\"{{ control().rows }}\" [ngClass]=\"{'invalid': hasErrors()}\"></textarea>\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().formControl.value }}</div>\n }\n</div>", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"] }]
|
|
327
|
+
args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'lite-textarea', template: "<div class=\"lite-textarea\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <textarea [formControl]=\"control().formControl\" placeholder=\"\" rows=\"{{ control().rows }}\" [ngClass]=\"{'invalid': hasErrors()}\"></textarea>\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().formControl.value }}</div>\n }\n</div>", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
328
328
|
}], ctorParameters: () => [] });
|
|
329
329
|
|
|
330
330
|
class LiteSelect {
|
|
331
|
-
|
|
331
|
+
_elementRef;
|
|
332
332
|
inEdit = input(true, ...(ngDevMode ? [{ debugName: "inEdit" }] : []));
|
|
333
333
|
control = input({ label: '', formControl: new FormControl(null), options: [], displayWith: (option) => option }, ...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
334
334
|
showOptions = 'collapse';
|
|
335
335
|
// Separate input text from FormControl value
|
|
336
336
|
inputText = '';
|
|
337
337
|
FormUtils = FormUtils;
|
|
338
|
-
constructor(
|
|
339
|
-
this.
|
|
338
|
+
constructor(_elementRef) {
|
|
339
|
+
this._elementRef = _elementRef;
|
|
340
340
|
effect(() => {
|
|
341
341
|
// Sync inputText with FormControl value when it changes
|
|
342
342
|
const value = this.control().formControl.value;
|
|
@@ -351,7 +351,7 @@ class LiteSelect {
|
|
|
351
351
|
onDocumentClick(event) {
|
|
352
352
|
if (this.showOptions === 'expand') {
|
|
353
353
|
const target = event.target;
|
|
354
|
-
if (!this.
|
|
354
|
+
if (!this._elementRef.nativeElement.contains(target)) {
|
|
355
355
|
this.showOptions = 'collapse';
|
|
356
356
|
}
|
|
357
357
|
}
|
|
@@ -414,7 +414,7 @@ class LiteSelect {
|
|
|
414
414
|
return this.showOptions === 'expand' || !!this.getDisplayValue() || this.hasTypedValue();
|
|
415
415
|
}
|
|
416
416
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
417
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteSelect, isStandalone: true, selector: "lite-select", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"lite-select\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <input type=\"text\" [value]=\"getDisplayValue()\" (input)=\"onInputChange($event)\" [ngClass]=\"{'selected': control().formControl.value, 'invalid': hasErrors()}\"\n (focus)=\"showOptions = 'expand'\" (blur)=\"onInputBlur()\" \n [placeholder]=\"shouldShowPlaceholder() ? 'Type to search...' : ''\" />\n <div class=\"options\" [@toggleView]=\"showOptions\">\n @for (option of getFilteredOptions(); track option) {\n <div class=\"option\" (click)=\"optionSelected(option)\">{{ control().displayWith(option) }}</div>\n }\n </div>\n <div class=\"label\" [ngClass]=\"{float: showOptions=='expand' || getDisplayValue() || hasTypedValue()}\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"arrow_box\" (click)=\"showOptions = showOptions === 'expand' ? 'collapse' : 'expand'\"><div class=\"arrow\"></div></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().displayWith(control().formControl.value) }}</div>\n }\n</div>", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }], animations: [
|
|
417
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteSelect, isStandalone: true, selector: "lite-select", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"lite-select\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <input type=\"text\" [value]=\"getDisplayValue()\" (input)=\"onInputChange($event)\" [ngClass]=\"{'selected': control().formControl.value, 'invalid': hasErrors()}\"\n (focus)=\"showOptions = 'expand'\" (blur)=\"onInputBlur()\" \n [placeholder]=\"shouldShowPlaceholder() ? 'Type to search...' : ''\" />\n <div class=\"options\" [@toggleView]=\"showOptions\">\n @for (option of getFilteredOptions(); track option) {\n <div class=\"option\" (click)=\"optionSelected(option)\">{{ control().displayWith(option) }}</div>\n }\n </div>\n <div class=\"label\" [ngClass]=\"{float: showOptions=='expand' || getDisplayValue() || hasTypedValue()}\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"arrow_box\" (click)=\"showOptions = showOptions === 'expand' ? 'collapse' : 'expand'\"><div class=\"arrow\"></div></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().displayWith(control().formControl.value) }}</div>\n }\n</div>", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }], animations: [
|
|
418
418
|
trigger('toggleView', [
|
|
419
419
|
state('collapse', style({ height: 0, borderStyle: 'none' })),
|
|
420
420
|
state('expand', style({ height: '*', borderStyle: 'solid' })),
|
|
@@ -424,20 +424,20 @@ class LiteSelect {
|
|
|
424
424
|
}
|
|
425
425
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteSelect, decorators: [{
|
|
426
426
|
type: Component,
|
|
427
|
-
args: [{
|
|
427
|
+
args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'lite-select', animations: [
|
|
428
428
|
trigger('toggleView', [
|
|
429
429
|
state('collapse', style({ height: 0, borderStyle: 'none' })),
|
|
430
430
|
state('expand', style({ height: '*', borderStyle: 'solid' })),
|
|
431
431
|
transition('collapse <=> expand', animate('300ms ease-in-out'))
|
|
432
432
|
])
|
|
433
|
-
], template: "<div class=\"lite-select\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <input type=\"text\" [value]=\"getDisplayValue()\" (input)=\"onInputChange($event)\" [ngClass]=\"{'selected': control().formControl.value, 'invalid': hasErrors()}\"\n (focus)=\"showOptions = 'expand'\" (blur)=\"onInputBlur()\" \n [placeholder]=\"shouldShowPlaceholder() ? 'Type to search...' : ''\" />\n <div class=\"options\" [@toggleView]=\"showOptions\">\n @for (option of getFilteredOptions(); track option) {\n <div class=\"option\" (click)=\"optionSelected(option)\">{{ control().displayWith(option) }}</div>\n }\n </div>\n <div class=\"label\" [ngClass]=\"{float: showOptions=='expand' || getDisplayValue() || hasTypedValue()}\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"arrow_box\" (click)=\"showOptions = showOptions === 'expand' ? 'collapse' : 'expand'\"><div class=\"arrow\"></div></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().displayWith(control().formControl.value) }}</div>\n }\n</div>", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"] }]
|
|
433
|
+
], template: "<div class=\"lite-select\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <input type=\"text\" [value]=\"getDisplayValue()\" (input)=\"onInputChange($event)\" [ngClass]=\"{'selected': control().formControl.value, 'invalid': hasErrors()}\"\n (focus)=\"showOptions = 'expand'\" (blur)=\"onInputBlur()\" \n [placeholder]=\"shouldShowPlaceholder() ? 'Type to search...' : ''\" />\n <div class=\"options\" [@toggleView]=\"showOptions\">\n @for (option of getFilteredOptions(); track option) {\n <div class=\"option\" (click)=\"optionSelected(option)\">{{ control().displayWith(option) }}</div>\n }\n </div>\n <div class=\"label\" [ngClass]=\"{float: showOptions=='expand' || getDisplayValue() || hasTypedValue()}\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"arrow_box\" (click)=\"showOptions = showOptions === 'expand' ? 'collapse' : 'expand'\"><div class=\"arrow\"></div></div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ control().displayWith(control().formControl.value) }}</div>\n }\n</div>", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
434
434
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
435
435
|
type: HostListener,
|
|
436
436
|
args: ['document:click', ['$event']]
|
|
437
437
|
}] } });
|
|
438
438
|
|
|
439
439
|
class LiteMultiSelect {
|
|
440
|
-
|
|
440
|
+
_elementRef;
|
|
441
441
|
inEdit = input(true, ...(ngDevMode ? [{ debugName: "inEdit" }] : []));
|
|
442
442
|
control = input({
|
|
443
443
|
label: '',
|
|
@@ -455,12 +455,12 @@ class LiteMultiSelect {
|
|
|
455
455
|
containerHeight = '36px';
|
|
456
456
|
selectedItemsRef;
|
|
457
457
|
FormUtils = FormUtils;
|
|
458
|
-
constructor(
|
|
459
|
-
this.
|
|
458
|
+
constructor(_elementRef) {
|
|
459
|
+
this._elementRef = _elementRef;
|
|
460
460
|
effect(() => {
|
|
461
461
|
// Effect to react to FormControl value changes
|
|
462
462
|
// Selected items are now displayed inline, so no need to update inputText
|
|
463
|
-
const
|
|
463
|
+
const _values = this.control().formControl.value || [];
|
|
464
464
|
// Component will re-render automatically when values change
|
|
465
465
|
});
|
|
466
466
|
// Subscribe to value changes to update container height
|
|
@@ -481,7 +481,7 @@ class LiteMultiSelect {
|
|
|
481
481
|
onDocumentClick(event) {
|
|
482
482
|
if (this.showOptions === 'expand') {
|
|
483
483
|
const target = event.target;
|
|
484
|
-
if (!this.
|
|
484
|
+
if (!this._elementRef.nativeElement.contains(target)) {
|
|
485
485
|
this.showOptions = 'collapse';
|
|
486
486
|
this.filterText = ''; // Clear filter when closing
|
|
487
487
|
// No need to update display text since selected items are shown inline
|
|
@@ -600,7 +600,7 @@ class LiteMultiSelect {
|
|
|
600
600
|
return !!this.filterText.trim();
|
|
601
601
|
}
|
|
602
602
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteMultiSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
603
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteMultiSelect, isStandalone: true, selector: "lite-multi-select", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectedItemsRef", first: true, predicate: ["selectedItemsRef"], descendants: true }], ngImport: i0, template: "<div class=\"lite-multi-select\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"input-container\" \n [ngClass]=\"{'selected': hasSelection(), 'invalid': hasErrors()}\"\n [style.height]=\"containerHeight\">\n <!-- Selected items overlay on input -->\n @if (hasSelection() && !isFiltering() && !isFocused) {\n <div class=\"selected-items-inline\" #selectedItemsRef>\n @for (item of getSelectedItems(); track item) {\n <span class=\"selected-item-inline\">\n {{ control().displayWith(item) }}\n <button type=\"button\" class=\"remove-item-inline\" (click)=\"removeSelectedItem(item)\">×</button>\n </span>\n }\n </div>\n }\n <input type=\"text\" [value]=\"getDisplayValue()\" (input)=\"onInputChange($event)\" \n (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\"\n [placeholder]=\"shouldShowPlaceholder() ? 'Type to filter options...' : ''\" \n class=\"filter-input\" />\n </div>\n <div class=\"options\" [@toggleView]=\"showOptions\">\n <!-- Options list -->\n @for (option of getFilteredOptions(); track option) {\n <div class=\"option multi-option\" \n [ngClass]=\"{'selected': isOptionSelected(option)}\"\n (click)=\"optionToggled(option)\">\n <input type=\"checkbox\" [checked]=\"isOptionSelected(option)\" \n (click)=\"$event.stopPropagation(); optionToggled(option)\" readonly />\n <span class=\"option-text\">{{ control().displayWith(option) }}</span>\n </div>\n }\n @if (getFilteredOptions().length === 0) {\n <div class=\"no-options\">No options found</div>\n }\n </div>\n <div class=\"label\" [ngClass]=\"{float: shouldFloat()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </div>\n <div class=\"arrow_box\" (click)=\"showOptions = showOptions === 'expand' ? 'collapse' : 'expand'\">\n <div class=\"arrow\"></div>\n </div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @for (item of getSelectedItems(); track item) {\n <span class=\"item\">\n {{ control().displayWith(item) }}\n </span>\n }\n </div>\n }\n</div>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }], animations: [
|
|
603
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteMultiSelect, isStandalone: true, selector: "lite-multi-select", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectedItemsRef", first: true, predicate: ["selectedItemsRef"], descendants: true }], ngImport: i0, template: "<div class=\"lite-multi-select\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"input-container\" \n [ngClass]=\"{'selected': hasSelection(), 'invalid': hasErrors()}\"\n [style.height]=\"containerHeight\">\n <!-- Selected items overlay on input -->\n @if (hasSelection() && !isFiltering() && !isFocused) {\n <div class=\"selected-items-inline\" #selectedItemsRef>\n @for (item of getSelectedItems(); track item) {\n <span class=\"selected-item-inline\">\n {{ control().displayWith(item) }}\n <button type=\"button\" class=\"remove-item-inline\" (click)=\"removeSelectedItem(item)\">×</button>\n </span>\n }\n </div>\n }\n <input type=\"text\" [value]=\"getDisplayValue()\" (input)=\"onInputChange($event)\" \n (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\"\n [placeholder]=\"shouldShowPlaceholder() ? 'Type to filter options...' : ''\" \n class=\"filter-input\" />\n </div>\n <div class=\"options\" [@toggleView]=\"showOptions\">\n <!-- Options list -->\n @for (option of getFilteredOptions(); track option) {\n <div class=\"option multi-option\" \n [ngClass]=\"{'selected': isOptionSelected(option)}\"\n (click)=\"optionToggled(option)\">\n <input type=\"checkbox\" [checked]=\"isOptionSelected(option)\" \n (click)=\"$event.stopPropagation(); optionToggled(option)\" readonly />\n <span class=\"option-text\">{{ control().displayWith(option) }}</span>\n </div>\n }\n @if (getFilteredOptions().length === 0) {\n <div class=\"no-options\">No options found</div>\n }\n </div>\n <div class=\"label\" [ngClass]=\"{float: shouldFloat()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </div>\n <div class=\"arrow_box\" (click)=\"showOptions = showOptions === 'expand' ? 'collapse' : 'expand'\">\n <div class=\"arrow\"></div>\n </div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @for (item of getSelectedItems(); track item) {\n <span class=\"item\">\n {{ control().displayWith(item) }}\n </span>\n }\n </div>\n }\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }], animations: [
|
|
604
604
|
trigger('toggleView', [
|
|
605
605
|
state('collapse', style({ height: 0, opacity: 0 })),
|
|
606
606
|
state('expand', style({ height: '*', opacity: 1 })),
|
|
@@ -610,13 +610,13 @@ class LiteMultiSelect {
|
|
|
610
610
|
}
|
|
611
611
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteMultiSelect, decorators: [{
|
|
612
612
|
type: Component,
|
|
613
|
-
args: [{
|
|
613
|
+
args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'lite-multi-select', animations: [
|
|
614
614
|
trigger('toggleView', [
|
|
615
615
|
state('collapse', style({ height: 0, opacity: 0 })),
|
|
616
616
|
state('expand', style({ height: '*', opacity: 1 })),
|
|
617
617
|
transition('collapse <=> expand', animate('300ms ease-in-out'))
|
|
618
618
|
])
|
|
619
|
-
], template: "<div class=\"lite-multi-select\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"input-container\" \n [ngClass]=\"{'selected': hasSelection(), 'invalid': hasErrors()}\"\n [style.height]=\"containerHeight\">\n <!-- Selected items overlay on input -->\n @if (hasSelection() && !isFiltering() && !isFocused) {\n <div class=\"selected-items-inline\" #selectedItemsRef>\n @for (item of getSelectedItems(); track item) {\n <span class=\"selected-item-inline\">\n {{ control().displayWith(item) }}\n <button type=\"button\" class=\"remove-item-inline\" (click)=\"removeSelectedItem(item)\">×</button>\n </span>\n }\n </div>\n }\n <input type=\"text\" [value]=\"getDisplayValue()\" (input)=\"onInputChange($event)\" \n (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\"\n [placeholder]=\"shouldShowPlaceholder() ? 'Type to filter options...' : ''\" \n class=\"filter-input\" />\n </div>\n <div class=\"options\" [@toggleView]=\"showOptions\">\n <!-- Options list -->\n @for (option of getFilteredOptions(); track option) {\n <div class=\"option multi-option\" \n [ngClass]=\"{'selected': isOptionSelected(option)}\"\n (click)=\"optionToggled(option)\">\n <input type=\"checkbox\" [checked]=\"isOptionSelected(option)\" \n (click)=\"$event.stopPropagation(); optionToggled(option)\" readonly />\n <span class=\"option-text\">{{ control().displayWith(option) }}</span>\n </div>\n }\n @if (getFilteredOptions().length === 0) {\n <div class=\"no-options\">No options found</div>\n }\n </div>\n <div class=\"label\" [ngClass]=\"{float: shouldFloat()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </div>\n <div class=\"arrow_box\" (click)=\"showOptions = showOptions === 'expand' ? 'collapse' : 'expand'\">\n <div class=\"arrow\"></div>\n </div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @for (item of getSelectedItems(); track item) {\n <span class=\"item\">\n {{ control().displayWith(item) }}\n </span>\n }\n </div>\n }\n</div>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"] }]
|
|
619
|
+
], template: "<div class=\"lite-multi-select\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"input-container\" \n [ngClass]=\"{'selected': hasSelection(), 'invalid': hasErrors()}\"\n [style.height]=\"containerHeight\">\n <!-- Selected items overlay on input -->\n @if (hasSelection() && !isFiltering() && !isFocused) {\n <div class=\"selected-items-inline\" #selectedItemsRef>\n @for (item of getSelectedItems(); track item) {\n <span class=\"selected-item-inline\">\n {{ control().displayWith(item) }}\n <button type=\"button\" class=\"remove-item-inline\" (click)=\"removeSelectedItem(item)\">×</button>\n </span>\n }\n </div>\n }\n <input type=\"text\" [value]=\"getDisplayValue()\" (input)=\"onInputChange($event)\" \n (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\"\n [placeholder]=\"shouldShowPlaceholder() ? 'Type to filter options...' : ''\" \n class=\"filter-input\" />\n </div>\n <div class=\"options\" [@toggleView]=\"showOptions\">\n <!-- Options list -->\n @for (option of getFilteredOptions(); track option) {\n <div class=\"option multi-option\" \n [ngClass]=\"{'selected': isOptionSelected(option)}\"\n (click)=\"optionToggled(option)\">\n <input type=\"checkbox\" [checked]=\"isOptionSelected(option)\" \n (click)=\"$event.stopPropagation(); optionToggled(option)\" readonly />\n <span class=\"option-text\">{{ control().displayWith(option) }}</span>\n </div>\n }\n @if (getFilteredOptions().length === 0) {\n <div class=\"no-options\">No options found</div>\n }\n </div>\n <div class=\"label\" [ngClass]=\"{float: shouldFloat()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </div>\n <div class=\"arrow_box\" (click)=\"showOptions = showOptions === 'expand' ? 'collapse' : 'expand'\">\n <div class=\"arrow\"></div>\n </div>\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @for (item of getSelectedItems(); track item) {\n <span class=\"item\">\n {{ control().displayWith(item) }}\n </span>\n }\n </div>\n }\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
620
620
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedItemsRef: [{
|
|
621
621
|
type: ViewChild,
|
|
622
622
|
args: ['selectedItemsRef', { static: false }]
|
|
@@ -651,11 +651,11 @@ class LiteRadio {
|
|
|
651
651
|
return this.control().formControl.value === value;
|
|
652
652
|
}
|
|
653
653
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
654
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteRadio, isStandalone: true, selector: "lite-radio", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lite-radio\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"radio-container\">\n <div class=\"label\" [ngClass]=\"{'float': true}\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"radio-options\" [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n @for (option of control().options; track option) {\n <label class=\"radio-option\">\n <input type=\"radio\" [value]=\"option\" [checked]=\"isSelected(option)\"\n (change)=\"onRadioChange(option)\" [name]=\"control().label + '_radio'\" class=\"radio-input\" />\n <span class=\"radio-label\">{{ control().displayWith(option) }}</span>\n </label>\n }\n </div>\n </div>\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @if (control().formControl.value) {\n {{ control().displayWith(control().formControl.value) }}\n } @else {\n <span class=\"no-value\">Not selected</span>\n }\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
654
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteRadio, isStandalone: true, selector: "lite-radio", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lite-radio\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"radio-container\">\n <div class=\"label\" [ngClass]=\"{'float': true}\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"radio-options\" [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n @for (option of control().options; track option) {\n <label class=\"radio-option\">\n <input type=\"radio\" [value]=\"option\" [checked]=\"isSelected(option)\"\n (change)=\"onRadioChange(option)\" [name]=\"control().label + '_radio'\" class=\"radio-input\" />\n <span class=\"radio-label\">{{ control().displayWith(option) }}</span>\n </label>\n }\n </div>\n </div>\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @if (control().formControl.value) {\n {{ control().displayWith(control().formControl.value) }}\n } @else {\n <span class=\"no-value\">Not selected</span>\n }\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
655
655
|
}
|
|
656
656
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteRadio, decorators: [{
|
|
657
657
|
type: Component,
|
|
658
|
-
args: [{ selector: 'lite-radio', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"lite-radio\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"radio-container\">\n <div class=\"label\" [ngClass]=\"{'float': true}\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"radio-options\" [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n @for (option of control().options; track option) {\n <label class=\"radio-option\">\n <input type=\"radio\" [value]=\"option\" [checked]=\"isSelected(option)\"\n (change)=\"onRadioChange(option)\" [name]=\"control().label + '_radio'\" class=\"radio-input\" />\n <span class=\"radio-label\">{{ control().displayWith(option) }}</span>\n </label>\n }\n </div>\n </div>\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @if (control().formControl.value) {\n {{ control().displayWith(control().formControl.value) }}\n } @else {\n <span class=\"no-value\">Not selected</span>\n }\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"] }]
|
|
658
|
+
args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'lite-radio', template: "<div class=\"lite-radio\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"radio-container\">\n <div class=\"label\" [ngClass]=\"{'float': true}\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"radio-options\" [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n @for (option of control().options; track option) {\n <label class=\"radio-option\">\n <input type=\"radio\" [value]=\"option\" [checked]=\"isSelected(option)\"\n (change)=\"onRadioChange(option)\" [name]=\"control().label + '_radio'\" class=\"radio-input\" />\n <span class=\"radio-label\">{{ control().displayWith(option) }}</span>\n </label>\n }\n </div>\n </div>\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @if (control().formControl.value) {\n {{ control().displayWith(control().formControl.value) }}\n } @else {\n <span class=\"no-value\">Not selected</span>\n }\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
659
659
|
}] });
|
|
660
660
|
|
|
661
661
|
class LiteCheckbox {
|
|
@@ -683,15 +683,15 @@ class LiteCheckbox {
|
|
|
683
683
|
this.control().formControl.markAsTouched();
|
|
684
684
|
}
|
|
685
685
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
686
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteCheckbox, isStandalone: true, selector: "lite-checkbox", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lite-checkbox\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <div class=\"checkbox-container\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" \n [checked]=\"control().formControl.value\" \n (change)=\"onCheckboxChange($event)\"\n class=\"checkbox-input\" />\n <div class=\"checkbox-text\">{{ control().label }}<span *ngIf=\"isRequired()\" class=\"required\">*</span></div>\n\n </label>\n </div>\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @if (control().formControl.value) {\n <span class=\"checked\">\u2713 Yes</span>\n } @else {\n <span class=\"unchecked\">\u2717 No</span>\n }\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
686
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteCheckbox, isStandalone: true, selector: "lite-checkbox", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lite-checkbox\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <div class=\"checkbox-container\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" \n [checked]=\"control().formControl.value\" \n (change)=\"onCheckboxChange($event)\"\n class=\"checkbox-input\" />\n <div class=\"checkbox-text\">{{ control().label }}<span *ngIf=\"isRequired()\" class=\"required\">*</span></div>\n\n </label>\n </div>\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @if (control().formControl.value) {\n <span class=\"checked\">\u2713 Yes</span>\n } @else {\n <span class=\"unchecked\">\u2717 No</span>\n }\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
687
687
|
}
|
|
688
688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteCheckbox, decorators: [{
|
|
689
689
|
type: Component,
|
|
690
|
-
args: [{ selector: 'lite-checkbox', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"lite-checkbox\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <div class=\"checkbox-container\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" \n [checked]=\"control().formControl.value\" \n (change)=\"onCheckboxChange($event)\"\n class=\"checkbox-input\" />\n <div class=\"checkbox-text\">{{ control().label }}<span *ngIf=\"isRequired()\" class=\"required\">*</span></div>\n\n </label>\n </div>\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @if (control().formControl.value) {\n <span class=\"checked\">\u2713 Yes</span>\n } @else {\n <span class=\"unchecked\">\u2717 No</span>\n }\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"] }]
|
|
690
|
+
args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'lite-checkbox', template: "<div class=\"lite-checkbox\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <div class=\"checkbox-container\">\n <label class=\"checkbox-label\">\n <input type=\"checkbox\" \n [checked]=\"control().formControl.value\" \n (change)=\"onCheckboxChange($event)\"\n class=\"checkbox-input\" />\n <div class=\"checkbox-text\">{{ control().label }}<span *ngIf=\"isRequired()\" class=\"required\">*</span></div>\n\n </label>\n </div>\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n @if (control().formControl.value) {\n <span class=\"checked\">\u2713 Yes</span>\n } @else {\n <span class=\"unchecked\">\u2717 No</span>\n }\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
691
691
|
}], ctorParameters: () => [] });
|
|
692
692
|
|
|
693
693
|
class LiteDate {
|
|
694
|
-
|
|
694
|
+
_elementRef;
|
|
695
695
|
inEdit = input(true, ...(ngDevMode ? [{ debugName: "inEdit" }] : []));
|
|
696
696
|
control = input({
|
|
697
697
|
label: '',
|
|
@@ -811,14 +811,14 @@ class LiteDate {
|
|
|
811
811
|
return days;
|
|
812
812
|
}
|
|
813
813
|
FormUtils = FormUtils;
|
|
814
|
-
constructor(
|
|
815
|
-
this.
|
|
814
|
+
constructor(_elementRef) {
|
|
815
|
+
this._elementRef = _elementRef;
|
|
816
816
|
effect(() => {
|
|
817
817
|
const control = this.control();
|
|
818
818
|
// console.log('LiteDate initialized with control:', control);
|
|
819
819
|
// Subscribe to form control value changes to trigger reactivity
|
|
820
820
|
if (control && control.formControl) {
|
|
821
|
-
const
|
|
821
|
+
const _subscription = control.formControl.valueChanges.subscribe(value => {
|
|
822
822
|
console.log('Form value changed:', value);
|
|
823
823
|
this.formValueChangeSignal.set(Date.now()); // Use timestamp to ensure change detection
|
|
824
824
|
});
|
|
@@ -828,7 +828,7 @@ class LiteDate {
|
|
|
828
828
|
});
|
|
829
829
|
}
|
|
830
830
|
onDocumentClick(event) {
|
|
831
|
-
if (!this.
|
|
831
|
+
if (!this._elementRef.nativeElement.contains(event.target)) {
|
|
832
832
|
this.showCalendar.set(false);
|
|
833
833
|
}
|
|
834
834
|
}
|
|
@@ -1111,7 +1111,7 @@ class LiteDate {
|
|
|
1111
1111
|
}
|
|
1112
1112
|
}
|
|
1113
1113
|
calculateCalendarPosition() {
|
|
1114
|
-
const element = this.
|
|
1114
|
+
const element = this._elementRef.nativeElement;
|
|
1115
1115
|
const rect = element.getBoundingClientRect();
|
|
1116
1116
|
const calendarHeight = 300; // Approximate height of calendar panel
|
|
1117
1117
|
const spaceBelow = window.innerHeight - rect.bottom;
|
|
@@ -1206,11 +1206,352 @@ class LiteDate {
|
|
|
1206
1206
|
return `${year}-${month}-${day}`;
|
|
1207
1207
|
}
|
|
1208
1208
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteDate, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1209
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteDate, isStandalone: true, selector: "lite-date", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"lite-date\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <input type=\"text\" \n [value]=\"getFormattedValue()\" \n (change)=\"onDateChange($event)\"\n [class.invalid]=\"hasErrors()\"\n [placeholder]=\"range() ? format() + ' - ' + format() : format()\" />\n <label class=\"label\" [ngClass]=\"{'float': getFormattedValue()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </label>\n <div class=\"calendar_icon\" (click)=\"toggleCalendar()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"calendar\" viewBox=\"0 0 16 16\">\n <path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1.5A1.5 1.5 0 0 1 16 2.5v11A1.5 1.5 0 0 1 14.5 15H1.5A1.5 1.5 0 0 1 0 13.5v-11A1.5 1.5 0 0 1 1.5 1H3V.5a.5.5 0 0 1 .5-.5zM1.5 2a.5.5 0 0 0-.5.5V4h14V2.5a.5.5 0 0 0-.5-.5H13v.5a.5.5 0 0 1-1 0V2H4v.5a.5.5 0 0 1-1 0V2H1.5zM15 5H1v8.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V5z\"/>\n </svg>\n </div>\n \n @if (showCalendar()) {\n <div class=\"calendar-overlay\" [ngClass]=\"'position-' + calendarPosition()\">\n <ng-container *ngTemplateOutlet=\"calendarPanel\"></ng-container>\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n {{ getDisplayValue() }}\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n<ng-template #calendarPanel>\n <div class=\"calendar-panel\" [ngClass]=\"{'range-mode': range()}\">\n @if (range()) {\n <!-- Range mode: Two month calendars side by side -->\n <div class=\"dual-calendar\">\n <!-- First month -->\n <div class=\"calendar-month\">\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <div class=\"nav-spacer\"></div>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n \n <!-- Second month -->\n <div class=\"calendar-month\">\n <div class=\"calendar-header\">\n <div class=\"nav-spacer\"></div>\n <span class=\"month-year\">{{ getSecondMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of secondCalendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n } @else {\n <!-- Single month mode -->\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteDate, isStandalone: true, selector: "lite-date", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"lite-date\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <input type=\"text\" \n [value]=\"getFormattedValue()\" \n (change)=\"onDateChange($event)\"\n [class.invalid]=\"hasErrors()\"\n [placeholder]=\"range() ? format() + ' - ' + format() : format()\" />\n <label class=\"label\" [ngClass]=\"{'float': getFormattedValue()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </label>\n <div class=\"calendar_icon\" (click)=\"toggleCalendar()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"calendar\" viewBox=\"0 0 16 16\">\n <path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1.5A1.5 1.5 0 0 1 16 2.5v11A1.5 1.5 0 0 1 14.5 15H1.5A1.5 1.5 0 0 1 0 13.5v-11A1.5 1.5 0 0 1 1.5 1H3V.5a.5.5 0 0 1 .5-.5zM1.5 2a.5.5 0 0 0-.5.5V4h14V2.5a.5.5 0 0 0-.5-.5H13v.5a.5.5 0 0 1-1 0V2H4v.5a.5.5 0 0 1-1 0V2H1.5zM15 5H1v8.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V5z\"/>\n </svg>\n </div>\n \n @if (showCalendar()) {\n <div class=\"calendar-overlay\" [ngClass]=\"'position-' + calendarPosition()\">\n <ng-container *ngTemplateOutlet=\"calendarPanel\"></ng-container>\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n {{ getDisplayValue() }}\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n<ng-template #calendarPanel>\n <div class=\"calendar-panel\" [ngClass]=\"{'range-mode': range()}\">\n @if (range()) {\n <!-- Range mode: Two month calendars side by side -->\n <div class=\"dual-calendar\">\n <!-- First month -->\n <div class=\"calendar-month\">\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <div class=\"nav-spacer\"></div>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n \n <!-- Second month -->\n <div class=\"calendar-month\">\n <div class=\"calendar-header\">\n <div class=\"nav-spacer\"></div>\n <span class=\"month-year\">{{ getSecondMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of secondCalendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n } @else {\n <!-- Single month mode -->\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1210
1210
|
}
|
|
1211
1211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteDate, decorators: [{
|
|
1212
1212
|
type: Component,
|
|
1213
|
-
args: [{ selector: 'lite-date', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"lite-date\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <input type=\"text\" \n [value]=\"getFormattedValue()\" \n (change)=\"onDateChange($event)\"\n [class.invalid]=\"hasErrors()\"\n [placeholder]=\"range() ? format() + ' - ' + format() : format()\" />\n <label class=\"label\" [ngClass]=\"{'float': getFormattedValue()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </label>\n <div class=\"calendar_icon\" (click)=\"toggleCalendar()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"calendar\" viewBox=\"0 0 16 16\">\n <path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1.5A1.5 1.5 0 0 1 16 2.5v11A1.5 1.5 0 0 1 14.5 15H1.5A1.5 1.5 0 0 1 0 13.5v-11A1.5 1.5 0 0 1 1.5 1H3V.5a.5.5 0 0 1 .5-.5zM1.5 2a.5.5 0 0 0-.5.5V4h14V2.5a.5.5 0 0 0-.5-.5H13v.5a.5.5 0 0 1-1 0V2H4v.5a.5.5 0 0 1-1 0V2H1.5zM15 5H1v8.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V5z\"/>\n </svg>\n </div>\n \n @if (showCalendar()) {\n <div class=\"calendar-overlay\" [ngClass]=\"'position-' + calendarPosition()\">\n <ng-container *ngTemplateOutlet=\"calendarPanel\"></ng-container>\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n {{ getDisplayValue() }}\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n<ng-template #calendarPanel>\n <div class=\"calendar-panel\" [ngClass]=\"{'range-mode': range()}\">\n @if (range()) {\n <!-- Range mode: Two month calendars side by side -->\n <div class=\"dual-calendar\">\n <!-- First month -->\n <div class=\"calendar-month\">\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <div class=\"nav-spacer\"></div>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n \n <!-- Second month -->\n <div class=\"calendar-month\">\n <div class=\"calendar-header\">\n <div class=\"nav-spacer\"></div>\n <span class=\"month-year\">{{ getSecondMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of secondCalendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n } @else {\n <!-- Single month mode -->\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"] }]
|
|
1213
|
+
args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'lite-date', template: "<div class=\"lite-date\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <input type=\"text\" \n [value]=\"getFormattedValue()\" \n (change)=\"onDateChange($event)\"\n [class.invalid]=\"hasErrors()\"\n [placeholder]=\"range() ? format() + ' - ' + format() : format()\" />\n <label class=\"label\" [ngClass]=\"{'float': getFormattedValue()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </label>\n <div class=\"calendar_icon\" (click)=\"toggleCalendar()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"calendar\" viewBox=\"0 0 16 16\">\n <path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1.5A1.5 1.5 0 0 1 16 2.5v11A1.5 1.5 0 0 1 14.5 15H1.5A1.5 1.5 0 0 1 0 13.5v-11A1.5 1.5 0 0 1 1.5 1H3V.5a.5.5 0 0 1 .5-.5zM1.5 2a.5.5 0 0 0-.5.5V4h14V2.5a.5.5 0 0 0-.5-.5H13v.5a.5.5 0 0 1-1 0V2H4v.5a.5.5 0 0 1-1 0V2H1.5zM15 5H1v8.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V5z\"/>\n </svg>\n </div>\n \n @if (showCalendar()) {\n <div class=\"calendar-overlay\" [ngClass]=\"'position-' + calendarPosition()\">\n <ng-container *ngTemplateOutlet=\"calendarPanel\"></ng-container>\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n {{ getDisplayValue() }}\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n<ng-template #calendarPanel>\n <div class=\"calendar-panel\" [ngClass]=\"{'range-mode': range()}\">\n @if (range()) {\n <!-- Range mode: Two month calendars side by side -->\n <div class=\"dual-calendar\">\n <!-- First month -->\n <div class=\"calendar-month\">\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <div class=\"nav-spacer\"></div>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n \n <!-- Second month -->\n <div class=\"calendar-month\">\n <div class=\"calendar-header\">\n <div class=\"nav-spacer\"></div>\n <span class=\"month-year\">{{ getSecondMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of secondCalendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n } @else {\n <!-- Single month mode -->\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{ \n 'today': day.isToday, \n 'selected': day.isSelected,\n 'dim': day.isOtherMonth,\n 'range-start': day.isRangeStart,\n 'range-end': day.isRangeEnd,\n 'in-range': day.isInRange\n }\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
1214
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
1215
|
+
type: HostListener,
|
|
1216
|
+
args: ['document:click', ['$event']]
|
|
1217
|
+
}] } });
|
|
1218
|
+
|
|
1219
|
+
class LiteDateTime {
|
|
1220
|
+
_elementRef;
|
|
1221
|
+
inEdit = input(true, ...(ngDevMode ? [{ debugName: "inEdit" }] : []));
|
|
1222
|
+
control = input({
|
|
1223
|
+
label: '',
|
|
1224
|
+
formControl: new FormControl('', { nonNullable: true }),
|
|
1225
|
+
}, ...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
1226
|
+
format = input('dd/MM/yyyy HH:mm', ...(ngDevMode ? [{ debugName: "format" }] : []));
|
|
1227
|
+
// Calendar state
|
|
1228
|
+
currentMonth = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
|
|
1229
|
+
showCalendar = signal(false, ...(ngDevMode ? [{ debugName: "showCalendar" }] : []));
|
|
1230
|
+
calendarPosition = signal('bottom', ...(ngDevMode ? [{ debugName: "calendarPosition" }] : []));
|
|
1231
|
+
formattedValue = signal('', ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
|
|
1232
|
+
hourSet = new Array(24).fill(0).map((_, i) => i);
|
|
1233
|
+
minSet = new Array(12).fill(0).map((_, i) => i * 5);
|
|
1234
|
+
selectedHour = new Date().getHours();
|
|
1235
|
+
selectedMinute = 0;
|
|
1236
|
+
selectedDateTime = null;
|
|
1237
|
+
// Signal to track form control value changes for reactivity
|
|
1238
|
+
// private formValueChangeSignal = signal<any>(null);
|
|
1239
|
+
// Computed calendar days - only recalculates when dependencies change
|
|
1240
|
+
calendarDays = computed(() => {
|
|
1241
|
+
// This makes the computed reactive to form value changes
|
|
1242
|
+
// this.formValueChangeSignal();
|
|
1243
|
+
return this.getMonthDays(this.currentMonth());
|
|
1244
|
+
}, ...(ngDevMode ? [{ debugName: "calendarDays" }] : []));
|
|
1245
|
+
getMonthDays(monthDate) {
|
|
1246
|
+
const year = monthDate.getFullYear();
|
|
1247
|
+
const month = monthDate.getMonth();
|
|
1248
|
+
// First day of the month
|
|
1249
|
+
const firstDay = new Date(year, month, 1);
|
|
1250
|
+
const lastDay = new Date(year, month + 1, 0);
|
|
1251
|
+
const days = [];
|
|
1252
|
+
const today = new Date();
|
|
1253
|
+
const value = this.control().formControl.value;
|
|
1254
|
+
// Single mode - value should be string
|
|
1255
|
+
if (value) {
|
|
1256
|
+
const date = new Date(value);
|
|
1257
|
+
if (!isNaN(date.getTime())) {
|
|
1258
|
+
this.selectedDateTime = {
|
|
1259
|
+
date,
|
|
1260
|
+
day: date.getDate(),
|
|
1261
|
+
isOtherMonth: false,
|
|
1262
|
+
isToday: this.isSameDay(date, today),
|
|
1263
|
+
isSelected: true,
|
|
1264
|
+
};
|
|
1265
|
+
}
|
|
1266
|
+
}
|
|
1267
|
+
// Only add days from the current month
|
|
1268
|
+
const previousMonthDate = new Date(firstDay);
|
|
1269
|
+
while (previousMonthDate.getDay() !== 0) {
|
|
1270
|
+
previousMonthDate.setDate(previousMonthDate.getDate() - 1);
|
|
1271
|
+
days.unshift({
|
|
1272
|
+
date: new Date(previousMonthDate),
|
|
1273
|
+
day: previousMonthDate.getDate(),
|
|
1274
|
+
isOtherMonth: true,
|
|
1275
|
+
isToday: this.isSameDay(previousMonthDate, today),
|
|
1276
|
+
isSelected: this.isSameDay(previousMonthDate, this.selectedDateTime ? this.selectedDateTime.date : null),
|
|
1277
|
+
});
|
|
1278
|
+
}
|
|
1279
|
+
const currentDate = new Date(firstDay);
|
|
1280
|
+
while (currentDate <= lastDay) {
|
|
1281
|
+
const isToday = this.isSameDay(currentDate, today);
|
|
1282
|
+
const isSelected = this.isSameDay(currentDate, this.selectedDateTime ? this.selectedDateTime.date : null);
|
|
1283
|
+
days.push({
|
|
1284
|
+
date: new Date(currentDate),
|
|
1285
|
+
day: currentDate.getDate(),
|
|
1286
|
+
isOtherMonth: false,
|
|
1287
|
+
isToday,
|
|
1288
|
+
isSelected,
|
|
1289
|
+
});
|
|
1290
|
+
currentDate.setDate(currentDate.getDate() + 1);
|
|
1291
|
+
}
|
|
1292
|
+
const nextMonthDate = new Date(lastDay);
|
|
1293
|
+
while (nextMonthDate.getDay() < 6) {
|
|
1294
|
+
nextMonthDate.setDate(nextMonthDate.getDate() + 1);
|
|
1295
|
+
days.push({
|
|
1296
|
+
date: new Date(nextMonthDate),
|
|
1297
|
+
day: nextMonthDate.getDate(),
|
|
1298
|
+
isOtherMonth: true,
|
|
1299
|
+
isToday: this.isSameDay(nextMonthDate, today),
|
|
1300
|
+
isSelected: this.isSameDay(nextMonthDate, this.selectedDateTime ? this.selectedDateTime.date : null),
|
|
1301
|
+
});
|
|
1302
|
+
}
|
|
1303
|
+
return days;
|
|
1304
|
+
}
|
|
1305
|
+
FormUtils = FormUtils;
|
|
1306
|
+
constructor(_elementRef) {
|
|
1307
|
+
this._elementRef = _elementRef;
|
|
1308
|
+
effect(() => {
|
|
1309
|
+
const control = this.control();
|
|
1310
|
+
// console.log('LiteDateTime with control:', control);
|
|
1311
|
+
// Subscribe to form control value changes to trigger reactivity
|
|
1312
|
+
if (control && control.formControl) {
|
|
1313
|
+
control.formControl.valueChanges.subscribe(value => {
|
|
1314
|
+
if (value) {
|
|
1315
|
+
const date = new Date(value);
|
|
1316
|
+
// console.log('Form value changed:', value, date, isNaN(date.getTime()));
|
|
1317
|
+
if (!isNaN(date.getTime())) {
|
|
1318
|
+
console.log('Formatted Date:', this.formatDate(date, this.format()));
|
|
1319
|
+
this.formattedValue.set(this.formatDate(date, this.format()));
|
|
1320
|
+
}
|
|
1321
|
+
else {
|
|
1322
|
+
this.formattedValue.set(value);
|
|
1323
|
+
}
|
|
1324
|
+
}
|
|
1325
|
+
});
|
|
1326
|
+
}
|
|
1327
|
+
});
|
|
1328
|
+
}
|
|
1329
|
+
onDocumentClick(event) {
|
|
1330
|
+
if (!this._elementRef.nativeElement.contains(event.target)) {
|
|
1331
|
+
this.showCalendar.set(false);
|
|
1332
|
+
}
|
|
1333
|
+
}
|
|
1334
|
+
isRequired() {
|
|
1335
|
+
return this.FormUtils.isRequired(this.control().formControl);
|
|
1336
|
+
}
|
|
1337
|
+
hasErrors() {
|
|
1338
|
+
return FormUtils.hasErrors(this.control().formControl);
|
|
1339
|
+
}
|
|
1340
|
+
getErrorMessage() {
|
|
1341
|
+
return FormUtils.getErrorMessages(this.control().formControl, this.control().label);
|
|
1342
|
+
}
|
|
1343
|
+
onDateChange(event) {
|
|
1344
|
+
const target = event.target;
|
|
1345
|
+
const inputValue = target.value;
|
|
1346
|
+
if (!inputValue) {
|
|
1347
|
+
this.control().formControl.setValue('');
|
|
1348
|
+
// this.formValueChangeSignal.set(Date.now());
|
|
1349
|
+
this.control().formControl.markAsDirty();
|
|
1350
|
+
this.control().formControl.markAsTouched();
|
|
1351
|
+
return;
|
|
1352
|
+
}
|
|
1353
|
+
// Single mode - try to parse the formatted date input
|
|
1354
|
+
const parsedDate = this.parseFormattedDate(inputValue, this.format());
|
|
1355
|
+
let newValue;
|
|
1356
|
+
if (parsedDate) {
|
|
1357
|
+
// Store as ISO date string for consistency
|
|
1358
|
+
newValue = this.toLocalISOString(parsedDate);
|
|
1359
|
+
}
|
|
1360
|
+
else {
|
|
1361
|
+
// If parsing fails, store the raw input value
|
|
1362
|
+
newValue = inputValue;
|
|
1363
|
+
}
|
|
1364
|
+
this.control().formControl.setValue(newValue);
|
|
1365
|
+
// this.formValueChangeSignal.set(Date.now());
|
|
1366
|
+
this.control().formControl.markAsDirty();
|
|
1367
|
+
this.control().formControl.markAsTouched();
|
|
1368
|
+
}
|
|
1369
|
+
onSelectHour(hour) {
|
|
1370
|
+
this.selectedHour = hour;
|
|
1371
|
+
this.setDateTimeSelected(this.selectedDateTime ? this.selectedDateTime.date : new Date());
|
|
1372
|
+
}
|
|
1373
|
+
onSelectMinute(minute) {
|
|
1374
|
+
this.selectedMinute = minute;
|
|
1375
|
+
this.setDateTimeSelected(this.selectedDateTime ? this.selectedDateTime.date : new Date());
|
|
1376
|
+
}
|
|
1377
|
+
setDateTimeSelected(date) {
|
|
1378
|
+
this.selectedDateTime = {
|
|
1379
|
+
date,
|
|
1380
|
+
day: date.getDate(),
|
|
1381
|
+
isOtherMonth: false,
|
|
1382
|
+
isToday: date.getDate() === new Date().getDate(),
|
|
1383
|
+
isSelected: true,
|
|
1384
|
+
};
|
|
1385
|
+
const dateString = this.toLocalISOString(this.selectedDateTime.date);
|
|
1386
|
+
this.control().formControl.setValue(dateString);
|
|
1387
|
+
const calDate = this.calendarDays().find(d => this.isSameDay(d.date, date));
|
|
1388
|
+
if (calDate) {
|
|
1389
|
+
calDate.isSelected = true;
|
|
1390
|
+
}
|
|
1391
|
+
}
|
|
1392
|
+
parseFormattedDate(dateString, format) {
|
|
1393
|
+
try {
|
|
1394
|
+
// Create a regex pattern from the format
|
|
1395
|
+
let pattern = format
|
|
1396
|
+
.replace('dd', '(\\d{1,2})')
|
|
1397
|
+
.replace('MM', '(\\d{1,2})')
|
|
1398
|
+
.replace('yyyy', '(\\d{4})');
|
|
1399
|
+
const regex = new RegExp(`^${pattern}$`);
|
|
1400
|
+
const match = dateString.match(regex);
|
|
1401
|
+
if (!match)
|
|
1402
|
+
return null;
|
|
1403
|
+
// Extract parts based on format
|
|
1404
|
+
let day, month, year;
|
|
1405
|
+
if (format === 'dd/MM/yyyy') {
|
|
1406
|
+
day = parseInt(match[1], 10);
|
|
1407
|
+
month = parseInt(match[2], 10) - 1; // Month is 0-indexed
|
|
1408
|
+
year = parseInt(match[3], 10);
|
|
1409
|
+
}
|
|
1410
|
+
else if (format === 'MM/dd/yyyy') {
|
|
1411
|
+
month = parseInt(match[1], 10) - 1; // Month is 0-indexed
|
|
1412
|
+
day = parseInt(match[2], 10);
|
|
1413
|
+
year = parseInt(match[3], 10);
|
|
1414
|
+
}
|
|
1415
|
+
else if (format === 'yyyy-MM-dd') {
|
|
1416
|
+
year = parseInt(match[1], 10);
|
|
1417
|
+
month = parseInt(match[2], 10) - 1; // Month is 0-indexed
|
|
1418
|
+
day = parseInt(match[3], 10);
|
|
1419
|
+
}
|
|
1420
|
+
else {
|
|
1421
|
+
// Default to dd/MM/yyyy
|
|
1422
|
+
day = parseInt(match[1], 10);
|
|
1423
|
+
month = parseInt(match[2], 10) - 1;
|
|
1424
|
+
year = parseInt(match[3], 10);
|
|
1425
|
+
}
|
|
1426
|
+
const date = new Date(year, month, day);
|
|
1427
|
+
// Validate the date
|
|
1428
|
+
if (date.getFullYear() === year &&
|
|
1429
|
+
date.getMonth() === month &&
|
|
1430
|
+
date.getDate() === day) {
|
|
1431
|
+
return date;
|
|
1432
|
+
}
|
|
1433
|
+
return null;
|
|
1434
|
+
}
|
|
1435
|
+
catch {
|
|
1436
|
+
return null;
|
|
1437
|
+
}
|
|
1438
|
+
}
|
|
1439
|
+
getDisplayValue() {
|
|
1440
|
+
const value = this.control().formControl.value;
|
|
1441
|
+
if (!value)
|
|
1442
|
+
return 'Not selected';
|
|
1443
|
+
// Single mode - value is string
|
|
1444
|
+
const singleValue = value;
|
|
1445
|
+
if (singleValue) {
|
|
1446
|
+
const date = new Date(singleValue);
|
|
1447
|
+
if (!isNaN(date.getTime())) {
|
|
1448
|
+
return this.formatDate(date, this.format());
|
|
1449
|
+
}
|
|
1450
|
+
return singleValue;
|
|
1451
|
+
}
|
|
1452
|
+
return 'Not selected';
|
|
1453
|
+
}
|
|
1454
|
+
formatDate(date, format) {
|
|
1455
|
+
const day = date.getDate().toString().padStart(2, '0');
|
|
1456
|
+
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
1457
|
+
const year = date.getFullYear().toString();
|
|
1458
|
+
return format
|
|
1459
|
+
.replace('dd', day)
|
|
1460
|
+
.replace('MM', month)
|
|
1461
|
+
.replace('yyyy', year)
|
|
1462
|
+
.replace('HH', (this.selectedHour < 10 ? '0' : '') + this.selectedHour)
|
|
1463
|
+
.replace('mm', (this.selectedMinute < 10 ? '0' : '') + this.selectedMinute);
|
|
1464
|
+
}
|
|
1465
|
+
// Calendar methods
|
|
1466
|
+
toggleCalendar() {
|
|
1467
|
+
if (!this.showCalendar()) {
|
|
1468
|
+
this.calculateCalendarPosition();
|
|
1469
|
+
this.setCalendarToSelectedDate();
|
|
1470
|
+
}
|
|
1471
|
+
this.showCalendar.set(!this.showCalendar());
|
|
1472
|
+
}
|
|
1473
|
+
closeCalendar() {
|
|
1474
|
+
this.showCalendar.set(false);
|
|
1475
|
+
}
|
|
1476
|
+
setCalendarToSelectedDate() {
|
|
1477
|
+
const selectedValue = this.control().formControl.value;
|
|
1478
|
+
if (selectedValue) {
|
|
1479
|
+
let selectedDate = null;
|
|
1480
|
+
// Single mode
|
|
1481
|
+
const singleValue = selectedValue;
|
|
1482
|
+
if (singleValue) {
|
|
1483
|
+
selectedDate = new Date(singleValue);
|
|
1484
|
+
}
|
|
1485
|
+
if (selectedDate && !isNaN(selectedDate.getTime())) {
|
|
1486
|
+
// Set calendar to show the month of the selected date
|
|
1487
|
+
const selectedMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
|
|
1488
|
+
this.currentMonth.set(selectedMonth);
|
|
1489
|
+
}
|
|
1490
|
+
}
|
|
1491
|
+
}
|
|
1492
|
+
calculateCalendarPosition() {
|
|
1493
|
+
const element = this._elementRef.nativeElement;
|
|
1494
|
+
const rect = element.getBoundingClientRect();
|
|
1495
|
+
const calendarHeight = 300; // Approximate height of calendar panel
|
|
1496
|
+
const spaceBelow = window.innerHeight - rect.bottom;
|
|
1497
|
+
const spaceAbove = rect.top;
|
|
1498
|
+
// If not enough space below and more space above, position on top
|
|
1499
|
+
if (spaceBelow < calendarHeight && spaceAbove > spaceBelow) {
|
|
1500
|
+
this.calendarPosition.set('top');
|
|
1501
|
+
}
|
|
1502
|
+
else {
|
|
1503
|
+
this.calendarPosition.set('bottom');
|
|
1504
|
+
}
|
|
1505
|
+
}
|
|
1506
|
+
getMonthYearDisplay() {
|
|
1507
|
+
const date = this.currentMonth();
|
|
1508
|
+
return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
|
|
1509
|
+
}
|
|
1510
|
+
previousMonth() {
|
|
1511
|
+
const current = this.currentMonth();
|
|
1512
|
+
const newDate = new Date(current.getFullYear(), current.getMonth() - 1, 1);
|
|
1513
|
+
this.currentMonth.set(newDate);
|
|
1514
|
+
}
|
|
1515
|
+
nextMonth() {
|
|
1516
|
+
const current = this.currentMonth();
|
|
1517
|
+
const newDate = new Date(current.getFullYear(), current.getMonth() + 1, 1);
|
|
1518
|
+
this.currentMonth.set(newDate);
|
|
1519
|
+
}
|
|
1520
|
+
selectDate(day) {
|
|
1521
|
+
if (this.selectedDateTime) {
|
|
1522
|
+
this.selectedDateTime.isSelected = false;
|
|
1523
|
+
}
|
|
1524
|
+
// this.selectedDateTime = day;
|
|
1525
|
+
// this.selectedDateTime.isSelected = true;
|
|
1526
|
+
this.setDateTimeSelected(day.date);
|
|
1527
|
+
// const dateString = this.toLocalISOString(day.date);
|
|
1528
|
+
// (this.control().formControl as FormControl<string>).setValue(dateString);
|
|
1529
|
+
// // this.formValueChangeSignal.set(Date.now()); // Trigger immediate update
|
|
1530
|
+
// this.control().formControl.markAsDirty();
|
|
1531
|
+
// this.control().formControl.markAsTouched();
|
|
1532
|
+
}
|
|
1533
|
+
isSameDay(date1, date2) {
|
|
1534
|
+
if (!date2)
|
|
1535
|
+
return false;
|
|
1536
|
+
return date1.getFullYear() === date2.getFullYear() &&
|
|
1537
|
+
date1.getMonth() === date2.getMonth() &&
|
|
1538
|
+
date1.getDate() === date2.getDate();
|
|
1539
|
+
}
|
|
1540
|
+
// Helper method to convert Date to ISO date string without timezone conversion
|
|
1541
|
+
toLocalISOString(date) {
|
|
1542
|
+
const year = date.getFullYear();
|
|
1543
|
+
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
1544
|
+
const day = date.getDate().toString().padStart(2, '0');
|
|
1545
|
+
const hh = (this.selectedHour < 10 ? '0' : '') + this.selectedHour;
|
|
1546
|
+
const mm = (this.selectedMinute < 10 ? '0' : '') + this.selectedMinute;
|
|
1547
|
+
return `${year}-${month}-${day}T${hh}:${mm}:00`;
|
|
1548
|
+
}
|
|
1549
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteDateTime, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1550
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteDateTime, isStandalone: true, selector: "lite-datetime", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"lite-date\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <input type=\"text\" \n [value]=\"formattedValue()\" \n (change)=\"onDateChange($event)\"\n [class.invalid]=\"hasErrors()\"\n [placeholder]=\"format()\" />\n <label class=\"label\" [ngClass]=\"{'float': formattedValue()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </label>\n <div class=\"calendar_icon\" (click)=\"toggleCalendar()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"calendar\" viewBox=\"0 0 16 16\">\n <path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1.5A1.5 1.5 0 0 1 16 2.5v11A1.5 1.5 0 0 1 14.5 15H1.5A1.5 1.5 0 0 1 0 13.5v-11A1.5 1.5 0 0 1 1.5 1H3V.5a.5.5 0 0 1 .5-.5zM1.5 2a.5.5 0 0 0-.5.5V4h14V2.5a.5.5 0 0 0-.5-.5H13v.5a.5.5 0 0 1-1 0V2H4v.5a.5.5 0 0 1-1 0V2H1.5zM15 5H1v8.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V5z\"/>\n </svg>\n </div>\n \n @if (showCalendar()) {\n <div class=\"calendar-overlay\" [ngClass]=\"'position-' + calendarPosition()\">\n <ng-container *ngTemplateOutlet=\"calendarPanel\"></ng-container>\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n {{ getDisplayValue() }}\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n<ng-template #calendarPanel>\n <div class=\"calendar-panel datetime\">\n <div class=\"date-panel\">\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{'today': day.isToday, 'selected': day.isSelected, 'dim': day.isOtherMonth}\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"time-panel\">\n <div class=\"control-header\">\n <button type=\"button\" class=\"close-button\" (click)=\"closeCalendar()\" aria-label=\"Close\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z\"/>\n </svg>\n </button>\n </div>\n <div class=\"time-header\">HOURS</div>\n <div class=\"hh-grid\">\n @for (hh of hourSet; track hh) {\n <div class=\"hh-slot\" [ngClass]=\"{'selected': selectedHour === hh}\" (click)=\"onSelectHour(hh)\">\n {{ hh < 10 ? '0' + hh : hh }}\n </div>\n }\n </div>\n <div class=\"time-header\">MINUTES</div>\n <div class=\"hh-grid\">\n @for (mm of minSet; track mm) {\n <div class=\"hh-slot\" [ngClass]=\"{'selected': selectedMinute === mm}\" (click)=\"onSelectMinute(mm)\">\n {{ mm < 10 ? '0' + mm : mm }}\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1551
|
+
}
|
|
1552
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteDateTime, decorators: [{
|
|
1553
|
+
type: Component,
|
|
1554
|
+
args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'lite-datetime', template: "<div class=\"lite-date\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <input type=\"text\" \n [value]=\"formattedValue()\" \n (change)=\"onDateChange($event)\"\n [class.invalid]=\"hasErrors()\"\n [placeholder]=\"format()\" />\n <label class=\"label\" [ngClass]=\"{'float': formattedValue()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </label>\n <div class=\"calendar_icon\" (click)=\"toggleCalendar()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"calendar\" viewBox=\"0 0 16 16\">\n <path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1.5A1.5 1.5 0 0 1 16 2.5v11A1.5 1.5 0 0 1 14.5 15H1.5A1.5 1.5 0 0 1 0 13.5v-11A1.5 1.5 0 0 1 1.5 1H3V.5a.5.5 0 0 1 .5-.5zM1.5 2a.5.5 0 0 0-.5.5V4h14V2.5a.5.5 0 0 0-.5-.5H13v.5a.5.5 0 0 1-1 0V2H4v.5a.5.5 0 0 1-1 0V2H1.5zM15 5H1v8.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V5z\"/>\n </svg>\n </div>\n \n @if (showCalendar()) {\n <div class=\"calendar-overlay\" [ngClass]=\"'position-' + calendarPosition()\">\n <ng-container *ngTemplateOutlet=\"calendarPanel\"></ng-container>\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n {{ getDisplayValue() }}\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n<ng-template #calendarPanel>\n <div class=\"calendar-panel datetime\">\n <div class=\"date-panel\">\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{'today': day.isToday, 'selected': day.isSelected, 'dim': day.isOtherMonth}\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"time-panel\">\n <div class=\"control-header\">\n <button type=\"button\" class=\"close-button\" (click)=\"closeCalendar()\" aria-label=\"Close\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z\"/>\n </svg>\n </button>\n </div>\n <div class=\"time-header\">HOURS</div>\n <div class=\"hh-grid\">\n @for (hh of hourSet; track hh) {\n <div class=\"hh-slot\" [ngClass]=\"{'selected': selectedHour === hh}\" (click)=\"onSelectHour(hh)\">\n {{ hh < 10 ? '0' + hh : hh }}\n </div>\n }\n </div>\n <div class=\"time-header\">MINUTES</div>\n <div class=\"hh-grid\">\n @for (mm of minSet; track mm) {\n <div class=\"hh-slot\" [ngClass]=\"{'selected': selectedMinute === mm}\" (click)=\"onSelectMinute(mm)\">\n {{ mm < 10 ? '0' + mm : mm }}\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
1214
1555
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
1215
1556
|
type: HostListener,
|
|
1216
1557
|
args: ['document:click', ['$event']]
|
|
@@ -1253,15 +1594,15 @@ class LitePassword {
|
|
|
1253
1594
|
return value ? '••••••••' : '';
|
|
1254
1595
|
}
|
|
1255
1596
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LitePassword, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LitePassword, isStandalone: true, selector: "lite-password", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, showStrengthIndicator: { classPropertyName: "showStrengthIndicator", publicName: "showStrengthIndicator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lite-password\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"input-container\">\n <input \n [type]=\"getInputType()\" \n [formControl]=\"control().formControl\" \n placeholder=\"\" \n [ngClass]=\"{'invalid': hasErrors()}\" />\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (showToggle() && control().formControl.value) {\n <button \n type=\"button\" \n class=\"toggle-button\" \n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\">\n @if (showPassword()) {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"/>\n <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n </svg>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n </svg>\n }\n </button>\n }\n </div>\n @if (showStrengthIndicator() && control().formControl.value) {\n <div class=\"password-strength\">\n <div class=\"strength-bar\">\n <div class=\"strength-fill\" [ngClass]=\"'strength-' + passwordStrength().level.toLowerCase().replace(' ', '-')\"></div>\n </div>\n <div class=\"strength-info\">\n <span class=\"strength-level\" [ngClass]=\"'level-' + passwordStrength().level.toLowerCase().replace(' ', '-')\">\n {{ passwordStrength().level }}\n </span>\n <span class=\"strength-score\">({{ passwordStrength().score }}/8)</span>\n </div>\n @if (passwordStrength().feedback.length > 0) {\n <div class=\"strength-feedback\">\n @for (tip of passwordStrength().feedback; track tip) {\n <div class=\"feedback-tip\">\u2022 {{ tip }}</div>\n }\n </div>\n }\n </div>\n }\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ getDisplayValue() }}</div>\n }\n</div>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1597
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LitePassword, isStandalone: true, selector: "lite-password", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, showStrengthIndicator: { classPropertyName: "showStrengthIndicator", publicName: "showStrengthIndicator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lite-password\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"input-container\">\n <input \n [type]=\"getInputType()\" \n [formControl]=\"control().formControl\" \n placeholder=\"\" \n [ngClass]=\"{'invalid': hasErrors()}\" />\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (showToggle() && control().formControl.value) {\n <button \n type=\"button\" \n class=\"toggle-button\" \n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\">\n @if (showPassword()) {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"/>\n <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n </svg>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n </svg>\n }\n </button>\n }\n </div>\n @if (showStrengthIndicator() && control().formControl.value) {\n <div class=\"password-strength\">\n <div class=\"strength-bar\">\n <div class=\"strength-fill\" [ngClass]=\"'strength-' + passwordStrength().level.toLowerCase().replace(' ', '-')\"></div>\n </div>\n <div class=\"strength-info\">\n <span class=\"strength-level\" [ngClass]=\"'level-' + passwordStrength().level.toLowerCase().replace(' ', '-')\">\n {{ passwordStrength().level }}\n </span>\n <span class=\"strength-score\">({{ passwordStrength().score }}/8)</span>\n </div>\n @if (passwordStrength().feedback.length > 0) {\n <div class=\"strength-feedback\">\n @for (tip of passwordStrength().feedback; track tip) {\n <div class=\"feedback-tip\">\u2022 {{ tip }}</div>\n }\n </div>\n }\n </div>\n }\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ getDisplayValue() }}</div>\n }\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1257
1598
|
}
|
|
1258
1599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LitePassword, decorators: [{
|
|
1259
1600
|
type: Component,
|
|
1260
|
-
args: [{ selector: 'lite-password', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"lite-password\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"input-container\">\n <input \n [type]=\"getInputType()\" \n [formControl]=\"control().formControl\" \n placeholder=\"\" \n [ngClass]=\"{'invalid': hasErrors()}\" />\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (showToggle() && control().formControl.value) {\n <button \n type=\"button\" \n class=\"toggle-button\" \n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\">\n @if (showPassword()) {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"/>\n <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n </svg>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n </svg>\n }\n </button>\n }\n </div>\n @if (showStrengthIndicator() && control().formControl.value) {\n <div class=\"password-strength\">\n <div class=\"strength-bar\">\n <div class=\"strength-fill\" [ngClass]=\"'strength-' + passwordStrength().level.toLowerCase().replace(' ', '-')\"></div>\n </div>\n <div class=\"strength-info\">\n <span class=\"strength-level\" [ngClass]=\"'level-' + passwordStrength().level.toLowerCase().replace(' ', '-')\">\n {{ passwordStrength().level }}\n </span>\n <span class=\"strength-score\">({{ passwordStrength().score }}/8)</span>\n </div>\n @if (passwordStrength().feedback.length > 0) {\n <div class=\"strength-feedback\">\n @for (tip of passwordStrength().feedback; track tip) {\n <div class=\"feedback-tip\">\u2022 {{ tip }}</div>\n }\n </div>\n }\n </div>\n }\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ getDisplayValue() }}</div>\n }\n</div>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"] }]
|
|
1601
|
+
args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'lite-password', template: "<div class=\"lite-password\" [ngClass]=\"{'in-edit': inEdit()}\">\n @if (inEdit()) {\n <div class=\"input-container\">\n <input \n [type]=\"getInputType()\" \n [formControl]=\"control().formControl\" \n placeholder=\"\" \n [ngClass]=\"{'invalid': hasErrors()}\" />\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n @if (showToggle() && control().formControl.value) {\n <button \n type=\"button\" \n class=\"toggle-button\" \n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\">\n @if (showPassword()) {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"/>\n <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n </svg>\n } @else {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n </svg>\n }\n </button>\n }\n </div>\n @if (showStrengthIndicator() && control().formControl.value) {\n <div class=\"password-strength\">\n <div class=\"strength-bar\">\n <div class=\"strength-fill\" [ngClass]=\"'strength-' + passwordStrength().level.toLowerCase().replace(' ', '-')\"></div>\n </div>\n <div class=\"strength-info\">\n <span class=\"strength-level\" [ngClass]=\"'level-' + passwordStrength().level.toLowerCase().replace(' ', '-')\">\n {{ passwordStrength().level }}\n </span>\n <span class=\"strength-score\">({{ passwordStrength().score }}/8)</span>\n </div>\n @if (passwordStrength().feedback.length > 0) {\n <div class=\"strength-feedback\">\n @for (tip of passwordStrength().feedback; track tip) {\n <div class=\"feedback-tip\">\u2022 {{ tip }}</div>\n }\n </div>\n }\n </div>\n }\n @if (hasErrors()) {\n <div class=\"error-messages\">\n @for (errorMessage of getErrorMessage(); track errorMessage) {\n <div class=\"error-message\">{{ errorMessage }}</div>\n }\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">{{ getDisplayValue() }}</div>\n }\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
1261
1602
|
}], ctorParameters: () => [] });
|
|
1262
1603
|
|
|
1263
1604
|
class LiteFile {
|
|
1264
|
-
|
|
1605
|
+
_sanitizer;
|
|
1265
1606
|
file_icon = `<svg xmlns="http://www.w3.org/2000/svg" class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
1266
1607
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
1267
1608
|
<polyline points="14,2 14,8 20,8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line>
|
|
@@ -1286,8 +1627,8 @@ class LiteFile {
|
|
|
1286
1627
|
maxFileSize = computed(() => this.control().maxFileSize ?? 10 * 1024 * 1024, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
|
|
1287
1628
|
maxFiles = computed(() => this.control().maxFiles ?? 10, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
|
|
1288
1629
|
showPreview = computed(() => this.control().showPreview ?? true, ...(ngDevMode ? [{ debugName: "showPreview" }] : []));
|
|
1289
|
-
constructor(
|
|
1290
|
-
this.
|
|
1630
|
+
constructor(_sanitizer) {
|
|
1631
|
+
this._sanitizer = _sanitizer;
|
|
1291
1632
|
effect(() => {
|
|
1292
1633
|
// console.log('LiteFile initialized with control:', this.control());
|
|
1293
1634
|
// Sync files with form control
|
|
@@ -1348,7 +1689,7 @@ class LiteFile {
|
|
|
1348
1689
|
svgToBase64DataUrl(svgString) {
|
|
1349
1690
|
const base64 = btoa(svgString);
|
|
1350
1691
|
const img = `data:image/svg+xml;base64,${base64}`;
|
|
1351
|
-
return this.
|
|
1692
|
+
return this._sanitizer.bypassSecurityTrustUrl(img);
|
|
1352
1693
|
}
|
|
1353
1694
|
handleFiles(newFiles) {
|
|
1354
1695
|
const currentFiles = this.files();
|
|
@@ -1483,442 +1824,256 @@ class LiteFile {
|
|
|
1483
1824
|
return this.formatFileSize(this.totalSize());
|
|
1484
1825
|
}
|
|
1485
1826
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteFile, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1486
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: LiteFile, isStandalone: true, selector: "lite-file", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "cameraInput", first: true, predicate: ["cameraInput"], descendants: true }], ngImport: i0, template: "<div class=\"lite-file\" [class.in-edit]=\"inEdit()\">\n <label class=\"label\" [class.required]=\"isRequired()\">{{ control().label }}</label>\n <button [class.has-files]=\"fileCount() > 0\" [class.has-errors]=\"hasErrors()\" (click)=\"togglePanel()\">\n <img [src]=\"svgToBase64DataUrl(file_icon)\" alt=\"file icon\">\n <!-- Badge -->\n <span class=\"file-badge\">\n {{ fileCount() }}\n </span>\n </button>\n\n</div>\n<!-- Panel overlay -->\n<div class=\"panel-overlay\" \n [class.visible]=\"showPanel()\" \n (click)=\"closePanel()\">\n</div>\n<!-- Management panel -->\n<div class=\"file-panel\" [class.visible]=\"showPanel()\">\n <div class=\"panel-header\">\n <h3>File Management</h3>\n <button (click)=\"closePanel()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"panel-content\">\n <!-- File upload area -->\n <div class=\"upload-area\" \n [class.drag-over]=\"isDragOver()\"\n [class.uploading]=\"isUploading()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFileDialog()\">\n \n <div class=\"upload-content\">\n <svg class=\"upload-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"7,10 12,15 17,10\"></polyline>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n </svg>\n <p>Drop files here or click to browse</p>\n <small>Max {{ maxFiles() }} files, {{ formatFileSize(maxFileSize()) }} each</small>\n </div>\n\n <!-- Hidden file inputs -->\n <input #fileInput\n type=\"file\"\n [multiple]=\"multiple()\"\n [accept]=\"accept()\"\n (change)=\"onFileSelect($event)\"\n style=\"display: none;\">\n\n <input #cameraInput\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n (change)=\"onCameraCapture($event)\"\n style=\"display: none;\">\n </div>\n\n <!-- Action buttons -->\n <div class=\"action-buttons\">\n <button type=\"button\" class=\"action-btn upload-btn\" (click)=\"openFileDialog()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"17,8 12,3 7,8\"></polyline>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n </svg>\n Upload Files\n </button>\n\n <button type=\"button\" class=\"action-btn camera-btn\" (click)=\"openCameraDialog()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"></path>\n <circle cx=\"12\" cy=\"13\" r=\"4\"></circle>\n </svg>\n Take Picture\n </button>\n\n <button type=\"button\" class=\"action-btn close-btn\" (click)=\"closePanel()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n Close\n </button>\n </div>\n\n <!-- File list -->\n <div class=\"file-list\" *ngIf=\"fileCount() > 0\">\n <div class=\"file-list-header\">\n <span>Files ({{ fileCount() }})</span>\n <span class=\"total-size\">{{ getTotalSizeFormatted() }}</span>\n <button type=\"button\" class=\"clear-all-btn\" (click)=\"clearAllFiles()\">\n Clear All\n </button>\n </div>\n\n <div class=\"file-items\">\n <div class=\"file-item\" \n *ngFor=\"let file of files()\" \n [class.has-error]=\"file.error\"\n [class.uploading]=\"file.isUploading\">\n \n <!-- File preview/icon -->\n <div class=\"file-preview\">\n <img *ngIf=\"file.url && isImage(file.type)\" \n [src]=\"file.url\" \n [alt]=\"file.name\"\n class=\"preview-image\">\n <span *ngIf=\"!file.url || !isImage(file.type)\" \n class=\"file-type-icon\">\n {{ getFileIcon(file.type) }}\n </span>\n </div>\n\n <!-- File info -->\n <div class=\"file-info\">\n <div class=\"file-name\" [title]=\"file.name\">{{ file.name }}</div>\n <div class=\"file-details\">\n <span class=\"file-size\">{{ formatFileSize(file.size) }}</span>\n <span class=\"file-type\">{{ file.type || 'Unknown' }}</span>\n </div>\n <div class=\"file-error\" *ngIf=\"file.error\">{{ file.error }}</div>\n \n <!-- Upload progress -->\n <div class=\"upload-progress\" *ngIf=\"file.isUploading && file.uploadProgress !== undefined\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width.%]=\"file.uploadProgress\"></div>\n </div>\n <span class=\"progress-text\">{{ file.uploadProgress }}%</span>\n </div>\n </div>\n\n <!-- Remove button -->\n <button type=\"button\" \n class=\"remove-file-btn\" \n (click)=\"removeFile(file.id)\"\n [disabled]=\"file.isUploading\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"3,6 5,6 21,6\"></polyline>\n <path d=\"M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6\"></path>\n <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line>\n <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line>\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"empty-state\" *ngIf=\"fileCount() === 0\">\n <svg class=\"empty-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n <polyline points=\"14,2 14,8 20,8\"></polyline>\n </svg>\n <p>No files uploaded yet</p>\n <small>Click upload or drag files to get started</small>\n </div>\n </div>\n</div>\n\n<!-- Error messages -->\n<div class=\"error-messages\" *ngIf=\"hasFormErrors()\">\n <div class=\"error-message\" *ngFor=\"let error of getErrorMessage()\">{{ error }}</div>\n</div>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: LiteFile, isStandalone: true, selector: "lite-file", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "cameraInput", first: true, predicate: ["cameraInput"], descendants: true }], ngImport: i0, template: "<div class=\"lite-file\" [class.in-edit]=\"inEdit()\">\n <label class=\"label\" [class.required]=\"isRequired()\">{{ control().label }}</label>\n <button [class.has-files]=\"fileCount() > 0\" [class.has-errors]=\"hasErrors()\" (click)=\"togglePanel()\">\n <img [src]=\"svgToBase64DataUrl(file_icon)\" alt=\"file icon\">\n <!-- Badge -->\n <span class=\"file-badge\">\n {{ fileCount() }}\n </span>\n </button>\n\n</div>\n<!-- Panel overlay -->\n<div class=\"panel-overlay\" \n [class.visible]=\"showPanel()\" \n (click)=\"closePanel()\">\n</div>\n<!-- Management panel -->\n<div class=\"file-panel\" [class.visible]=\"showPanel()\">\n <div class=\"panel-header\">\n <h3>File Management</h3>\n <button (click)=\"closePanel()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"panel-content\">\n <!-- File upload area -->\n <div class=\"upload-area\" \n [class.drag-over]=\"isDragOver()\"\n [class.uploading]=\"isUploading()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFileDialog()\">\n \n <div class=\"upload-content\">\n <svg class=\"upload-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"7,10 12,15 17,10\"></polyline>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n </svg>\n <p>Drop files here or click to browse</p>\n <small>Max {{ maxFiles() }} files, {{ formatFileSize(maxFileSize()) }} each</small>\n </div>\n\n <!-- Hidden file inputs -->\n <input #fileInput\n type=\"file\"\n [multiple]=\"multiple()\"\n [accept]=\"accept()\"\n (change)=\"onFileSelect($event)\"\n style=\"display: none;\">\n\n <input #cameraInput\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n (change)=\"onCameraCapture($event)\"\n style=\"display: none;\">\n </div>\n\n <!-- Action buttons -->\n <div class=\"action-buttons\">\n <button type=\"button\" class=\"action-btn upload-btn\" (click)=\"openFileDialog()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"17,8 12,3 7,8\"></polyline>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n </svg>\n Upload Files\n </button>\n\n <button type=\"button\" class=\"action-btn camera-btn\" (click)=\"openCameraDialog()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"></path>\n <circle cx=\"12\" cy=\"13\" r=\"4\"></circle>\n </svg>\n Take Picture\n </button>\n\n <button type=\"button\" class=\"action-btn close-btn\" (click)=\"closePanel()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n Close\n </button>\n </div>\n\n <!-- File list -->\n <div class=\"file-list\" *ngIf=\"fileCount() > 0\">\n <div class=\"file-list-header\">\n <span>Files ({{ fileCount() }})</span>\n <span class=\"total-size\">{{ getTotalSizeFormatted() }}</span>\n <button type=\"button\" class=\"clear-all-btn\" (click)=\"clearAllFiles()\">\n Clear All\n </button>\n </div>\n\n <div class=\"file-items\">\n <div class=\"file-item\" \n *ngFor=\"let file of files()\" \n [class.has-error]=\"file.error\"\n [class.uploading]=\"file.isUploading\">\n \n <!-- File preview/icon -->\n <div class=\"file-preview\">\n <img *ngIf=\"file.url && isImage(file.type)\" \n [src]=\"file.url\" \n [alt]=\"file.name\"\n class=\"preview-image\">\n <span *ngIf=\"!file.url || !isImage(file.type)\" \n class=\"file-type-icon\">\n {{ getFileIcon(file.type) }}\n </span>\n </div>\n\n <!-- File info -->\n <div class=\"file-info\">\n <div class=\"file-name\" [title]=\"file.name\">{{ file.name }}</div>\n <div class=\"file-details\">\n <span class=\"file-size\">{{ formatFileSize(file.size) }}</span>\n <span class=\"file-type\">{{ file.type || 'Unknown' }}</span>\n </div>\n <div class=\"file-error\" *ngIf=\"file.error\">{{ file.error }}</div>\n \n <!-- Upload progress -->\n <div class=\"upload-progress\" *ngIf=\"file.isUploading && file.uploadProgress !== undefined\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width.%]=\"file.uploadProgress\"></div>\n </div>\n <span class=\"progress-text\">{{ file.uploadProgress }}%</span>\n </div>\n </div>\n\n <!-- Remove button -->\n <button type=\"button\" \n class=\"remove-file-btn\" \n (click)=\"removeFile(file.id)\"\n [disabled]=\"file.isUploading\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"3,6 5,6 21,6\"></polyline>\n <path d=\"M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6\"></path>\n <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line>\n <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line>\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"empty-state\" *ngIf=\"fileCount() === 0\">\n <svg class=\"empty-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n <polyline points=\"14,2 14,8 20,8\"></polyline>\n </svg>\n <p>No files uploaded yet</p>\n <small>Click upload or drag files to get started</small>\n </div>\n </div>\n</div>\n\n<!-- Error messages -->\n<div class=\"error-messages\" *ngIf=\"hasFormErrors()\">\n <div class=\"error-message\" *ngFor=\"let error of getErrorMessage()\">{{ error }}</div>\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1487
1828
|
}
|
|
1488
1829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteFile, decorators: [{
|
|
1489
|
-
type: Component,
|
|
1490
|
-
args: [{ selector: 'lite-file', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"lite-file\" [class.in-edit]=\"inEdit()\">\n <label class=\"label\" [class.required]=\"isRequired()\">{{ control().label }}</label>\n <button [class.has-files]=\"fileCount() > 0\" [class.has-errors]=\"hasErrors()\" (click)=\"togglePanel()\">\n <img [src]=\"svgToBase64DataUrl(file_icon)\" alt=\"file icon\">\n <!-- Badge -->\n <span class=\"file-badge\">\n {{ fileCount() }}\n </span>\n </button>\n\n</div>\n<!-- Panel overlay -->\n<div class=\"panel-overlay\" \n [class.visible]=\"showPanel()\" \n (click)=\"closePanel()\">\n</div>\n<!-- Management panel -->\n<div class=\"file-panel\" [class.visible]=\"showPanel()\">\n <div class=\"panel-header\">\n <h3>File Management</h3>\n <button (click)=\"closePanel()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"panel-content\">\n <!-- File upload area -->\n <div class=\"upload-area\" \n [class.drag-over]=\"isDragOver()\"\n [class.uploading]=\"isUploading()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFileDialog()\">\n \n <div class=\"upload-content\">\n <svg class=\"upload-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"7,10 12,15 17,10\"></polyline>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n </svg>\n <p>Drop files here or click to browse</p>\n <small>Max {{ maxFiles() }} files, {{ formatFileSize(maxFileSize()) }} each</small>\n </div>\n\n <!-- Hidden file inputs -->\n <input #fileInput\n type=\"file\"\n [multiple]=\"multiple()\"\n [accept]=\"accept()\"\n (change)=\"onFileSelect($event)\"\n style=\"display: none;\">\n\n <input #cameraInput\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n (change)=\"onCameraCapture($event)\"\n style=\"display: none;\">\n </div>\n\n <!-- Action buttons -->\n <div class=\"action-buttons\">\n <button type=\"button\" class=\"action-btn upload-btn\" (click)=\"openFileDialog()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"17,8 12,3 7,8\"></polyline>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n </svg>\n Upload Files\n </button>\n\n <button type=\"button\" class=\"action-btn camera-btn\" (click)=\"openCameraDialog()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"></path>\n <circle cx=\"12\" cy=\"13\" r=\"4\"></circle>\n </svg>\n Take Picture\n </button>\n\n <button type=\"button\" class=\"action-btn close-btn\" (click)=\"closePanel()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n Close\n </button>\n </div>\n\n <!-- File list -->\n <div class=\"file-list\" *ngIf=\"fileCount() > 0\">\n <div class=\"file-list-header\">\n <span>Files ({{ fileCount() }})</span>\n <span class=\"total-size\">{{ getTotalSizeFormatted() }}</span>\n <button type=\"button\" class=\"clear-all-btn\" (click)=\"clearAllFiles()\">\n Clear All\n </button>\n </div>\n\n <div class=\"file-items\">\n <div class=\"file-item\" \n *ngFor=\"let file of files()\" \n [class.has-error]=\"file.error\"\n [class.uploading]=\"file.isUploading\">\n \n <!-- File preview/icon -->\n <div class=\"file-preview\">\n <img *ngIf=\"file.url && isImage(file.type)\" \n [src]=\"file.url\" \n [alt]=\"file.name\"\n class=\"preview-image\">\n <span *ngIf=\"!file.url || !isImage(file.type)\" \n class=\"file-type-icon\">\n {{ getFileIcon(file.type) }}\n </span>\n </div>\n\n <!-- File info -->\n <div class=\"file-info\">\n <div class=\"file-name\" [title]=\"file.name\">{{ file.name }}</div>\n <div class=\"file-details\">\n <span class=\"file-size\">{{ formatFileSize(file.size) }}</span>\n <span class=\"file-type\">{{ file.type || 'Unknown' }}</span>\n </div>\n <div class=\"file-error\" *ngIf=\"file.error\">{{ file.error }}</div>\n \n <!-- Upload progress -->\n <div class=\"upload-progress\" *ngIf=\"file.isUploading && file.uploadProgress !== undefined\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width.%]=\"file.uploadProgress\"></div>\n </div>\n <span class=\"progress-text\">{{ file.uploadProgress }}%</span>\n </div>\n </div>\n\n <!-- Remove button -->\n <button type=\"button\" \n class=\"remove-file-btn\" \n (click)=\"removeFile(file.id)\"\n [disabled]=\"file.isUploading\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"3,6 5,6 21,6\"></polyline>\n <path d=\"M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6\"></path>\n <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line>\n <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line>\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"empty-state\" *ngIf=\"fileCount() === 0\">\n <svg class=\"empty-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n <polyline points=\"14,2 14,8 20,8\"></polyline>\n </svg>\n <p>No files uploaded yet</p>\n <small>Click upload or drag files to get started</small>\n </div>\n </div>\n</div>\n\n<!-- Error messages -->\n<div class=\"error-messages\" *ngIf=\"hasFormErrors()\">\n <div class=\"error-message\" *ngFor=\"let error of getErrorMessage()\">{{ error }}</div>\n</div>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"] }]
|
|
1491
|
-
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { fileInput: [{
|
|
1492
|
-
type: ViewChild,
|
|
1493
|
-
args: ['fileInput']
|
|
1494
|
-
}], cameraInput: [{
|
|
1495
|
-
type: ViewChild,
|
|
1496
|
-
args: ['cameraInput']
|
|
1497
|
-
}] } });
|
|
1498
|
-
|
|
1499
|
-
class
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
}
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
this.type = type;
|
|
1529
|
-
}
|
|
1530
|
-
}
|
|
1531
|
-
class BaseSelectFieldDto {
|
|
1532
|
-
label;
|
|
1533
|
-
options;
|
|
1534
|
-
displayWith;
|
|
1535
|
-
constructor(label, options, displayWith) {
|
|
1536
|
-
this.label = label;
|
|
1537
|
-
this.options = options;
|
|
1538
|
-
this.displayWith = displayWith;
|
|
1539
|
-
}
|
|
1540
|
-
}
|
|
1541
|
-
class SelectFieldDto extends BaseSelectFieldDto {
|
|
1542
|
-
formControl;
|
|
1543
|
-
constructor(label, formControl, options, displayWith) {
|
|
1544
|
-
super(label, options, displayWith);
|
|
1545
|
-
this.formControl = formControl;
|
|
1546
|
-
}
|
|
1547
|
-
}
|
|
1548
|
-
class MultiSelectFieldDto extends BaseSelectFieldDto {
|
|
1549
|
-
formControl;
|
|
1550
|
-
constructor(label, formControl, options, displayWith) {
|
|
1551
|
-
super(label, options, displayWith);
|
|
1552
|
-
this.formControl = formControl;
|
|
1553
|
-
}
|
|
1554
|
-
}
|
|
1555
|
-
class RadioFieldDto extends BaseSelectFieldDto {
|
|
1556
|
-
formControl;
|
|
1557
|
-
constructor(label, formControl, options, displayWith) {
|
|
1558
|
-
super(label, options, displayWith);
|
|
1559
|
-
this.formControl = formControl;
|
|
1560
|
-
}
|
|
1561
|
-
}
|
|
1562
|
-
class FileFieldDto {
|
|
1563
|
-
label;
|
|
1564
|
-
formControl;
|
|
1565
|
-
multiple;
|
|
1566
|
-
accept;
|
|
1567
|
-
maxFileSize;
|
|
1568
|
-
maxFiles;
|
|
1569
|
-
showPreview;
|
|
1570
|
-
constructor(label, formControl, multiple = true, accept = '*/*', maxFileSize = 10 * 1024 * 1024, // 10MB
|
|
1571
|
-
maxFiles = 10, showPreview = true) {
|
|
1572
|
-
this.label = label;
|
|
1573
|
-
this.formControl = formControl;
|
|
1574
|
-
this.multiple = multiple;
|
|
1575
|
-
this.accept = accept;
|
|
1576
|
-
this.maxFileSize = maxFileSize;
|
|
1577
|
-
this.maxFiles = maxFiles;
|
|
1578
|
-
this.showPreview = showPreview;
|
|
1579
|
-
}
|
|
1580
|
-
}
|
|
1581
|
-
|
|
1582
|
-
class LiteDateTime {
|
|
1583
|
-
elementRef;
|
|
1584
|
-
inEdit = input(true, ...(ngDevMode ? [{ debugName: "inEdit" }] : []));
|
|
1585
|
-
control = input({
|
|
1586
|
-
label: '',
|
|
1587
|
-
formControl: new FormControl('', { nonNullable: true }),
|
|
1588
|
-
}, ...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
1589
|
-
format = input('dd/MM/yyyy HH:mm', ...(ngDevMode ? [{ debugName: "format" }] : []));
|
|
1590
|
-
// Calendar state
|
|
1591
|
-
currentMonth = signal(new Date(), ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
|
|
1592
|
-
showCalendar = signal(false, ...(ngDevMode ? [{ debugName: "showCalendar" }] : []));
|
|
1593
|
-
calendarPosition = signal('bottom', ...(ngDevMode ? [{ debugName: "calendarPosition" }] : []));
|
|
1594
|
-
formattedValue = signal('', ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
|
|
1595
|
-
hourSet = new Array(24).fill(0).map((_, i) => i);
|
|
1596
|
-
minSet = new Array(12).fill(0).map((_, i) => i * 5);
|
|
1597
|
-
selectedHour = new Date().getHours();
|
|
1598
|
-
selectedMinute = 0;
|
|
1599
|
-
selectedDateTime = null;
|
|
1600
|
-
// Signal to track form control value changes for reactivity
|
|
1601
|
-
// private formValueChangeSignal = signal<any>(null);
|
|
1602
|
-
// Computed calendar days - only recalculates when dependencies change
|
|
1603
|
-
calendarDays = computed(() => {
|
|
1604
|
-
// This makes the computed reactive to form value changes
|
|
1605
|
-
// this.formValueChangeSignal();
|
|
1606
|
-
return this.getMonthDays(this.currentMonth());
|
|
1607
|
-
}, ...(ngDevMode ? [{ debugName: "calendarDays" }] : []));
|
|
1608
|
-
getMonthDays(monthDate) {
|
|
1609
|
-
const year = monthDate.getFullYear();
|
|
1610
|
-
const month = monthDate.getMonth();
|
|
1611
|
-
// First day of the month
|
|
1612
|
-
const firstDay = new Date(year, month, 1);
|
|
1613
|
-
const lastDay = new Date(year, month + 1, 0);
|
|
1614
|
-
const days = [];
|
|
1615
|
-
const today = new Date();
|
|
1616
|
-
const value = this.control().formControl.value;
|
|
1617
|
-
// Single mode - value should be string
|
|
1618
|
-
if (value) {
|
|
1619
|
-
const date = new Date(value);
|
|
1620
|
-
if (!isNaN(date.getTime())) {
|
|
1621
|
-
this.selectedDateTime = {
|
|
1622
|
-
date,
|
|
1623
|
-
day: date.getDate(),
|
|
1624
|
-
isOtherMonth: false,
|
|
1625
|
-
isToday: this.isSameDay(date, today),
|
|
1626
|
-
isSelected: true,
|
|
1627
|
-
};
|
|
1628
|
-
}
|
|
1629
|
-
}
|
|
1630
|
-
// Only add days from the current month
|
|
1631
|
-
const previousMonthDate = new Date(firstDay);
|
|
1632
|
-
while (previousMonthDate.getDay() !== 0) {
|
|
1633
|
-
previousMonthDate.setDate(previousMonthDate.getDate() - 1);
|
|
1634
|
-
days.unshift({
|
|
1635
|
-
date: new Date(previousMonthDate),
|
|
1636
|
-
day: previousMonthDate.getDate(),
|
|
1637
|
-
isOtherMonth: true,
|
|
1638
|
-
isToday: this.isSameDay(previousMonthDate, today),
|
|
1639
|
-
isSelected: this.isSameDay(previousMonthDate, this.selectedDateTime ? this.selectedDateTime.date : null),
|
|
1640
|
-
});
|
|
1641
|
-
}
|
|
1642
|
-
const currentDate = new Date(firstDay);
|
|
1643
|
-
while (currentDate <= lastDay) {
|
|
1644
|
-
const isToday = this.isSameDay(currentDate, today);
|
|
1645
|
-
const isSelected = this.isSameDay(currentDate, this.selectedDateTime ? this.selectedDateTime.date : null);
|
|
1646
|
-
days.push({
|
|
1647
|
-
date: new Date(currentDate),
|
|
1648
|
-
day: currentDate.getDate(),
|
|
1649
|
-
isOtherMonth: false,
|
|
1650
|
-
isToday,
|
|
1651
|
-
isSelected,
|
|
1652
|
-
});
|
|
1653
|
-
currentDate.setDate(currentDate.getDate() + 1);
|
|
1654
|
-
}
|
|
1655
|
-
const nextMonthDate = new Date(lastDay);
|
|
1656
|
-
while (nextMonthDate.getDay() < 6) {
|
|
1657
|
-
nextMonthDate.setDate(nextMonthDate.getDate() + 1);
|
|
1658
|
-
days.push({
|
|
1659
|
-
date: new Date(nextMonthDate),
|
|
1660
|
-
day: nextMonthDate.getDate(),
|
|
1661
|
-
isOtherMonth: true,
|
|
1662
|
-
isToday: this.isSameDay(nextMonthDate, today),
|
|
1663
|
-
isSelected: this.isSameDay(nextMonthDate, this.selectedDateTime ? this.selectedDateTime.date : null),
|
|
1664
|
-
});
|
|
1665
|
-
}
|
|
1666
|
-
return days;
|
|
1667
|
-
}
|
|
1668
|
-
FormUtils = FormUtils;
|
|
1669
|
-
constructor(elementRef) {
|
|
1670
|
-
this.elementRef = elementRef;
|
|
1671
|
-
effect(() => {
|
|
1672
|
-
const control = this.control();
|
|
1673
|
-
// console.log('LiteDateTime with control:', control);
|
|
1674
|
-
// Subscribe to form control value changes to trigger reactivity
|
|
1675
|
-
if (control && control.formControl) {
|
|
1676
|
-
control.formControl.valueChanges.subscribe(value => {
|
|
1677
|
-
if (value) {
|
|
1678
|
-
const date = new Date(value);
|
|
1679
|
-
// console.log('Form value changed:', value, date, isNaN(date.getTime()));
|
|
1680
|
-
if (!isNaN(date.getTime())) {
|
|
1681
|
-
console.log('Formatted Date:', this.formatDate(date, this.format()));
|
|
1682
|
-
this.formattedValue.set(this.formatDate(date, this.format()));
|
|
1683
|
-
}
|
|
1684
|
-
else {
|
|
1685
|
-
this.formattedValue.set(value);
|
|
1686
|
-
}
|
|
1687
|
-
}
|
|
1688
|
-
});
|
|
1689
|
-
}
|
|
1690
|
-
});
|
|
1691
|
-
}
|
|
1692
|
-
onDocumentClick(event) {
|
|
1693
|
-
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
1694
|
-
this.showCalendar.set(false);
|
|
1695
|
-
}
|
|
1696
|
-
}
|
|
1697
|
-
isRequired() {
|
|
1698
|
-
return this.FormUtils.isRequired(this.control().formControl);
|
|
1699
|
-
}
|
|
1700
|
-
hasErrors() {
|
|
1701
|
-
return FormUtils.hasErrors(this.control().formControl);
|
|
1702
|
-
}
|
|
1703
|
-
getErrorMessage() {
|
|
1704
|
-
return FormUtils.getErrorMessages(this.control().formControl, this.control().label);
|
|
1705
|
-
}
|
|
1706
|
-
onDateChange(event) {
|
|
1707
|
-
const target = event.target;
|
|
1708
|
-
const inputValue = target.value;
|
|
1709
|
-
if (!inputValue) {
|
|
1710
|
-
this.control().formControl.setValue('');
|
|
1711
|
-
// this.formValueChangeSignal.set(Date.now());
|
|
1712
|
-
this.control().formControl.markAsDirty();
|
|
1713
|
-
this.control().formControl.markAsTouched();
|
|
1714
|
-
return;
|
|
1715
|
-
}
|
|
1716
|
-
// Single mode - try to parse the formatted date input
|
|
1717
|
-
const parsedDate = this.parseFormattedDate(inputValue, this.format());
|
|
1718
|
-
let newValue;
|
|
1719
|
-
if (parsedDate) {
|
|
1720
|
-
// Store as ISO date string for consistency
|
|
1721
|
-
newValue = this.toLocalISOString(parsedDate);
|
|
1722
|
-
}
|
|
1723
|
-
else {
|
|
1724
|
-
// If parsing fails, store the raw input value
|
|
1725
|
-
newValue = inputValue;
|
|
1726
|
-
}
|
|
1727
|
-
this.control().formControl.setValue(newValue);
|
|
1728
|
-
// this.formValueChangeSignal.set(Date.now());
|
|
1729
|
-
this.control().formControl.markAsDirty();
|
|
1730
|
-
this.control().formControl.markAsTouched();
|
|
1731
|
-
}
|
|
1732
|
-
onSelectHour(hour) {
|
|
1733
|
-
this.selectedHour = hour;
|
|
1734
|
-
this.setDateTimeSelected(this.selectedDateTime ? this.selectedDateTime.date : new Date());
|
|
1735
|
-
}
|
|
1736
|
-
onSelectMinute(minute) {
|
|
1737
|
-
this.selectedMinute = minute;
|
|
1738
|
-
this.setDateTimeSelected(this.selectedDateTime ? this.selectedDateTime.date : new Date());
|
|
1830
|
+
type: Component,
|
|
1831
|
+
args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule], selector: 'lite-file', template: "<div class=\"lite-file\" [class.in-edit]=\"inEdit()\">\n <label class=\"label\" [class.required]=\"isRequired()\">{{ control().label }}</label>\n <button [class.has-files]=\"fileCount() > 0\" [class.has-errors]=\"hasErrors()\" (click)=\"togglePanel()\">\n <img [src]=\"svgToBase64DataUrl(file_icon)\" alt=\"file icon\">\n <!-- Badge -->\n <span class=\"file-badge\">\n {{ fileCount() }}\n </span>\n </button>\n\n</div>\n<!-- Panel overlay -->\n<div class=\"panel-overlay\" \n [class.visible]=\"showPanel()\" \n (click)=\"closePanel()\">\n</div>\n<!-- Management panel -->\n<div class=\"file-panel\" [class.visible]=\"showPanel()\">\n <div class=\"panel-header\">\n <h3>File Management</h3>\n <button (click)=\"closePanel()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"panel-content\">\n <!-- File upload area -->\n <div class=\"upload-area\" \n [class.drag-over]=\"isDragOver()\"\n [class.uploading]=\"isUploading()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n (click)=\"openFileDialog()\">\n \n <div class=\"upload-content\">\n <svg class=\"upload-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"7,10 12,15 17,10\"></polyline>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>\n </svg>\n <p>Drop files here or click to browse</p>\n <small>Max {{ maxFiles() }} files, {{ formatFileSize(maxFileSize()) }} each</small>\n </div>\n\n <!-- Hidden file inputs -->\n <input #fileInput\n type=\"file\"\n [multiple]=\"multiple()\"\n [accept]=\"accept()\"\n (change)=\"onFileSelect($event)\"\n style=\"display: none;\">\n\n <input #cameraInput\n type=\"file\"\n accept=\"image/*\"\n capture=\"environment\"\n (change)=\"onCameraCapture($event)\"\n style=\"display: none;\">\n </div>\n\n <!-- Action buttons -->\n <div class=\"action-buttons\">\n <button type=\"button\" class=\"action-btn upload-btn\" (click)=\"openFileDialog()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n <polyline points=\"17,8 12,3 7,8\"></polyline>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n </svg>\n Upload Files\n </button>\n\n <button type=\"button\" class=\"action-btn camera-btn\" (click)=\"openCameraDialog()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"></path>\n <circle cx=\"12\" cy=\"13\" r=\"4\"></circle>\n </svg>\n Take Picture\n </button>\n\n <button type=\"button\" class=\"action-btn close-btn\" (click)=\"closePanel()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n Close\n </button>\n </div>\n\n <!-- File list -->\n <div class=\"file-list\" *ngIf=\"fileCount() > 0\">\n <div class=\"file-list-header\">\n <span>Files ({{ fileCount() }})</span>\n <span class=\"total-size\">{{ getTotalSizeFormatted() }}</span>\n <button type=\"button\" class=\"clear-all-btn\" (click)=\"clearAllFiles()\">\n Clear All\n </button>\n </div>\n\n <div class=\"file-items\">\n <div class=\"file-item\" \n *ngFor=\"let file of files()\" \n [class.has-error]=\"file.error\"\n [class.uploading]=\"file.isUploading\">\n \n <!-- File preview/icon -->\n <div class=\"file-preview\">\n <img *ngIf=\"file.url && isImage(file.type)\" \n [src]=\"file.url\" \n [alt]=\"file.name\"\n class=\"preview-image\">\n <span *ngIf=\"!file.url || !isImage(file.type)\" \n class=\"file-type-icon\">\n {{ getFileIcon(file.type) }}\n </span>\n </div>\n\n <!-- File info -->\n <div class=\"file-info\">\n <div class=\"file-name\" [title]=\"file.name\">{{ file.name }}</div>\n <div class=\"file-details\">\n <span class=\"file-size\">{{ formatFileSize(file.size) }}</span>\n <span class=\"file-type\">{{ file.type || 'Unknown' }}</span>\n </div>\n <div class=\"file-error\" *ngIf=\"file.error\">{{ file.error }}</div>\n \n <!-- Upload progress -->\n <div class=\"upload-progress\" *ngIf=\"file.isUploading && file.uploadProgress !== undefined\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width.%]=\"file.uploadProgress\"></div>\n </div>\n <span class=\"progress-text\">{{ file.uploadProgress }}%</span>\n </div>\n </div>\n\n <!-- Remove button -->\n <button type=\"button\" \n class=\"remove-file-btn\" \n (click)=\"removeFile(file.id)\"\n [disabled]=\"file.isUploading\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"3,6 5,6 21,6\"></polyline>\n <path d=\"M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6\"></path>\n <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line>\n <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line>\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"empty-state\" *ngIf=\"fileCount() === 0\">\n <svg class=\"empty-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n <polyline points=\"14,2 14,8 20,8\"></polyline>\n </svg>\n <p>No files uploaded yet</p>\n <small>Click upload or drag files to get started</small>\n </div>\n </div>\n</div>\n\n<!-- Error messages -->\n<div class=\"error-messages\" *ngIf=\"hasFormErrors()\">\n <div class=\"error-message\" *ngFor=\"let error of getErrorMessage()\">{{ error }}</div>\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
1832
|
+
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { fileInput: [{
|
|
1833
|
+
type: ViewChild,
|
|
1834
|
+
args: ['fileInput']
|
|
1835
|
+
}], cameraInput: [{
|
|
1836
|
+
type: ViewChild,
|
|
1837
|
+
args: ['cameraInput']
|
|
1838
|
+
}] } });
|
|
1839
|
+
|
|
1840
|
+
class LitePaginator {
|
|
1841
|
+
paginator = input.required(...(ngDevMode ? [{ debugName: "paginator" }] : []));
|
|
1842
|
+
pageChange = output();
|
|
1843
|
+
itemsPerPageChange = output();
|
|
1844
|
+
// Computed properties that react to input changes
|
|
1845
|
+
totalPages = computed(() => Math.ceil(this.paginator().totalItems / this.paginator().itemsPerPage), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
|
|
1846
|
+
hasPrevious = computed(() => this.paginator().currentPage > 1, ...(ngDevMode ? [{ debugName: "hasPrevious" }] : []));
|
|
1847
|
+
hasNext = computed(() => this.paginator().currentPage < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNext" }] : []));
|
|
1848
|
+
// Start and end item numbers for display
|
|
1849
|
+
startItem = computed(() => {
|
|
1850
|
+
const page = this.paginator().currentPage;
|
|
1851
|
+
const perPage = this.paginator().itemsPerPage;
|
|
1852
|
+
return Math.min((page - 1) * perPage + 1, this.paginator().totalItems);
|
|
1853
|
+
}, ...(ngDevMode ? [{ debugName: "startItem" }] : []));
|
|
1854
|
+
endItem = computed(() => {
|
|
1855
|
+
const page = this.paginator().currentPage;
|
|
1856
|
+
const perPage = this.paginator().itemsPerPage;
|
|
1857
|
+
return Math.min(page * perPage, this.paginator().totalItems);
|
|
1858
|
+
}, ...(ngDevMode ? [{ debugName: "endItem" }] : []));
|
|
1859
|
+
constructor() {
|
|
1860
|
+
// Effect to log changes for debugging
|
|
1861
|
+
effect(() => {
|
|
1862
|
+
console.log('Paginator updated:', {
|
|
1863
|
+
currentPage: this.paginator().currentPage,
|
|
1864
|
+
itemsPerPage: this.paginator().itemsPerPage,
|
|
1865
|
+
totalItems: this.paginator().totalItems,
|
|
1866
|
+
totalPages: this.totalPages()
|
|
1867
|
+
});
|
|
1868
|
+
});
|
|
1739
1869
|
}
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
isToday: date.getDate() === new Date().getDate(),
|
|
1746
|
-
isSelected: true,
|
|
1747
|
-
};
|
|
1748
|
-
const dateString = this.toLocalISOString(this.selectedDateTime.date);
|
|
1749
|
-
this.control().formControl.setValue(dateString);
|
|
1750
|
-
const calDate = this.calendarDays().find(d => this.isSameDay(d.date, date));
|
|
1751
|
-
if (calDate) {
|
|
1752
|
-
calDate.isSelected = true;
|
|
1870
|
+
// Methods
|
|
1871
|
+
goToPrevious() {
|
|
1872
|
+
if (this.hasPrevious()) {
|
|
1873
|
+
const newPage = this.paginator().currentPage - 1;
|
|
1874
|
+
this.pageChange.emit(newPage);
|
|
1753
1875
|
}
|
|
1754
1876
|
}
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
.replace('dd', '(\\d{1,2})')
|
|
1760
|
-
.replace('MM', '(\\d{1,2})')
|
|
1761
|
-
.replace('yyyy', '(\\d{4})');
|
|
1762
|
-
const regex = new RegExp(`^${pattern}$`);
|
|
1763
|
-
const match = dateString.match(regex);
|
|
1764
|
-
if (!match)
|
|
1765
|
-
return null;
|
|
1766
|
-
// Extract parts based on format
|
|
1767
|
-
let day, month, year;
|
|
1768
|
-
if (format === 'dd/MM/yyyy') {
|
|
1769
|
-
day = parseInt(match[1], 10);
|
|
1770
|
-
month = parseInt(match[2], 10) - 1; // Month is 0-indexed
|
|
1771
|
-
year = parseInt(match[3], 10);
|
|
1772
|
-
}
|
|
1773
|
-
else if (format === 'MM/dd/yyyy') {
|
|
1774
|
-
month = parseInt(match[1], 10) - 1; // Month is 0-indexed
|
|
1775
|
-
day = parseInt(match[2], 10);
|
|
1776
|
-
year = parseInt(match[3], 10);
|
|
1777
|
-
}
|
|
1778
|
-
else if (format === 'yyyy-MM-dd') {
|
|
1779
|
-
year = parseInt(match[1], 10);
|
|
1780
|
-
month = parseInt(match[2], 10) - 1; // Month is 0-indexed
|
|
1781
|
-
day = parseInt(match[3], 10);
|
|
1782
|
-
}
|
|
1783
|
-
else {
|
|
1784
|
-
// Default to dd/MM/yyyy
|
|
1785
|
-
day = parseInt(match[1], 10);
|
|
1786
|
-
month = parseInt(match[2], 10) - 1;
|
|
1787
|
-
year = parseInt(match[3], 10);
|
|
1788
|
-
}
|
|
1789
|
-
const date = new Date(year, month, day);
|
|
1790
|
-
// Validate the date
|
|
1791
|
-
if (date.getFullYear() === year &&
|
|
1792
|
-
date.getMonth() === month &&
|
|
1793
|
-
date.getDate() === day) {
|
|
1794
|
-
return date;
|
|
1795
|
-
}
|
|
1796
|
-
return null;
|
|
1797
|
-
}
|
|
1798
|
-
catch {
|
|
1799
|
-
return null;
|
|
1877
|
+
goToNext() {
|
|
1878
|
+
if (this.hasNext()) {
|
|
1879
|
+
const newPage = this.paginator().currentPage + 1;
|
|
1880
|
+
this.pageChange.emit(newPage);
|
|
1800
1881
|
}
|
|
1801
1882
|
}
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
return 'Not selected';
|
|
1806
|
-
// Single mode - value is string
|
|
1807
|
-
const singleValue = value;
|
|
1808
|
-
if (singleValue) {
|
|
1809
|
-
const date = new Date(singleValue);
|
|
1810
|
-
if (!isNaN(date.getTime())) {
|
|
1811
|
-
return this.formatDate(date, this.format());
|
|
1812
|
-
}
|
|
1813
|
-
return singleValue;
|
|
1883
|
+
goToPage(page) {
|
|
1884
|
+
if (page >= 1 && page <= this.totalPages()) {
|
|
1885
|
+
this.pageChange.emit(page);
|
|
1814
1886
|
}
|
|
1815
|
-
return 'Not selected';
|
|
1816
1887
|
}
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
1820
|
-
const year = date.getFullYear().toString();
|
|
1821
|
-
return format
|
|
1822
|
-
.replace('dd', day)
|
|
1823
|
-
.replace('MM', month)
|
|
1824
|
-
.replace('yyyy', year)
|
|
1825
|
-
.replace('HH', (this.selectedHour < 10 ? '0' : '') + this.selectedHour)
|
|
1826
|
-
.replace('mm', (this.selectedMinute < 10 ? '0' : '') + this.selectedMinute);
|
|
1888
|
+
changeItemsPerPage(itemsPerPage) {
|
|
1889
|
+
this.itemsPerPageChange.emit(itemsPerPage);
|
|
1827
1890
|
}
|
|
1828
|
-
//
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1891
|
+
// Helper methods for template
|
|
1892
|
+
getPageNumbers() {
|
|
1893
|
+
const currentPage = this.paginator().currentPage;
|
|
1894
|
+
const totalPages = this.totalPages();
|
|
1895
|
+
const pages = [];
|
|
1896
|
+
// Show max 5 page numbers, centered around current page
|
|
1897
|
+
const start = Math.max(1, Math.min(currentPage - 2, totalPages - 4));
|
|
1898
|
+
const end = Math.min(totalPages, start + 4);
|
|
1899
|
+
for (let i = start; i <= end; i++) {
|
|
1900
|
+
pages.push(i);
|
|
1833
1901
|
}
|
|
1834
|
-
|
|
1902
|
+
return pages;
|
|
1835
1903
|
}
|
|
1836
|
-
|
|
1837
|
-
this.showCalendar.set(false);
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
if (selectedValue) {
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1904
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LitePaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LitePaginator, isStandalone: true, selector: "lite-paginator", inputs: { paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<div class=\"lite-paginator\">\n <!-- Previous Button -->\n <button\n class=\"paginator-btn previous-btn\"\n [disabled]=\"!hasPrevious()\"\n (click)=\"goToPrevious()\"\n [title]=\"'Previous page'\"\n type=\"button\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <!-- Page Numbers -->\n <div class=\"page-numbers\">\n @for (page of getPageNumbers(); track page) {\n <button\n class=\"page-number\"\n [class.active]=\"page === paginator().currentPage\"\n (click)=\"goToPage(page)\"\n type=\"button\">\n {{ page }}\n </button>\n }\n </div>\n\n <!-- Next Button -->\n <button\n class=\"paginator-btn next-btn\"\n [disabled]=\"!hasNext()\"\n (click)=\"goToNext()\"\n [title]=\"'Next page'\"\n type=\"button\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <!-- Items per page selector -->\n <div class=\"items-per-page\">\n <select\n [value]=\"paginator().itemsPerPage\"\n (change)=\"changeItemsPerPage(+$any($event.target).value)\"\n class=\"items-select\">\n <option value=\"5\">5</option>\n <option value=\"10\">10</option>\n <option value=\"25\">25</option>\n <option value=\"50\">50</option>\n <option value=\"100\">100</option>\n </select>\n <span class=\"items-label\">per page</span>\n </div>\n\n <!-- Total items info -->\n <div class=\"total-info\">\n <span class=\"total-text\">\n {{ startItem() }}-{{ endItem() }} of {{ paginator().totalItems }}\n </span>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1906
|
+
}
|
|
1907
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LitePaginator, decorators: [{
|
|
1908
|
+
type: Component,
|
|
1909
|
+
args: [{ selector: 'lite-paginator', standalone: true, imports: [CommonModule], template: "<div class=\"lite-paginator\">\n <!-- Previous Button -->\n <button\n class=\"paginator-btn previous-btn\"\n [disabled]=\"!hasPrevious()\"\n (click)=\"goToPrevious()\"\n [title]=\"'Previous page'\"\n type=\"button\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <!-- Page Numbers -->\n <div class=\"page-numbers\">\n @for (page of getPageNumbers(); track page) {\n <button\n class=\"page-number\"\n [class.active]=\"page === paginator().currentPage\"\n (click)=\"goToPage(page)\"\n type=\"button\">\n {{ page }}\n </button>\n }\n </div>\n\n <!-- Next Button -->\n <button\n class=\"paginator-btn next-btn\"\n [disabled]=\"!hasNext()\"\n (click)=\"goToNext()\"\n [title]=\"'Next page'\"\n type=\"button\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <!-- Items per page selector -->\n <div class=\"items-per-page\">\n <select\n [value]=\"paginator().itemsPerPage\"\n (change)=\"changeItemsPerPage(+$any($event.target).value)\"\n class=\"items-select\">\n <option value=\"5\">5</option>\n <option value=\"10\">10</option>\n <option value=\"25\">25</option>\n <option value=\"50\">50</option>\n <option value=\"100\">100</option>\n </select>\n <span class=\"items-label\">per page</span>\n </div>\n\n <!-- Total items info -->\n <div class=\"total-info\">\n <span class=\"total-text\">\n {{ startItem() }}-{{ endItem() }} of {{ paginator().totalItems }}\n </span>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
1910
|
+
}], ctorParameters: () => [] });
|
|
1911
|
+
|
|
1912
|
+
class LiteTable {
|
|
1913
|
+
table = input.required(...(ngDevMode ? [{ debugName: "table" }] : []));
|
|
1914
|
+
pageChange = output();
|
|
1915
|
+
itemsPerPageChange = output();
|
|
1916
|
+
// Computed properties for pagination
|
|
1917
|
+
paginatedData = computed(() => {
|
|
1918
|
+
const tableData = this.table();
|
|
1919
|
+
if (!tableData.showPaginator) {
|
|
1920
|
+
return tableData.data;
|
|
1921
|
+
}
|
|
1922
|
+
const paginator = tableData.paginatorConfig;
|
|
1923
|
+
const startIndex = (paginator.currentPage - 1) * paginator.itemsPerPage;
|
|
1924
|
+
const endIndex = startIndex + paginator.itemsPerPage;
|
|
1925
|
+
return tableData.data.slice(startIndex, endIndex);
|
|
1926
|
+
}, ...(ngDevMode ? [{ debugName: "paginatedData" }] : []));
|
|
1927
|
+
// Helper method to get cell value
|
|
1928
|
+
getCellValue(row, column) {
|
|
1929
|
+
if (column.cellTemplate) {
|
|
1930
|
+
return column.cellTemplate(this.getValue(row, column.key), row);
|
|
1931
|
+
}
|
|
1932
|
+
const value = this.getValue(row, column.key);
|
|
1933
|
+
// Special handling for name field from Random User API
|
|
1934
|
+
if (column.key === 'name' && value && typeof value === 'object') {
|
|
1935
|
+
const nameObj = value;
|
|
1936
|
+
return `${nameObj.first || ''} ${nameObj.last || ''}`.trim();
|
|
1937
|
+
}
|
|
1938
|
+
return value?.toString() || '';
|
|
1939
|
+
}
|
|
1940
|
+
// Helper method to extract value from row (supports nested properties)
|
|
1941
|
+
getValue(row, key) {
|
|
1942
|
+
if (!row || typeof row !== 'object') {
|
|
1943
|
+
return row;
|
|
1944
|
+
}
|
|
1945
|
+
// Support dot notation for nested properties
|
|
1946
|
+
const keys = key.split('.');
|
|
1947
|
+
let value = row;
|
|
1948
|
+
for (const k of keys) {
|
|
1949
|
+
if (value && typeof value === 'object' && k in value) {
|
|
1950
|
+
value = value[k];
|
|
1847
1951
|
}
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
const selectedMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
|
|
1851
|
-
this.currentMonth.set(selectedMonth);
|
|
1952
|
+
else {
|
|
1953
|
+
return undefined;
|
|
1852
1954
|
}
|
|
1853
1955
|
}
|
|
1956
|
+
return value;
|
|
1854
1957
|
}
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
const calendarHeight = 300; // Approximate height of calendar panel
|
|
1859
|
-
const spaceBelow = window.innerHeight - rect.bottom;
|
|
1860
|
-
const spaceAbove = rect.top;
|
|
1861
|
-
// If not enough space below and more space above, position on top
|
|
1862
|
-
if (spaceBelow < calendarHeight && spaceAbove > spaceBelow) {
|
|
1863
|
-
this.calendarPosition.set('top');
|
|
1864
|
-
}
|
|
1865
|
-
else {
|
|
1866
|
-
this.calendarPosition.set('bottom');
|
|
1867
|
-
}
|
|
1958
|
+
// Event handlers for paginator
|
|
1959
|
+
onPageChange(page) {
|
|
1960
|
+
this.pageChange.emit(page);
|
|
1868
1961
|
}
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
|
|
1962
|
+
onItemsPerPageChange(itemsPerPage) {
|
|
1963
|
+
this.itemsPerPageChange.emit(itemsPerPage);
|
|
1872
1964
|
}
|
|
1873
|
-
|
|
1874
|
-
const current = this.currentMonth();
|
|
1875
|
-
|
|
1876
|
-
|
|
1965
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1966
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteTable, isStandalone: true, selector: "lite-table", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<div class=\"lite-table\">\n <!-- Table Header -->\n <div class=\"table-header\">\n <div class=\"header-row\">\n @for (column of table().columns; track column.key) {\n <div\n class=\"header-cell\"\n [style.flex]=\"column.flex || '1'\"\n [class.sortable]=\"column.sortable\">\n {{ column.label }}\n </div>\n }\n </div>\n </div>\n\n <!-- Table Body -->\n <div class=\"table-body\">\n @for (row of paginatedData(); track $index) {\n <div class=\"data-row\">\n @for (column of table().columns; track column.key) {\n <div class=\"data-cell\" [style.flex]=\"column.flex || '1'\">\n <span [innerHTML]=\"getCellValue(row, column)\"></span>\n </div>\n }\n </div>\n }\n @if (paginatedData().length === 0) {\n <div class=\"empty-row\">\n <div\n class=\"empty-cell\"\n [style.flex]=\"'1'\">\n No data available\n </div>\n </div>\n }\n </div>\n\n <!-- Paginator -->\n @if (table().showPaginator) {\n <div class=\"table-paginator\">\n <lite-paginator\n [paginator]=\"table().paginatorConfig\"\n (pageChange)=\"onPageChange($event)\"\n (itemsPerPageChange)=\"onItemsPerPageChange($event)\">\n </lite-paginator>\n </div>\n }\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LitePaginator, selector: "lite-paginator", inputs: ["paginator"], outputs: ["pageChange", "itemsPerPageChange"] }] });
|
|
1967
|
+
}
|
|
1968
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteTable, decorators: [{
|
|
1969
|
+
type: Component,
|
|
1970
|
+
args: [{ selector: 'lite-table', standalone: true, imports: [CommonModule, LitePaginator], template: "<div class=\"lite-table\">\n <!-- Table Header -->\n <div class=\"table-header\">\n <div class=\"header-row\">\n @for (column of table().columns; track column.key) {\n <div\n class=\"header-cell\"\n [style.flex]=\"column.flex || '1'\"\n [class.sortable]=\"column.sortable\">\n {{ column.label }}\n </div>\n }\n </div>\n </div>\n\n <!-- Table Body -->\n <div class=\"table-body\">\n @for (row of paginatedData(); track $index) {\n <div class=\"data-row\">\n @for (column of table().columns; track column.key) {\n <div class=\"data-cell\" [style.flex]=\"column.flex || '1'\">\n <span [innerHTML]=\"getCellValue(row, column)\"></span>\n </div>\n }\n </div>\n }\n @if (paginatedData().length === 0) {\n <div class=\"empty-row\">\n <div\n class=\"empty-cell\"\n [style.flex]=\"'1'\">\n No data available\n </div>\n </div>\n }\n </div>\n\n <!-- Paginator -->\n @if (table().showPaginator) {\n <div class=\"table-paginator\">\n <lite-paginator\n [paginator]=\"table().paginatorConfig\"\n (pageChange)=\"onPageChange($event)\"\n (itemsPerPageChange)=\"onItemsPerPageChange($event)\">\n </lite-paginator>\n </div>\n }\n</div>\n", styles: ["*{box-sizing:border-box}input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:40px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:40px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:40px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:40px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:40px;height:40px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}.lite-paginator{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap;justify-content:center}.lite-paginator .paginator-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;color:#666}.lite-paginator .paginator-btn:hover:not(:disabled){background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .paginator-btn:disabled{opacity:.5;cursor:not-allowed}.lite-paginator .paginator-btn svg{width:16px;height:16px}.lite-paginator .page-numbers{display:flex;gap:4px;align-items:center}.lite-paginator .page-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:.85em;color:#666}.lite-paginator .page-number:hover{background:#f8f9fa;border-color:#2079e1;color:#2079e1}.lite-paginator .page-number.active{background:#2079e1;border-color:#2079e1;color:#fff;font-weight:600}.lite-paginator .items-per-page{display:flex;align-items:center;gap:6px;font-size:.85em;color:#666}.lite-paginator .items-per-page .items-select{padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:.85em;cursor:pointer;min-width:60px;color:#666}.lite-paginator .items-per-page .items-select:focus{outline:none;border-color:#2079e1;box-shadow:0 0 0 2px #2079e133}.lite-paginator .items-per-page .items-label{white-space:nowrap}.lite-paginator .total-info{font-size:.85em;color:#666}.lite-paginator .total-info .total-text{white-space:nowrap}.lite-table{width:100%;background:#fff}.lite-table .table-header{background:#f8f8f8;border-bottom:1px solid #dee2e6}.lite-table .table-header .header-row{display:flex}.lite-table .table-header .header-row .header-cell{padding:5px 10px;text-align:left;font-weight:600;color:#333;font-size:.9em;border-right:1px solid #dee2e6;min-height:36px;display:flex;align-items:center}.lite-table .table-header .header-row .header-cell:last-child{border-right:none}.lite-table .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.lite-table .table-header .header-row .header-cell.sortable:hover{background:#e9ecef}.lite-table .table-body .data-row{display:flex;border-bottom:1px solid #dee2e6;transition:background-color .2s ease}.lite-table .table-body .data-row:hover{background:#f8f9fa}.lite-table .table-body .data-row:last-child{border-bottom:none}.lite-table .table-body .data-row .data-cell{padding:5px 10px;border-right:1px solid #dee2e6;font-size:.9em;color:#333;min-height:36px;display:flex;align-items:center}.lite-table .table-body .data-row .data-cell:last-child{border-right:none}.lite-table .table-body .empty-row{display:flex;border-bottom:1px solid #dee2e6}.lite-table .table-body .empty-row .empty-cell{padding:40px 16px;text-align:center;color:#6c757d;font-style:italic;font-size:.9em}.lite-table .table-paginator{margin-top:16px;display:flex;justify-content:center}\n"] }]
|
|
1971
|
+
}] });
|
|
1972
|
+
|
|
1973
|
+
class LiteFormModule {
|
|
1974
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1975
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: LiteFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
|
|
1976
|
+
LiteInput, LiteTextarea, LiteSelect, LiteMultiSelect, LiteRadio, LiteCheckbox, LiteDate, LiteDateTime, LitePassword, LiteFile, LitePaginator, LiteTable], exports: [LiteInput, LiteTextarea, LiteSelect, LiteMultiSelect, LiteRadio, LiteCheckbox, LiteDate, LiteDateTime, LitePassword, LiteFile, LitePaginator, LiteTable] });
|
|
1977
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteFormModule, imports: [CommonModule, FormsModule, ReactiveFormsModule,
|
|
1978
|
+
LiteInput, LiteTextarea, LiteSelect, LiteMultiSelect, LiteRadio, LiteCheckbox, LiteDate, LiteDateTime, LitePassword, LiteFile, LitePaginator, LiteTable] });
|
|
1979
|
+
}
|
|
1980
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteFormModule, decorators: [{
|
|
1981
|
+
type: NgModule,
|
|
1982
|
+
args: [{
|
|
1983
|
+
imports: [
|
|
1984
|
+
CommonModule, FormsModule, ReactiveFormsModule,
|
|
1985
|
+
LiteInput, LiteTextarea, LiteSelect, LiteMultiSelect, LiteRadio, LiteCheckbox, LiteDate, LiteDateTime, LitePassword, LiteFile, LitePaginator, LiteTable
|
|
1986
|
+
],
|
|
1987
|
+
exports: [
|
|
1988
|
+
LiteInput, LiteTextarea, LiteSelect, LiteMultiSelect, LiteRadio, LiteCheckbox, LiteDate, LiteDateTime, LitePassword, LiteFile, LitePaginator, LiteTable
|
|
1989
|
+
]
|
|
1990
|
+
}]
|
|
1991
|
+
}] });
|
|
1992
|
+
|
|
1993
|
+
class FieldDto {
|
|
1994
|
+
label;
|
|
1995
|
+
formControl;
|
|
1996
|
+
rows;
|
|
1997
|
+
type;
|
|
1998
|
+
constructor(label, formControl, rows = 2, type = 'text') {
|
|
1999
|
+
this.label = label;
|
|
2000
|
+
this.formControl = formControl;
|
|
2001
|
+
this.rows = rows;
|
|
2002
|
+
this.type = type;
|
|
1877
2003
|
}
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
2004
|
+
}
|
|
2005
|
+
class BaseSelectFieldDto {
|
|
2006
|
+
label;
|
|
2007
|
+
options;
|
|
2008
|
+
displayWith;
|
|
2009
|
+
constructor(label, options, displayWith) {
|
|
2010
|
+
this.label = label;
|
|
2011
|
+
this.options = options;
|
|
2012
|
+
this.displayWith = displayWith;
|
|
1882
2013
|
}
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
this.setDateTimeSelected(day.date);
|
|
1890
|
-
// const dateString = this.toLocalISOString(day.date);
|
|
1891
|
-
// (this.control().formControl as FormControl<string>).setValue(dateString);
|
|
1892
|
-
// // this.formValueChangeSignal.set(Date.now()); // Trigger immediate update
|
|
1893
|
-
// this.control().formControl.markAsDirty();
|
|
1894
|
-
// this.control().formControl.markAsTouched();
|
|
2014
|
+
}
|
|
2015
|
+
class SelectFieldDto extends BaseSelectFieldDto {
|
|
2016
|
+
formControl;
|
|
2017
|
+
constructor(label, formControl, options, displayWith) {
|
|
2018
|
+
super(label, options, displayWith);
|
|
2019
|
+
this.formControl = formControl;
|
|
1895
2020
|
}
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
2021
|
+
}
|
|
2022
|
+
class MultiSelectFieldDto extends BaseSelectFieldDto {
|
|
2023
|
+
formControl;
|
|
2024
|
+
constructor(label, formControl, options, displayWith) {
|
|
2025
|
+
super(label, options, displayWith);
|
|
2026
|
+
this.formControl = formControl;
|
|
1902
2027
|
}
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
2028
|
+
}
|
|
2029
|
+
class RadioFieldDto extends BaseSelectFieldDto {
|
|
2030
|
+
formControl;
|
|
2031
|
+
constructor(label, formControl, options, displayWith) {
|
|
2032
|
+
super(label, options, displayWith);
|
|
2033
|
+
this.formControl = formControl;
|
|
2034
|
+
}
|
|
2035
|
+
}
|
|
2036
|
+
class FileFieldDto {
|
|
2037
|
+
label;
|
|
2038
|
+
formControl;
|
|
2039
|
+
multiple;
|
|
2040
|
+
accept;
|
|
2041
|
+
maxFileSize;
|
|
2042
|
+
maxFiles;
|
|
2043
|
+
showPreview;
|
|
2044
|
+
constructor(label, formControl, multiple = true, accept = '*/*', maxFileSize = 10 * 1024 * 1024, // 10MB
|
|
2045
|
+
maxFiles = 10, showPreview = true) {
|
|
2046
|
+
this.label = label;
|
|
2047
|
+
this.formControl = formControl;
|
|
2048
|
+
this.multiple = multiple;
|
|
2049
|
+
this.accept = accept;
|
|
2050
|
+
this.maxFileSize = maxFileSize;
|
|
2051
|
+
this.maxFiles = maxFiles;
|
|
2052
|
+
this.showPreview = showPreview;
|
|
2053
|
+
}
|
|
2054
|
+
}
|
|
2055
|
+
class PaginatorFieldDto {
|
|
2056
|
+
currentPage;
|
|
2057
|
+
totalItems;
|
|
2058
|
+
itemsPerPage;
|
|
2059
|
+
constructor(currentPage = 1, totalItems = 0, itemsPerPage = 10) {
|
|
2060
|
+
this.currentPage = currentPage;
|
|
2061
|
+
this.totalItems = totalItems;
|
|
2062
|
+
this.itemsPerPage = itemsPerPage;
|
|
2063
|
+
}
|
|
2064
|
+
}
|
|
2065
|
+
class TableFieldDto {
|
|
2066
|
+
columns;
|
|
2067
|
+
data;
|
|
2068
|
+
showPaginator;
|
|
2069
|
+
paginatorConfig;
|
|
2070
|
+
constructor(columns, data, showPaginator = false, paginatorConfig = new PaginatorFieldDto()) {
|
|
2071
|
+
this.columns = columns;
|
|
2072
|
+
this.data = data;
|
|
2073
|
+
this.showPaginator = showPaginator;
|
|
2074
|
+
this.paginatorConfig = paginatorConfig;
|
|
1911
2075
|
}
|
|
1912
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteDateTime, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1913
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: LiteDateTime, isStandalone: true, selector: "lite-datetime", inputs: { inEdit: { classPropertyName: "inEdit", publicName: "inEdit", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"lite-date\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <input type=\"text\" \n [value]=\"formattedValue()\" \n (change)=\"onDateChange($event)\"\n [class.invalid]=\"hasErrors()\"\n [placeholder]=\"format()\" />\n <label class=\"label\" [ngClass]=\"{'float': formattedValue()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </label>\n <div class=\"calendar_icon\" (click)=\"toggleCalendar()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"calendar\" viewBox=\"0 0 16 16\">\n <path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1.5A1.5 1.5 0 0 1 16 2.5v11A1.5 1.5 0 0 1 14.5 15H1.5A1.5 1.5 0 0 1 0 13.5v-11A1.5 1.5 0 0 1 1.5 1H3V.5a.5.5 0 0 1 .5-.5zM1.5 2a.5.5 0 0 0-.5.5V4h14V2.5a.5.5 0 0 0-.5-.5H13v.5a.5.5 0 0 1-1 0V2H4v.5a.5.5 0 0 1-1 0V2H1.5zM15 5H1v8.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V5z\"/>\n </svg>\n </div>\n \n @if (showCalendar()) {\n <div class=\"calendar-overlay\" [ngClass]=\"'position-' + calendarPosition()\">\n <ng-container *ngTemplateOutlet=\"calendarPanel\"></ng-container>\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n {{ getDisplayValue() }}\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n<ng-template #calendarPanel>\n <div class=\"calendar-panel datetime\">\n <div class=\"date-panel\">\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{'today': day.isToday, 'selected': day.isSelected, 'dim': day.isOtherMonth}\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"time-panel\">\n <div class=\"control-header\">\n <button type=\"button\" class=\"close-button\" (click)=\"closeCalendar()\" aria-label=\"Close\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z\"/>\n </svg>\n </button>\n </div>\n <div class=\"time-header\">HOURS</div>\n <div class=\"hh-grid\">\n @for (hh of hourSet; track hh) {\n <div class=\"hh-slot\" [ngClass]=\"{'selected': selectedHour === hh}\" (click)=\"onSelectHour(hh)\">\n {{ hh < 10 ? '0' + hh : hh }}\n </div>\n }\n </div>\n <div class=\"time-header\">MINUTES</div>\n <div class=\"hh-grid\">\n @for (mm of minSet; track mm) {\n <div class=\"hh-slot\" [ngClass]=\"{'selected': selectedMinute === mm}\" (click)=\"onSelectMinute(mm)\">\n {{ mm < 10 ? '0' + mm : mm }}\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1914
2076
|
}
|
|
1915
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LiteDateTime, decorators: [{
|
|
1916
|
-
type: Component,
|
|
1917
|
-
args: [{ selector: 'lite-datetime', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"lite-date\" [ngClass]=\"{'in-edit': inEdit(), 'invalid': hasErrors()}\">\n @if (inEdit()) {\n <input type=\"text\" \n [value]=\"formattedValue()\" \n (change)=\"onDateChange($event)\"\n [class.invalid]=\"hasErrors()\"\n [placeholder]=\"format()\" />\n <label class=\"label\" [ngClass]=\"{'float': formattedValue()}\">\n {{ control().label }}<span *ngIf=\"isRequired()\">*</span>\n </label>\n <div class=\"calendar_icon\" (click)=\"toggleCalendar()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"calendar\" viewBox=\"0 0 16 16\">\n <path d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1.5A1.5 1.5 0 0 1 16 2.5v11A1.5 1.5 0 0 1 14.5 15H1.5A1.5 1.5 0 0 1 0 13.5v-11A1.5 1.5 0 0 1 1.5 1H3V.5a.5.5 0 0 1 .5-.5zM1.5 2a.5.5 0 0 0-.5.5V4h14V2.5a.5.5 0 0 0-.5-.5H13v.5a.5.5 0 0 1-1 0V2H4v.5a.5.5 0 0 1-1 0V2H1.5zM15 5H1v8.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5V5z\"/>\n </svg>\n </div>\n \n @if (showCalendar()) {\n <div class=\"calendar-overlay\" [ngClass]=\"'position-' + calendarPosition()\">\n <ng-container *ngTemplateOutlet=\"calendarPanel\"></ng-container>\n </div>\n }\n } @else {\n <div class=\"label\">{{ control().label }}<span *ngIf=\"isRequired()\">*</span></div>\n <div class=\"value\">\n {{ getDisplayValue() }}\n </div>\n }\n\n @if (inEdit() && hasErrors()) {\n <div class=\"error-messages\">\n @for (error of getErrorMessage(); track error) {\n <div class=\"error-message\">{{ error }}</div>\n }\n </div>\n }\n</div>\n<ng-template #calendarPanel>\n <div class=\"calendar-panel datetime\">\n <div class=\"date-panel\">\n <div class=\"calendar-header\">\n <button type=\"button\" class=\"nav-button\" (click)=\"previousMonth()\">\u2039</button>\n <span class=\"month-year\">{{ getMonthYearDisplay() }}</span>\n <button type=\"button\" class=\"nav-button\" (click)=\"nextMonth()\">\u203A</button>\n </div>\n <div class=\"calendar-grid\">\n <div class=\"weekdays\">\n <div class=\"weekday\">Su</div>\n <div class=\"weekday\">Mo</div>\n <div class=\"weekday\">Tu</div>\n <div class=\"weekday\">We</div>\n <div class=\"weekday\">Th</div>\n <div class=\"weekday\">Fr</div>\n <div class=\"weekday\">Sa</div>\n </div>\n <div class=\"calendar-days\">\n @for (day of calendarDays(); track day.date) {\n <div class=\"calendar-day\" [ngClass]=\"{'today': day.isToday, 'selected': day.isSelected, 'dim': day.isOtherMonth}\" (click)=\"selectDate(day)\">\n {{ day.day }}\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"time-panel\">\n <div class=\"control-header\">\n <button type=\"button\" class=\"close-button\" (click)=\"closeCalendar()\" aria-label=\"Close\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z\"/>\n </svg>\n </button>\n </div>\n <div class=\"time-header\">HOURS</div>\n <div class=\"hh-grid\">\n @for (hh of hourSet; track hh) {\n <div class=\"hh-slot\" [ngClass]=\"{'selected': selectedHour === hh}\" (click)=\"onSelectHour(hh)\">\n {{ hh < 10 ? '0' + hh : hh }}\n </div>\n }\n </div>\n <div class=\"time-header\">MINUTES</div>\n <div class=\"hh-grid\">\n @for (mm of minSet; track mm) {\n <div class=\"hh-slot\" [ngClass]=\"{'selected': selectedMinute === mm}\" (click)=\"onSelectMinute(mm)\">\n {{ mm < 10 ? '0' + mm : mm }}\n </div>\n }\n </div>\n </div>\n </div>\n</ng-template>\n", styles: ["input,.label,textarea{font-size:1em;color:#333}.lite-input{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-input .label{font-size:.8em;font-weight:500}.lite-input .value{min-height:1em;line-height:1em}.lite-input.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-input.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-input.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-input.in-edit input:focus+.label,.lite-input.in-edit input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-input.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-password .label{font-size:.8em;font-weight:500}.lite-password .value{min-height:1em;line-height:1em}.lite-password.in-edit .input-container{position:relative;display:flex;align-items:center}.lite-password.in-edit .input-container input{border:1px solid #ccc;border-radius:4px;padding:0 2.5em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;width:100%}.lite-password.in-edit .input-container input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-password.in-edit .input-container input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-password.in-edit .input-container .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-password.in-edit .input-container input:focus+.label,.lite-password.in-edit .input-container input:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-password.in-edit .input-container .toggle-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#666;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.lite-password.in-edit .input-container .toggle-button:hover{color:#2079e1;background-color:#f5f5f5}.lite-password.in-edit .input-container .toggle-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-password.in-edit .input-container .toggle-button svg{width:16px;height:16px;stroke-width:1.5}.lite-password.in-edit .password-strength{margin-top:8px;padding:8px 0}.lite-password.in-edit .password-strength .strength-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;margin-bottom:6px}.lite-password.in-edit .password-strength .strength-bar .strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-very-weak{width:12.5%;background-color:#f44336}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-weak{width:25%;background-color:#ff9800}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-fair{width:50%;background-color:#ffeb3b}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-good{width:75%;background-color:#8bc34a}.lite-password.in-edit .password-strength .strength-bar .strength-fill.strength-strong{width:100%;background-color:#4caf50}.lite-password.in-edit .password-strength .strength-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lite-password.in-edit .password-strength .strength-info .strength-level{font-size:.85em;font-weight:600}.lite-password.in-edit .password-strength .strength-info .strength-level.level-very-weak{color:#f44336}.lite-password.in-edit .password-strength .strength-info .strength-level.level-weak,.lite-password.in-edit .password-strength .strength-info .strength-level.level-fair{color:#ff9800}.lite-password.in-edit .password-strength .strength-info .strength-level.level-good{color:#8bc34a}.lite-password.in-edit .password-strength .strength-info .strength-level.level-strong{color:#4caf50}.lite-password.in-edit .password-strength .strength-info .strength-score{font-size:.8em;color:#666}.lite-password.in-edit .password-strength .strength-feedback{font-size:.75em;color:#666;line-height:1.4}.lite-password.in-edit .password-strength .strength-feedback .feedback-tip{margin-bottom:2px}.lite-textarea{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-textarea .label{font-size:.8em;font-weight:500}.lite-textarea .value{min-height:1em;line-height:1em}.lite-textarea.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-textarea.in-edit textarea{border:1px solid #ccc;border-radius:4px;padding:5px 8px;font-size:1em;outline:none;line-height:36px}.lite-textarea.in-edit textarea:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-textarea.in-edit textarea:focus+.label,.lite-textarea.in-edit textarea:not(:placeholder-shown)+.label{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-textarea.in-edit textarea.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-select .label{font-size:.8em;font-weight:500}.lite-select .value{min-height:1em;line-height:1em}.lite-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-select.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px}.lite-select.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-select.in-edit input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;z-index:1000;overflow:hidden}.lite-select.in-edit .options .option{padding:8px;cursor:pointer}.lite-select.in-edit .options .option:hover{background-color:#f0f0f0}.lite-select.in-edit .options .option.selected{background-color:#e0e0e0}.lite-select.in-edit .arrow_box{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2em}.lite-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333;position:absolute;top:48%;left:.5em}.lite-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-multi-select{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-multi-select .label{font-size:.8em;font-weight:500}.lite-multi-select .value{display:flex;gap:5px;flex-wrap:wrap;min-height:1em;line-height:1em}.lite-multi-select .value .item{border:1px solid #999;padding:2px 5px;border-radius:3px;font-size:.8em;line-height:16px}.lite-multi-select.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-multi-select.in-edit .input-container{border:1px solid #ccc;border-radius:4px;background:#fff;outline:none;min-height:36px;padding:0 2em 0 8px;position:relative;transition:height .2s ease-in-out}.lite-multi-select.in-edit .input-container:focus-within{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-multi-select.in-edit .input-container.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-multi-select.in-edit .input-container .selected-items-inline{position:absolute;inset:0 2em 0 8px;display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;align-content:flex-start;align-items:flex-start;pointer-events:none;z-index:3;overflow:hidden;height:fit-content}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline{display:inline-flex;align-items:center;border:1px solid #999;background:#fff;padding-left:5px;border-radius:3px;font-size:.8em;gap:4px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:20px;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline{background:none;border:none;font-size:1.2em;cursor:pointer;line-height:1;padding:0;margin-left:2px;color:#666;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.lite-multi-select.in-edit .input-container .selected-items-inline .selected-item-inline .remove-item-inline:hover{color:#333}.lite-multi-select.in-edit .input-container .filter-input{border:none;outline:none;background:transparent;font-size:1em;width:100%;height:100%;min-height:36px;position:relative;z-index:2}.lite-multi-select.in-edit .input-container .filter-input::placeholder{color:#aaa}.lite-multi-select.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-multi-select.in-edit .options{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;overflow:auto}.lite-multi-select.in-edit .options .multi-option{padding:6px 8px;cursor:pointer;display:flex;align-items:center;gap:8px}.lite-multi-select.in-edit .options .multi-option:hover{background-color:#f0f0f0}.lite-multi-select.in-edit .options .multi-option.selected{background-color:#e3f2fd}.lite-multi-select.in-edit .options .multi-option input[type=checkbox]{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-multi-select.in-edit .options .multi-option .option-text{flex:1;-webkit-user-select:none;user-select:none;line-height:20px}.lite-multi-select.in-edit .options .no-options{padding:12px;text-align:center;color:#999;font-style:italic}.lite-multi-select.in-edit .arrow_box{position:absolute;right:4px;top:4px;cursor:pointer;height:calc(100% - 8px);width:2em;display:flex;align-items:center;justify-content:center}.lite-multi-select.in-edit .arrow_box .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.lite-multi-select.in-edit .arrow_box .arrow:hover{border-top-color:#2079e1}.lite-radio{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-radio .label{font-size:.8em;font-weight:500}.lite-radio .value{display:flex;gap:5px;flex-wrap:wrap}.lite-radio .value .no-value{color:#999;font-style:italic}.lite-radio.in-edit .radio-container{position:relative}.lite-radio.in-edit .radio-container .label{font-size:1.1em;font-weight:500;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options{display:flex;flex-direction:column;gap:10px;padding:5px 0}.lite-radio.in-edit .radio-container .radio-options .radio-option{display:flex;align-items:flex-start;gap:5px;cursor:pointer;line-height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-input{margin:0;cursor:pointer;accent-color:#2079e1;width:20px;height:20px}.lite-radio.in-edit .radio-container .radio-options .radio-option .radio-label{flex:1;-webkit-user-select:none;user-select:none;font-size:1em;color:#333}.lite-radio.in-edit .radio-container .radio-options .radio-option:hover .radio-label{color:#2079e1}.lite-radio.in-edit .radio-container .radio-options.vertical{flex-direction:column}.lite-radio.in-edit .radio-container .radio-options.horizontal{flex-direction:row;flex-wrap:wrap}.in-edit .error-messages{color:#ff4500;font-size:.8em;letter-spacing:.6px;line-height:1.8em;padding-left:10px}.in-edit .error-messages .error-message{margin-bottom:2px}.lite-checkbox{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-checkbox .label{font-size:.8em;font-weight:500}.lite-checkbox .value{display:flex;gap:5px;flex-wrap:wrap}.lite-checkbox .value .checked{color:#28a745;font-weight:500}.lite-checkbox .value .unchecked{color:#6c757d}.lite-checkbox.in-edit .checkbox-container{position:relative}.lite-checkbox.in-edit .checkbox-container .checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1em;line-height:1.4;width:fit-content}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-input{margin:0;cursor:pointer;accent-color:#2079e1;width:16px;height:16px;transform:scale(1.2)}.lite-checkbox.in-edit .checkbox-container .checkbox-label .checkbox-text{flex:1;-webkit-user-select:none;user-select:none;color:#333;font-weight:500}.lite-checkbox.in-edit .checkbox-container .checkbox-label .required{margin-left:4px}.lite-checkbox.in-edit .checkbox-container .checkbox-label:hover .checkbox-text{color:#2079e1}.lite-checkbox.invalid .checkbox-container .checkbox-label .checkbox-text{color:#dc3545}.lite-date{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-date .label{font-size:.8em;font-weight:500}.lite-date .value{display:flex;gap:5px;flex-wrap:wrap;color:#333;font-size:1em}.lite-date.in-edit{position:relative}.lite-date.in-edit .label{position:absolute;left:8px;top:2px;color:#aaa;pointer-events:none;transition:.2s;font-size:1em;line-height:36px;font-weight:400}.lite-date.in-edit input{border:1px solid #ccc;border-radius:4px;padding:0 2em 0 8px;font-size:1em;outline:none;line-height:36px;height:36px;color-scheme:light}.lite-date.in-edit input:focus{border-color:#2079e1;box-shadow:0 0 5px #2079e180}.lite-date.in-edit input:focus+.label,.lite-date.in-edit input:not([value=\"\"])+.label,.lite-date.in-edit .label.float{transform:translateY(-10px) translate(-10px) scale(.8);background:#fff;padding:0 5px;color:#2079e1;line-height:initial}.lite-date.in-edit .date-input.invalid{border-color:#dc3545;background-color:#fff5f5;box-shadow:0 0 0 2px 1px #dc354540}.lite-date.in-edit .calendar_icon{position:absolute;right:0;top:0;cursor:pointer;height:100%;width:2.5em}.lite-date.in-edit .calendar_icon .calendar{width:16px;height:16px;color:#333;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lite-date.in-edit .calendar_icon .calendar:hover{color:#2079e1}.lite-date.in-edit .calendar-overlay{position:absolute;right:0;z-index:1000}.lite-date.in-edit .calendar-overlay.position-bottom{top:100%;margin-top:4px}.lite-date.in-edit .calendar-overlay.position-top{bottom:100%;margin-bottom:4px}.calendar-panel{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:16px;width:280px;font-family:inherit}.calendar-panel.datetime{display:flex;width:100%;padding:0}.calendar-panel.datetime .control-header{width:100%;height:50px;display:flex;justify-content:flex-end}.calendar-panel.datetime .control-header .close-button{color:#999;cursor:pointer;border:none;background:none;width:30px;height:30px;padding:0}.calendar-panel.datetime .time-header{font-size:11px;font-weight:600;color:#333;border-bottom:1px solid #ccc;letter-spacing:.5px;line-height:20px}.calendar-panel.datetime .date-panel{width:280px;padding:20px 10px 20px 20px}.calendar-panel.datetime .time-panel{width:200px;padding:20px 20px 20px 10px}.calendar-panel.datetime .time-panel .hh-grid{display:flex;align-items:center;flex-wrap:wrap;margin:10px 0;gap:2px}.calendar-panel.datetime .time-panel .hh-slot{display:flex;width:30px;justify-content:center;line-height:24px;border-radius:4px;cursor:pointer;font-size:.8em;flex:0 0 calc(16.666% - 2px);border:1px solid #ddd;box-sizing:border-box}.calendar-panel.datetime .time-panel .hh-slot:hover{background-color:#f5f5f5}.calendar-panel.datetime .time-panel .hh-slot.selected{background-color:#2079e1;color:#fff}.calendar-panel.range-mode{width:580px}.calendar-panel .dual-calendar{display:flex;gap:20px}.calendar-panel .dual-calendar .calendar-month{flex:1}.calendar-panel .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.calendar-panel .calendar-header .month-year{font-weight:600;font-size:16px;color:#333}.calendar-panel .calendar-header .nav-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s,color .2s}.calendar-panel .calendar-header .nav-button:hover{background-color:#f5f5f5;color:#2079e1}.calendar-panel .calendar-header .nav-spacer{width:28px}.calendar-panel .calendar-grid .weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}.calendar-panel .calendar-grid .weekdays .weekday{text-align:center;font-size:12px;font-weight:600;color:#666;padding:8px 4px}.calendar-panel .calendar-grid .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.calendar-panel .calendar-grid .calendar-days .calendar-day{text-align:center;padding:8px 4px;cursor:pointer;border-radius:4px;font-size:14px;transition:background-color .2s,color .2s;position:relative}.calendar-panel .calendar-grid .calendar-days .calendar-day:hover{background-color:#f0f8ff}.calendar-panel .calendar-grid .calendar-days .calendar-day.today{background-color:#f8f8f8;font-weight:600;border:1px solid #ccc;border-radius:50%}.calendar-panel .calendar-grid .calendar-days .calendar-day.dim{opacity:.5;font-size:.9em}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected{background-color:#2079e1;color:#fff;font-weight:600}.calendar-panel .calendar-grid .calendar-days .calendar-day.selected:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start{background-color:#2079e1;color:#fff;font-weight:600;border-top-right-radius:0;border-bottom-right-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end{background-color:#2079e1;color:#fff;font-weight:600;border-top-left-radius:0;border-bottom-left-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-end:hover{background-color:#1976d2}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range{background-color:#e3f2fd;color:#1976d2;border-radius:0}.calendar-panel .calendar-grid .calendar-days .calendar-day.in-range:hover{background-color:#bbdefb}.calendar-panel .calendar-grid .calendar-days .calendar-day.range-start.range-end{border-radius:4px}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-start,.calendar-panel .calendar-grid .calendar-days .calendar-day.today.range-end{background-color:#ff9800;border-color:#e65100}.calendar-panel .calendar-grid .calendar-days .calendar-day.today.in-range{background-color:#ffcc80;color:#e65100;font-weight:700}.lite-file{display:flex;flex-direction:column;margin-bottom:10px;position:relative;gap:5px}.lite-file .label{font-size:.8em;font-weight:500}.lite-file button{position:relative;background:none;border:none;width:30px;display:flex;justify-content:center;cursor:pointer;margin-top:10px}.lite-file button:hover{background:#e9ecef;border-color:#6c757d}.lite-file button.has-files{border-color:#28a745;background:#d4edda}.lite-file button img{width:24px;height:24px;stroke:currentColor}.lite-file button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.lite-file.in-edit{position:relative;display:inline-block}.lite-file.in-edit .file-button{position:relative;background:none;border:none;padding:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.lite-file.in-edit .file-button:hover{background:#e9ecef;border-color:#6c757d}.lite-file.in-edit .file-button:focus{outline:2px solid #2079e1;outline-offset:2px}.lite-file.in-edit .file-button.has-files{border-color:#28a745;background:#d4edda}.lite-file.in-edit .file-button.has-errors{border-color:#dc3545;background:#f8d7da}.lite-file.in-edit .file-button:disabled{opacity:.6;cursor:not-allowed}.lite-file.in-edit .file-button .file-icon{width:24px;height:24px;stroke:currentColor}.lite-file.in-edit .file-button .file-badge{position:absolute;top:-8px;right:-8px;background:#2079e1;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none}.panel-overlay.visible{opacity:1;visibility:visible;pointer-events:auto}.file-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);min-width:400px;max-width:90vw;max-height:90vh;background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;display:none;flex-direction:column;pointer-events:none;overflow:hidden}.file-panel.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);display:flex;pointer-events:auto}.file-panel .panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #dee2e6;background:#f8f9fa}.file-panel .panel-header h3{margin:0;font-size:1.1em;font-weight:600;color:#333}.file-panel .panel-header .close-button{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;color:#6c757d;transition:all .2s}.file-panel .panel-header .close-button:hover{color:#dc3545;background:#f8d7da}.file-panel .panel-header .close-button svg{width:16px;height:16px}.file-panel .panel-content{padding:20px;overflow-y:auto;flex:1}.file-panel .panel-content .upload-area{border:2px dashed #dee2e6;border-radius:8px;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .2s;cursor:pointer;position:relative}.file-panel .panel-content .upload-area:hover,.file-panel .panel-content .upload-area.drag-over{border-color:#2079e1;background:#f0f8ff}.file-panel .panel-content .upload-area.uploading{border-color:#ffc107;background:#fff8e1}.file-panel .panel-content .upload-area .upload-content{pointer-events:none}.file-panel .panel-content .upload-area .upload-content .upload-icon{width:48px;height:48px;margin:0 auto 16px;stroke:#6c757d}.file-panel .panel-content .upload-area .upload-content p{margin:0 0 8px;font-size:1.1em;color:#333;font-weight:500}.file-panel .panel-content .upload-area .upload-content small{color:#6c757d;font-size:.9em}.file-panel .panel-content .action-buttons{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.file-panel .panel-content .action-buttons .action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.9em;flex:1;min-width:120px;justify-content:center}.file-panel .panel-content .action-buttons .action-btn:hover{background:#f8f9fa;border-color:#6c757d}.file-panel .panel-content .action-buttons .action-btn.upload-btn:hover{background:#e7f3ff;border-color:#2079e1;color:#2079e1}.file-panel .panel-content .action-buttons .action-btn.camera-btn:hover{background:#e8f5e8;border-color:#28a745;color:#28a745}.file-panel .panel-content .action-buttons .action-btn.close-btn:hover{background:#f8d7da;border-color:#dc3545;color:#dc3545}.file-panel .panel-content .action-buttons .action-btn svg{width:16px;height:16px}.file-panel .panel-content .file-list .file-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid #dee2e6}.file-panel .panel-content .file-list .file-list-header span{font-weight:600;color:#333}.file-panel .panel-content .file-list .file-list-header .total-size{font-size:.9em;color:#6c757d;font-weight:400}.file-panel .panel-content .file-list .file-list-header .clear-all-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8em;transition:all .2s ease}.file-panel .panel-content .file-list .file-list-header .clear-all-btn:hover{background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items{max-height:300px;overflow-y:auto}.file-panel .panel-content .file-list .file-items .file-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dee2e6;border-radius:6px;margin-bottom:8px;transition:all .2s ease;background:#fff}.file-panel .panel-content .file-list .file-items .file-item:hover{background:#f8f9fa}.file-panel .panel-content .file-list .file-items .file-item.has-error{border-color:#dc3545;background:#fff5f5}.file-panel .panel-content .file-list .file-items .file-item.uploading{background:#fff8e1;border-color:#ffc107}.file-panel .panel-content .file-list .file-items .file-item .file-preview{width:48px;height:48px;border-radius:4px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .file-preview .preview-image{width:100%;height:100%;object-fit:cover}.file-panel .panel-content .file-list .file-items .file-item .file-preview .file-type-icon{font-size:24px}.file-panel .panel-content .file-list .file-items .file-item .file-info{flex:1;min-width:0}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-name{font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details{display:flex;gap:12px;margin-top:4px;font-size:.8em;color:#6c757d}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-size,.file-panel .panel-content .file-list .file-items .file-item .file-info .file-details .file-type{white-space:nowrap}.file-panel .panel-content .file-list .file-items .file-item .file-info .file-error{color:#dc3545;font-size:.8em;margin-top:4px;font-weight:500}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar{flex:1;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-bar .progress-fill{height:100%;background:#2079e1;transition:width .3s ease}.file-panel .panel-content .file-list .file-items .file-item .file-info .upload-progress .progress-text{font-size:.8em;color:#6c757d;font-weight:500;min-width:32px}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn{background:none;border:1px solid #dc3545;color:#dc3545;padding:6px;border-radius:4px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:hover:not(:disabled){background:#dc3545;color:#fff}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn:disabled{opacity:.5;cursor:not-allowed}.file-panel .panel-content .file-list .file-items .file-item .remove-file-btn svg{width:16px;height:16px}.file-panel .panel-content .empty-state{text-align:center;padding:40px 20px;color:#6c757d}.file-panel .panel-content .empty-state .empty-icon{width:64px;height:64px;margin:0 auto 16px;stroke:#dee2e6}.file-panel .panel-content .empty-state p{margin:0 0 8px;font-size:1.1em}.file-panel .panel-content .empty-state small{font-size:.9em}\n"] }]
|
|
1918
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onDocumentClick: [{
|
|
1919
|
-
type: HostListener,
|
|
1920
|
-
args: ['document:click', ['$event']]
|
|
1921
|
-
}] } });
|
|
1922
2077
|
|
|
1923
2078
|
class LiteSnackbarService {
|
|
1924
2079
|
timeoutId;
|
|
@@ -2009,5 +2164,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
2009
2164
|
* Generated bundle index. Do not edit.
|
|
2010
2165
|
*/
|
|
2011
2166
|
|
|
2012
|
-
export { BaseSelectFieldDto, FieldDto, FileFieldDto, FormUtils, LiteCheckbox, LiteDate, LiteDateTime, LiteFile, LiteFormModule, LiteInput, LiteMultiSelect, LitePassword, LiteRadio, LiteSelect, LiteSnackbarService, LiteTextarea, MultiSelectFieldDto, RadioFieldDto, SelectFieldDto };
|
|
2167
|
+
export { BaseSelectFieldDto, FieldDto, FileFieldDto, FormUtils, LiteCheckbox, LiteDate, LiteDateTime, LiteFile, LiteFormModule, LiteInput, LiteMultiSelect, LitePaginator, LitePassword, LiteRadio, LiteSelect, LiteSnackbarService, LiteTable, LiteTextarea, MultiSelectFieldDto, PaginatorFieldDto, RadioFieldDto, SelectFieldDto, TableFieldDto };
|
|
2013
2168
|
//# sourceMappingURL=ngx-lite-form.mjs.map
|