cloud-ide-element 1.1.22 → 1.1.24

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.
Files changed (4) hide show
  1. package/fesm2022/cloud-ide-element.mjs +312 -298
  2. package/fesm2022/cloud-ide-element.mjs.map +1 -1
  3. package/index.d.ts +3 -2
  4. package/package.json +1 -1
package/fesm2022/cloud-ide-element.mjs CHANGED
@@ -11161,222 +11161,222 @@ class CideEleFloatingContainerComponent {
11161
11161
  return 'linear-gradient(135deg, var(--cide-theme-primary-color) 0%, var(--tw-blue-400) 100%)';
11162
11162
  }
11163
11163
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11164
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerComponent, isStandalone: true, selector: "cide-ele-floating-container", inputs: { config: "config", isMinimized: "isMinimized", isMaximized: "isMaximized", isVisible: "isVisible", zIndex: "zIndex" }, outputs: { closeEvent: "closeEvent", minimizeEvent: "minimizeEvent", maximizeEvent: "maximizeEvent", clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
11165
- <div
11166
- #container
11167
- class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
11168
- [style.left.px]="isMaximized() ? 20 : position().x"
11169
- [style.top.px]="isMaximized() ? 20 : position().y"
11170
- [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
11171
- [style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
11172
- [style.min-width]="config().minWidth || '300px'"
11173
- [style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
11174
- [style.max-width]="config().maxWidth || '90vw'"
11175
- [style.max-height]="config().maxHeight || '90vh'"
11176
- [style.z-index]="zIndex()"
11177
- [class.tw-cursor-move]="isDragging()"
11178
- [class.tw-select-none]="true"
11179
- (mousedown)="onMouseDown($event)"
11180
- (mousemove)="onMouseMove($event)"
11181
- (mouseup)="onMouseUp($event)"
11182
- (mouseleave)="onMouseUp($event)">
11183
-
11184
- <!-- Header -->
11185
- <div
11186
- class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
11187
- [style.background]="getHeaderBackground()"
11188
- (mousedown)="startDrag($event)"
11189
- (click)="onHeaderClick($event)">
11190
-
11191
- <!-- Title Section -->
11192
- <div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
11193
- @if (config().icon) {
11194
- <cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
11195
- }
11196
- <h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
11197
- @if (isMinimized()) {
11198
- <span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
11199
- }
11200
- </div>
11201
-
11202
- <!-- Action Buttons -->
11203
- <div class="tw-flex tw-items-center tw-space-x-1">
11204
- @if (config().minimizable !== false) {
11205
- <button
11206
- cideEleButton
11207
- variant="ghost"
11208
- size="xs"
11209
- type="button"
11210
- (click)="minimize(); $event.stopPropagation()"
11211
- class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11212
- [title]="isMinimized() ? 'Restore' : 'Minimize'">
11213
- <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
11214
- </button>
11215
- }
11216
- @if (config().maximizable !== false) {
11217
- <button
11218
- cideEleButton
11219
- variant="ghost"
11220
- size="xs"
11221
- type="button"
11222
- (click)="toggleMaximize(); $event.stopPropagation()"
11223
- class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11224
- [title]="isMaximized() ? 'Restore' : 'Maximize'">
11225
- <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
11226
- </button>
11227
- }
11228
- @if (config().closable !== false) {
11229
- <button
11230
- cideEleButton
11231
- variant="ghost"
11232
- size="xs"
11233
- type="button"
11234
- (click)="close(); $event.stopPropagation()"
11235
- class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11236
- title="Close">
11237
- <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
11238
- </button>
11239
- }
11240
- </div>
11241
- </div>
11242
-
11243
- <!-- Content with @defer for performance -->
11244
- @if (!isMinimized()) {
11245
- <div
11246
- class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
11247
- [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
11248
- [style.min-height]="'200px'">
11249
- @defer (when !isMinimized() && isVisible()) {
11250
- <div class="tw-p-0 tw-min-h-full">
11251
- <ng-content></ng-content>
11252
- </div>
11253
- } @placeholder {
11254
- <div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
11255
- <cide-ele-spinner size="sm"></cide-ele-spinner>
11256
- <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
11257
- </div>
11258
- }
11259
- </div>
11260
- }
11261
-
11262
- <!-- Resize Handle (if resizable) -->
11263
- @if (config().resizable !== false) {
11264
- <div
11265
- class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
11266
- (mousedown)="startResize($event)">
11267
- </div>
11268
- }
11269
- </div>
11164
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerComponent, isStandalone: true, selector: "cide-ele-floating-container", inputs: { config: "config", isMinimized: "isMinimized", isMaximized: "isMaximized", isVisible: "isVisible", zIndex: "zIndex" }, outputs: { closeEvent: "closeEvent", minimizeEvent: "minimizeEvent", maximizeEvent: "maximizeEvent", clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
11165
+ <div
11166
+ #container
11167
+ class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
11168
+ [style.left.px]="isMaximized() ? 20 : position().x"
11169
+ [style.top.px]="isMaximized() ? 20 : position().y"
11170
+ [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
11171
+ [style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
11172
+ [style.min-width]="config().minWidth || '300px'"
11173
+ [style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
11174
+ [style.max-width]="config().maxWidth || '90vw'"
11175
+ [style.max-height]="config().maxHeight || '90vh'"
11176
+ [style.z-index]="zIndex()"
11177
+ [class.tw-cursor-move]="isDragging()"
11178
+ [class.tw-select-none]="true"
11179
+ (mousedown)="onMouseDown($event)"
11180
+ (mousemove)="onMouseMove($event)"
11181
+ (mouseup)="onMouseUp($event)"
11182
+ (mouseleave)="onMouseUp($event)">
11183
+
11184
+ <!-- Header -->
11185
+ <div
11186
+ class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
11187
+ [style.background]="getHeaderBackground()"
11188
+ (mousedown)="startDrag($event)"
11189
+ (click)="onHeaderClick($event)">
11190
+
11191
+ <!-- Title Section -->
11192
+ <div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
11193
+ @if (config().icon) {
11194
+ <cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
11195
+ }
11196
+ <h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
11197
+ @if (isMinimized()) {
11198
+ <span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
11199
+ }
11200
+ </div>
11201
+
11202
+ <!-- Action Buttons -->
11203
+ <div class="tw-flex tw-items-center tw-space-x-1">
11204
+ @if (config().minimizable !== false) {
11205
+ <button
11206
+ cideEleButton
11207
+ variant="ghost"
11208
+ size="xs"
11209
+ type="button"
11210
+ (click)="minimize(); $event.stopPropagation()"
11211
+ class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11212
+ [title]="isMinimized() ? 'Restore' : 'Minimize'">
11213
+ <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
11214
+ </button>
11215
+ }
11216
+ @if (config().maximizable !== false) {
11217
+ <button
11218
+ cideEleButton
11219
+ variant="ghost"
11220
+ size="xs"
11221
+ type="button"
11222
+ (click)="toggleMaximize(); $event.stopPropagation()"
11223
+ class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11224
+ [title]="isMaximized() ? 'Restore' : 'Maximize'">
11225
+ <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
11226
+ </button>
11227
+ }
11228
+ @if (config().closable !== false) {
11229
+ <button
11230
+ cideEleButton
11231
+ variant="ghost"
11232
+ size="xs"
11233
+ type="button"
11234
+ (click)="close(); $event.stopPropagation()"
11235
+ class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11236
+ title="Close">
11237
+ <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
11238
+ </button>
11239
+ }
11240
+ </div>
11241
+ </div>
11242
+
11243
+ <!-- Content with @defer for performance -->
11244
+ @if (!isMinimized()) {
11245
+ <div
11246
+ class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
11247
+ [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
11248
+ [style.min-height]="'200px'">
11249
+ @defer (when !isMinimized() && isVisible()) {
11250
+ <div class="tw-p-0 tw-min-h-full">
11251
+ <ng-content></ng-content>
11252
+ </div>
11253
+ } @placeholder {
11254
+ <div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
11255
+ <cide-ele-spinner size="sm"></cide-ele-spinner>
11256
+ <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
11257
+ </div>
11258
+ }
11259
+ </div>
11260
+ }
11261
+
11262
+ <!-- Resize Handle (if resizable) -->
11263
+ @if (config().resizable !== false) {
11264
+ <div
11265
+ class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
11266
+ (mousedown)="startResize($event)">
11267
+ </div>
11268
+ }
11269
+ </div>
11270
11270
  `, isInline: true, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:#f8fafc;border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background-color .2s ease;border:1px solid #e2e8f0}.floating-container-content::-webkit-scrollbar-thumb:hover{background:#94a3b8;border-color:#cbd5e1}.floating-container-content::-webkit-scrollbar-thumb:active{background:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
11271
11271
  }
11272
11272
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, decorators: [{
11273
11273
  type: Component,
11274
- args: [{ selector: 'cide-ele-floating-container', standalone: true, imports: [CommonModule, CideEleButtonComponent, CideIconComponent, CideSpinnerComponent], template: `
11275
- <div
11276
- #container
11277
- class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
11278
- [style.left.px]="isMaximized() ? 20 : position().x"
11279
- [style.top.px]="isMaximized() ? 20 : position().y"
11280
- [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
11281
- [style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
11282
- [style.min-width]="config().minWidth || '300px'"
11283
- [style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
11284
- [style.max-width]="config().maxWidth || '90vw'"
11285
- [style.max-height]="config().maxHeight || '90vh'"
11286
- [style.z-index]="zIndex()"
11287
- [class.tw-cursor-move]="isDragging()"
11288
- [class.tw-select-none]="true"
11289
- (mousedown)="onMouseDown($event)"
11290
- (mousemove)="onMouseMove($event)"
11291
- (mouseup)="onMouseUp($event)"
11292
- (mouseleave)="onMouseUp($event)">
11293
-
11294
- <!-- Header -->
11295
- <div
11296
- class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
11297
- [style.background]="getHeaderBackground()"
11298
- (mousedown)="startDrag($event)"
11299
- (click)="onHeaderClick($event)">
11300
-
11301
- <!-- Title Section -->
11302
- <div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
11303
- @if (config().icon) {
11304
- <cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
11305
- }
11306
- <h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
11307
- @if (isMinimized()) {
11308
- <span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
11309
- }
11310
- </div>
11311
-
11312
- <!-- Action Buttons -->
11313
- <div class="tw-flex tw-items-center tw-space-x-1">
11314
- @if (config().minimizable !== false) {
11315
- <button
11316
- cideEleButton
11317
- variant="ghost"
11318
- size="xs"
11319
- type="button"
11320
- (click)="minimize(); $event.stopPropagation()"
11321
- class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11322
- [title]="isMinimized() ? 'Restore' : 'Minimize'">
11323
- <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
11324
- </button>
11325
- }
11326
- @if (config().maximizable !== false) {
11327
- <button
11328
- cideEleButton
11329
- variant="ghost"
11330
- size="xs"
11331
- type="button"
11332
- (click)="toggleMaximize(); $event.stopPropagation()"
11333
- class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11334
- [title]="isMaximized() ? 'Restore' : 'Maximize'">
11335
- <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
11336
- </button>
11337
- }
11338
- @if (config().closable !== false) {
11339
- <button
11340
- cideEleButton
11341
- variant="ghost"
11342
- size="xs"
11343
- type="button"
11344
- (click)="close(); $event.stopPropagation()"
11345
- class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11346
- title="Close">
11347
- <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
11348
- </button>
11349
- }
11350
- </div>
11351
- </div>
11352
-
11353
- <!-- Content with @defer for performance -->
11354
- @if (!isMinimized()) {
11355
- <div
11356
- class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
11357
- [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
11358
- [style.min-height]="'200px'">
11359
- @defer (when !isMinimized() && isVisible()) {
11360
- <div class="tw-p-0 tw-min-h-full">
11361
- <ng-content></ng-content>
11362
- </div>
11363
- } @placeholder {
11364
- <div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
11365
- <cide-ele-spinner size="sm"></cide-ele-spinner>
11366
- <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
11367
- </div>
11368
- }
11369
- </div>
11370
- }
11371
-
11372
- <!-- Resize Handle (if resizable) -->
11373
- @if (config().resizable !== false) {
11374
- <div
11375
- class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
11376
- (mousedown)="startResize($event)">
11377
- </div>
11378
- }
11379
- </div>
11274
+ args: [{ selector: 'cide-ele-floating-container', standalone: true, imports: [CommonModule, CideEleButtonComponent, CideIconComponent, CideSpinnerComponent], template: `
11275
+ <div
11276
+ #container
11277
+ class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
11278
+ [style.left.px]="isMaximized() ? 20 : position().x"
11279
+ [style.top.px]="isMaximized() ? 20 : position().y"
11280
+ [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
11281
+ [style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
11282
+ [style.min-width]="config().minWidth || '300px'"
11283
+ [style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
11284
+ [style.max-width]="config().maxWidth || '90vw'"
11285
+ [style.max-height]="config().maxHeight || '90vh'"
11286
+ [style.z-index]="zIndex()"
11287
+ [class.tw-cursor-move]="isDragging()"
11288
+ [class.tw-select-none]="true"
11289
+ (mousedown)="onMouseDown($event)"
11290
+ (mousemove)="onMouseMove($event)"
11291
+ (mouseup)="onMouseUp($event)"
11292
+ (mouseleave)="onMouseUp($event)">
11293
+
11294
+ <!-- Header -->
11295
+ <div
11296
+ class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
11297
+ [style.background]="getHeaderBackground()"
11298
+ (mousedown)="startDrag($event)"
11299
+ (click)="onHeaderClick($event)">
11300
+
11301
+ <!-- Title Section -->
11302
+ <div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
11303
+ @if (config().icon) {
11304
+ <cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
11305
+ }
11306
+ <h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
11307
+ @if (isMinimized()) {
11308
+ <span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
11309
+ }
11310
+ </div>
11311
+
11312
+ <!-- Action Buttons -->
11313
+ <div class="tw-flex tw-items-center tw-space-x-1">
11314
+ @if (config().minimizable !== false) {
11315
+ <button
11316
+ cideEleButton
11317
+ variant="ghost"
11318
+ size="xs"
11319
+ type="button"
11320
+ (click)="minimize(); $event.stopPropagation()"
11321
+ class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11322
+ [title]="isMinimized() ? 'Restore' : 'Minimize'">
11323
+ <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
11324
+ </button>
11325
+ }
11326
+ @if (config().maximizable !== false) {
11327
+ <button
11328
+ cideEleButton
11329
+ variant="ghost"
11330
+ size="xs"
11331
+ type="button"
11332
+ (click)="toggleMaximize(); $event.stopPropagation()"
11333
+ class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11334
+ [title]="isMaximized() ? 'Restore' : 'Maximize'">
11335
+ <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
11336
+ </button>
11337
+ }
11338
+ @if (config().closable !== false) {
11339
+ <button
11340
+ cideEleButton
11341
+ variant="ghost"
11342
+ size="xs"
11343
+ type="button"
11344
+ (click)="close(); $event.stopPropagation()"
11345
+ class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
11346
+ title="Close">
11347
+ <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
11348
+ </button>
11349
+ }
11350
+ </div>
11351
+ </div>
11352
+
11353
+ <!-- Content with @defer for performance -->
11354
+ @if (!isMinimized()) {
11355
+ <div
11356
+ class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
11357
+ [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
11358
+ [style.min-height]="'200px'">
11359
+ @defer (when !isMinimized() && isVisible()) {
11360
+ <div class="tw-p-0 tw-min-h-full">
11361
+ <ng-content></ng-content>
11362
+ </div>
11363
+ } @placeholder {
11364
+ <div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
11365
+ <cide-ele-spinner size="sm"></cide-ele-spinner>
11366
+ <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
11367
+ </div>
11368
+ }
11369
+ </div>
11370
+ }
11371
+
11372
+ <!-- Resize Handle (if resizable) -->
11373
+ @if (config().resizable !== false) {
11374
+ <div
11375
+ class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
11376
+ (mousedown)="startResize($event)">
11377
+ </div>
11378
+ }
11379
+ </div>
11380
11380
  `, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:#f8fafc;border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background-color .2s ease;border:1px solid #e2e8f0}.floating-container-content::-webkit-scrollbar-thumb:hover{background:#94a3b8;border-color:#cbd5e1}.floating-container-content::-webkit-scrollbar-thumb:active{background:#64748b}\n"] }]
11381
11381
  }], ctorParameters: () => [], propDecorators: { config: [{
11382
11382
  type: Input
@@ -11406,96 +11406,110 @@ class CideEleFloatingContainerManagerComponent {
11406
11406
  // Computed properties
11407
11407
  visibleContainers = computed(() => this.containerService.visibleContainers(), ...(ngDevMode ? [{ debugName: "visibleContainers" }] : []));
11408
11408
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11409
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerManagerComponent, isStandalone: true, selector: "cide-ele-floating-container-manager", ngImport: i0, template: `
11410
- @for (container of visibleContainers(); track container.id) {
11411
- <cide-ele-floating-container
11412
- [config]="containerService.getConfigSignal(container.config)"
11413
- [isMinimized]="containerService.getMinimizedSignal(container.id)"
11414
- [isMaximized]="containerService.getMaximizedSignal(container.id)"
11415
- [isVisible]="containerService.getVisibleSignal(container.id)"
11416
- [zIndex]="containerService.getZIndexSignal(container.id)"
11417
- (closeEvent)="containerService.onClose($event)"
11418
- (minimizeEvent)="containerService.onMinimize($event)"
11419
- (maximizeEvent)="containerService.onMaximize($event)"
11420
- (clickEvent)="containerService.bringToFront($event)">
11421
-
11422
- <!-- Dynamic content loading with @defer for performance -->
11423
- @defer (when container.isVisible) {
11424
- <div
11425
- cideEleFloatingDynamic
11426
- [componentId]="container.config.componentId || container.config.id"
11427
- [componentConfig]="containerService.getComponentConfig(container.config)"
11428
- [isVisible]="container.isVisible">
11429
- </div>
11430
- } @placeholder {
11431
- <div class="tw-flex tw-items-center tw-justify-center tw-p-4">
11432
- <cide-ele-spinner size="sm"></cide-ele-spinner>
11433
- <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
11434
- </div>
11435
- } @error {
11436
- <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
11437
- <cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
11438
- <p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
11439
- <p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
11440
- <button
11441
- cideEleButton
11442
- variant="outline"
11443
- size="xs"
11444
- (click)="containerService.onClose(container.id)"
11445
- class="tw-mt-2">
11446
- Close
11447
- </button>
11448
- </div>
11449
- }
11450
- </cide-ele-floating-container>
11451
- }
11409
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerManagerComponent, isStandalone: true, selector: "cide-ele-floating-container-manager", ngImport: i0, template: `
11410
+ @for (container of visibleContainers(); track container.id) {
11411
+ @if (container.config.backdrop) {
11412
+ <!-- Modal Backdrop for containers that request it -->
11413
+ <div
11414
+ class="tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-40 tw-backdrop-blur-[2px] tw-transition-opacity"
11415
+ [style.z-index]="(container.zIndex || 2000) - 1">
11416
+ </div>
11417
+ }
11418
+ <cide-ele-floating-container
11419
+ [config]="containerService.getConfigSignal(container.config)"
11420
+ [isMinimized]="containerService.getMinimizedSignal(container.id)"
11421
+ [isMaximized]="containerService.getMaximizedSignal(container.id)"
11422
+ [isVisible]="containerService.getVisibleSignal(container.id)"
11423
+ [zIndex]="containerService.getZIndexSignal(container.id)"
11424
+ (closeEvent)="containerService.onClose($event)"
11425
+ (minimizeEvent)="containerService.onMinimize($event)"
11426
+ (maximizeEvent)="containerService.onMaximize($event)"
11427
+ (clickEvent)="containerService.bringToFront($event)">
11428
+
11429
+ <!-- Dynamic content loading with @defer for performance -->
11430
+ @defer (when container.isVisible) {
11431
+ <div
11432
+ cideEleFloatingDynamic
11433
+ [componentId]="container.config.componentId || container.config.id"
11434
+ [componentConfig]="containerService.getComponentConfig(container.config)"
11435
+ [isVisible]="container.isVisible">
11436
+ </div>
11437
+ } @placeholder {
11438
+ <div class="tw-flex tw-items-center tw-justify-center tw-p-4">
11439
+ <cide-ele-spinner size="sm"></cide-ele-spinner>
11440
+ <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
11441
+ </div>
11442
+ } @error {
11443
+ <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
11444
+ <cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
11445
+ <p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
11446
+ <p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
11447
+ <button
11448
+ cideEleButton
11449
+ variant="outline"
11450
+ size="xs"
11451
+ (click)="containerService.onClose(container.id)"
11452
+ class="tw-mt-2">
11453
+ Close
11454
+ </button>
11455
+ </div>
11456
+ }
11457
+ </cide-ele-floating-container>
11458
+ }
11452
11459
  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleFloatingContainerComponent, selector: "cide-ele-floating-container", inputs: ["config", "isMinimized", "isMaximized", "isVisible", "zIndex"], outputs: ["closeEvent", "minimizeEvent", "maximizeEvent", "clickEvent"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)]] });
11453
11460
  }
11454
11461
  i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerManagerComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)], resolveMetadata: CideEleFloatingContainerDynamicDirective => ({ decorators: [{
11455
11462
  type: Component,
11456
- args: [{ selector: 'cide-ele-floating-container-manager', standalone: true, imports: [CommonModule, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideSpinnerComponent, CideEleButtonComponent, CideIconComponent], template: `
11457
- @for (container of visibleContainers(); track container.id) {
11458
- <cide-ele-floating-container
11459
- [config]="containerService.getConfigSignal(container.config)"
11460
- [isMinimized]="containerService.getMinimizedSignal(container.id)"
11461
- [isMaximized]="containerService.getMaximizedSignal(container.id)"
11462
- [isVisible]="containerService.getVisibleSignal(container.id)"
11463
- [zIndex]="containerService.getZIndexSignal(container.id)"
11464
- (closeEvent)="containerService.onClose($event)"
11465
- (minimizeEvent)="containerService.onMinimize($event)"
11466
- (maximizeEvent)="containerService.onMaximize($event)"
11467
- (clickEvent)="containerService.bringToFront($event)">
11468
-
11469
- <!-- Dynamic content loading with @defer for performance -->
11470
- @defer (when container.isVisible) {
11471
- <div
11472
- cideEleFloatingDynamic
11473
- [componentId]="container.config.componentId || container.config.id"
11474
- [componentConfig]="containerService.getComponentConfig(container.config)"
11475
- [isVisible]="container.isVisible">
11476
- </div>
11477
- } @placeholder {
11478
- <div class="tw-flex tw-items-center tw-justify-center tw-p-4">
11479
- <cide-ele-spinner size="sm"></cide-ele-spinner>
11480
- <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
11481
- </div>
11482
- } @error {
11483
- <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
11484
- <cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
11485
- <p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
11486
- <p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
11487
- <button
11488
- cideEleButton
11489
- variant="outline"
11490
- size="xs"
11491
- (click)="containerService.onClose(container.id)"
11492
- class="tw-mt-2">
11493
- Close
11494
- </button>
11495
- </div>
11496
- }
11497
- </cide-ele-floating-container>
11498
- }
11463
+ args: [{ selector: 'cide-ele-floating-container-manager', standalone: true, imports: [CommonModule, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideSpinnerComponent, CideEleButtonComponent, CideIconComponent], template: `
11464
+ @for (container of visibleContainers(); track container.id) {
11465
+ @if (container.config.backdrop) {
11466
+ <!-- Modal Backdrop for containers that request it -->
11467
+ <div
11468
+ class="tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-40 tw-backdrop-blur-[2px] tw-transition-opacity"
11469
+ [style.z-index]="(container.zIndex || 2000) - 1">
11470
+ </div>
11471
+ }
11472
+ <cide-ele-floating-container
11473
+ [config]="containerService.getConfigSignal(container.config)"
11474
+ [isMinimized]="containerService.getMinimizedSignal(container.id)"
11475
+ [isMaximized]="containerService.getMaximizedSignal(container.id)"
11476
+ [isVisible]="containerService.getVisibleSignal(container.id)"
11477
+ [zIndex]="containerService.getZIndexSignal(container.id)"
11478
+ (closeEvent)="containerService.onClose($event)"
11479
+ (minimizeEvent)="containerService.onMinimize($event)"
11480
+ (maximizeEvent)="containerService.onMaximize($event)"
11481
+ (clickEvent)="containerService.bringToFront($event)">
11482
+
11483
+ <!-- Dynamic content loading with @defer for performance -->
11484
+ @defer (when container.isVisible) {
11485
+ <div
11486
+ cideEleFloatingDynamic
11487
+ [componentId]="container.config.componentId || container.config.id"
11488
+ [componentConfig]="containerService.getComponentConfig(container.config)"
11489
+ [isVisible]="container.isVisible">
11490
+ </div>
11491
+ } @placeholder {
11492
+ <div class="tw-flex tw-items-center tw-justify-center tw-p-4">
11493
+ <cide-ele-spinner size="sm"></cide-ele-spinner>
11494
+ <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
11495
+ </div>
11496
+ } @error {
11497
+ <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
11498
+ <cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
11499
+ <p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
11500
+ <p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
11501
+ <button
11502
+ cideEleButton
11503
+ variant="outline"
11504
+ size="xs"
11505
+ (click)="containerService.onClose(container.id)"
11506
+ class="tw-mt-2">
11507
+ Close
11508
+ </button>
11509
+ </div>
11510
+ }
11511
+ </cide-ele-floating-container>
11512
+ }
11499
11513
  ` }]
11500
11514
  }], ctorParameters: null, propDecorators: null }) });
11501
11515