cloud-ide-element 1.1.130 → 1.1.131
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 +203 -197
- package/fesm2022/cloud-ide-element.mjs.map +1 -1
- package/index.d.ts +10 -8
- 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,13 @@ class CideEleJsonEditorComponent {
|
|
|
14667
14667
|
label;
|
|
14668
14668
|
helperText;
|
|
14669
14669
|
required = false;
|
|
14670
|
-
disabled
|
|
14670
|
+
set disabled(value) {
|
|
14671
|
+
this._disabledSignal = value;
|
|
14672
|
+
}
|
|
14673
|
+
get disabled() {
|
|
14674
|
+
return this._disabledSignal;
|
|
14675
|
+
}
|
|
14676
|
+
_disabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "_disabledSignal" }] : []));
|
|
14671
14677
|
showCharacterCount = false;
|
|
14672
14678
|
config = {};
|
|
14673
14679
|
configSignal = signal({}, ...(ngDevMode ? [{ debugName: "configSignal" }] : []));
|