cloud-ide-element 1.0.121 → 1.1.0
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/cloud-ide-element.mjs +286 -265
- package/fesm2022/cloud-ide-element.mjs.map +1 -1
- package/index.d.ts +6 -3
- package/package.json +1 -1
|
@@ -1482,12 +1482,12 @@ class CideEleButtonComponent {
|
|
|
1482
1482
|
}
|
|
1483
1483
|
}
|
|
1484
1484
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleButtonComponent, deps: [{ token: CideElementsService }, { token: i2$1.Router }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleButtonComponent, isStandalone: true, selector: "button[cideEleButton], a[cideEleButton]", inputs: { label: "label", variant: "variant", size: "size", type: "type", shape: "shape", elevation: "elevation", disabled: "disabled", id: "id", loading: "loading", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon", customClass: "customClass", tooltip: "tooltip", ariaLabel: "ariaLabel", testId: "testId", routerLink: "routerLink", routerExtras: "routerExtras", preventDoubleClick: "preventDoubleClick", animated: "animated" }, outputs: { btnClick: "btnClick", doubleClick: "doubleClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cide-button-disabled": "disabled || loading", "attr.disabled": "(disabled || loading) ? true : null", "class.primary": "variant === \"primary\"", "class.secondary": "variant === \"secondary\"", "class.outline": "variant === \"outline\"", "class.text": "variant === \"text\"", "class.link": "variant === \"link\"", "class.success": "variant === \"success\"", "class.danger": "variant === \"danger\"", "class.warning": "variant === \"warning\"", "class.info": "variant === \"info\"", "class.xs": "size === \"xs\"", "class.sm": "size === \"sm\"", "class.md": "size === \"md\"", "class.lg": "size === \"lg\"", "class.xl": "size === \"xl\"", "class.rounded": "shape === \"rounded\"", "class.pill": "shape === \"pill\"", "class.square": "shape === \"square\"", "class.elevation-none": "elevation === \"none\"", "class.elevation-low": "elevation === \"low\"", "class.elevation-medium": "elevation === \"medium\"", "class.elevation-high": "elevation === \"high\"", "attr.type": "type", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "disabled || loading", "attr.data-testid": "testId", "attr.title": "tooltip", "class": "customClass" }, classAttribute: "cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-
|
|
1485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleButtonComponent, isStandalone: true, selector: "button[cideEleButton], a[cideEleButton]", inputs: { label: "label", variant: "variant", size: "size", type: "type", shape: "shape", elevation: "elevation", disabled: "disabled", id: "id", loading: "loading", fullWidth: "fullWidth", leftIcon: "leftIcon", rightIcon: "rightIcon", customClass: "customClass", tooltip: "tooltip", ariaLabel: "ariaLabel", testId: "testId", routerLink: "routerLink", routerExtras: "routerExtras", preventDoubleClick: "preventDoubleClick", animated: "animated" }, outputs: { btnClick: "btnClick", doubleClick: "doubleClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cide-button-disabled": "disabled || loading", "attr.disabled": "(disabled || loading) ? true : null", "class.primary": "variant === \"primary\"", "class.secondary": "variant === \"secondary\"", "class.outline": "variant === \"outline\"", "class.text": "variant === \"text\"", "class.link": "variant === \"link\"", "class.success": "variant === \"success\"", "class.danger": "variant === \"danger\"", "class.warning": "variant === \"warning\"", "class.info": "variant === \"info\"", "class.xs": "size === \"xs\"", "class.sm": "size === \"sm\"", "class.md": "size === \"md\"", "class.lg": "size === \"lg\"", "class.xl": "size === \"xl\"", "class.rounded": "shape === \"rounded\"", "class.pill": "shape === \"pill\"", "class.square": "shape === \"square\"", "class.elevation-none": "elevation === \"none\"", "class.elevation-low": "elevation === \"low\"", "class.elevation-medium": "elevation === \"medium\"", "class.elevation-high": "elevation === \"high\"", "attr.type": "type", "attr.aria-label": "ariaLabel", "attr.aria-disabled": "disabled || loading", "attr.data-testid": "testId", "attr.title": "tooltip", "class": "customClass" }, classAttribute: "cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-flex tw-items-center tw-justify-center" }, usesOnChanges: true, ngImport: i0, template: "<!-- Button content container -->\r\n<div class=\"tw-flex tw-items-center tw-justify-center cide-ele-btn-content tw-w-full\">\r\n <!-- Left icon -->\r\n @if (leftIcon) {\r\n <span class=\"tw-icon-container tw-mr-2\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{leftIcon}}</i>\r\n </span>\r\n }\r\n \r\n <!-- Loading spinner -->\r\n @if (loading) {\r\n <cide-ele-spinner\r\n class=\"tw-inline-block tw-my-1 tw-mr-2\" \r\n size=\"xs\"\r\n [ngClass]=\"{'cide-pill-disabled': (disabled || loading)}\">\r\n </cide-ele-spinner>\r\n }\r\n \r\n <!-- Button label or content -->\r\n @if (label) {\r\n <span>{{ label }}</span>\r\n } @else {\r\n <span class=\"tw-flex tw-items-center tw-justify-center\">\r\n <ng-content></ng-content>\r\n </span>\r\n }\r\n \r\n <!-- Right icon -->\r\n @if (rightIcon) {\r\n <span class=\"tw-icon-container tw-ml-2\">\r\n <i class=\"tw-text-base material-symbols-outlined\">{{rightIcon}}</i>\r\n </span>\r\n }\r\n \r\n <!-- Spacer for spinner when loading to maintain button width -->\r\n @if (loading) {\r\n <span class=\"tw-w-6 tw-p-1 tw-mr-2\"></span>\r\n }\r\n</div>\r\n", styles: [":host{position:relative;background-color:var(--cide-theme-color-brand-primary, #3b82f6);cursor:pointer;font-family:inherit;font-weight:500;outline:none;overflow:hidden;transition:all .2s ease-in-out;border:none;text-align:center;vertical-align:middle;text-decoration:none;line-height:1.5;letter-spacing:.025em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px;box-shadow:0 0 0 3px #3b82f64d}:host:hover:not(:disabled){background-color:var(--cide-theme-color-brand-primary-hover, #2563eb);transform:translateY(-1px)}:host:active:not(:disabled){transform:translateY(1px)}:host.cide-button-disabled{background-color:var(--cide-button-background-disabled, #9ca3af)!important;cursor:var(--cide-button-cursor-disabled, not-allowed)!important;opacity:.7;pointer-events:none;transform:none!important}:host.xs{font-size:.75rem;padding:.2rem .4rem}:host.sm{font-size:.875rem;padding:.25rem .5rem}:host.md{font-size:1rem;padding:.25rem .75rem}:host.lg{font-size:1.125rem;padding:.75rem 1rem}:host.xl{font-size:1.25rem;padding:1rem 1.5rem}:host.rounded{border-radius:.5rem}:host.pill{border-radius:9999px}:host.square{border-radius:0}:host.elevation-none{box-shadow:none}:host.elevation-low{box-shadow:0 1px 2px #0000000d}:host.elevation-medium{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host.elevation-high{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.ripple-effect{position:absolute;border-radius:50%;background-color:#fff6;transform:scale(0);animation:ripple .6s linear;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}:host{color:#fff}:host.secondary{background-color:var(--cide-theme-secondary-color, #4b5563);color:#fff}:host.secondary:hover:not(:disabled){background-color:var(--cide-theme-secondary-color-hover, #374151)}:host.success{background-color:var(--cide-theme-success-color, #10b981);color:#fff}:host.success:hover:not(:disabled){background-color:var(--cide-theme-success-color-hover, #059669)}:host.danger{background-color:var(--cide-theme-danger-color, #ef4444);color:#fff}:host.danger:hover:not(:disabled){background-color:var(--cide-theme-danger-color-hover, #dc2626)}:host.warning{background-color:var(--cide-theme-warning-color, #f59e0b);color:#fff}:host.warning:hover:not(:disabled){background-color:var(--cide-theme-warning-color-hover, #d97706)}:host.info{background-color:var(--cide-theme-info-color, #3b82f6);color:#fff}:host.info:hover:not(:disabled){background-color:var(--cide-theme-info-color-hover, #2563eb)}:host.outline{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:1px solid var(--cide-theme-color-brand-primary, #3b82f6)}:host.outline:hover:not(:disabled){background-color:#3b82f60d}:host.outline.secondary{color:var(--cide-theme-secondary-color, #4b5563);border-color:var(--cide-theme-secondary-color, #4b5563)}:host.outline.success{color:var(--cide-theme-success-color, #10b981);border-color:var(--cide-theme-success-color, #10b981)}:host.outline.danger{color:var(--cide-theme-danger-color, #ef4444);border-color:var(--cide-theme-danger-color, #ef4444)}:host.outline.warning{color:var(--cide-theme-warning-color, #f59e0b);border-color:var(--cide-theme-warning-color, #f59e0b)}:host.outline.info{color:var(--cide-theme-info-color, #3b82f6);border-color:var(--cide-theme-info-color, #3b82f6)}:host.text{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:none;padding-left:.5rem;padding-right:.5rem}:host.text:hover:not(:disabled){background-color:#3b82f60d;text-decoration:underline}:host.text.secondary{color:var(--cide-theme-secondary-color, #4b5563)}:host.text.success{color:var(--cide-theme-success-color, #10b981)}:host.text.danger{color:var(--cide-theme-danger-color, #ef4444)}:host.text.warning{color:var(--cide-theme-warning-color, #f59e0b)}:host.text.info{color:var(--cide-theme-info-color, #3b82f6)}:host.link{background-color:transparent;color:var(--cide-theme-color-brand-primary, #3b82f6);border:none;text-decoration:underline;padding:0;font-weight:400}:host.link:hover:not(:disabled){color:var(--cide-theme-color-brand-primary-hover, #2563eb);text-decoration:underline}:host.link.secondary{color:var(--cide-theme-secondary-color, #4b5563)}:host.link.success{color:var(--cide-theme-success-color, #10b981)}:host.link.danger{color:var(--cide-theme-danger-color, #ef4444)}:host.link.warning{color:var(--cide-theme-warning-color, #f59e0b)}:host.link.info{color:var(--cide-theme-info-color, #3b82f6)}.tw-icon-container{display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
|
|
1486
1486
|
}
|
|
1487
1487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleButtonComponent, decorators: [{
|
|
1488
1488
|
type: Component,
|
|
1489
1489
|
args: [{ selector: 'button[cideEleButton], a[cideEleButton]', standalone: true, imports: [CommonModule, CideSpinnerComponent], host: {
|
|
1490
|
-
'class': 'cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-
|
|
1490
|
+
'class': 'cide-button tw-rounded-md tw-text-white tw-py-0.5 tw-select-none tw-flex tw-items-center tw-justify-center',
|
|
1491
1491
|
'[class.cide-button-disabled]': 'disabled || loading',
|
|
1492
1492
|
'[attr.disabled]': '(disabled || loading) ? true : null',
|
|
1493
1493
|
'[class.primary]': 'variant === "primary"',
|
|
@@ -3385,7 +3385,7 @@ class CideEleFloatingContainerService {
|
|
|
3385
3385
|
activeComponents = new Map();
|
|
3386
3386
|
constructor(injector) {
|
|
3387
3387
|
this.injector = injector;
|
|
3388
|
-
// Keyboard shortcuts are
|
|
3388
|
+
// Keyboard shortcuts are registered by FloatingContainerShortcutsService independently
|
|
3389
3389
|
}
|
|
3390
3390
|
// Computed properties
|
|
3391
3391
|
visibleContainers = computed(() => Array.from(this.containers().values()).filter(container => container.isVisible), ...(ngDevMode ? [{ debugName: "visibleContainers" }] : []));
|
|
@@ -3449,10 +3449,23 @@ class CideEleFloatingContainerService {
|
|
|
3449
3449
|
bringToFront(containerId) {
|
|
3450
3450
|
const maxZIndex = this.getMaxZIndex();
|
|
3451
3451
|
const newZIndex = maxZIndex + 1;
|
|
3452
|
+
const baseZIndex = 1000;
|
|
3452
3453
|
console.log(`🎯 [FloatingContainer] Bringing container '${containerId}' to front`);
|
|
3453
3454
|
console.log(`🎯 [FloatingContainer] Current max z-index: ${maxZIndex}, new z-index: ${newZIndex}`);
|
|
3454
3455
|
this.containers.update(containers => {
|
|
3455
3456
|
const newContainers = new Map(containers);
|
|
3457
|
+
// First, decrement all other visible containers by 1 (clamped to base)
|
|
3458
|
+
for (const [id, c] of newContainers) {
|
|
3459
|
+
if (c.isVisible && id !== containerId) {
|
|
3460
|
+
const decremented = Math.max(baseZIndex, (c.zIndex || baseZIndex) - 1);
|
|
3461
|
+
if (decremented !== c.zIndex) {
|
|
3462
|
+
c.zIndex = decremented;
|
|
3463
|
+
c.lastAccessed = new Date();
|
|
3464
|
+
newContainers.set(id, c);
|
|
3465
|
+
}
|
|
3466
|
+
}
|
|
3467
|
+
}
|
|
3468
|
+
// Then set the focused container to max + 1
|
|
3456
3469
|
const container = newContainers.get(containerId);
|
|
3457
3470
|
if (container) {
|
|
3458
3471
|
const oldZIndex = container.zIndex;
|
|
@@ -4988,6 +5001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
4988
5001
|
class CideEleFloatingFileUploaderComponent {
|
|
4989
5002
|
destroyRef = inject(DestroyRef);
|
|
4990
5003
|
fileManagerService = inject(CideEleFileManagerService);
|
|
5004
|
+
fileInputRef;
|
|
4991
5005
|
// Input data from floating container
|
|
4992
5006
|
data = {};
|
|
4993
5007
|
// Signals for reactive state (simplified for floating container)
|
|
@@ -5383,10 +5397,8 @@ class CideEleFloatingFileUploaderComponent {
|
|
|
5383
5397
|
* Trigger file input click
|
|
5384
5398
|
*/
|
|
5385
5399
|
triggerFileInput() {
|
|
5386
|
-
|
|
5387
|
-
|
|
5388
|
-
if (fileInput) {
|
|
5389
|
-
fileInput.click();
|
|
5400
|
+
if (this.fileInputRef?.nativeElement) {
|
|
5401
|
+
this.fileInputRef.nativeElement.click();
|
|
5390
5402
|
}
|
|
5391
5403
|
}
|
|
5392
5404
|
/**
|
|
@@ -5419,15 +5431,18 @@ class CideEleFloatingFileUploaderComponent {
|
|
|
5419
5431
|
});
|
|
5420
5432
|
}
|
|
5421
5433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5422
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", inputs: { data: "data" }, ngImport: i0, template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-
|
|
5434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", inputs: { data: "data" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden\">\n <!-- Content starts directly - no header needed since floating container provides it -->\n\n <!-- Content -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-pb-4\">\n \n <!-- Drag and Drop Zone -->\n <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \n [class.tw-border-blue-500]=\"isDragOver()\"\n [class.tw-bg-blue-100]=\"isDragOver()\"\n [class.tw-scale-105]=\"isDragOver()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\" \n (drop)=\"onDrop($event)\" \n (click)=\"triggerFileInput()\">\n \n <!-- Hidden file input -->\n <input #fileInput \n type=\"file\" \n [multiple]=\"data.multiple !== false\" \n [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \n (change)=\"onFileInputChange($event)\" \n class=\"tw-hidden\">\n \n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \n [class.tw-text-blue-500]=\"isDragOver()\"\n size=\"sm\">cloud_upload</cide-ele-icon>\n \n <div>\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\n {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n </div>\n @if (data.description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\n }\n </div>\n </div>\n </div>\n \n <!-- Upload Queue - Show files from service state -->\n @if (allFilesForGroup().length > 0) {\n <div class=\"tw-space-y-2\">\n <!-- Show all files from service state -->\n @for (file of allFilesForGroup(); track file.fileId) {\n <div class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 tw-bg-white tw-border tw-border-gray-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\n [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\n [class.tw-bg-green-50]=\"file.stage === 'complete'\"\n [class.tw-bg-red-50]=\"file.stage === 'error'\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\n <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n <div class=\"tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\n <div class=\"tw-text-xs\">\n @switch (file.stage) {\n @case ('pending') {\n <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\n }\n @case ('reading') {\n <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\n }\n @case ('uploading') {\n <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\n }\n @case ('complete') {\n <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\n }\n @case ('error') {\n <span class=\"tw-text-red-600 tw-font-medium\">Failed</span>\n }\n }\n </div>\n </div>\n </div>\n\n <!-- Progress Bar (only for uploading files) -->\n @if (file.stage === 'uploading' && file.percentage !== undefined) {\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\n <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\n <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\n </div>\n <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\n </div>\n }\n\n <!-- Actions -->\n <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n @switch (file.stage) {\n @case ('pending') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('reading') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('uploading') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('complete') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\n <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n </button>\n }\n @case ('error') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \n title=\"Retry\">\n <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n </button>\n }\n }\n </div>\n </div>\n }\n </div>\n } @else {\n <!-- No uploads message when manually opened -->\n <div class=\"tw-py-8 tw-text-center tw-text-gray-500\">\n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\n <div>\n <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\n <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Status summary - integrated into content -->\n @if (hasActiveUploads()) {\n <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\n <div class=\"tw-flex tw-gap-3 tw-text-xs\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\">\n <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\n <span>{{ getUploadingCount() }} uploading</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\n <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n <span>{{ getCompletedCount() }} completed</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\">\n <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n <span>{{ getFailedCount() }} failed</span>\n </div>\n </div>\n </div>\n }\n</div>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
5423
5435
|
}
|
|
5424
5436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, decorators: [{
|
|
5425
5437
|
type: Component,
|
|
5426
5438
|
args: [{ selector: 'cide-ele-floating-file-uploader', standalone: true, imports: [
|
|
5427
5439
|
CommonModule,
|
|
5428
5440
|
CideIconComponent
|
|
5429
|
-
], template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-
|
|
5430
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
5441
|
+
], template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden\">\n <!-- Content starts directly - no header needed since floating container provides it -->\n\n <!-- Content -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-pb-4\">\n \n <!-- Drag and Drop Zone -->\n <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \n [class.tw-border-blue-500]=\"isDragOver()\"\n [class.tw-bg-blue-100]=\"isDragOver()\"\n [class.tw-scale-105]=\"isDragOver()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\" \n (drop)=\"onDrop($event)\" \n (click)=\"triggerFileInput()\">\n \n <!-- Hidden file input -->\n <input #fileInput \n type=\"file\" \n [multiple]=\"data.multiple !== false\" \n [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \n (change)=\"onFileInputChange($event)\" \n class=\"tw-hidden\">\n \n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \n [class.tw-text-blue-500]=\"isDragOver()\"\n size=\"sm\">cloud_upload</cide-ele-icon>\n \n <div>\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\n {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n </div>\n @if (data.description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\n }\n </div>\n </div>\n </div>\n \n <!-- Upload Queue - Show files from service state -->\n @if (allFilesForGroup().length > 0) {\n <div class=\"tw-space-y-2\">\n <!-- Show all files from service state -->\n @for (file of allFilesForGroup(); track file.fileId) {\n <div class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 tw-bg-white tw-border tw-border-gray-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\n [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\n [class.tw-bg-green-50]=\"file.stage === 'complete'\"\n [class.tw-bg-red-50]=\"file.stage === 'error'\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\n <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n <div class=\"tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\n <div class=\"tw-text-xs\">\n @switch (file.stage) {\n @case ('pending') {\n <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\n }\n @case ('reading') {\n <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\n }\n @case ('uploading') {\n <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\n }\n @case ('complete') {\n <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\n }\n @case ('error') {\n <span class=\"tw-text-red-600 tw-font-medium\">Failed</span>\n }\n }\n </div>\n </div>\n </div>\n\n <!-- Progress Bar (only for uploading files) -->\n @if (file.stage === 'uploading' && file.percentage !== undefined) {\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\n <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\n <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\n </div>\n <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\n </div>\n }\n\n <!-- Actions -->\n <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n @switch (file.stage) {\n @case ('pending') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('reading') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('uploading') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n </button>\n }\n @case ('complete') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\n <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n </button>\n }\n @case ('error') {\n <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \n title=\"Retry\">\n <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n </button>\n }\n }\n </div>\n </div>\n }\n </div>\n } @else {\n <!-- No uploads message when manually opened -->\n <div class=\"tw-py-8 tw-text-center tw-text-gray-500\">\n <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\n <div>\n <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\n <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Status summary - integrated into content -->\n @if (hasActiveUploads()) {\n <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\n <div class=\"tw-flex tw-gap-3 tw-text-xs\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\">\n <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\n <span>{{ getUploadingCount() }} uploading</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\n <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n <span>{{ getCompletedCount() }} completed</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\">\n <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n <span>{{ getFailedCount() }} failed</span>\n </div>\n </div>\n </div>\n }\n</div>\n}" }]
|
|
5442
|
+
}], ctorParameters: () => [], propDecorators: { fileInputRef: [{
|
|
5443
|
+
type: ViewChild,
|
|
5444
|
+
args: ['fileInput']
|
|
5445
|
+
}], data: [{
|
|
5431
5446
|
type: Input
|
|
5432
5447
|
}] } });
|
|
5433
5448
|
|
|
@@ -9878,6 +9893,7 @@ class CideEleFloatingContainerComponent {
|
|
|
9878
9893
|
isMinimized;
|
|
9879
9894
|
isMaximized;
|
|
9880
9895
|
isVisible;
|
|
9896
|
+
zIndex;
|
|
9881
9897
|
closeEvent = new EventEmitter();
|
|
9882
9898
|
minimizeEvent = new EventEmitter();
|
|
9883
9899
|
maximizeEvent = new EventEmitter();
|
|
@@ -10032,10 +10048,10 @@ class CideEleFloatingContainerComponent {
|
|
|
10032
10048
|
return 'linear-gradient(135deg, var(--cide-theme-primary-color) 0%, var(--tw-blue-400) 100%)';
|
|
10033
10049
|
}
|
|
10034
10050
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10035
|
-
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" }, outputs: { closeEvent: "closeEvent", minimizeEvent: "minimizeEvent", maximizeEvent: "maximizeEvent", clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
|
|
10051
|
+
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: `
|
|
10036
10052
|
<div
|
|
10037
10053
|
#container
|
|
10038
|
-
class="tw-fixed tw-
|
|
10054
|
+
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"
|
|
10039
10055
|
[style.left.px]="isMaximized() ? 20 : position().x"
|
|
10040
10056
|
[style.top.px]="isMaximized() ? 20 : position().y"
|
|
10041
10057
|
[style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
|
|
@@ -10044,6 +10060,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10044
10060
|
[style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
|
|
10045
10061
|
[style.max-width]="config().maxWidth || '90vw'"
|
|
10046
10062
|
[style.max-height]="config().maxHeight || '90vh'"
|
|
10063
|
+
[style.z-index]="zIndex?.()"
|
|
10047
10064
|
[class.tw-cursor-move]="isDragging()"
|
|
10048
10065
|
[class.tw-select-none]="true"
|
|
10049
10066
|
(mousedown)="onMouseDown($event)"
|
|
@@ -10117,7 +10134,7 @@ class CideEleFloatingContainerComponent {
|
|
|
10117
10134
|
[style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
|
|
10118
10135
|
[style.min-height]="'200px'">
|
|
10119
10136
|
@defer (when !isMinimized() && isVisible()) {
|
|
10120
|
-
<div class="tw-p-
|
|
10137
|
+
<div class="tw-p-0 tw-min-h-full">
|
|
10121
10138
|
<ng-content></ng-content>
|
|
10122
10139
|
</div>
|
|
10123
10140
|
} @placeholder {
|
|
@@ -10144,7 +10161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10144
10161
|
args: [{ selector: 'cide-ele-floating-container', standalone: true, imports: [CommonModule, CideEleButtonComponent, CideIconComponent, CideSpinnerComponent], template: `
|
|
10145
10162
|
<div
|
|
10146
10163
|
#container
|
|
10147
|
-
class="tw-fixed tw-
|
|
10164
|
+
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"
|
|
10148
10165
|
[style.left.px]="isMaximized() ? 20 : position().x"
|
|
10149
10166
|
[style.top.px]="isMaximized() ? 20 : position().y"
|
|
10150
10167
|
[style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
|
|
@@ -10153,6 +10170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10153
10170
|
[style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
|
|
10154
10171
|
[style.max-width]="config().maxWidth || '90vw'"
|
|
10155
10172
|
[style.max-height]="config().maxHeight || '90vh'"
|
|
10173
|
+
[style.z-index]="zIndex?.()"
|
|
10156
10174
|
[class.tw-cursor-move]="isDragging()"
|
|
10157
10175
|
[class.tw-select-none]="true"
|
|
10158
10176
|
(mousedown)="onMouseDown($event)"
|
|
@@ -10226,7 +10244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10226
10244
|
[style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
|
|
10227
10245
|
[style.min-height]="'200px'">
|
|
10228
10246
|
@defer (when !isMinimized() && isVisible()) {
|
|
10229
|
-
<div class="tw-p-
|
|
10247
|
+
<div class="tw-p-0 tw-min-h-full">
|
|
10230
10248
|
<ng-content></ng-content>
|
|
10231
10249
|
</div>
|
|
10232
10250
|
} @placeholder {
|
|
@@ -10255,6 +10273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10255
10273
|
type: Input
|
|
10256
10274
|
}], isVisible: [{
|
|
10257
10275
|
type: Input
|
|
10276
|
+
}], zIndex: [{
|
|
10277
|
+
type: Input
|
|
10258
10278
|
}], closeEvent: [{
|
|
10259
10279
|
type: Output
|
|
10260
10280
|
}], minimizeEvent: [{
|
|
@@ -10280,7 +10300,7 @@ class CideEleFloatingContainerManagerComponent {
|
|
|
10280
10300
|
[isMinimized]="containerService.getMinimizedSignal(container.id)"
|
|
10281
10301
|
[isMaximized]="containerService.getMaximizedSignal(container.id)"
|
|
10282
10302
|
[isVisible]="containerService.getVisibleSignal(container.id)"
|
|
10283
|
-
[
|
|
10303
|
+
[zIndex]="containerService.getZIndexSignal(container.id)"
|
|
10284
10304
|
(closeEvent)="containerService.onClose($event)"
|
|
10285
10305
|
(minimizeEvent)="containerService.onMinimize($event)"
|
|
10286
10306
|
(maximizeEvent)="containerService.onMaximize($event)"
|
|
@@ -10316,7 +10336,7 @@ class CideEleFloatingContainerManagerComponent {
|
|
|
10316
10336
|
}
|
|
10317
10337
|
</cide-ele-floating-container>
|
|
10318
10338
|
}
|
|
10319
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleFloatingContainerComponent, selector: "cide-ele-floating-container", inputs: ["config", "isMinimized", "isMaximized", "isVisible"], 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)]] });
|
|
10339
|
+
`, 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)]] });
|
|
10320
10340
|
}
|
|
10321
10341
|
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: [{
|
|
10322
10342
|
type: Component,
|
|
@@ -10327,7 +10347,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ng
|
|
|
10327
10347
|
[isMinimized]="containerService.getMinimizedSignal(container.id)"
|
|
10328
10348
|
[isMaximized]="containerService.getMaximizedSignal(container.id)"
|
|
10329
10349
|
[isVisible]="containerService.getVisibleSignal(container.id)"
|
|
10330
|
-
[
|
|
10350
|
+
[zIndex]="containerService.getZIndexSignal(container.id)"
|
|
10331
10351
|
(closeEvent)="containerService.onClose($event)"
|
|
10332
10352
|
(minimizeEvent)="containerService.onMinimize($event)"
|
|
10333
10353
|
(maximizeEvent)="containerService.onMaximize($event)"
|
|
@@ -10366,253 +10386,6 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ng
|
|
|
10366
10386
|
` }]
|
|
10367
10387
|
}], ctorParameters: null, propDecorators: null }) });
|
|
10368
10388
|
|
|
10369
|
-
class CideEleFloatingFeaturesService {
|
|
10370
|
-
containerService = inject(CideEleFloatingContainerService);
|
|
10371
|
-
constructor() {
|
|
10372
|
-
// File uploader is handled by its own dedicated service
|
|
10373
|
-
// Entity rights sharing is handled by its own dedicated service
|
|
10374
|
-
}
|
|
10375
|
-
// Generic method to show any floating feature
|
|
10376
|
-
showFeature(featureId, config) {
|
|
10377
|
-
return this.containerService.show({ ...config, id: featureId });
|
|
10378
|
-
}
|
|
10379
|
-
// Generic method for showing any component dynamically
|
|
10380
|
-
showComponent(containerId, componentId, title, componentType, config = {}) {
|
|
10381
|
-
const containerConfig = {
|
|
10382
|
-
id: containerId,
|
|
10383
|
-
title,
|
|
10384
|
-
icon: 'widgets',
|
|
10385
|
-
width: '400px',
|
|
10386
|
-
height: '500px',
|
|
10387
|
-
minWidth: '300px',
|
|
10388
|
-
minHeight: '200px',
|
|
10389
|
-
resizable: true,
|
|
10390
|
-
draggable: true,
|
|
10391
|
-
closable: true,
|
|
10392
|
-
minimizable: true,
|
|
10393
|
-
maximizable: true,
|
|
10394
|
-
componentId,
|
|
10395
|
-
...config
|
|
10396
|
-
};
|
|
10397
|
-
// Register component if provided
|
|
10398
|
-
if (componentType) {
|
|
10399
|
-
this.registerComponent(componentId, componentType);
|
|
10400
|
-
}
|
|
10401
|
-
return this.containerService.show(containerConfig);
|
|
10402
|
-
}
|
|
10403
|
-
/**
|
|
10404
|
-
* Generic method for showing any component with input data
|
|
10405
|
-
*
|
|
10406
|
-
* @example
|
|
10407
|
-
* // Pass data to a component
|
|
10408
|
-
* this.floatingFeaturesService.showComponentWithData(
|
|
10409
|
-
* 'my-component-container',
|
|
10410
|
-
* 'my-component',
|
|
10411
|
-
* 'My Component Title',
|
|
10412
|
-
* {
|
|
10413
|
-
* data: {
|
|
10414
|
-
* userId: '123',
|
|
10415
|
-
* userName: 'John Doe',
|
|
10416
|
-
* settings: { theme: 'dark' }
|
|
10417
|
-
* },
|
|
10418
|
-
* outputs: {
|
|
10419
|
-
* onSave: (data) => console.log('Save event:', data),
|
|
10420
|
-
* onCancel: () => console.log('Cancel clicked')
|
|
10421
|
-
* }
|
|
10422
|
-
* },
|
|
10423
|
-
* {
|
|
10424
|
-
* width: '600px',
|
|
10425
|
-
* height: '400px',
|
|
10426
|
-
* icon: 'settings'
|
|
10427
|
-
* }
|
|
10428
|
-
* );
|
|
10429
|
-
*/
|
|
10430
|
-
showComponentWithData(containerId, componentId, title, componentData, containerConfig = {}) {
|
|
10431
|
-
const config = {
|
|
10432
|
-
id: containerId,
|
|
10433
|
-
title,
|
|
10434
|
-
icon: 'widgets',
|
|
10435
|
-
width: '400px',
|
|
10436
|
-
height: '500px',
|
|
10437
|
-
minWidth: '300px',
|
|
10438
|
-
minHeight: '200px',
|
|
10439
|
-
resizable: true,
|
|
10440
|
-
draggable: true,
|
|
10441
|
-
closable: true,
|
|
10442
|
-
minimizable: true,
|
|
10443
|
-
maximizable: true,
|
|
10444
|
-
componentId,
|
|
10445
|
-
componentConfig: {
|
|
10446
|
-
inputs: componentData.data,
|
|
10447
|
-
outputs: componentData.outputs || {}
|
|
10448
|
-
},
|
|
10449
|
-
...containerConfig
|
|
10450
|
-
};
|
|
10451
|
-
return this.containerService.show(config);
|
|
10452
|
-
}
|
|
10453
|
-
// Show multiple instances of the same component
|
|
10454
|
-
showMultipleInstances(componentId, titlePrefix, count, config = {}) {
|
|
10455
|
-
const containerIds = [];
|
|
10456
|
-
for (let i = 1; i <= count; i++) {
|
|
10457
|
-
const containerId = `${componentId}-instance-${i}-${Date.now()}`;
|
|
10458
|
-
const title = `${titlePrefix} ${i}`;
|
|
10459
|
-
const containerConfig = {
|
|
10460
|
-
id: containerId,
|
|
10461
|
-
title,
|
|
10462
|
-
icon: 'widgets',
|
|
10463
|
-
width: '400px',
|
|
10464
|
-
height: '500px',
|
|
10465
|
-
minWidth: '300px',
|
|
10466
|
-
minHeight: '200px',
|
|
10467
|
-
resizable: true,
|
|
10468
|
-
draggable: true,
|
|
10469
|
-
closable: true,
|
|
10470
|
-
minimizable: true,
|
|
10471
|
-
maximizable: true,
|
|
10472
|
-
componentId,
|
|
10473
|
-
...config
|
|
10474
|
-
};
|
|
10475
|
-
const id = this.containerService.show(containerConfig);
|
|
10476
|
-
containerIds.push(id);
|
|
10477
|
-
}
|
|
10478
|
-
return containerIds;
|
|
10479
|
-
}
|
|
10480
|
-
// Get all instances of a component type
|
|
10481
|
-
getInstancesOfType(componentType) {
|
|
10482
|
-
return this.containerService.getInstancesByComponentType(componentType);
|
|
10483
|
-
}
|
|
10484
|
-
// Get active instances of a component type
|
|
10485
|
-
getActiveInstancesOfType(componentType) {
|
|
10486
|
-
return this.containerService.getActiveInstancesByComponentType(componentType);
|
|
10487
|
-
}
|
|
10488
|
-
// Close all instances of a component type
|
|
10489
|
-
closeAllInstancesOfType(componentType) {
|
|
10490
|
-
this.containerService.closeAllInstancesOfType(componentType);
|
|
10491
|
-
}
|
|
10492
|
-
// Minimize all instances of a component type
|
|
10493
|
-
minimizeAllInstancesOfType(componentType) {
|
|
10494
|
-
this.containerService.minimizeAllInstancesOfType(componentType);
|
|
10495
|
-
}
|
|
10496
|
-
// Get instance count for a component type
|
|
10497
|
-
getInstanceCount(componentType) {
|
|
10498
|
-
return this.containerService.getInstanceCount(componentType);
|
|
10499
|
-
}
|
|
10500
|
-
// Get active instance count for a component type
|
|
10501
|
-
getActiveInstanceCount(componentType) {
|
|
10502
|
-
return this.containerService.getActiveInstanceCount(componentType);
|
|
10503
|
-
}
|
|
10504
|
-
// Register a component for dynamic loading
|
|
10505
|
-
registerComponent(componentId, componentType) {
|
|
10506
|
-
this.containerService.registerComponent(componentId, componentType);
|
|
10507
|
-
}
|
|
10508
|
-
// Unregister a component
|
|
10509
|
-
unregisterComponent(componentId) {
|
|
10510
|
-
this.containerService.unregisterComponent(componentId);
|
|
10511
|
-
}
|
|
10512
|
-
hideFeature(featureId) {
|
|
10513
|
-
this.containerService.hide(featureId);
|
|
10514
|
-
}
|
|
10515
|
-
// Utility methods
|
|
10516
|
-
bringToFront(featureId) {
|
|
10517
|
-
this.containerService.bringToFront(featureId);
|
|
10518
|
-
}
|
|
10519
|
-
minimize(featureId) {
|
|
10520
|
-
this.containerService.minimize(featureId);
|
|
10521
|
-
}
|
|
10522
|
-
maximize(featureId) {
|
|
10523
|
-
this.containerService.maximize(featureId);
|
|
10524
|
-
}
|
|
10525
|
-
isVisible(featureId) {
|
|
10526
|
-
return this.containerService.isVisible(featureId);
|
|
10527
|
-
}
|
|
10528
|
-
hideAll() {
|
|
10529
|
-
this.containerService.hideAll();
|
|
10530
|
-
}
|
|
10531
|
-
minimizeAll() {
|
|
10532
|
-
this.containerService.minimizeAll();
|
|
10533
|
-
}
|
|
10534
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
10535
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, providedIn: 'root' });
|
|
10536
|
-
}
|
|
10537
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, decorators: [{
|
|
10538
|
-
type: Injectable,
|
|
10539
|
-
args: [{
|
|
10540
|
-
providedIn: 'root'
|
|
10541
|
-
}]
|
|
10542
|
-
}], ctorParameters: () => [] });
|
|
10543
|
-
|
|
10544
|
-
class CideEleFloatingContainerDynamicDirective {
|
|
10545
|
-
viewContainer;
|
|
10546
|
-
containerService;
|
|
10547
|
-
componentId;
|
|
10548
|
-
componentConfig;
|
|
10549
|
-
isVisible = true;
|
|
10550
|
-
componentRef = null;
|
|
10551
|
-
constructor(viewContainer, containerService) {
|
|
10552
|
-
this.viewContainer = viewContainer;
|
|
10553
|
-
this.containerService = containerService;
|
|
10554
|
-
}
|
|
10555
|
-
ngOnInit() {
|
|
10556
|
-
if (this.isVisible && this.componentId) {
|
|
10557
|
-
this.loadComponent();
|
|
10558
|
-
}
|
|
10559
|
-
}
|
|
10560
|
-
ngOnDestroy() {
|
|
10561
|
-
this.destroyComponent();
|
|
10562
|
-
}
|
|
10563
|
-
ngOnChanges() {
|
|
10564
|
-
if (this.isVisible && this.componentId && !this.componentRef) {
|
|
10565
|
-
this.loadComponent();
|
|
10566
|
-
}
|
|
10567
|
-
else if (!this.isVisible && this.componentRef) {
|
|
10568
|
-
this.destroyComponent();
|
|
10569
|
-
}
|
|
10570
|
-
}
|
|
10571
|
-
loadComponent() {
|
|
10572
|
-
if (this.componentId && this.containerService.isComponentRegistered(this.componentId)) {
|
|
10573
|
-
this.componentRef = this.containerService.loadComponent(this.componentId, this.viewContainer, this.componentConfig);
|
|
10574
|
-
}
|
|
10575
|
-
else {
|
|
10576
|
-
console.warn(`Component '${this.componentId}' is not registered. Available components:`, this.containerService.getRegisteredComponentIds());
|
|
10577
|
-
// Retry after a short delay in case registration is still in progress
|
|
10578
|
-
setTimeout(() => {
|
|
10579
|
-
if (this.containerService.isComponentRegistered(this.componentId)) {
|
|
10580
|
-
this.componentRef = this.containerService.loadComponent(this.componentId, this.viewContainer, this.componentConfig);
|
|
10581
|
-
}
|
|
10582
|
-
else {
|
|
10583
|
-
console.error(`Component '${this.componentId}' still not registered after retry`);
|
|
10584
|
-
}
|
|
10585
|
-
}, 100);
|
|
10586
|
-
}
|
|
10587
|
-
}
|
|
10588
|
-
destroyComponent() {
|
|
10589
|
-
if (this.componentRef) {
|
|
10590
|
-
this.componentRef.destroy();
|
|
10591
|
-
this.componentRef = null;
|
|
10592
|
-
}
|
|
10593
|
-
}
|
|
10594
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerDynamicDirective, deps: [{ token: i0.ViewContainerRef }, { token: CideEleFloatingContainerService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
10595
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: CideEleFloatingContainerDynamicDirective, isStandalone: true, selector: "[cideEleFloatingDynamic]", inputs: { componentId: "componentId", componentConfig: "componentConfig", isVisible: "isVisible" }, usesOnChanges: true, ngImport: i0 });
|
|
10596
|
-
}
|
|
10597
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerDynamicDirective, decorators: [{
|
|
10598
|
-
type: Directive,
|
|
10599
|
-
args: [{
|
|
10600
|
-
selector: '[cideEleFloatingDynamic]',
|
|
10601
|
-
standalone: true
|
|
10602
|
-
}]
|
|
10603
|
-
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: CideEleFloatingContainerService }], propDecorators: { componentId: [{
|
|
10604
|
-
type: Input
|
|
10605
|
-
}], componentConfig: [{
|
|
10606
|
-
type: Input
|
|
10607
|
-
}], isVisible: [{
|
|
10608
|
-
type: Input
|
|
10609
|
-
}] } });
|
|
10610
|
-
|
|
10611
|
-
var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
|
|
10612
|
-
__proto__: null,
|
|
10613
|
-
CideEleFloatingContainerDynamicDirective: CideEleFloatingContainerDynamicDirective
|
|
10614
|
-
});
|
|
10615
|
-
|
|
10616
10389
|
class FloatingContainerShortcutsService {
|
|
10617
10390
|
keyboardShortcutService = inject(KeyboardShortcutService);
|
|
10618
10391
|
containerService = inject(CideEleFloatingContainerService);
|
|
@@ -10898,6 +10671,254 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
10898
10671
|
}]
|
|
10899
10672
|
}], ctorParameters: () => [] });
|
|
10900
10673
|
|
|
10674
|
+
class CideEleFloatingFeaturesService {
|
|
10675
|
+
containerService = inject(CideEleFloatingContainerService);
|
|
10676
|
+
shortcutsService = inject(FloatingContainerShortcutsService);
|
|
10677
|
+
constructor() {
|
|
10678
|
+
// File uploader is handled by its own dedicated service
|
|
10679
|
+
// Entity rights sharing is handled by its own dedicated service
|
|
10680
|
+
}
|
|
10681
|
+
// Generic method to show any floating feature
|
|
10682
|
+
showFeature(featureId, config) {
|
|
10683
|
+
return this.containerService.show({ ...config, id: featureId });
|
|
10684
|
+
}
|
|
10685
|
+
// Generic method for showing any component dynamically
|
|
10686
|
+
showComponent(containerId, componentId, title, componentType, config = {}) {
|
|
10687
|
+
const containerConfig = {
|
|
10688
|
+
id: containerId,
|
|
10689
|
+
title,
|
|
10690
|
+
icon: 'widgets',
|
|
10691
|
+
width: '400px',
|
|
10692
|
+
height: '500px',
|
|
10693
|
+
minWidth: '300px',
|
|
10694
|
+
minHeight: '200px',
|
|
10695
|
+
resizable: true,
|
|
10696
|
+
draggable: true,
|
|
10697
|
+
closable: true,
|
|
10698
|
+
minimizable: true,
|
|
10699
|
+
maximizable: true,
|
|
10700
|
+
componentId,
|
|
10701
|
+
...config
|
|
10702
|
+
};
|
|
10703
|
+
// Register component if provided
|
|
10704
|
+
if (componentType) {
|
|
10705
|
+
this.registerComponent(componentId, componentType);
|
|
10706
|
+
}
|
|
10707
|
+
return this.containerService.show(containerConfig);
|
|
10708
|
+
}
|
|
10709
|
+
/**
|
|
10710
|
+
* Generic method for showing any component with input data
|
|
10711
|
+
*
|
|
10712
|
+
* @example
|
|
10713
|
+
* // Pass data to a component
|
|
10714
|
+
* this.floatingFeaturesService.showComponentWithData(
|
|
10715
|
+
* 'my-component-container',
|
|
10716
|
+
* 'my-component',
|
|
10717
|
+
* 'My Component Title',
|
|
10718
|
+
* {
|
|
10719
|
+
* data: {
|
|
10720
|
+
* userId: '123',
|
|
10721
|
+
* userName: 'John Doe',
|
|
10722
|
+
* settings: { theme: 'dark' }
|
|
10723
|
+
* },
|
|
10724
|
+
* outputs: {
|
|
10725
|
+
* onSave: (data) => console.log('Save event:', data),
|
|
10726
|
+
* onCancel: () => console.log('Cancel clicked')
|
|
10727
|
+
* }
|
|
10728
|
+
* },
|
|
10729
|
+
* {
|
|
10730
|
+
* width: '600px',
|
|
10731
|
+
* height: '400px',
|
|
10732
|
+
* icon: 'settings'
|
|
10733
|
+
* }
|
|
10734
|
+
* );
|
|
10735
|
+
*/
|
|
10736
|
+
showComponentWithData(containerId, componentId, title, componentData, containerConfig = {}) {
|
|
10737
|
+
const config = {
|
|
10738
|
+
id: containerId,
|
|
10739
|
+
title,
|
|
10740
|
+
icon: 'widgets',
|
|
10741
|
+
width: '400px',
|
|
10742
|
+
height: '500px',
|
|
10743
|
+
minWidth: '300px',
|
|
10744
|
+
minHeight: '200px',
|
|
10745
|
+
resizable: true,
|
|
10746
|
+
draggable: true,
|
|
10747
|
+
closable: true,
|
|
10748
|
+
minimizable: true,
|
|
10749
|
+
maximizable: true,
|
|
10750
|
+
componentId,
|
|
10751
|
+
componentConfig: {
|
|
10752
|
+
inputs: componentData.data,
|
|
10753
|
+
outputs: componentData.outputs || {}
|
|
10754
|
+
},
|
|
10755
|
+
...containerConfig
|
|
10756
|
+
};
|
|
10757
|
+
return this.containerService.show(config);
|
|
10758
|
+
}
|
|
10759
|
+
// Show multiple instances of the same component
|
|
10760
|
+
showMultipleInstances(componentId, titlePrefix, count, config = {}) {
|
|
10761
|
+
const containerIds = [];
|
|
10762
|
+
for (let i = 1; i <= count; i++) {
|
|
10763
|
+
const containerId = `${componentId}-instance-${i}-${Date.now()}`;
|
|
10764
|
+
const title = `${titlePrefix} ${i}`;
|
|
10765
|
+
const containerConfig = {
|
|
10766
|
+
id: containerId,
|
|
10767
|
+
title,
|
|
10768
|
+
icon: 'widgets',
|
|
10769
|
+
width: '400px',
|
|
10770
|
+
height: '500px',
|
|
10771
|
+
minWidth: '300px',
|
|
10772
|
+
minHeight: '200px',
|
|
10773
|
+
resizable: true,
|
|
10774
|
+
draggable: true,
|
|
10775
|
+
closable: true,
|
|
10776
|
+
minimizable: true,
|
|
10777
|
+
maximizable: true,
|
|
10778
|
+
componentId,
|
|
10779
|
+
...config
|
|
10780
|
+
};
|
|
10781
|
+
const id = this.containerService.show(containerConfig);
|
|
10782
|
+
containerIds.push(id);
|
|
10783
|
+
}
|
|
10784
|
+
return containerIds;
|
|
10785
|
+
}
|
|
10786
|
+
// Get all instances of a component type
|
|
10787
|
+
getInstancesOfType(componentType) {
|
|
10788
|
+
return this.containerService.getInstancesByComponentType(componentType);
|
|
10789
|
+
}
|
|
10790
|
+
// Get active instances of a component type
|
|
10791
|
+
getActiveInstancesOfType(componentType) {
|
|
10792
|
+
return this.containerService.getActiveInstancesByComponentType(componentType);
|
|
10793
|
+
}
|
|
10794
|
+
// Close all instances of a component type
|
|
10795
|
+
closeAllInstancesOfType(componentType) {
|
|
10796
|
+
this.containerService.closeAllInstancesOfType(componentType);
|
|
10797
|
+
}
|
|
10798
|
+
// Minimize all instances of a component type
|
|
10799
|
+
minimizeAllInstancesOfType(componentType) {
|
|
10800
|
+
this.containerService.minimizeAllInstancesOfType(componentType);
|
|
10801
|
+
}
|
|
10802
|
+
// Get instance count for a component type
|
|
10803
|
+
getInstanceCount(componentType) {
|
|
10804
|
+
return this.containerService.getInstanceCount(componentType);
|
|
10805
|
+
}
|
|
10806
|
+
// Get active instance count for a component type
|
|
10807
|
+
getActiveInstanceCount(componentType) {
|
|
10808
|
+
return this.containerService.getActiveInstanceCount(componentType);
|
|
10809
|
+
}
|
|
10810
|
+
// Register a component for dynamic loading
|
|
10811
|
+
registerComponent(componentId, componentType) {
|
|
10812
|
+
this.containerService.registerComponent(componentId, componentType);
|
|
10813
|
+
}
|
|
10814
|
+
// Unregister a component
|
|
10815
|
+
unregisterComponent(componentId) {
|
|
10816
|
+
this.containerService.unregisterComponent(componentId);
|
|
10817
|
+
}
|
|
10818
|
+
hideFeature(featureId) {
|
|
10819
|
+
this.containerService.hide(featureId);
|
|
10820
|
+
}
|
|
10821
|
+
// Utility methods
|
|
10822
|
+
bringToFront(featureId) {
|
|
10823
|
+
this.containerService.bringToFront(featureId);
|
|
10824
|
+
}
|
|
10825
|
+
minimize(featureId) {
|
|
10826
|
+
this.containerService.minimize(featureId);
|
|
10827
|
+
}
|
|
10828
|
+
maximize(featureId) {
|
|
10829
|
+
this.containerService.maximize(featureId);
|
|
10830
|
+
}
|
|
10831
|
+
isVisible(featureId) {
|
|
10832
|
+
return this.containerService.isVisible(featureId);
|
|
10833
|
+
}
|
|
10834
|
+
hideAll() {
|
|
10835
|
+
this.containerService.hideAll();
|
|
10836
|
+
}
|
|
10837
|
+
minimizeAll() {
|
|
10838
|
+
this.containerService.minimizeAll();
|
|
10839
|
+
}
|
|
10840
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
10841
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, providedIn: 'root' });
|
|
10842
|
+
}
|
|
10843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFeaturesService, decorators: [{
|
|
10844
|
+
type: Injectable,
|
|
10845
|
+
args: [{
|
|
10846
|
+
providedIn: 'root'
|
|
10847
|
+
}]
|
|
10848
|
+
}], ctorParameters: () => [] });
|
|
10849
|
+
|
|
10850
|
+
class CideEleFloatingContainerDynamicDirective {
|
|
10851
|
+
viewContainer;
|
|
10852
|
+
containerService;
|
|
10853
|
+
componentId;
|
|
10854
|
+
componentConfig;
|
|
10855
|
+
isVisible = true;
|
|
10856
|
+
componentRef = null;
|
|
10857
|
+
constructor(viewContainer, containerService) {
|
|
10858
|
+
this.viewContainer = viewContainer;
|
|
10859
|
+
this.containerService = containerService;
|
|
10860
|
+
}
|
|
10861
|
+
ngOnInit() {
|
|
10862
|
+
if (this.isVisible && this.componentId) {
|
|
10863
|
+
this.loadComponent();
|
|
10864
|
+
}
|
|
10865
|
+
}
|
|
10866
|
+
ngOnDestroy() {
|
|
10867
|
+
this.destroyComponent();
|
|
10868
|
+
}
|
|
10869
|
+
ngOnChanges() {
|
|
10870
|
+
if (this.isVisible && this.componentId && !this.componentRef) {
|
|
10871
|
+
this.loadComponent();
|
|
10872
|
+
}
|
|
10873
|
+
else if (!this.isVisible && this.componentRef) {
|
|
10874
|
+
this.destroyComponent();
|
|
10875
|
+
}
|
|
10876
|
+
}
|
|
10877
|
+
loadComponent() {
|
|
10878
|
+
if (this.componentId && this.containerService.isComponentRegistered(this.componentId)) {
|
|
10879
|
+
this.componentRef = this.containerService.loadComponent(this.componentId, this.viewContainer, this.componentConfig);
|
|
10880
|
+
}
|
|
10881
|
+
else {
|
|
10882
|
+
console.warn(`Component '${this.componentId}' is not registered. Available components:`, this.containerService.getRegisteredComponentIds());
|
|
10883
|
+
// Retry after a short delay in case registration is still in progress
|
|
10884
|
+
setTimeout(() => {
|
|
10885
|
+
if (this.containerService.isComponentRegistered(this.componentId)) {
|
|
10886
|
+
this.componentRef = this.containerService.loadComponent(this.componentId, this.viewContainer, this.componentConfig);
|
|
10887
|
+
}
|
|
10888
|
+
else {
|
|
10889
|
+
console.error(`Component '${this.componentId}' still not registered after retry`);
|
|
10890
|
+
}
|
|
10891
|
+
}, 100);
|
|
10892
|
+
}
|
|
10893
|
+
}
|
|
10894
|
+
destroyComponent() {
|
|
10895
|
+
if (this.componentRef) {
|
|
10896
|
+
this.componentRef.destroy();
|
|
10897
|
+
this.componentRef = null;
|
|
10898
|
+
}
|
|
10899
|
+
}
|
|
10900
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerDynamicDirective, deps: [{ token: i0.ViewContainerRef }, { token: CideEleFloatingContainerService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
10901
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: CideEleFloatingContainerDynamicDirective, isStandalone: true, selector: "[cideEleFloatingDynamic]", inputs: { componentId: "componentId", componentConfig: "componentConfig", isVisible: "isVisible" }, usesOnChanges: true, ngImport: i0 });
|
|
10902
|
+
}
|
|
10903
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerDynamicDirective, decorators: [{
|
|
10904
|
+
type: Directive,
|
|
10905
|
+
args: [{
|
|
10906
|
+
selector: '[cideEleFloatingDynamic]',
|
|
10907
|
+
standalone: true
|
|
10908
|
+
}]
|
|
10909
|
+
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: CideEleFloatingContainerService }], propDecorators: { componentId: [{
|
|
10910
|
+
type: Input
|
|
10911
|
+
}], componentConfig: [{
|
|
10912
|
+
type: Input
|
|
10913
|
+
}], isVisible: [{
|
|
10914
|
+
type: Input
|
|
10915
|
+
}] } });
|
|
10916
|
+
|
|
10917
|
+
var floatingContainerDynamic_directive = /*#__PURE__*/Object.freeze({
|
|
10918
|
+
__proto__: null,
|
|
10919
|
+
CideEleFloatingContainerDynamicDirective: CideEleFloatingContainerDynamicDirective
|
|
10920
|
+
});
|
|
10921
|
+
|
|
10901
10922
|
/*
|
|
10902
10923
|
* Public API Surface of cloud-ide-element
|
|
10903
10924
|
* Here we can add what need to be exported from library
|