itsm-widget 1.0.4 → 1.0.6

package/API-SERVICE.md

@@ -31,16 +31,18 @@ const ITSMAPIService = window.ITSMAPIService;
 
 ```javascript
 const apiService = new ITSMAPIService({
-  baseUrl: 'http://localhost:9998', // URL của Backend API
+  // baseUrl sẽ được load tự động từ file itsm-widget-config.json
   authToken: 'your-jwt-token-here' // JWT token từ đăng nhập thành công
 });
 ```
 
+**⚠️ QUAN TRỌNG:** `baseUrl` **CHỈ** được lấy từ file `itsm-widget-config.json` - đây là cách duy nhất để cấu hình URL của Backend API. Xem [CONFIG.md](./CONFIG.md) để biết thêm chi tiết.
+
 ### Options
 
 | Option | Type | Default | Mô tả |
 |--------|------|---------|-------|
-| `baseUrl` | string | `''` | Base URL của Backend API (bắt buộc). Ví dụ: `http://localhost:9998` |
+| `baseUrl` | string | `''` | **KHÔNG truyền vào constructor** - Base URL của Backend API được load tự động từ file `itsm-widget-config.json` (bắt buộc). |
 | `authToken` | string | `''` | Authorization Bearer token (JWT token từ đăng nhập thành công) (bắt buộc). Đây KHÔNG phải là apiKey. |
 
 ## Methods
@@ -177,7 +179,72 @@ const requestInfo = await apiService.getRequest('18391');
 console.log(requestInfo);
 ```
 
-### 5. mapPriority(priority)
+### 5. getAllCategories()
+
+Lấy tất cả categories từ Backend API.
+
+**Returns:** `Promise<Object>` - Response với format:
+```json
+{
+  "categories": [...],
+  "list_info": {...},
+  "response_status": [...]
+}
+```
+
+**Ví dụ:**
+```javascript
+const categoriesData = await apiService.getAllCategories();
+console.log('Categories:', categoriesData.categories);
+```
+
+### 6. getSubcategoriesByCategoryId(categoryId)
+
+Lấy danh sách subcategories theo category ID.
+
+**Parameters:**
+- `categoryId` (string): ID của category
+
+**Returns:** `Promise<Object>` - Response với format:
+```json
+{
+  "subcategories": [...],
+  "list_info": {...},
+  "response_status": [...]
+}
+```
+
+**Ví dụ:**
+```javascript
+const subcategoriesData = await apiService.getSubcategoriesByCategoryId('301');
+console.log('Subcategories:', subcategoriesData.subcategories);
+```
+
+### 7. getItemsBySubcategoryId(subcategoryId)
+
+Lấy danh sách items theo subcategory ID.
+
+**Parameters:**
+- `subcategoryId` (string): ID của subcategory
+
+**Returns:** `Promise<Object>` - Response với format:
+```json
+{
+  "items": [...],
+  "list_info": {...},
+  "response_status": [...]
+}
+```
+
+**Ví dụ:**
+```javascript
+const itemsData = await apiService.getItemsBySubcategoryId('302');
+console.log('Items:', itemsData.items);
+```
+
+### 8. mapPriority(priority)
+
+### 8. mapPriority(priority)
 
 Helper method để map priority từ form widget sang format API.
 
@@ -191,7 +258,7 @@ Helper method để map priority từ form widget sang format API.
 const priority = apiService.mapPriority('high'); // Trả về: 'Cao'
 ```
 
-### 6. mapCategory(category)
+### 9. mapCategory(category)
 
 Helper method để map category từ form widget sang format API.
 
@@ -206,7 +273,7 @@ const category = apiService.mapCategory('hardware');
 // Trả về: 'A01A00 - Quản lý an toàn thông tin'
 ```
 
-### 7. buildRequestData(formData, options)
+### 10. buildRequestData(formData, options)
 
 Build request data từ form data của widget sang format API.
 
@@ -346,7 +413,64 @@ try {
   }
   ```
 
