cloud-ide-element 1.1.129 → 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.
Files changed (4) hide show
  1. package/fesm2022/cloud-ide-element.mjs +212 -200
  2. package/fesm2022/cloud-ide-element.mjs.map +1 -1
  3. package/index.d.ts +8 -6
  4. package/package.json +1 -1
package/fesm2022/cloud-ide-element.mjs CHANGED
@@ -902,11 +902,17 @@ class CideInputComponent {
902
902
  }
903
903
  else if (this.type == 'url') {
904
904
  if (typeof (value) == 'string' && value) {
905
- // URL validation regex
906
- const urlRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
905
+ // URL validation regex - allows URLs with or without TLD (e.g., http://localhost or http://example.com)
906
+ // Pattern breakdown:
907
+ // - ^https?:\/\/ - protocol (http:// or https://)
908
+ // - (www\.)? - optional www. prefix
909
+ // - [-a-zA-Z0-9@:%._\+~#=]{1,256} - hostname (allows localhost, IP addresses, domain names with/without TLD)
910
+ // - (:\d+)? - optional port number
911
+ // - (\/[-a-zA-Z0-9()@:%_\+.~#?&//=]*)? - optional path, query params, and hash
912
+ const urlRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}(:\d+)?(\/[-a-zA-Z0-9()@:%_\+.~#?&//=]*)?$/;
907
913
  if (!urlRegex.test(value)) {
908
914
  validation_status.status = true;
909
- validation_status.validation.required = `Please enter a valid URL (e.g., https://example.com)!`;
915
+ validation_status.validation.required = `Please enter a valid URL (e.g., https://example.com or http://localhost)!`;
910
916
  }
911
917
  if (this.maxlength > 0) {
912
918
  if (value?.length > this.maxlength) {
@@ -8330,206 +8336,206 @@ class CideEleCardComponent {
8330
8336
  return this.currentState();
8331
8337
  }
8332
8338
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
8333
- 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: `
8334
- <div
8335
- class="cide-card"
8336
- [class.cide-card-collapsed]="isCollapsed()"
8337
- [class.cide-card-minimized]="isMinimized()"
8338
- [class.cide-card-maximized]="isMaximized()"
8339
- [class.cide-card-outlined]="config().variant === 'outlined'"
8340
- [class.cide-card-elevated]="config().variant === 'elevated'"
8341
- [class.cide-card-flat]="config().variant === 'flat'"
8342
- [class.cide-card-sm]="config().size === 'sm'"
8343
- [class.cide-card-md]="config().size === 'md'"
8344
- [class.cide-card-lg]="config().size === 'lg'"
8345
- [class.cide-card-shadow]="config().shadow !== false"
8346
- [class.cide-card-rounded]="config().rounded !== false"
8347
- [class.cide-card-bordered]="config().bordered !== false"
8348
- [style.max-height]="isMinimized() ? '60px' : (isMaximized() ? '100vh' : 'none')"
8349
- [style.width]="isMaximized() ? '100vw' : '100%'"
8350
- [style.position]="isMaximized() ? 'fixed' : 'relative'"
8351
- [style.z-index]="isMaximized() ? '9999' : 'auto'"
8352
- [style.top]="isMaximized() ? '0' : 'auto'"
8353
- [style.left]="isMaximized() ? '0' : 'auto'"
8354
- [style.right]="isMaximized() ? '0' : 'auto'"
8355
- [style.bottom]="isMaximized() ? '0' : 'auto'"
8356
- >
8357
- <!-- Header -->
8358
- @if (config().showHeader !== false) {
8359
- <div class="cide-card-header" (click)="onHeaderClick()">
8360
- <div class="cide-card-header-content">
8361
- @if (title) {
8362
- <h3 class="cide-card-title">{{ title }}</h3>
8363
- }
8364
- @if (subtitle) {
8365
- <p class="cide-card-subtitle">{{ subtitle }}</p>
8366
- }
8367
- <ng-content select="[card-header]"></ng-content>
8368
- </div>
8369
- <div class="cide-card-actions">
8370
- <ng-content select="[card-actions]"></ng-content>
8371
- @if (config().collapsible) {
8372
- <button
8373
- type="button"
8374
- class="cide-card-action-btn"
8375
- (click)="toggleCollapse($event)"
8376
- [attr.aria-label]="isCollapsed() ? 'Expand card' : 'Collapse card'"
8377
- [title]="isCollapsed() ? 'Expand' : 'Collapse'">
8378
- <cide-ele-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>
8379
- </button>
8380
- }
8381
- @if (config().minimizable) {
8382
- <button
8383
- type="button"
8384
- class="cide-card-action-btn"
8385
- (click)="toggleMinimize($event)"
8386
- [attr.aria-label]="isMinimized() ? 'Restore card' : 'Minimize card'"
8387
- [title]="isMinimized() ? 'Restore' : 'Minimize'">
8388
- <cide-ele-icon>{{ isMinimized() ? 'unfold_more' : 'unfold_less' }}</cide-ele-icon>
8389
- </button>
8390
- }
8391
- @if (config().maximizable) {
8392
- <button
8393
- type="button"
8394
- class="cide-card-action-btn"
8395
- (click)="toggleMaximize($event)"
8396
- [attr.aria-label]="isMaximized() ? 'Restore card' : 'Maximize card'"
8397
- [title]="isMaximized() ? 'Restore' : 'Maximize'">
8398
- <cide-ele-icon>{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
8399
- </button>
8400
- }
8401
- @if (config().removable) {
8402
- <button
8403
- type="button"
8404
- class="cide-card-action-btn cide-card-action-remove"
8405
- (click)="remove($event)"
8406
- aria-label="Remove card"
8407
- title="Remove">
8408
- <cide-ele-icon>close</cide-ele-icon>
8409
- </button>
8410
- }
8411
- </div>
8412
- </div>
8413
- }
8414
-
8415
- <!-- Content -->
8416
- <div
8417
- class="cide-card-content"
8418
- [class.cide-card-content-collapsed]="isCollapsed()"
8419
- [class.cide-card-content-minimized]="isMinimized()"
8420
- >
8421
- <ng-content></ng-content>
8422
- </div>
8423
-
8424
- <!-- Footer -->
8425
- @if (config().showFooter && !isMinimized()) {
8426
- <div class="cide-card-footer">
8427
- <ng-content select="[card-footer]"></ng-content>
8428
- </div>
8429
- }
8430
- </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>
8431
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"] }] });
8432
8438
  }
8433
8439
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleCardComponent, decorators: [{
8434
8440
  type: Component,
8435
- args: [{ selector: 'cide-ele-card', standalone: true, imports: [CommonModule, CideIconComponent], template: `
8436
- <div
8437
- class="cide-card"
8438
- [class.cide-card-collapsed]="isCollapsed()"
8439
- [class.cide-card-minimized]="isMinimized()"
8440
- [class.cide-card-maximized]="isMaximized()"
8441
- [class.cide-card-outlined]="config().variant === 'outlined'"
8442
- [class.cide-card-elevated]="config().variant === 'elevated'"
8443
- [class.cide-card-flat]="config().variant === 'flat'"
8444
- [class.cide-card-sm]="config().size === 'sm'"
8445
- [class.cide-card-md]="config().size === 'md'"
8446
- [class.cide-card-lg]="config().size === 'lg'"
8447
- [class.cide-card-shadow]="config().shadow !== false"
8448
- [class.cide-card-rounded]="config().rounded !== false"
8449
- [class.cide-card-bordered]="config().bordered !== false"
8450
- [style.max-height]="isMinimized() ? '60px' : (isMaximized() ? '100vh' : 'none')"
8451
- [style.width]="isMaximized() ? '100vw' : '100%'"
8452
- [style.position]="isMaximized() ? 'fixed' : 'relative'"
8453
- [style.z-index]="isMaximized() ? '9999' : 'auto'"
8454
- [style.top]="isMaximized() ? '0' : 'auto'"
8455
- [style.left]="isMaximized() ? '0' : 'auto'"
8456
- [style.right]="isMaximized() ? '0' : 'auto'"
8457
- [style.bottom]="isMaximized() ? '0' : 'auto'"
8458
- >
8459
- <!-- Header -->
8460
- @if (config().showHeader !== false) {
8461
- <div class="cide-card-header" (click)="onHeaderClick()">
8462
- <div class="cide-card-header-content">
8463
- @if (title) {
8464
- <h3 class="cide-card-title">{{ title }}</h3>
8465
- }
8466
- @if (subtitle) {
8467
- <p class="cide-card-subtitle">{{ subtitle }}</p>
8468
- }
8469
- <ng-content select="[card-header]"></ng-content>
8470
- </div>
8471
- <div class="cide-card-actions">
8472
- <ng-content select="[card-actions]"></ng-content>
8473
- @if (config().collapsible) {
8474
- <button
8475
- type="button"
8476
- class="cide-card-action-btn"
8477
- (click)="toggleCollapse($event)"
8478
- [attr.aria-label]="isCollapsed() ? 'Expand card' : 'Collapse card'"
8479
- [title]="isCollapsed() ? 'Expand' : 'Collapse'">
8480
- <cide-ele-icon>{{ isCollapsed() ? 'expand_more' : 'expand_less' }}</cide-ele-icon>
8481
- </button>
8482
- }
8483
- @if (config().minimizable) {
8484
- <button
8485
- type="button"
8486
- class="cide-card-action-btn"
8487
- (click)="toggleMinimize($event)"
8488
- [attr.aria-label]="isMinimized() ? 'Restore card' : 'Minimize card'"
8489
- [title]="isMinimized() ? 'Restore' : 'Minimize'">
8490
- <cide-ele-icon>{{ isMinimized() ? 'unfold_more' : 'unfold_less' }}</cide-ele-icon>
8491
- </button>
8492
- }
8493
- @if (config().maximizable) {
8494
- <button
8495
- type="button"
8496
- class="cide-card-action-btn"
8497
- (click)="toggleMaximize($event)"
8498
- [attr.aria-label]="isMaximized() ? 'Restore card' : 'Maximize card'"
8499
- [title]="isMaximized() ? 'Restore' : 'Maximize'">
8500
- <cide-ele-icon>{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
8501
- </button>
8502
- }
8503
- @if (config().removable) {
8504
- <button
8505
- type="button"
8506
- class="cide-card-action-btn cide-card-action-remove"
8507
- (click)="remove($event)"
8508
- aria-label="Remove card"
8509
- title="Remove">
8510
- <cide-ele-icon>close</cide-ele-icon>
8511
- </button>
8512
- }
8513
- </div>
8514
- </div>
8515
- }
8516
-
8517
- <!-- Content -->
8518
- <div
8519
- class="cide-card-content"
8520
- [class.cide-card-content-collapsed]="isCollapsed()"
8521
- [class.cide-card-content-minimized]="isMinimized()"
8522
- >
8523
- <ng-content></ng-content>
8524
- </div>
8525
-
8526
- <!-- Footer -->
8527
- @if (config().showFooter && !isMinimized()) {
8528
- <div class="cide-card-footer">
8529
- <ng-content select="[card-footer]"></ng-content>
8530
- </div>
8531
- }
8532
- </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>
8533
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"] }]
8534
8540
  }], propDecorators: { title: [{
8535
8541
  type: Input
@@ -14661,7 +14667,13 @@ class CideEleJsonEditorComponent {
14661
14667
  label;
14662
14668
  helperText;
14663
14669
  required = false;
14664
- disabled = signal(false, ...(ngDevMode ? [{ debugName: "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" }] : []));
14665
14677
  showCharacterCount = false;
14666
14678
  config = {};
14667
14679
  configSignal = signal({}, ...(ngDevMode ? [{ debugName: "configSignal" }] : []));