cloud-ide-element 1.1.130 → 1.1.132
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 +215 -213
- package/fesm2022/cloud-ide-element.mjs.map +1 -1
- package/index.d.ts +11 -9
- package/package.json +1 -1
|
@@ -8336,206 +8336,206 @@ class CideEleCardComponent {
|
|
|
8336
8336
|
return this.currentState();
|
|
8337
8337
|
}
|
|
8338
8338
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8339
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleCardComponent, isStandalone: true, selector: "cide-ele-card", inputs: { title: "title", subtitle: "subtitle", cardConfig: "cardConfig" }, outputs: { stateChange: "stateChange", collapsed: "collapsed", minimized: "minimized", maximized: "maximized", removed: "removed", headerClick: "headerClick" }, usesOnChanges: true, ngImport: i0, template: `
|
|
8340
|
-
<div
|
|
8341
|
-
class="cide-card"
|
|
8342
|
-
[class.cide-card-collapsed]="isCollapsed()"
|
|
8343
|
-
[class.cide-card-minimized]="isMinimized()"
|
|
8344
|
-
[class.cide-card-maximized]="isMaximized()"
|
|
8345
|
-
[class.cide-card-outlined]="config().variant === 'outlined'"
|
|
8346
|
-
[class.cide-card-elevated]="config().variant === 'elevated'"
|
|
8347
|
-
[class.cide-card-flat]="config().variant === 'flat'"
|
|
8348
|
-
[class.cide-card-sm]="config().size === 'sm'"
|
|
8349
|
-
[class.cide-card-md]="config().size === 'md'"
|
|
8350
|
-
[class.cide-card-lg]="config().size === 'lg'"
|
|
8351
|
-
[class.cide-card-shadow]="config().shadow !== false"
|
|
8352
|
-
[class.cide-card-rounded]="config().rounded !== false"
|
|
8353
|
-
[class.cide-card-bordered]="config().bordered !== false"
|
|
8354
|
-
[style.max-height]="isMinimized() ? '60px' : (isMaximized() ? '100vh' : 'none')"
|
|
8355
|
-
[style.width]="isMaximized() ? '100vw' : '100%'"
|
|
8356
|
-
[style.position]="isMaximized() ? 'fixed' : 'relative'"
|
|
8357
|
-
[style.z-index]="isMaximized() ? '9999' : 'auto'"
|
|
8358
|
-
[style.top]="isMaximized() ? '0' : 'auto'"
|
|
8359
|
-
[style.left]="isMaximized() ? '0' : 'auto'"
|
|
8360
|
-
[style.right]="isMaximized() ? '0' : 'auto'"
|
|
8361
|
-
[style.bottom]="isMaximized() ? '0' : 'auto'"
|
|
8362
|
-
>
|
|
8363
|
-
<!-- Header -->
|
|
8364
|
-
@if (config().showHeader !== false) {
|
|
8365
|
-
<div class="cide-card-header" (click)="onHeaderClick()">
|
|
8366
|
-
<div class="cide-card-header-content">
|
|
8367
|
-
@if (title) {
|
|
8368
|
-
<h3 class="cide-card-title">{{ title }}</h3>
|
|
8369
|
-
}
|
|
8370
|
-
@if (subtitle) {
|
|
8371
|
-
<p class="cide-card-subtitle">{{ subtitle }}</p>
|
|
8372
|
-
}
|
|
8373
|
-
<ng-content select="[card-header]"></ng-content>
|
|
8374
|
-
</div>
|
|
8375
|
-
<div class="cide-card-actions">
|
|
8376
|
-
<ng-content select="[card-actions]"></ng-content>
|
|
8377
|
-
@if (config().collapsible) {
|
|
8378
|
-
<button
|
|
8379
|
-
type="button"
|
|
8380
|
-
class="cide-card-action-btn"
|
|
8381
|
-
(click)="toggleCollapse($event)"
|
|
8382
|
-
[attr.aria-label]="isCollapsed() ? 'Expand card' : 'Collapse card'"
|
|
8383
|
-
[title]="isCollapsed() ? 'Expand' : 'Collapse'">
|
|
8384
|
-
<cide-ele-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>
|
|
8385
|
-
</button>
|
|
8386
|
-
}
|
|
8387
|
-
@if (config().minimizable) {
|
|
8388
|
-
<button
|
|
8389
|
-
type="button"
|
|
8390
|
-
class="cide-card-action-btn"
|
|
8391
|
-
(click)="toggleMinimize($event)"
|
|
8392
|
-
[attr.aria-label]="isMinimized() ? 'Restore card' : 'Minimize card'"
|
|
8393
|
-
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
8394
|
-
<cide-ele-icon>{{ isMinimized() ? 'unfold_more' : 'unfold_less' }}</cide-ele-icon>
|
|
8395
|
-
</button>
|
|
8396
|
-
}
|
|
8397
|
-
@if (config().maximizable) {
|
|
8398
|
-
<button
|
|
8399
|
-
type="button"
|
|
8400
|
-
class="cide-card-action-btn"
|
|
8401
|
-
(click)="toggleMaximize($event)"
|
|
8402
|
-
[attr.aria-label]="isMaximized() ? 'Restore card' : 'Maximize card'"
|
|
8403
|
-
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
8404
|
-
<cide-ele-icon>{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
8405
|
-
</button>
|
|
8406
|
-
}
|
|
8407
|
-
@if (config().removable) {
|
|
8408
|
-
<button
|
|
8409
|
-
type="button"
|
|
8410
|
-
class="cide-card-action-btn cide-card-action-remove"
|
|
8411
|
-
(click)="remove($event)"
|
|
8412
|
-
aria-label="Remove card"
|
|
8413
|
-
title="Remove">
|
|
8414
|
-
<cide-ele-icon>close</cide-ele-icon>
|
|
8415
|
-
</button>
|
|
8416
|
-
}
|
|
8417
|
-
</div>
|
|
8418
|
-
</div>
|
|
8419
|
-
}
|
|
8420
|
-
|
|
8421
|
-
<!-- Content -->
|
|
8422
|
-
<div
|
|
8423
|
-
class="cide-card-content"
|
|
8424
|
-
[class.cide-card-content-collapsed]="isCollapsed()"
|
|
8425
|
-
[class.cide-card-content-minimized]="isMinimized()"
|
|
8426
|
-
>
|
|
8427
|
-
<ng-content></ng-content>
|
|
8428
|
-
</div>
|
|
8429
|
-
|
|
8430
|
-
<!-- Footer -->
|
|
8431
|
-
@if (config().showFooter && !isMinimized()) {
|
|
8432
|
-
<div class="cide-card-footer">
|
|
8433
|
-
<ng-content select="[card-footer]"></ng-content>
|
|
8434
|
-
</div>
|
|
8435
|
-
}
|
|
8436
|
-
</div>
|
|
8339
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleCardComponent, isStandalone: true, selector: "cide-ele-card", inputs: { title: "title", subtitle: "subtitle", cardConfig: "cardConfig" }, outputs: { stateChange: "stateChange", collapsed: "collapsed", minimized: "minimized", maximized: "maximized", removed: "removed", headerClick: "headerClick" }, usesOnChanges: true, ngImport: i0, template: `
|
|
8340
|
+
<div
|
|
8341
|
+
class="cide-card"
|
|
8342
|
+
[class.cide-card-collapsed]="isCollapsed()"
|
|
8343
|
+
[class.cide-card-minimized]="isMinimized()"
|
|
8344
|
+
[class.cide-card-maximized]="isMaximized()"
|
|
8345
|
+
[class.cide-card-outlined]="config().variant === 'outlined'"
|
|
8346
|
+
[class.cide-card-elevated]="config().variant === 'elevated'"
|
|
8347
|
+
[class.cide-card-flat]="config().variant === 'flat'"
|
|
8348
|
+
[class.cide-card-sm]="config().size === 'sm'"
|
|
8349
|
+
[class.cide-card-md]="config().size === 'md'"
|
|
8350
|
+
[class.cide-card-lg]="config().size === 'lg'"
|
|
8351
|
+
[class.cide-card-shadow]="config().shadow !== false"
|
|
8352
|
+
[class.cide-card-rounded]="config().rounded !== false"
|
|
8353
|
+
[class.cide-card-bordered]="config().bordered !== false"
|
|
8354
|
+
[style.max-height]="isMinimized() ? '60px' : (isMaximized() ? '100vh' : 'none')"
|
|
8355
|
+
[style.width]="isMaximized() ? '100vw' : '100%'"
|
|
8356
|
+
[style.position]="isMaximized() ? 'fixed' : 'relative'"
|
|
8357
|
+
[style.z-index]="isMaximized() ? '9999' : 'auto'"
|
|
8358
|
+
[style.top]="isMaximized() ? '0' : 'auto'"
|
|
8359
|
+
[style.left]="isMaximized() ? '0' : 'auto'"
|
|
8360
|
+
[style.right]="isMaximized() ? '0' : 'auto'"
|
|
8361
|
+
[style.bottom]="isMaximized() ? '0' : 'auto'"
|
|
8362
|
+
>
|
|
8363
|
+
<!-- Header -->
|
|
8364
|
+
@if (config().showHeader !== false) {
|
|
8365
|
+
<div class="cide-card-header" (click)="onHeaderClick()">
|
|
8366
|
+
<div class="cide-card-header-content">
|
|
8367
|
+
@if (title) {
|
|
8368
|
+
<h3 class="cide-card-title">{{ title }}</h3>
|
|
8369
|
+
}
|
|
8370
|
+
@if (subtitle) {
|
|
8371
|
+
<p class="cide-card-subtitle">{{ subtitle }}</p>
|
|
8372
|
+
}
|
|
8373
|
+
<ng-content select="[card-header]"></ng-content>
|
|
8374
|
+
</div>
|
|
8375
|
+
<div class="cide-card-actions">
|
|
8376
|
+
<ng-content select="[card-actions]"></ng-content>
|
|
8377
|
+
@if (config().collapsible) {
|
|
8378
|
+
<button
|
|
8379
|
+
type="button"
|
|
8380
|
+
class="cide-card-action-btn"
|
|
8381
|
+
(click)="toggleCollapse($event)"
|
|
8382
|
+
[attr.aria-label]="isCollapsed() ? 'Expand card' : 'Collapse card'"
|
|
8383
|
+
[title]="isCollapsed() ? 'Expand' : 'Collapse'">
|
|
8384
|
+
<cide-ele-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>
|
|
8385
|
+
</button>
|
|
8386
|
+
}
|
|
8387
|
+
@if (config().minimizable) {
|
|
8388
|
+
<button
|
|
8389
|
+
type="button"
|
|
8390
|
+
class="cide-card-action-btn"
|
|
8391
|
+
(click)="toggleMinimize($event)"
|
|
8392
|
+
[attr.aria-label]="isMinimized() ? 'Restore card' : 'Minimize card'"
|
|
8393
|
+
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
8394
|
+
<cide-ele-icon>{{ isMinimized() ? 'unfold_more' : 'unfold_less' }}</cide-ele-icon>
|
|
8395
|
+
</button>
|
|
8396
|
+
}
|
|
8397
|
+
@if (config().maximizable) {
|
|
8398
|
+
<button
|
|
8399
|
+
type="button"
|
|
8400
|
+
class="cide-card-action-btn"
|
|
8401
|
+
(click)="toggleMaximize($event)"
|
|
8402
|
+
[attr.aria-label]="isMaximized() ? 'Restore card' : 'Maximize card'"
|
|
8403
|
+
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
8404
|
+
<cide-ele-icon>{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
8405
|
+
</button>
|
|
8406
|
+
}
|
|
8407
|
+
@if (config().removable) {
|
|
8408
|
+
<button
|
|
8409
|
+
type="button"
|
|
8410
|
+
class="cide-card-action-btn cide-card-action-remove"
|
|
8411
|
+
(click)="remove($event)"
|
|
8412
|
+
aria-label="Remove card"
|
|
8413
|
+
title="Remove">
|
|
8414
|
+
<cide-ele-icon>close</cide-ele-icon>
|
|
8415
|
+
</button>
|
|
8416
|
+
}
|
|
8417
|
+
</div>
|
|
8418
|
+
</div>
|
|
8419
|
+
}
|
|
8420
|
+
|
|
8421
|
+
<!-- Content -->
|
|
8422
|
+
<div
|
|
8423
|
+
class="cide-card-content"
|
|
8424
|
+
[class.cide-card-content-collapsed]="isCollapsed()"
|
|
8425
|
+
[class.cide-card-content-minimized]="isMinimized()"
|
|
8426
|
+
>
|
|
8427
|
+
<ng-content></ng-content>
|
|
8428
|
+
</div>
|
|
8429
|
+
|
|
8430
|
+
<!-- Footer -->
|
|
8431
|
+
@if (config().showFooter && !isMinimized()) {
|
|
8432
|
+
<div class="cide-card-footer">
|
|
8433
|
+
<ng-content select="[card-footer]"></ng-content>
|
|
8434
|
+
</div>
|
|
8435
|
+
}
|
|
8436
|
+
</div>
|
|
8437
8437
|
`, isInline: true, styles: [".cide-card{display:inline-block;width:100%;background:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative;vertical-align:top}.cide-card-header{display:flex}.cide-card-rounded{border-radius:.75rem}.cide-card-bordered{border:1px solid #e5e7eb}.cide-card-shadow{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.cide-card-outlined{border:2px solid #e5e7eb;box-shadow:none}.cide-card-elevated{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.cide-card-flat{border:none;box-shadow:none;background:transparent}.cide-card-sm{font-size:.875rem}.cide-card-md{font-size:1rem}.cide-card-lg{font-size:1.125rem}.cide-card-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:linear-gradient(to right,#f0f9ff,#e0f2fe);border-bottom:1px solid #e5e7eb;min-height:2rem;cursor:pointer;-webkit-user-select:none;user-select:none}.cide-card-header-content{flex:1;min-width:0}.cide-card-title{margin:0;font-size:.875rem;font-weight:600;color:#1e40af;line-height:1.4}.cide-card-subtitle{margin:.125rem 0 0;font-size:.75rem;color:#64748b;line-height:1.3}.cide-card-actions{display:flex;align-items:center;gap:.25rem;margin-left:.5rem;flex-shrink:0;flex-wrap:wrap;max-width:60%}.cide-card-action-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:transparent;border:none;border-radius:.375rem;color:#64748b;cursor:pointer;transition:all .2s ease}.cide-card-action-btn:hover{background:#0000000d;color:#1e40af}.cide-card-action-btn:active{transform:scale(.95)}.cide-card-action-remove:hover{background:#ef44441a;color:#dc2626}.cide-card-content{padding:1.25rem;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);max-height:none}.cide-card-content-collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}.cide-card-content-minimized{display:none}.cide-card-collapsed .cide-card-content{max-height:0;padding-top:0;padding-bottom:0}.cide-card-minimized{max-height:60px}.cide-card-minimized .cide-card-content,.cide-card-minimized .cide-card-footer{display:none}.cide-card-maximized{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;border-radius:0;margin:0}.cide-card-maximized .cide-card-content{flex:1;overflow-y:auto}.cide-card-footer{padding:.75rem 1rem;background:#f9fafb;border-top:1px solid #e5e7eb;margin-top:auto}@media (max-width: 640px){.cide-card-header{padding:.5rem .875rem;flex-wrap:wrap}.cide-card-content{padding:.875rem}.cide-card-footer{padding:.625rem .875rem}.cide-card-actions{margin-left:.375rem;gap:.25rem}.cide-card-action-btn{width:1.375rem;height:1.375rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
8438
8438
|
}
|
|
8439
8439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleCardComponent, decorators: [{
|
|
8440
8440
|
type: Component,
|
|
8441
|
-
args: [{ selector: 'cide-ele-card', standalone: true, imports: [CommonModule, CideIconComponent], template: `
|
|
8442
|
-
<div
|
|
8443
|
-
class="cide-card"
|
|
8444
|
-
[class.cide-card-collapsed]="isCollapsed()"
|
|
8445
|
-
[class.cide-card-minimized]="isMinimized()"
|
|
8446
|
-
[class.cide-card-maximized]="isMaximized()"
|
|
8447
|
-
[class.cide-card-outlined]="config().variant === 'outlined'"
|
|
8448
|
-
[class.cide-card-elevated]="config().variant === 'elevated'"
|
|
8449
|
-
[class.cide-card-flat]="config().variant === 'flat'"
|
|
8450
|
-
[class.cide-card-sm]="config().size === 'sm'"
|
|
8451
|
-
[class.cide-card-md]="config().size === 'md'"
|
|
8452
|
-
[class.cide-card-lg]="config().size === 'lg'"
|
|
8453
|
-
[class.cide-card-shadow]="config().shadow !== false"
|
|
8454
|
-
[class.cide-card-rounded]="config().rounded !== false"
|
|
8455
|
-
[class.cide-card-bordered]="config().bordered !== false"
|
|
8456
|
-
[style.max-height]="isMinimized() ? '60px' : (isMaximized() ? '100vh' : 'none')"
|
|
8457
|
-
[style.width]="isMaximized() ? '100vw' : '100%'"
|
|
8458
|
-
[style.position]="isMaximized() ? 'fixed' : 'relative'"
|
|
8459
|
-
[style.z-index]="isMaximized() ? '9999' : 'auto'"
|
|
8460
|
-
[style.top]="isMaximized() ? '0' : 'auto'"
|
|
8461
|
-
[style.left]="isMaximized() ? '0' : 'auto'"
|
|
8462
|
-
[style.right]="isMaximized() ? '0' : 'auto'"
|
|
8463
|
-
[style.bottom]="isMaximized() ? '0' : 'auto'"
|
|
8464
|
-
>
|
|
8465
|
-
<!-- Header -->
|
|
8466
|
-
@if (config().showHeader !== false) {
|
|
8467
|
-
<div class="cide-card-header" (click)="onHeaderClick()">
|
|
8468
|
-
<div class="cide-card-header-content">
|
|
8469
|
-
@if (title) {
|
|
8470
|
-
<h3 class="cide-card-title">{{ title }}</h3>
|
|
8471
|
-
}
|
|
8472
|
-
@if (subtitle) {
|
|
8473
|
-
<p class="cide-card-subtitle">{{ subtitle }}</p>
|
|
8474
|
-
}
|
|
8475
|
-
<ng-content select="[card-header]"></ng-content>
|
|
8476
|
-
</div>
|
|
8477
|
-
<div class="cide-card-actions">
|
|
8478
|
-
<ng-content select="[card-actions]"></ng-content>
|
|
8479
|
-
@if (config().collapsible) {
|
|
8480
|
-
<button
|
|
8481
|
-
type="button"
|
|
8482
|
-
class="cide-card-action-btn"
|
|
8483
|
-
(click)="toggleCollapse($event)"
|
|
8484
|
-
[attr.aria-label]="isCollapsed() ? 'Expand card' : 'Collapse card'"
|
|
8485
|
-
[title]="isCollapsed() ? 'Expand' : 'Collapse'">
|
|
8486
|
-
<cide-ele-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>
|
|
8487
|
-
</button>
|
|
8488
|
-
}
|
|
8489
|
-
@if (config().minimizable) {
|
|
8490
|
-
<button
|
|
8491
|
-
type="button"
|
|
8492
|
-
class="cide-card-action-btn"
|
|
8493
|
-
(click)="toggleMinimize($event)"
|
|
8494
|
-
[attr.aria-label]="isMinimized() ? 'Restore card' : 'Minimize card'"
|
|
8495
|
-
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
8496
|
-
<cide-ele-icon>{{ isMinimized() ? 'unfold_more' : 'unfold_less' }}</cide-ele-icon>
|
|
8497
|
-
</button>
|
|
8498
|
-
}
|
|
8499
|
-
@if (config().maximizable) {
|
|
8500
|
-
<button
|
|
8501
|
-
type="button"
|
|
8502
|
-
class="cide-card-action-btn"
|
|
8503
|
-
(click)="toggleMaximize($event)"
|
|
8504
|
-
[attr.aria-label]="isMaximized() ? 'Restore card' : 'Maximize card'"
|
|
8505
|
-
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
8506
|
-
<cide-ele-icon>{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
8507
|
-
</button>
|
|
8508
|
-
}
|
|
8509
|
-
@if (config().removable) {
|
|
8510
|
-
<button
|
|
8511
|
-
type="button"
|
|
8512
|
-
class="cide-card-action-btn cide-card-action-remove"
|
|
8513
|
-
(click)="remove($event)"
|
|
8514
|
-
aria-label="Remove card"
|
|
8515
|
-
title="Remove">
|
|
8516
|
-
<cide-ele-icon>close</cide-ele-icon>
|
|
8517
|
-
</button>
|
|
8518
|
-
}
|
|
8519
|
-
</div>
|
|
8520
|
-
</div>
|
|
8521
|
-
}
|
|
8522
|
-
|
|
8523
|
-
<!-- Content -->
|
|
8524
|
-
<div
|
|
8525
|
-
class="cide-card-content"
|
|
8526
|
-
[class.cide-card-content-collapsed]="isCollapsed()"
|
|
8527
|
-
[class.cide-card-content-minimized]="isMinimized()"
|
|
8528
|
-
>
|
|
8529
|
-
<ng-content></ng-content>
|
|
8530
|
-
</div>
|
|
8531
|
-
|
|
8532
|
-
<!-- Footer -->
|
|
8533
|
-
@if (config().showFooter && !isMinimized()) {
|
|
8534
|
-
<div class="cide-card-footer">
|
|
8535
|
-
<ng-content select="[card-footer]"></ng-content>
|
|
8536
|
-
</div>
|
|
8537
|
-
}
|
|
8538
|
-
</div>
|
|
8441
|
+
args: [{ selector: 'cide-ele-card', standalone: true, imports: [CommonModule, CideIconComponent], template: `
|
|
8442
|
+
<div
|
|
8443
|
+
class="cide-card"
|
|
8444
|
+
[class.cide-card-collapsed]="isCollapsed()"
|
|
8445
|
+
[class.cide-card-minimized]="isMinimized()"
|
|
8446
|
+
[class.cide-card-maximized]="isMaximized()"
|
|
8447
|
+
[class.cide-card-outlined]="config().variant === 'outlined'"
|
|
8448
|
+
[class.cide-card-elevated]="config().variant === 'elevated'"
|
|
8449
|
+
[class.cide-card-flat]="config().variant === 'flat'"
|
|
8450
|
+
[class.cide-card-sm]="config().size === 'sm'"
|
|
8451
|
+
[class.cide-card-md]="config().size === 'md'"
|
|
8452
|
+
[class.cide-card-lg]="config().size === 'lg'"
|
|
8453
|
+
[class.cide-card-shadow]="config().shadow !== false"
|
|
8454
|
+
[class.cide-card-rounded]="config().rounded !== false"
|
|
8455
|
+
[class.cide-card-bordered]="config().bordered !== false"
|
|
8456
|
+
[style.max-height]="isMinimized() ? '60px' : (isMaximized() ? '100vh' : 'none')"
|
|
8457
|
+
[style.width]="isMaximized() ? '100vw' : '100%'"
|
|
8458
|
+
[style.position]="isMaximized() ? 'fixed' : 'relative'"
|
|
8459
|
+
[style.z-index]="isMaximized() ? '9999' : 'auto'"
|
|
8460
|
+
[style.top]="isMaximized() ? '0' : 'auto'"
|
|
8461
|
+
[style.left]="isMaximized() ? '0' : 'auto'"
|
|
8462
|
+
[style.right]="isMaximized() ? '0' : 'auto'"
|
|
8463
|
+
[style.bottom]="isMaximized() ? '0' : 'auto'"
|
|
8464
|
+
>
|
|
8465
|
+
<!-- Header -->
|
|
8466
|
+
@if (config().showHeader !== false) {
|
|
8467
|
+
<div class="cide-card-header" (click)="onHeaderClick()">
|
|
8468
|
+
<div class="cide-card-header-content">
|
|
8469
|
+
@if (title) {
|
|
8470
|
+
<h3 class="cide-card-title">{{ title }}</h3>
|
|
8471
|
+
}
|
|
8472
|
+
@if (subtitle) {
|
|
8473
|
+
<p class="cide-card-subtitle">{{ subtitle }}</p>
|
|
8474
|
+
}
|
|
8475
|
+
<ng-content select="[card-header]"></ng-content>
|
|
8476
|
+
</div>
|
|
8477
|
+
<div class="cide-card-actions">
|
|
8478
|
+
<ng-content select="[card-actions]"></ng-content>
|
|
8479
|
+
@if (config().collapsible) {
|
|
8480
|
+
<button
|
|
8481
|
+
type="button"
|
|
8482
|
+
class="cide-card-action-btn"
|
|
8483
|
+
(click)="toggleCollapse($event)"
|
|
8484
|
+
[attr.aria-label]="isCollapsed() ? 'Expand card' : 'Collapse card'"
|
|
8485
|
+
[title]="isCollapsed() ? 'Expand' : 'Collapse'">
|
|
8486
|
+
<cide-ele-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>
|
|
8487
|
+
</button>
|
|
8488
|
+
}
|
|
8489
|
+
@if (config().minimizable) {
|
|
8490
|
+
<button
|
|
8491
|
+
type="button"
|
|
8492
|
+
class="cide-card-action-btn"
|
|
8493
|
+
(click)="toggleMinimize($event)"
|
|
8494
|
+
[attr.aria-label]="isMinimized() ? 'Restore card' : 'Minimize card'"
|
|
8495
|
+
[title]="isMinimized() ? 'Restore' : 'Minimize'">
|
|
8496
|
+
<cide-ele-icon>{{ isMinimized() ? 'unfold_more' : 'unfold_less' }}</cide-ele-icon>
|
|
8497
|
+
</button>
|
|
8498
|
+
}
|
|
8499
|
+
@if (config().maximizable) {
|
|
8500
|
+
<button
|
|
8501
|
+
type="button"
|
|
8502
|
+
class="cide-card-action-btn"
|
|
8503
|
+
(click)="toggleMaximize($event)"
|
|
8504
|
+
[attr.aria-label]="isMaximized() ? 'Restore card' : 'Maximize card'"
|
|
8505
|
+
[title]="isMaximized() ? 'Restore' : 'Maximize'">
|
|
8506
|
+
<cide-ele-icon>{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
|
|
8507
|
+
</button>
|
|
8508
|
+
}
|
|
8509
|
+
@if (config().removable) {
|
|
8510
|
+
<button
|
|
8511
|
+
type="button"
|
|
8512
|
+
class="cide-card-action-btn cide-card-action-remove"
|
|
8513
|
+
(click)="remove($event)"
|
|
8514
|
+
aria-label="Remove card"
|
|
8515
|
+
title="Remove">
|
|
8516
|
+
<cide-ele-icon>close</cide-ele-icon>
|
|
8517
|
+
</button>
|
|
8518
|
+
}
|
|
8519
|
+
</div>
|
|
8520
|
+
</div>
|
|
8521
|
+
}
|
|
8522
|
+
|
|
8523
|
+
<!-- Content -->
|
|
8524
|
+
<div
|
|
8525
|
+
class="cide-card-content"
|
|
8526
|
+
[class.cide-card-content-collapsed]="isCollapsed()"
|
|
8527
|
+
[class.cide-card-content-minimized]="isMinimized()"
|
|
8528
|
+
>
|
|
8529
|
+
<ng-content></ng-content>
|
|
8530
|
+
</div>
|
|
8531
|
+
|
|
8532
|
+
<!-- Footer -->
|
|
8533
|
+
@if (config().showFooter && !isMinimized()) {
|
|
8534
|
+
<div class="cide-card-footer">
|
|
8535
|
+
<ng-content select="[card-footer]"></ng-content>
|
|
8536
|
+
</div>
|
|
8537
|
+
}
|
|
8538
|
+
</div>
|
|
8539
8539
|
`, styles: [".cide-card{display:inline-block;width:100%;background:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative;vertical-align:top}.cide-card-header{display:flex}.cide-card-rounded{border-radius:.75rem}.cide-card-bordered{border:1px solid #e5e7eb}.cide-card-shadow{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.cide-card-outlined{border:2px solid #e5e7eb;box-shadow:none}.cide-card-elevated{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.cide-card-flat{border:none;box-shadow:none;background:transparent}.cide-card-sm{font-size:.875rem}.cide-card-md{font-size:1rem}.cide-card-lg{font-size:1.125rem}.cide-card-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:linear-gradient(to right,#f0f9ff,#e0f2fe);border-bottom:1px solid #e5e7eb;min-height:2rem;cursor:pointer;-webkit-user-select:none;user-select:none}.cide-card-header-content{flex:1;min-width:0}.cide-card-title{margin:0;font-size:.875rem;font-weight:600;color:#1e40af;line-height:1.4}.cide-card-subtitle{margin:.125rem 0 0;font-size:.75rem;color:#64748b;line-height:1.3}.cide-card-actions{display:flex;align-items:center;gap:.25rem;margin-left:.5rem;flex-shrink:0;flex-wrap:wrap;max-width:60%}.cide-card-action-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:transparent;border:none;border-radius:.375rem;color:#64748b;cursor:pointer;transition:all .2s ease}.cide-card-action-btn:hover{background:#0000000d;color:#1e40af}.cide-card-action-btn:active{transform:scale(.95)}.cide-card-action-remove:hover{background:#ef44441a;color:#dc2626}.cide-card-content{padding:1.25rem;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);max-height:none}.cide-card-content-collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}.cide-card-content-minimized{display:none}.cide-card-collapsed .cide-card-content{max-height:0;padding-top:0;padding-bottom:0}.cide-card-minimized{max-height:60px}.cide-card-minimized .cide-card-content,.cide-card-minimized .cide-card-footer{display:none}.cide-card-maximized{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;border-radius:0;margin:0}.cide-card-maximized .cide-card-content{flex:1;overflow-y:auto}.cide-card-footer{padding:.75rem 1rem;background:#f9fafb;border-top:1px solid #e5e7eb;margin-top:auto}@media (max-width: 640px){.cide-card-header{padding:.5rem .875rem;flex-wrap:wrap}.cide-card-content{padding:.875rem}.cide-card-footer{padding:.625rem .875rem}.cide-card-actions{margin-left:.375rem;gap:.25rem}.cide-card-action-btn{width:1.375rem;height:1.375rem}}\n"] }]
|
|
8540
8540
|
}], propDecorators: { title: [{
|
|
8541
8541
|
type: Input
|
|
@@ -14667,7 +14667,11 @@ class CideEleJsonEditorComponent {
|
|
|
14667
14667
|
label;
|
|
14668
14668
|
helperText;
|
|
14669
14669
|
required = false;
|
|
14670
|
-
disabled =
|
|
14670
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
14671
|
+
// Internal writable signal for ControlValueAccessor setDisabledState
|
|
14672
|
+
_disabledInternal = signal(false, ...(ngDevMode ? [{ debugName: "_disabledInternal" }] : []));
|
|
14673
|
+
// Computed signal that combines input and internal state (if either is true, component is disabled)
|
|
14674
|
+
disabledInput = computed(() => this._disabledInternal() || this.disabled(), ...(ngDevMode ? [{ debugName: "disabledInput" }] : []));
|
|
14671
14675
|
showCharacterCount = false;
|
|
14672
14676
|
config = {};
|
|
14673
14677
|
configSignal = signal({}, ...(ngDevMode ? [{ debugName: "configSignal" }] : []));
|
|
@@ -14694,7 +14698,7 @@ class CideEleJsonEditorComponent {
|
|
|
14694
14698
|
}, ...(ngDevMode ? [{ debugName: "lineNumbers" }] : []));
|
|
14695
14699
|
containerClass = computed(() => {
|
|
14696
14700
|
const classes = ['tw-w-full'];
|
|
14697
|
-
if (this.
|
|
14701
|
+
if (this.disabledInput()) {
|
|
14698
14702
|
classes.push('tw-opacity-50');
|
|
14699
14703
|
}
|
|
14700
14704
|
return classes.join(' ');
|
|
@@ -14913,12 +14917,12 @@ class CideEleJsonEditorComponent {
|
|
|
14913
14917
|
this.onTouched = fn;
|
|
14914
14918
|
}
|
|
14915
14919
|
setDisabledState(isDisabled) {
|
|
14916
|
-
this.
|
|
14920
|
+
this._disabledInternal.set(isDisabled);
|
|
14917
14921
|
}
|
|
14918
14922
|
onChange = () => { };
|
|
14919
14923
|
onTouched = () => { };
|
|
14920
14924
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14921
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleJsonEditorComponent, isStandalone: true, selector: "cide-ele-json-editor", inputs: { label: "label", helperText: "helperText", required: "required", disabled: "disabled", showCharacterCount: "showCharacterCount", config: "config" }, outputs: { valueChange: "valueChange", objectChange: "objectChange", errorsChange: "errorsChange", validChange: "validChange" }, providers: [
|
|
14925
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleJsonEditorComponent, isStandalone: true, selector: "cide-ele-json-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", objectChange: "objectChange", errorsChange: "errorsChange", validChange: "validChange" }, providers: [
|
|
14922
14926
|
{
|
|
14923
14927
|
provide: NG_VALUE_ACCESSOR,
|
|
14924
14928
|
useExisting: forwardRef(() => CideEleJsonEditorComponent),
|
|
@@ -14947,8 +14951,8 @@ class CideEleJsonEditorComponent {
|
|
|
14947
14951
|
[class.tw-focus-within:tw-border-blue-500]="!hasErrors()"
|
|
14948
14952
|
[class.tw-focus-within:tw-ring-1]="!hasErrors()"
|
|
14949
14953
|
[class.tw-focus-within:tw-ring-blue-500]="!hasErrors()"
|
|
14950
|
-
[class.tw-opacity-50]="
|
|
14951
|
-
[class.tw-cursor-not-allowed]="
|
|
14954
|
+
[class.tw-opacity-50]="disabledInput()"
|
|
14955
|
+
[class.tw-cursor-not-allowed]="disabledInput()">
|
|
14952
14956
|
|
|
14953
14957
|
<!-- Line Numbers -->
|
|
14954
14958
|
@if (configSignal().showLineNumbers) {
|
|
@@ -14978,8 +14982,8 @@ class CideEleJsonEditorComponent {
|
|
|
14978
14982
|
(input)="onInput($event)"
|
|
14979
14983
|
(blur)="onBlur()"
|
|
14980
14984
|
[placeholder]="configSignal().placeholder || 'Enter JSON configuration...'"
|
|
14981
|
-
[readonly]="configSignal().readOnly ||
|
|
14982
|
-
[disabled]="
|
|
14985
|
+
[readonly]="configSignal().readOnly || disabledInput()"
|
|
14986
|
+
[disabled]="disabledInput()"
|
|
14983
14987
|
class="tw-w-full tw-p-3 tw-text-sm tw-font-mono tw-leading-relaxed tw-resize-none tw-outline-none tw-bg-transparent"
|
|
14984
14988
|
[class.tw-pl-12]="configSignal().showLineNumbers"
|
|
14985
14989
|
[class.tw-text-gray-900]="configSignal().theme === 'light'"
|
|
@@ -14992,7 +14996,7 @@ class CideEleJsonEditorComponent {
|
|
|
14992
14996
|
</textarea>
|
|
14993
14997
|
|
|
14994
14998
|
<!-- Format Button -->
|
|
14995
|
-
@if (!configSignal().readOnly && !
|
|
14999
|
+
@if (!configSignal().readOnly && !disabledInput()) {
|
|
14996
15000
|
<button
|
|
14997
15001
|
type="button"
|
|
14998
15002
|
(click)="formatJson()"
|
|
@@ -15062,8 +15066,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15062
15066
|
[class.tw-focus-within:tw-border-blue-500]="!hasErrors()"
|
|
15063
15067
|
[class.tw-focus-within:tw-ring-1]="!hasErrors()"
|
|
15064
15068
|
[class.tw-focus-within:tw-ring-blue-500]="!hasErrors()"
|
|
15065
|
-
[class.tw-opacity-50]="
|
|
15066
|
-
[class.tw-cursor-not-allowed]="
|
|
15069
|
+
[class.tw-opacity-50]="disabledInput()"
|
|
15070
|
+
[class.tw-cursor-not-allowed]="disabledInput()">
|
|
15067
15071
|
|
|
15068
15072
|
<!-- Line Numbers -->
|
|
15069
15073
|
@if (configSignal().showLineNumbers) {
|
|
@@ -15093,8 +15097,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15093
15097
|
(input)="onInput($event)"
|
|
15094
15098
|
(blur)="onBlur()"
|
|
15095
15099
|
[placeholder]="configSignal().placeholder || 'Enter JSON configuration...'"
|
|
15096
|
-
[readonly]="configSignal().readOnly ||
|
|
15097
|
-
[disabled]="
|
|
15100
|
+
[readonly]="configSignal().readOnly || disabledInput()"
|
|
15101
|
+
[disabled]="disabledInput()"
|
|
15098
15102
|
class="tw-w-full tw-p-3 tw-text-sm tw-font-mono tw-leading-relaxed tw-resize-none tw-outline-none tw-bg-transparent"
|
|
15099
15103
|
[class.tw-pl-12]="configSignal().showLineNumbers"
|
|
15100
15104
|
[class.tw-text-gray-900]="configSignal().theme === 'light'"
|
|
@@ -15107,7 +15111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15107
15111
|
</textarea>
|
|
15108
15112
|
|
|
15109
15113
|
<!-- Format Button -->
|
|
15110
|
-
@if (!configSignal().readOnly && !
|
|
15114
|
+
@if (!configSignal().readOnly && !disabledInput()) {
|
|
15111
15115
|
<button
|
|
15112
15116
|
type="button"
|
|
15113
15117
|
(click)="formatJson()"
|
|
@@ -15163,9 +15167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15163
15167
|
type: Input
|
|
15164
15168
|
}], required: [{
|
|
15165
15169
|
type: Input
|
|
15166
|
-
}], disabled: [{
|
|
15167
|
-
type: Input
|
|
15168
|
-
}], showCharacterCount: [{
|
|
15170
|
+
}], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showCharacterCount: [{
|
|
15169
15171
|
type: Input
|
|
15170
15172
|
}], config: [{
|
|
15171
15173
|
type: Input
|