-**Lưu ý:** `apiKey` (authtoken) và `tenant` được xử lý ở Backend, không cần truyền từ Frontend.
+### 4. Get All Categories
+- **URL:** `POST {baseUrl}/spcit/categories`
+- **Headers:**
+  - `Authorization`: `Bearer {authToken}`
+  - `Content-Type`: `application/json`
+- **Body:** JSON với `list_info`:
+  ```json
+  {
+    "list_info": {
+      "start_index": 1,
+      "page": 1,
+      "row_count": 100,
+      "sort_field": "name",
+      "sort_order": "asc",
+      "get_total_count": true
+    }
+  }
+  ```
+
+### 5. Get Subcategories by Category ID
+- **URL:** `POST {baseUrl}/spcit/categories/{categoryId}/subcategories`
+- **Headers:**
+  - `Authorization`: `Bearer {authToken}`
+  - `Content-Type`: `application/json`
+- **Body:** JSON với `list_info`:
+  ```json
+  {
+    "list_info": {
+      "start_index": 0,
+      "row_count": 100,
+      "sort_field": "name",
+      "sort_order": "asc",
+      "get_total_count": true
+    }
+  }
+  ```
+
+### 6. Get Items by Subcategory ID
+- **URL:** `POST {baseUrl}/spcit/subcategories/{subcategoryId}/items`
+- **Headers:**
+  - `Authorization`: `Bearer {authToken}`
+  - `Content-Type`: `application/json`
+- **Body:** JSON với `list_info`:
+  ```json
+  {
+    "list_info": {
+      "start_index": 0,
+      "row_count": 100,
+      "sort_field": "name",
+      "sort_order": "asc",
+      "get_total_count": true
+    }
+  }
+  ```
+
+**Lưu ý:** 
+- `apiKey` (authtoken) và `tenant` được xử lý ở Backend, không cần truyền từ Frontend.
+- `{baseUrl}` được load từ file `itsm-widget-config.json`, không truyền vào constructor.
 
 ## Xem thêm
 

package/README.md

@@ -18,9 +18,13 @@ Plugin HTML **standalone** để Tạo phiếu yêu cầu ITSM. Widget sử dụ
 - 🎯 Icon nổi ở góc dưới bên phải màn hình
 - 📝 Form nhập phiếu yêu cầu ITSM với các trường:
   - Tiêu đề (bắt buộc)
-  - Mô tả (bắt buộc)
-  - Danh mục (Phần cứng, Phần mềm, Mạng, Tài khoản, Khác)
-  - Mức độ ưu tiên (Thấp, Trung bình, Cao, Khẩn cấp)
+  - Mô tả (bắt buộc) - Rich text editor với formatting
+  - Danh mục dịch vụ (tải từ API, có filter tìm kiếm)
+  - Dịch vụ con (tải từ API theo danh mục, có filter tìm kiếm)
+  - Chi tiết dịch vụ (tải từ API theo dịch vụ con, có filter tìm kiếm)
+  - Mức độ ưu tiên (Thấp, Trung bình, Cao)
+  - Loại hỗ trợ (dropdown)
+  - Loại thiết bị sử dụng (dropdown)
   - Thông tin liên hệ
   - Tệp đính kèm (nhiều file)
 - 🎨 Giao diện native HTML/CSS đẹp mắt
@@ -87,7 +91,7 @@ import 'itsm-widget/dist/itsm-widget.min.js';
   <script>
     // Cấu hình widget
     const itsmWidget = new ITSMWidget({
-      apiBaseUrl: 'http://localhost:9998', // URL của Backend API (hoặc load từ itsm-widget-config.json)
+      // apiBaseUrl sẽ được load tự động từ file itsm-widget-config.json
       authToken: 'your-jwt-token-here', // JWT token từ đăng nhập thành công
       position: 'bottom-right',
       iconText: '📝',
@@ -152,7 +156,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     // Khởi tạo ITSM Widget
     const itsmWidget = new ITSMWidget({
-      apiBaseUrl: 'http://localhost:9998', // URL của Backend API (hoặc load từ itsm-widget-config.json)
+      // apiBaseUrl sẽ được load tự động từ file itsm-widget-config.json
       authToken: 'your-jwt-token-here', // JWT token từ đăng nhập thành công
       position: 'bottom-right',
       iconText: '📝',
@@ -173,9 +177,14 @@ export class AppComponent implements OnInit {
 ### Cách 4: Auto-initialize với data attributes
 
 ```html
-<script 
-  src="path/to/itsm-widget.min.js" 
-  data-itsm-config='{"apiBaseUrl":"http://localhost:9998","authToken":"your-jwt-token","iconColor":"#007bff"}'>
+<!-- Không khuyến nghị dùng data attributes vì apiBaseUrl phải lấy từ itsm-widget-config.json -->
+<script src="path/to/itsm-widget.min.js"></script>
+<script>
+  const widget = new ITSMWidget({
+    // apiBaseUrl sẽ được load tự động từ file itsm-widget-config.json
+    authToken: 'your-jwt-token',
+    iconColor: '#007bff'
+  });
 </script>
 ```
 
@@ -183,15 +192,20 @@ export class AppComponent implements OnInit {
 
 > **📖 Xem chi tiết**: [CONFIG.md](./CONFIG.md) - Hướng dẫn cấu hình `apiBaseUrl` qua file external
 
-Widget hỗ trợ load `apiBaseUrl` từ file `itsm-widget-config.json` để có thể thay đổi sau khi build mà không cần sửa code. Đặt file config cùng thư mục với `itsm-widget.min.js`:
+**⚠️ QUAN TRỌNG:** `apiBaseUrl` **CHỈ** được lấy từ file `itsm-widget-config.json` - đây là cách duy nhất để cấu hình URL của Backend API.
+
+Widget **BẮT BUỘC** phải có file `itsm-widget-config.json` để hoạt động. Đặt file config cùng thư mục với `itsm-widget.min.js`:
 
 ```json
 {
-  "apiBaseUrl": "http://localhost:9998"
+  "apiBaseUrl": "http://localhost:2411"
 }
 ```
 
-Widget sẽ tự động load config từ file này nếu không truyền `apiBaseUrl` trong constructor.
+**Lưu ý:**
+- Widget sẽ tự động load config từ file này khi khởi tạo
+- **KHÔNG** truyền `apiBaseUrl` trong constructor - nó sẽ bị bỏ qua
+- Nếu file không tồn tại hoặc không có `apiBaseUrl`, widget sẽ throw error và không khởi tạo được
 
 ## Build từ source
 
@@ -240,7 +254,7 @@ Rebuild tự động khi có thay đổi (không có dev server)
 
 | Option | Type | Default | Mô tả |
 |--------|------|---------|-------|
-| `apiBaseUrl` | string | `''` | Base URL của Backend API (bắt buộc). Có thể load từ `itsm-widget-config.json` hoặc truyền trực tiếp. Default: `http://localhost:9998` |
+| `apiBaseUrl` | string | `''` | **KHÔNG truyền vào constructor** - Base URL của Backend API được load tự động từ file `itsm-widget-config.json` (bắt buộc). Xem [CONFIG.md](./CONFIG.md) để biết thêm chi tiết. |
 | `authToken` | string | `''` | Authorization Bearer token (JWT token từ đăng nhập thành công) (bắt buộc). Đây KHÔNG phải là apiKey. |
 | `position` | string | `'bottom-right'` | Vị trí icon: `'bottom-right'` hoặc `'bottom-left'` |
 | `iconText` | string | `'📝'` | Text/emoji hiển thị trên icon (mặc định: 📝) |
@@ -278,6 +292,8 @@ Content-Type: application/json
   "request": {
     "requester": { "name": "..." },
     "category": { "name": "..." },
+    "subcategory": { "name": "..." },
+    "item": { "name": "..." },
     "priority": { "name": "..." },
     "subject": "...",
     "description": "...",
@@ -300,6 +316,79 @@ Content-Type: multipart/form-data
 **Body (FormData):**
 - `files`: File hoặc mảng các file
 
+**3. Lấy danh sách categories:**
+```
+POST {apiBaseUrl}/spcit/categories
+```
+
+**Headers:**
+```
+Authorization: Bearer {authToken}
+Content-Type: application/json
+```
+
+**Body (JSON):**
+```json
+{
+  "list_info": {
+    "start_index": 1,
+    "page": 1,
+    "row_count": 100,
+    "sort_field": "name",
+    "sort_order": "asc",
+    "get_total_count": true
+  }
+}
+```
+
+**4. Lấy danh sách subcategories theo category:**
+```
+POST {apiBaseUrl}/spcit/categories/{categoryId}/subcategories
+```
+
+**Headers:**
+```
+Authorization: Bearer {authToken}
+Content-Type: application/json
+```
+
+**Body (JSON):**
+```json
+{
+  "list_info": {
+    "start_index": 0,
+    "row_count": 100,
+    "sort_field": "name",
+    "sort_order": "asc",
+    "get_total_count": true
+  }
+}
+```
+
+**5. Lấy danh sách items theo subcategory:**
+```
+POST {apiBaseUrl}/spcit/subcategories/{subcategoryId}/items
+```
+
+**Headers:**
+```
+Authorization: Bearer {authToken}
+Content-Type: application/json
+```
+
+**Body (JSON):**
+```json
+{
+  "list_info": {
+    "start_index": 0,
+    "row_count": 100,
+    "sort_field": "name",
+    "sort_order": "asc",
+    "get_total_count": true
+  }
+}
+```
+
 **Response mẫu (tạo request thành công):**
 ```json
 {
@@ -335,7 +424,7 @@ Xem chi tiết API tại file tài liệu trong `src/assets/13082025 API v2 SDP
 
 ```javascript
 const widget = new ITSMWidget({
-  apiBaseUrl: 'http://localhost:9998', // URL của Backend API (hoặc load từ itsm-widget-config.json)
+  // apiBaseUrl sẽ được load tự động từ file itsm-widget-config.json
   authToken: 'your-jwt-token-here', // JWT token từ đăng nhập thành công
   iconColor: '#28a745',
   requesterName: 'Nguyễn Văn A', // Optional
@@ -350,7 +439,8 @@ const widget = new ITSMWidget({
 **Lưu ý:**
 - `apiKey` và `tenant` đã được config ở Backend (không cần truyền từ FE)
 - `authToken` là JWT token từ đăng nhập, không phải `apiKey`
-- `apiBaseUrl` có thể được load từ file `itsm-widget-config.json` (xem [CONFIG.md](./CONFIG.md))
+- `apiBaseUrl` **BẮT BUỘC** phải có trong file `itsm-widget-config.json` (xem [CONFIG.md](./CONFIG.md))
+- **KHÔNG** truyền `apiBaseUrl` vào constructor - nó sẽ bị bỏ qua
 
 ### Custom styling
 

package/dist/itsm-widget-config.json

@@ -1,4 +1,4 @@
 {
-  "apiBaseUrl": "http://localhost:9998"
+  "apiBaseUrl": "http://10.170.210.202:2411"
 }
 

package/dist/itsm-widget.min.css

@@ -1 +1 @@
-.itsm-widget-button{align-items:center;background-color:#fff;border:3px solid transparent;border-radius:50%;cursor:pointer;display:flex;justify-content:center;overflow:visible;padding:4px;position:fixed;transition:transform .3s ease,box-shadow .3s ease;z-index:9998}.itsm-widget-button:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:scale(1.1)}.itsm-position-bottom-right{bottom:24px;right:24px}.itsm-position-bottom-left{bottom:24px;left:24px}.itsm-widget-icon{align-items:center;background-color:#fff;border-radius:50%;color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;font-weight:700;height:48px;justify-content:center;overflow:hidden;padding:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:48px}.itsm-widget-icon-img{filter:brightness(0) saturate(100%) invert(27%) sepia(78%) saturate(1250%) hue-rotate(197deg) brightness(96%) contrast(95%);height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.itsm-modal-overlay{align-items:center;background-color:rgba(0,0,0,.5);bottom:0;display:none;justify-content:center;left:0;opacity:0;padding:16px;position:fixed;right:0;top:0;transition:opacity .3s ease;z-index:9999}.itsm-modal-overlay.itsm-modal-active{display:flex;opacity:1}.itsm-modal-container{background:#fff;border-radius:6px;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;max-height:90vh;max-width:50vw;transform:scale(.9);transition:transform .3s ease;width:100%}.itsm-modal-overlay.itsm-modal-active .itsm-modal-container{transform:scale(1)}.itsm-modal-header{align-items:center;background-color:#fff;border-bottom:1px solid #e9ecef;border-radius:6px 6px 0 0;display:flex;flex-shrink:0;justify-content:space-between;padding:1.5rem}.itsm-modal-title{color:#212529;flex:1;font-size:1.5rem;font-weight:600;margin:0}.itsm-modal-header-icons{align-items:center;display:flex;gap:.5rem}.itsm-modal-close{align-items:center;background:transparent;border:none;border-radius:50%;color:#6c757d;cursor:pointer;display:flex;font-size:1.5rem;height:2rem;justify-content:center;line-height:1;padding:.5rem;transition:background-color .2s ease,color .2s ease;width:2rem}.itsm-modal-close:hover{background-color:#e9ecef;color:#212529}.itsm-modal-close span{font-size:1.5rem;line-height:1}.itsm-modal-content{flex:1;overflow-y:auto;padding:1.5rem}.itsm-modal-footer{background-color:#fff;border-radius:0 0 6px 6px;border-top:1px solid #e9ecef;display:flex;flex-shrink:0;gap:.5rem;justify-content:flex-end;padding:1rem 1.5rem}.itsm-form{flex-direction:column}.itsm-form,.itsm-form-row{display:flex;gap:1rem}.itsm-form-group{display:flex;flex-direction:column;gap:.5rem}.itsm-form-group-half{flex:1}.itsm-form-group label{color:#495057;display:block;font-size:.875rem;font-weight:500;margin-bottom:.25rem}.itsm-required{color:#dc3545;margin-left:2px}.itsm-input{background-color:#fff;border:1px solid #ced4da;border-radius:4px;box-sizing:border-box;color:#495057;font-family:inherit;font-size:1rem;line-height:1.5;padding:.5rem .75rem;transition:background-color .2s,border-color .2s,box-shadow .2s;width:100%}.itsm-input:hover{border-color:#adb5bd}.itsm-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);outline:0 none;outline-offset:0}.itsm-input:disabled{background-color:#e9ecef;cursor:not-allowed;opacity:1}.itsm-textarea{background-color:#fff;border:1px solid #ced4da;border-radius:4px;box-sizing:border-box;color:#495057;font-family:inherit;font-size:1rem;line-height:1.5;min-height:100px;padding:.5rem .75rem;resize:vertical;transition:background-color .2s,border-color .2s,box-shadow .2s;width:100%}.itsm-textarea:hover{border-color:#adb5bd}.itsm-textarea:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);outline:0 none;outline-offset:0}.itsm-textarea:disabled{background-color:#e9ecef;cursor:not-allowed;opacity:1}.itsm-editor-container{background-color:#fff;border:1px solid #ced4da;border-radius:4px;transition:border-color .2s,box-shadow .2s}.itsm-editor-container:focus-within{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.itsm-editor-toolbar{align-items:center;background-color:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex;flex-wrap:wrap;gap:.25rem;padding:.5rem}.itsm-editor-btn{align-items:center;background-color:#fff;border:1px solid #ced4da;border-radius:3px;color:#495057;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;height:2rem;justify-content:center;min-width:2rem;padding:.25rem .5rem;transition:background-color .2s,border-color .2s}.itsm-editor-btn:hover{background-color:#e9ecef;border-color:#adb5bd}.itsm-editor-btn:active{background-color:#dee2e6}.itsm-editor-separator{background-color:#ced4da;height:1.5rem;margin:0 .25rem;width:1px}.itsm-editor-file-btn{align-items:center;background-color:#fff;border:1px solid #ced4da;border-radius:3px;color:#495057;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;justify-content:center;margin-left:auto;padding:.25rem .5rem;transition:background-color .2s,border-color .2s}.itsm-editor-file-btn:hover{background-color:#e9ecef;border-color:#adb5bd}.itsm-editor-content{color:#495057;font-family:inherit;font-size:1rem;line-height:1.5;max-height:400px;min-height:150px;outline:none;overflow-y:auto;padding:.75rem}.itsm-editor-content:empty:before{color:#6c757d;content:attr(data-placeholder);pointer-events:none}.itsm-editor-content:focus:empty:before{content:""}.itsm-editor-content img{height:auto;margin:.5rem 0;max-width:100%}.itsm-editor-content ol,.itsm-editor-content ul{margin:.5rem 0;padding-left:1.5rem}.itsm-editor-content p{margin:.5rem 0}.itsm-editor-content p:first-child{margin-top:0}.itsm-editor-content p:last-child{margin-bottom:0}.itsm-select{background-color:#fff;border:1px solid #ced4da;border-radius:4px;box-sizing:border-box;color:#495057;cursor:pointer;font-family:inherit;font-size:1rem;line-height:1.5;padding:.5rem .75rem;transition:background-color .2s,border-color .2s,box-shadow .2s;width:100%}.itsm-select:hover{border-color:#adb5bd}.itsm-select:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);outline:0 none;outline-offset:0}.itsm-select:disabled{background-color:#e9ecef;cursor:not-allowed;opacity:.6}.itsm-btn{align-items:center;border:1px solid transparent;border-radius:4px;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:400;justify-content:center;line-height:1.5;overflow:hidden;padding:.5rem 1rem;position:relative;text-align:center;transition:background-color .2s,border-color .2s,box-shadow .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.itsm-btn:disabled{cursor:default;opacity:.6}.itsm-btn-text{line-height:inherit}.itsm-btn-primary{background-color:#007bff;border-color:#007bff;color:#fff}.itsm-btn-primary:hover:not(:disabled){background-color:#0056b3;border-color:#0056b3}.itsm-btn-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5);outline:0 none;outline-offset:0}.itsm-btn-primary:active:not(:disabled){background-color:#004085;border-color:#004085}.itsm-btn-secondary{background-color:#6c757d;border-color:#6c757d;color:#fff}.itsm-btn-secondary:hover:not(:disabled){background-color:#5a6268;border-color:#545b62}.itsm-btn-secondary:focus{box-shadow:0 0 0 .2rem hsla(208,7%,46%,.5);outline:0 none;outline-offset:0}.itsm-btn-secondary:active:not(:disabled){background-color:#545b62;border-color:#4e555b}.itsm-file-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.itsm-file-item{align-items:center;background-color:#f8f9fa;border-radius:4px;display:flex;font-size:.875rem;justify-content:space-between;padding:.5rem}.itsm-file-name{color:#495057;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.itsm-file-size{color:#6c757d;margin-left:.5rem}.itsm-message{border-radius:4px;box-shadow:0 4px 6px rgba(0,0,0,.1);font-family:inherit;font-size:.875rem;max-width:500px;min-width:300px;padding:1rem 1.5rem;position:fixed;right:20px;top:20px;transform:translateX(400px);transition:transform .3s ease;z-index:10000}.itsm-message.itsm-message-show{transform:translateX(0)}.itsm-message-success{background-color:#d4edda;border:1px solid #c3e6cb;color:#155724}.itsm-message-error{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.itsm-message-info{background-color:#d1ecf1;border:1px solid #bee5eb;color:#0c5460}@media (max-width:768px){.itsm-modal-container{max-height:95vh;max-width:95%}.itsm-form-row{flex-direction:column}.itsm-form-group-half{flex:none}.itsm-modal-content,.itsm-modal-footer,.itsm-modal-header{padding:1rem}}
+.itsm-widget-button{align-items:center;background-color:#fff;border:3px solid transparent;border-radius:50%;cursor:pointer;display:flex;justify-content:center;overflow:visible;padding:4px;position:fixed;transition:transform .3s ease,box-shadow .3s ease;z-index:9998}.itsm-widget-button:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:scale(1.1)}.itsm-position-bottom-right{bottom:24px;right:24px}.itsm-position-bottom-left{bottom:24px;left:24px}.itsm-widget-icon{align-items:center;background-color:#fff;border-radius:50%;color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:18px;font-weight:700;height:48px;justify-content:center;overflow:hidden;padding:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:48px}.itsm-widget-icon-img{filter:brightness(0) saturate(100%) invert(27%) sepia(78%) saturate(1250%) hue-rotate(197deg) brightness(96%) contrast(95%);height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.itsm-modal-overlay{align-items:center;background-color:rgba(0,0,0,.5);bottom:0;display:none;justify-content:center;left:0;opacity:0;padding:16px;position:fixed;right:0;top:0;transition:opacity .3s ease;z-index:9999}.itsm-modal-overlay.itsm-modal-active{display:flex;opacity:1}.itsm-modal-container{background:#fff;border-radius:6px;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;max-height:90vh;max-width:50vw;transform:scale(.9);transition:transform .3s ease;width:100%}.itsm-modal-overlay.itsm-modal-active .itsm-modal-container{transform:scale(1)}.itsm-modal-header{align-items:center;background-color:#fff;border-bottom:1px solid #e9ecef;border-radius:6px 6px 0 0;display:flex;flex-shrink:0;justify-content:space-between;padding:1.5rem}.itsm-modal-title{color:#212529;flex:1;font-size:1.5rem;font-weight:600;margin:0}.itsm-modal-header-icons{align-items:center;display:flex;gap:.5rem}.itsm-modal-close{align-items:center;background:transparent;border:none;border-radius:50%;color:#6c757d;cursor:pointer;display:flex;font-size:1.5rem;height:2rem;justify-content:center;line-height:1;padding:.5rem;transition:background-color .2s ease,color .2s ease;width:2rem}.itsm-modal-close:hover{background-color:#e9ecef;color:#212529}.itsm-modal-close span{font-size:1.5rem;line-height:1}.itsm-modal-content{flex:1;overflow-y:auto;padding:1.5rem}.itsm-modal-footer{background-color:#fff;border-radius:0 0 6px 6px;border-top:1px solid #e9ecef;display:flex;flex-shrink:0;gap:.5rem;justify-content:flex-end;padding:1rem 1.5rem}.itsm-form{flex-direction:column}.itsm-form,.itsm-form-row{display:flex;gap:1rem}.itsm-form-group{display:flex;flex-direction:column;gap:.5rem}.itsm-form-group-half{flex:1}.itsm-form-group label{color:#495057;display:block;font-size:.875rem;font-weight:500;margin-bottom:.25rem}.itsm-required{color:#dc3545;margin-left:2px}.itsm-input{background-color:#fff;border:1px solid #ced4da;border-radius:4px;box-sizing:border-box;color:#495057;font-family:inherit;font-size:1rem;line-height:1.5;padding:.5rem .75rem;transition:background-color .2s,border-color .2s,box-shadow .2s;width:100%}.itsm-input:hover{border-color:#adb5bd}.itsm-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);outline:0 none;outline-offset:0}.itsm-input:disabled{background-color:#e9ecef;cursor:not-allowed;opacity:1}.itsm-textarea{background-color:#fff;border:1px solid #ced4da;border-radius:4px;box-sizing:border-box;color:#495057;font-family:inherit;font-size:1rem;line-height:1.5;min-height:100px;padding:.5rem .75rem;resize:vertical;transition:background-color .2s,border-color .2s,box-shadow .2s;width:100%}.itsm-textarea:hover{border-color:#adb5bd}.itsm-textarea:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);outline:0 none;outline-offset:0}.itsm-textarea:disabled{background-color:#e9ecef;cursor:not-allowed;opacity:1}.itsm-editor-container{background-color:#fff;border:1px solid #ced4da;border-radius:4px;transition:border-color .2s,box-shadow .2s}.itsm-editor-container:focus-within{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.itsm-editor-toolbar{align-items:center;background-color:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex;flex-wrap:wrap;gap:.25rem;padding:.5rem}.itsm-editor-btn{align-items:center;background-color:#fff;border:1px solid #ced4da;border-radius:3px;color:#495057;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;height:2rem;justify-content:center;min-width:2rem;padding:.25rem .5rem;transition:background-color .2s,border-color .2s}.itsm-editor-btn:hover{background-color:#e9ecef;border-color:#adb5bd}.itsm-editor-btn:active{background-color:#dee2e6}.itsm-editor-separator{background-color:#ced4da;height:1.5rem;margin:0 .25rem;width:1px}.itsm-editor-file-btn{align-items:center;background-color:#fff;border:1px solid #ced4da;border-radius:3px;color:#495057;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;justify-content:center;margin-left:auto;padding:.25rem .5rem;transition:background-color .2s,border-color .2s}.itsm-editor-file-btn:hover{background-color:#e9ecef;border-color:#adb5bd}.itsm-editor-content{color:#495057;font-family:inherit;font-size:1rem;line-height:1.5;max-height:400px;min-height:150px;outline:none;overflow-y:auto;padding:.75rem}.itsm-editor-content:empty:before{color:#6c757d;content:attr(data-placeholder);pointer-events:none}.itsm-editor-content:focus:empty:before{content:""}.itsm-editor-content img{height:auto;margin:.5rem 0;max-width:100%}.itsm-editor-content ol,.itsm-editor-content ul{margin:.5rem 0;padding-left:1.5rem}.itsm-editor-content p{margin:.5rem 0}.itsm-editor-content p:first-child{margin-top:0}.itsm-editor-content p:last-child{margin-bottom:0}.itsm-filter-input{background-color:#fff;border:1px solid #ced4da;border-bottom:none;border-radius:4px 4px 0 0;box-sizing:border-box;color:#495057;font-family:inherit;font-size:.875rem;line-height:1.5;margin-bottom:0;padding:.5rem .75rem;transition:background-color .2s,border-color .2s,box-shadow .2s;width:100%}.itsm-filter-input:hover{border-color:#adb5bd}.itsm-filter-input:focus{border-color:#007bff #007bff #ced4da;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);outline:0 none;outline-offset:0}.itsm-filter-input:disabled{background-color:#e9ecef;cursor:not-allowed;opacity:1}.itsm-select{background-color:#fff;border:1px solid #ced4da;border-radius:4px;box-sizing:border-box;color:#495057;cursor:pointer;font-family:inherit;font-size:1rem;line-height:1.5;padding:.5rem .75rem;transition:background-color .2s,border-color .2s,box-shadow .2s;width:100%}.itsm-form-group:has(.itsm-filter-input) .itsm-select{border-radius:0 0 4px 4px;border-top:none}.itsm-select:hover{border-color:#adb5bd}.itsm-select:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);outline:0 none;outline-offset:0}.itsm-select:disabled{background-color:#e9ecef;cursor:not-allowed;opacity:.6}.itsm-custom-select{position:relative;width:100%}.itsm-select-display{align-items:center;background-color:#fff;border:1px solid #ced4da;border-radius:4px;box-sizing:border-box;color:#495057;cursor:pointer;display:flex;font-family:inherit;font-size:1rem;justify-content:space-between;line-height:1.5;padding:.5rem .75rem;transition:background-color .2s,border-color .2s,box-shadow .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.itsm-select-display:hover:not(.disabled){border-color:#adb5bd}.itsm-select-display:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);outline:0 none;outline-offset:0}.itsm-select-display.disabled{background-color:#e9ecef;cursor:not-allowed;opacity:.6}.itsm-select-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.itsm-select-arrow{color:#6c757d;font-size:.75rem;margin-left:.5rem;transition:transform .2s}.itsm-custom-select[data-disabled=true] .itsm-select-arrow{opacity:.5}.itsm-select-dropdown{background-color:#fff;border:1px solid #ced4da;border-radius:4px;box-shadow:0 4px 6px rgba(0,0,0,.1);display:none;flex-direction:column;left:0;margin-top:.25rem;max-height:300px;overflow:hidden;position:absolute;right:0;top:100%;z-index:1000}.itsm-select-dropdown.open{display:flex}.itsm-select-filter{background-color:#fff;border:none;border-bottom:1px solid #e9ecef;box-sizing:border-box;color:#495057;font-family:inherit;font-size:.875rem;line-height:1.5;outline:none;padding:.5rem .75rem;width:100%}.itsm-select-filter:focus{border-bottom-color:#007bff}.itsm-select-filter:disabled{background-color:#f8f9fa;cursor:not-allowed}.itsm-select-options{max-height:250px;overflow-y:auto;padding:.25rem 0}.itsm-select-option{color:#495057;cursor:pointer;font-size:1rem;line-height:1.5;padding:.5rem .75rem;transition:background-color .15s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.itsm-select-option:hover{background-color:#f8f9fa}.itsm-select-option:active{background-color:#e9ecef}.itsm-select-option[style*="display: none"]{display:none!important}.itsm-btn{align-items:center;border:1px solid transparent;border-radius:4px;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:400;justify-content:center;line-height:1.5;overflow:hidden;padding:.5rem 1rem;position:relative;text-align:center;transition:background-color .2s,border-color .2s,box-shadow .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.itsm-btn:disabled{cursor:default;opacity:.6}.itsm-btn-text{line-height:inherit}.itsm-btn-primary{background-color:#007bff;border-color:#007bff;color:#fff}.itsm-btn-primary:hover:not(:disabled){background-color:#0056b3;border-color:#0056b3}.itsm-btn-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5);outline:0 none;outline-offset:0}.itsm-btn-primary:active:not(:disabled){background-color:#004085;border-color:#004085}.itsm-btn-secondary{background-color:#6c757d;border-color:#6c757d;color:#fff}.itsm-btn-secondary:hover:not(:disabled){background-color:#5a6268;border-color:#545b62}.itsm-btn-secondary:focus{box-shadow:0 0 0 .2rem hsla(208,7%,46%,.5);outline:0 none;outline-offset:0}.itsm-btn-secondary:active:not(:disabled){background-color:#545b62;border-color:#4e555b}.itsm-file-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.itsm-file-item{align-items:center;background-color:#f8f9fa;border-radius:4px;display:flex;font-size:.875rem;justify-content:space-between;padding:.5rem}.itsm-file-name{color:#495057;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.itsm-file-size{color:#6c757d;margin-left:.5rem}.itsm-message{border-radius:4px;box-shadow:0 4px 6px rgba(0,0,0,.1);font-family:inherit;font-size:.875rem;max-width:500px;min-width:300px;padding:1rem 1.5rem;position:fixed;right:20px;top:20px;transform:translateX(400px);transition:transform .3s ease;z-index:10000}.itsm-message.itsm-message-show{transform:translateX(0)}.itsm-message-success{background-color:#d4edda;border:1px solid #c3e6cb;color:#155724}.itsm-message-error{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.itsm-message-info{background-color:#d1ecf1;border:1px solid #bee5eb;color:#0c5460}@media (max-width:768px){.itsm-modal-container{max-height:95vh;max-width:95%}.itsm-form-row{flex-direction:column}.itsm-form-group-half{flex:none}.itsm-modal-content,.itsm-modal-footer,.itsm-modal-header{padding:1rem}}