cloud-ide-layout 1.0.108 → 1.0.111

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 (14) hide show
  1. package/fesm2022/{cloud-ide-layout-cloud-ide-layout-BaeUxU6C.mjs → cloud-ide-layout-cloud-ide-layout-BbcIno6W.mjs} +985 -900
  2. package/fesm2022/cloud-ide-layout-cloud-ide-layout-BbcIno6W.mjs.map +1 -0
  3. package/fesm2022/{cloud-ide-layout-drawer-theme.component-D46FeYqz.mjs → cloud-ide-layout-drawer-theme.component-CAocxERw.mjs} +2 -2
  4. package/fesm2022/{cloud-ide-layout-drawer-theme.component-D46FeYqz.mjs.map → cloud-ide-layout-drawer-theme.component-CAocxERw.mjs.map} +1 -1
  5. package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-D_BFF6Qt.mjs → cloud-ide-layout-floating-entity-selection.component-DMS4hfOP.mjs} +2 -2
  6. package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-D_BFF6Qt.mjs.map → cloud-ide-layout-floating-entity-selection.component-DMS4hfOP.mjs.map} +1 -1
  7. package/fesm2022/{cloud-ide-layout-home-wrapper.component-C61ybzgc.mjs → cloud-ide-layout-home-wrapper.component-D3FEDXRo.mjs} +2 -2
  8. package/fesm2022/{cloud-ide-layout-home-wrapper.component-C61ybzgc.mjs.map → cloud-ide-layout-home-wrapper.component-D3FEDXRo.mjs.map} +1 -1
  9. package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-CIwq4Ei_.mjs → cloud-ide-layout-sidedrawer-notes.component-DYbvtr2t.mjs} +2 -2
  10. package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-CIwq4Ei_.mjs.map → cloud-ide-layout-sidedrawer-notes.component-DYbvtr2t.mjs.map} +1 -1
  11. package/fesm2022/cloud-ide-layout.mjs +1 -1
  12. package/index.d.ts +4 -0
  13. package/package.json +1 -1
  14. package/fesm2022/cloud-ide-layout-cloud-ide-layout-BaeUxU6C.mjs.map +0 -1
package/fesm2022/{cloud-ide-layout-cloud-ide-layout-BaeUxU6C.mjs → cloud-ide-layout-cloud-ide-layout-BbcIno6W.mjs} RENAMED
@@ -7,7 +7,7 @@ import { map, filter, tap, catchError, shareReplay, take, distinctUntilChanged }
7
7
  import * as i2$1 from '@angular/router';
8
8
  import { Router, NavigationEnd, RouteReuseStrategy, RouterModule } from '@angular/router';
9
9
  import { Title, DomSanitizer } from '@angular/platform-browser';
10
- import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, NotificationService, CideIconComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideThemeService, WebSocketNotificationService, NotificationApiService, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, KeyboardShortcutService, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent } from 'cloud-ide-element';
10
+ import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, NotificationService, CideIconComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideThemeService, WebSocketNotificationService, NotificationApiService, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, KeyboardShortcutService, FloatingContainerShortcutsService, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent } from 'cloud-ide-element';
11
11
  import * as i1 from '@angular/common';
12
12
  import { CommonModule, NgClass, NgFor, NgIf, isPlatformBrowser } from '@angular/common';
13
13
  import { FINANCIAL_YEAR_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, AUTH_SERVICE_TOKEN, authGuard, ENTITY_SERVICE_TOKEN } from 'cloud-ide-shared';
@@ -1268,7 +1268,7 @@ class CideLytFloatingEntitySelectionService {
1268
1268
  }
1269
1269
  try {
1270
1270
  // Use relative import to avoid circular dependency
1271
- const module = await import('./cloud-ide-layout-floating-entity-selection.component-D_BFF6Qt.mjs');
1271
+ const module = await import('./cloud-ide-layout-floating-entity-selection.component-DMS4hfOP.mjs');
1272
1272
  if (module.CideLytFloatingEntitySelectionComponent) {
1273
1273
  this.containerService.registerComponent('entity-selection-header', module.CideLytFloatingEntitySelectionComponent);
1274
1274
  console.log('✅ Entity selection component registered successfully');
@@ -1442,36 +1442,65 @@ class NotificationSettingsService {
1442
1442
  // Create audio context for sound generation
1443
1443
  // Handle browser autoplay policy - resume if suspended
1444
1444
  const AudioContextClass = window.AudioContext || window.webkitAudioContext;
1445
- const audioContext = new AudioContextClass();
1445
+ let audioContext;
1446
+ // Try to get existing audio context or create new one
1447
+ if (!this._audioContext) {
1448
+ audioContext = new AudioContextClass();
1449
+ this._audioContext = audioContext;
1450
+ }
1451
+ else {
1452
+ audioContext = this._audioContext;
1453
+ }
1454
+ // Resume audio context if suspended (required for browser autoplay policy)
1446
1455
  if (audioContext.state === 'suspended') {
1447
- audioContext.resume();
1448
- }
1449
- const volume = settings.soundVolume / 100;
1450
- const currentTime = audioContext.currentTime;
1451
- // Configure based on sound type
1452
- switch (settings.soundType) {
1453
- case 'gentle':
1454
- this.playTone(audioContext, 800, 600, 0.15, volume, 'sine');
1455
- break;
1456
- case 'alert':
1457
- this.playTone(audioContext, 1000, 800, 0.2, volume, 'square');
1458
- break;
1459
- case 'chime':
1460
- // Play a chord (C-E-G)
1461
- this.playTone(audioContext, 523.25, 523.25, 0.3, volume * 0.7, 'sine', 0); // C5
1462
- this.playTone(audioContext, 659.25, 659.25, 0.3, volume * 0.7, 'sine', 0.05); // E5
1463
- this.playTone(audioContext, 783.99, 783.99, 0.3, volume * 0.7, 'sine', 0.1); // G5
1464
- break;
1465
- case 'default':
1466
- default:
1467
- this.playTone(audioContext, 800, 600, 0.15, volume, 'sine');
1468
- break;
1456
+ audioContext.resume().then(() => {
1457
+ this.playSoundWithContext(audioContext, settings);
1458
+ }).catch((error) => {
1459
+ console.warn('Failed to resume audio context:', error);
1460
+ // Try creating a new context as fallback
1461
+ try {
1462
+ const newContext = new AudioContextClass();
1463
+ this.playSoundWithContext(newContext, settings);
1464
+ }
1465
+ catch (fallbackError) {
1466
+ console.warn('Failed to create fallback audio context:', fallbackError);
1467
+ }
1468
+ });
1469
+ }
1470
+ else {
1471
+ // Context is already running, play sound immediately
1472
+ this.playSoundWithContext(audioContext, settings);
1469
1473
  }
1470
1474
  }
1471
1475
  catch (error) {
1472
1476
  console.warn('Failed to play notification sound:', error);
1473
1477
  }
1474
1478
  }
1479
+ /**
1480
+ * Play sound with the given audio context
1481
+ */
1482
+ playSoundWithContext(audioContext, settings) {
1483
+ const volume = settings.soundVolume / 100;
1484
+ // Configure based on sound type
1485
+ switch (settings.soundType) {
1486
+ case 'gentle':
1487
+ this.playTone(audioContext, 800, 600, 0.15, volume, 'sine');
1488
+ break;
1489
+ case 'alert':
1490
+ this.playTone(audioContext, 1000, 800, 0.2, volume, 'square');
1491
+ break;
1492
+ case 'chime':
1493
+ // Play a chord (C-E-G)
1494
+ this.playTone(audioContext, 523.25, 523.25, 0.3, volume * 0.7, 'sine', 0); // C5
1495
+ this.playTone(audioContext, 659.25, 659.25, 0.3, volume * 0.7, 'sine', 0.05); // E5
1496
+ this.playTone(audioContext, 783.99, 783.99, 0.3, volume * 0.7, 'sine', 0.1); // G5
1497
+ break;
1498
+ case 'default':
1499
+ default:
1500
+ this.playTone(audioContext, 800, 600, 0.15, volume, 'sine');
1501
+ break;
1502
+ }
1503
+ }
1475
1504
  /**
1476
1505
  * Play a single tone
1477
1506
  */
@@ -1590,216 +1619,216 @@ class NotificationSettingsComponent {
1590
1619
  this.notificationService.info('Settings reset to defaults');
1591
1620
  }
1592
1621
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1593
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: NotificationSettingsComponent, isStandalone: true, selector: "cide-lyt-notification-settings", ngImport: i0, template: `
1594
- <div class="tw-p-6 tw-space-y-6 tw-bg-white dark:tw-bg-gray-900">
1595
- <!-- Header -->
1596
- <div class="tw-flex tw-items-center tw-gap-2 tw-pb-3 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
1597
- <div class="tw-w-8 tw-h-8 tw-bg-blue-500 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
1598
- <cide-ele-icon class="tw-text-white">settings</cide-ele-icon>
1599
- </div>
1600
- <div>
1601
- <h3 class="tw-m-0 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Notification Settings</h3>
1602
- <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Customize your notification preferences</p>
1603
- </div>
1604
- </div>
1605
-
1606
- <form [formGroup]="settingsForm" class="tw-space-y-6">
1607
- <!-- Sound Settings -->
1608
- <div class="tw-space-y-3">
1609
- <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Sound Settings</h4>
1610
-
1611
- <!-- Enable Sound -->
1612
- <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1613
- <div class="tw-flex tw-items-center tw-gap-2">
1614
- <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">volume_up</cide-ele-icon>
1615
- <div>
1616
- <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Sound</label>
1617
- <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Play sound when receiving notifications</p>
1618
- </div>
1619
- </div>
1620
- <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1621
- <input
1622
- type="checkbox"
1623
- [checked]="settingsForm.get('soundEnabled')?.value"
1624
- (change)="settingsForm.get('soundEnabled')?.setValue($any($event.target).checked)"
1625
- class="tw-sr-only tw-peer">
1626
- <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1627
- </label>
1628
- </div>
1629
-
1630
- @if (settingsForm.get('soundEnabled')?.value) {
1631
- <!-- Sound Type -->
1632
- <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1633
- <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Sound Type</label>
1634
- <cide-ele-select
1635
- formControlName="soundType"
1636
- [options]="soundTypeOptions"
1637
- placeholder="Select sound type">
1638
- </cide-ele-select>
1639
- </div>
1640
-
1641
- <!-- Sound Volume -->
1642
- <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1643
- <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
1644
- <label class="tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300">Volume</label>
1645
- <span class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ settingsForm.get('soundVolume')?.value }}%</span>
1646
- </div>
1647
- <input
1648
- type="range"
1649
- formControlName="soundVolume"
1650
- min="0"
1651
- max="100"
1652
- step="5"
1653
- class="tw-w-full tw-h-2 tw-bg-gray-200 tw-rounded-lg tw-appearance-none tw-cursor-pointer dark:tw-bg-gray-700 tw-accent-blue-600">
1654
- <div class="tw-flex tw-justify-between tw-text-[10px] tw-text-gray-400 tw-mt-1">
1655
- <span>0%</span>
1656
- <span>100%</span>
1657
- </div>
1658
- </div>
1659
-
1660
- <!-- Test Sound Button -->
1661
- <button
1662
- type="button"
1663
- cideEleButton
1664
- variant="outline"
1665
- size="sm"
1666
- (click)="testSound()"
1667
- class="tw-w-full">
1668
- <cide-ele-icon>play_arrow</cide-ele-icon>
1669
- Test Sound
1670
- </button>
1671
- }
1672
- </div>
1673
-
1674
- <!-- Quiet Hours -->
1675
- <div class="tw-space-y-3">
1676
- <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Quiet Hours</h4>
1677
-
1678
- <!-- Enable Quiet Hours -->
1679
- <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1680
- <div class="tw-flex tw-items-center tw-gap-2">
1681
- <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">schedule</cide-ele-icon>
1682
- <div>
1683
- <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Quiet Hours</label>
1684
- <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Mute notifications during specified hours</p>
1685
- </div>
1686
- </div>
1687
- <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1688
- <input
1689
- type="checkbox"
1690
- [checked]="settingsForm.get('quietHoursEnabled')?.value"
1691
- (change)="settingsForm.get('quietHoursEnabled')?.setValue($any($event.target).checked)"
1692
- class="tw-sr-only tw-peer">
1693
- <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1694
- </label>
1695
- </div>
1696
-
1697
- @if (settingsForm.get('quietHoursEnabled')?.value) {
1698
- <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1699
- <div>
1700
- <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Start Time</label>
1701
- <cide-ele-input
1702
- type="time"
1703
- formControlName="quietHoursStart"
1704
- placeholder="22:00">
1705
- </cide-ele-input>
1706
- </div>
1707
- <div>
1708
- <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">End Time</label>
1709
- <cide-ele-input
1710
- type="time"
1711
- formControlName="quietHoursEnd"
1712
- placeholder="08:00">
1713
- </cide-ele-input>
1714
- </div>
1715
- </div>
1716
- }
1717
- </div>
1718
-
1719
- <!-- Snooze Settings -->
1720
- <div class="tw-space-y-3">
1721
- <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Snooze</h4>
1722
-
1723
- <!-- Enable Snooze -->
1724
- <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1725
- <div class="tw-flex tw-items-center tw-gap-2">
1726
- <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">snooze</cide-ele-icon>
1727
- <div>
1728
- <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Snooze</label>
1729
- <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Temporarily pause notifications</p>
1730
- </div>
1731
- </div>
1732
- <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1733
- <input
1734
- type="checkbox"
1735
- [checked]="settingsForm.get('snoozeEnabled')?.value"
1736
- (change)="settingsForm.get('snoozeEnabled')?.setValue($any($event.target).checked)"
1737
- class="tw-sr-only tw-peer">
1738
- <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1739
- </label>
1740
- </div>
1741
-
1742
- @if (settingsForm.get('snoozeEnabled')?.value) {
1743
- <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1744
- <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Snooze Duration (minutes)</label>
1745
- <cide-ele-input
1746
- type="number"
1747
- formControlName="snoozeDuration"
1748
- min="5"
1749
- max="1440"
1750
- placeholder="30">
1751
- </cide-ele-input>
1752
- </div>
1753
- }
1754
- </div>
1755
-
1756
- <!-- Other Settings -->
1757
- <div class="tw-space-y-3">
1758
- <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Other Settings</h4>
1759
-
1760
- <!-- Desktop Notifications -->
1761
- <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1762
- <div class="tw-flex tw-items-center tw-gap-2">
1763
- <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">desktop_windows</cide-ele-icon>
1764
- <div>
1765
- <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Desktop Notifications</label>
1766
- <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Show browser notifications</p>
1767
- </div>
1768
- </div>
1769
- <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1770
- <input
1771
- type="checkbox"
1772
- [checked]="settingsForm.get('desktopNotifications')?.value"
1773
- (change)="settingsForm.get('desktopNotifications')?.setValue($any($event.target).checked)"
1774
- class="tw-sr-only tw-peer">
1775
- <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1776
- </label>
1777
- </div>
1778
- </div>
1779
-
1780
- <!-- Action Buttons -->
1781
- <div class="tw-flex tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200 dark:tw-border-gray-700">
1782
- <button
1783
- type="button"
1784
- cideEleButton
1785
- variant="outline"
1786
- size="sm"
1787
- (click)="reset()"
1788
- class="tw-flex-1">
1789
- Reset
1790
- </button>
1791
- <button
1792
- type="button"
1793
- cideEleButton
1794
- variant="primary"
1795
- size="sm"
1796
- (click)="save()"
1797
- class="tw-flex-1">
1798
- Save Settings
1799
- </button>
1800
- </div>
1801
- </form>
1802
- </div>
1622
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: NotificationSettingsComponent, isStandalone: true, selector: "cide-lyt-notification-settings", ngImport: i0, template: `
1623
+ <div class="tw-p-6 tw-space-y-6 tw-bg-white dark:tw-bg-gray-900">
1624
+ <!-- Header -->
1625
+ <div class="tw-flex tw-items-center tw-gap-2 tw-pb-3 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
1626
+ <div class="tw-w-8 tw-h-8 tw-bg-blue-500 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
1627
+ <cide-ele-icon class="tw-text-white">settings</cide-ele-icon>
1628
+ </div>
1629
+ <div>
1630
+ <h3 class="tw-m-0 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Notification Settings</h3>
1631
+ <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Customize your notification preferences</p>
1632
+ </div>
1633
+ </div>
1634
+
1635
+ <form [formGroup]="settingsForm" class="tw-space-y-6">
1636
+ <!-- Sound Settings -->
1637
+ <div class="tw-space-y-3">
1638
+ <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Sound Settings</h4>
1639
+
1640
+ <!-- Enable Sound -->
1641
+ <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1642
+ <div class="tw-flex tw-items-center tw-gap-2">
1643
+ <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">volume_up</cide-ele-icon>
1644
+ <div>
1645
+ <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Sound</label>
1646
+ <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Play sound when receiving notifications</p>
1647
+ </div>
1648
+ </div>
1649
+ <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1650
+ <input
1651
+ type="checkbox"
1652
+ [checked]="settingsForm.get('soundEnabled')?.value"
1653
+ (change)="settingsForm.get('soundEnabled')?.setValue($any($event.target).checked)"
1654
+ class="tw-sr-only tw-peer">
1655
+ <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1656
+ </label>
1657
+ </div>
1658
+
1659
+ @if (settingsForm.get('soundEnabled')?.value) {
1660
+ <!-- Sound Type -->
1661
+ <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1662
+ <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Sound Type</label>
1663
+ <cide-ele-select
1664
+ formControlName="soundType"
1665
+ [options]="soundTypeOptions"
1666
+ placeholder="Select sound type">
1667
+ </cide-ele-select>
1668
+ </div>
1669
+
1670
+ <!-- Sound Volume -->
1671
+ <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1672
+ <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
1673
+ <label class="tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300">Volume</label>
1674
+ <span class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ settingsForm.get('soundVolume')?.value }}%</span>
1675
+ </div>
1676
+ <input
1677
+ type="range"
1678
+ formControlName="soundVolume"
1679
+ min="0"
1680
+ max="100"
1681
+ step="5"
1682
+ class="tw-w-full tw-h-2 tw-bg-gray-200 tw-rounded-lg tw-appearance-none tw-cursor-pointer dark:tw-bg-gray-700 tw-accent-blue-600">
1683
+ <div class="tw-flex tw-justify-between tw-text-[10px] tw-text-gray-400 tw-mt-1">
1684
+ <span>0%</span>
1685
+ <span>100%</span>
1686
+ </div>
1687
+ </div>
1688
+
1689
+ <!-- Test Sound Button -->
1690
+ <button
1691
+ type="button"
1692
+ cideEleButton
1693
+ variant="outline"
1694
+ size="sm"
1695
+ (click)="testSound()"
1696
+ class="tw-w-full">
1697
+ <cide-ele-icon>play_arrow</cide-ele-icon>
1698
+ Test Sound
1699
+ </button>
1700
+ }
1701
+ </div>
1702
+
1703
+ <!-- Quiet Hours -->
1704
+ <div class="tw-space-y-3">
1705
+ <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Quiet Hours</h4>
1706
+
1707
+ <!-- Enable Quiet Hours -->
1708
+ <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1709
+ <div class="tw-flex tw-items-center tw-gap-2">
1710
+ <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">schedule</cide-ele-icon>
1711
+ <div>
1712
+ <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Quiet Hours</label>
1713
+ <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Mute notifications during specified hours</p>
1714
+ </div>
1715
+ </div>
1716
+ <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1717
+ <input
1718
+ type="checkbox"
1719
+ [checked]="settingsForm.get('quietHoursEnabled')?.value"
1720
+ (change)="settingsForm.get('quietHoursEnabled')?.setValue($any($event.target).checked)"
1721
+ class="tw-sr-only tw-peer">
1722
+ <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1723
+ </label>
1724
+ </div>
1725
+
1726
+ @if (settingsForm.get('quietHoursEnabled')?.value) {
1727
+ <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1728
+ <div>
1729
+ <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Start Time</label>
1730
+ <cide-ele-input
1731
+ type="time"
1732
+ formControlName="quietHoursStart"
1733
+ placeholder="22:00">
1734
+ </cide-ele-input>
1735
+ </div>
1736
+ <div>
1737
+ <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">End Time</label>
1738
+ <cide-ele-input
1739
+ type="time"
1740
+ formControlName="quietHoursEnd"
1741
+ placeholder="08:00">
1742
+ </cide-ele-input>
1743
+ </div>
1744
+ </div>
1745
+ }
1746
+ </div>
1747
+
1748
+ <!-- Snooze Settings -->
1749
+ <div class="tw-space-y-3">
1750
+ <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Snooze</h4>
1751
+
1752
+ <!-- Enable Snooze -->
1753
+ <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1754
+ <div class="tw-flex tw-items-center tw-gap-2">
1755
+ <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">snooze</cide-ele-icon>
1756
+ <div>
1757
+ <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Snooze</label>
1758
+ <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Temporarily pause notifications</p>
1759
+ </div>
1760
+ </div>
1761
+ <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1762
+ <input
1763
+ type="checkbox"
1764
+ [checked]="settingsForm.get('snoozeEnabled')?.value"
1765
+ (change)="settingsForm.get('snoozeEnabled')?.setValue($any($event.target).checked)"
1766
+ class="tw-sr-only tw-peer">
1767
+ <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1768
+ </label>
1769
+ </div>
1770
+
1771
+ @if (settingsForm.get('snoozeEnabled')?.value) {
1772
+ <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1773
+ <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Snooze Duration (minutes)</label>
1774
+ <cide-ele-input
1775
+ type="number"
1776
+ formControlName="snoozeDuration"
1777
+ min="5"
1778
+ max="1440"
1779
+ placeholder="30">
1780
+ </cide-ele-input>
1781
+ </div>
1782
+ }
1783
+ </div>
1784
+
1785
+ <!-- Other Settings -->
1786
+ <div class="tw-space-y-3">
1787
+ <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Other Settings</h4>
1788
+
1789
+ <!-- Desktop Notifications -->
1790
+ <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1791
+ <div class="tw-flex tw-items-center tw-gap-2">
1792
+ <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">desktop_windows</cide-ele-icon>
1793
+ <div>
1794
+ <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Desktop Notifications</label>
1795
+ <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Show browser notifications</p>
1796
+ </div>
1797
+ </div>
1798
+ <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1799
+ <input
1800
+ type="checkbox"
1801
+ [checked]="settingsForm.get('desktopNotifications')?.value"
1802
+ (change)="settingsForm.get('desktopNotifications')?.setValue($any($event.target).checked)"
1803
+ class="tw-sr-only tw-peer">
1804
+ <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1805
+ </label>
1806
+ </div>
1807
+ </div>
1808
+
1809
+ <!-- Action Buttons -->
1810
+ <div class="tw-flex tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200 dark:tw-border-gray-700">
1811
+ <button
1812
+ type="button"
1813
+ cideEleButton
1814
+ variant="outline"
1815
+ size="sm"
1816
+ (click)="reset()"
1817
+ class="tw-flex-1">
1818
+ Reset
1819
+ </button>
1820
+ <button
1821
+ type="button"
1822
+ cideEleButton
1823
+ variant="primary"
1824
+ size="sm"
1825
+ (click)="save()"
1826
+ class="tw-flex-1">
1827
+ Save Settings
1828
+ </button>
1829
+ </div>
1830
+ </form>
1831
+ </div>
1803
1832
  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", 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: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
1804
1833
  }
1805
1834
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationSettingsComponent, decorators: [{
@@ -1811,216 +1840,216 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
1811
1840
  CideEleButtonComponent,
1812
1841
  CideInputComponent,
1813
1842
  CideSelectComponent
1814
- ], template: `
1815
- <div class="tw-p-6 tw-space-y-6 tw-bg-white dark:tw-bg-gray-900">
1816
- <!-- Header -->
1817
- <div class="tw-flex tw-items-center tw-gap-2 tw-pb-3 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
1818
- <div class="tw-w-8 tw-h-8 tw-bg-blue-500 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
1819
- <cide-ele-icon class="tw-text-white">settings</cide-ele-icon>
1820
- </div>
1821
- <div>
1822
- <h3 class="tw-m-0 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Notification Settings</h3>
1823
- <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Customize your notification preferences</p>
1824
- </div>
1825
- </div>
1826
-
1827
- <form [formGroup]="settingsForm" class="tw-space-y-6">
1828
- <!-- Sound Settings -->
1829
- <div class="tw-space-y-3">
1830
- <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Sound Settings</h4>
1831
-
1832
- <!-- Enable Sound -->
1833
- <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1834
- <div class="tw-flex tw-items-center tw-gap-2">
1835
- <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">volume_up</cide-ele-icon>
1836
- <div>
1837
- <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Sound</label>
1838
- <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Play sound when receiving notifications</p>
1839
- </div>
1840
- </div>
1841
- <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1842
- <input
1843
- type="checkbox"
1844
- [checked]="settingsForm.get('soundEnabled')?.value"
1845
- (change)="settingsForm.get('soundEnabled')?.setValue($any($event.target).checked)"
1846
- class="tw-sr-only tw-peer">
1847
- <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1848
- </label>
1849
- </div>
1850
-
1851
- @if (settingsForm.get('soundEnabled')?.value) {
1852
- <!-- Sound Type -->
1853
- <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1854
- <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Sound Type</label>
1855
- <cide-ele-select
1856
- formControlName="soundType"
1857
- [options]="soundTypeOptions"
1858
- placeholder="Select sound type">
1859
- </cide-ele-select>
1860
- </div>
1861
-
1862
- <!-- Sound Volume -->
1863
- <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1864
- <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
1865
- <label class="tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300">Volume</label>
1866
- <span class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ settingsForm.get('soundVolume')?.value }}%</span>
1867
- </div>
1868
- <input
1869
- type="range"
1870
- formControlName="soundVolume"
1871
- min="0"
1872
- max="100"
1873
- step="5"
1874
- class="tw-w-full tw-h-2 tw-bg-gray-200 tw-rounded-lg tw-appearance-none tw-cursor-pointer dark:tw-bg-gray-700 tw-accent-blue-600">
1875
- <div class="tw-flex tw-justify-between tw-text-[10px] tw-text-gray-400 tw-mt-1">
1876
- <span>0%</span>
1877
- <span>100%</span>
1878
- </div>
1879
- </div>
1880
-
1881
- <!-- Test Sound Button -->
1882
- <button
1883
- type="button"
1884
- cideEleButton
1885
- variant="outline"
1886
- size="sm"
1887
- (click)="testSound()"
1888
- class="tw-w-full">
1889
- <cide-ele-icon>play_arrow</cide-ele-icon>
1890
- Test Sound
1891
- </button>
1892
- }
1893
- </div>
1894
-
1895
- <!-- Quiet Hours -->
1896
- <div class="tw-space-y-3">
1897
- <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Quiet Hours</h4>
1898
-
1899
- <!-- Enable Quiet Hours -->
1900
- <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1901
- <div class="tw-flex tw-items-center tw-gap-2">
1902
- <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">schedule</cide-ele-icon>
1903
- <div>
1904
- <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Quiet Hours</label>
1905
- <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Mute notifications during specified hours</p>
1906
- </div>
1907
- </div>
1908
- <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1909
- <input
1910
- type="checkbox"
1911
- [checked]="settingsForm.get('quietHoursEnabled')?.value"
1912
- (change)="settingsForm.get('quietHoursEnabled')?.setValue($any($event.target).checked)"
1913
- class="tw-sr-only tw-peer">
1914
- <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1915
- </label>
1916
- </div>
1917
-
1918
- @if (settingsForm.get('quietHoursEnabled')?.value) {
1919
- <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1920
- <div>
1921
- <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Start Time</label>
1922
- <cide-ele-input
1923
- type="time"
1924
- formControlName="quietHoursStart"
1925
- placeholder="22:00">
1926
- </cide-ele-input>
1927
- </div>
1928
- <div>
1929
- <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">End Time</label>
1930
- <cide-ele-input
1931
- type="time"
1932
- formControlName="quietHoursEnd"
1933
- placeholder="08:00">
1934
- </cide-ele-input>
1935
- </div>
1936
- </div>
1937
- }
1938
- </div>
1939
-
1940
- <!-- Snooze Settings -->
1941
- <div class="tw-space-y-3">
1942
- <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Snooze</h4>
1943
-
1944
- <!-- Enable Snooze -->
1945
- <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1946
- <div class="tw-flex tw-items-center tw-gap-2">
1947
- <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">snooze</cide-ele-icon>
1948
- <div>
1949
- <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Snooze</label>
1950
- <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Temporarily pause notifications</p>
1951
- </div>
1952
- </div>
1953
- <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1954
- <input
1955
- type="checkbox"
1956
- [checked]="settingsForm.get('snoozeEnabled')?.value"
1957
- (change)="settingsForm.get('snoozeEnabled')?.setValue($any($event.target).checked)"
1958
- class="tw-sr-only tw-peer">
1959
- <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1960
- </label>
1961
- </div>
1962
-
1963
- @if (settingsForm.get('snoozeEnabled')?.value) {
1964
- <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1965
- <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Snooze Duration (minutes)</label>
1966
- <cide-ele-input
1967
- type="number"
1968
- formControlName="snoozeDuration"
1969
- min="5"
1970
- max="1440"
1971
- placeholder="30">
1972
- </cide-ele-input>
1973
- </div>
1974
- }
1975
- </div>
1976
-
1977
- <!-- Other Settings -->
1978
- <div class="tw-space-y-3">
1979
- <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Other Settings</h4>
1980
-
1981
- <!-- Desktop Notifications -->
1982
- <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1983
- <div class="tw-flex tw-items-center tw-gap-2">
1984
- <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">desktop_windows</cide-ele-icon>
1985
- <div>
1986
- <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Desktop Notifications</label>
1987
- <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Show browser notifications</p>
1988
- </div>
1989
- </div>
1990
- <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1991
- <input
1992
- type="checkbox"
1993
- [checked]="settingsForm.get('desktopNotifications')?.value"
1994
- (change)="settingsForm.get('desktopNotifications')?.setValue($any($event.target).checked)"
1995
- class="tw-sr-only tw-peer">
1996
- <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1997
- </label>
1998
- </div>
1999
- </div>
2000
-
2001
- <!-- Action Buttons -->
2002
- <div class="tw-flex tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200 dark:tw-border-gray-700">
2003
- <button
2004
- type="button"
2005
- cideEleButton
2006
- variant="outline"
2007
- size="sm"
2008
- (click)="reset()"
2009
- class="tw-flex-1">
2010
- Reset
2011
- </button>
2012
- <button
2013
- type="button"
2014
- cideEleButton
2015
- variant="primary"
2016
- size="sm"
2017
- (click)="save()"
2018
- class="tw-flex-1">
2019
- Save Settings
2020
- </button>
2021
- </div>
2022
- </form>
2023
- </div>
1843
+ ], template: `
1844
+ <div class="tw-p-6 tw-space-y-6 tw-bg-white dark:tw-bg-gray-900">
1845
+ <!-- Header -->
1846
+ <div class="tw-flex tw-items-center tw-gap-2 tw-pb-3 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
1847
+ <div class="tw-w-8 tw-h-8 tw-bg-blue-500 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
1848
+ <cide-ele-icon class="tw-text-white">settings</cide-ele-icon>
1849
+ </div>
1850
+ <div>
1851
+ <h3 class="tw-m-0 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Notification Settings</h3>
1852
+ <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Customize your notification preferences</p>
1853
+ </div>
1854
+ </div>
1855
+
1856
+ <form [formGroup]="settingsForm" class="tw-space-y-6">
1857
+ <!-- Sound Settings -->
1858
+ <div class="tw-space-y-3">
1859
+ <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Sound Settings</h4>
1860
+
1861
+ <!-- Enable Sound -->
1862
+ <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1863
+ <div class="tw-flex tw-items-center tw-gap-2">
1864
+ <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">volume_up</cide-ele-icon>
1865
+ <div>
1866
+ <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Sound</label>
1867
+ <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Play sound when receiving notifications</p>
1868
+ </div>
1869
+ </div>
1870
+ <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1871
+ <input
1872
+ type="checkbox"
1873
+ [checked]="settingsForm.get('soundEnabled')?.value"
1874
+ (change)="settingsForm.get('soundEnabled')?.setValue($any($event.target).checked)"
1875
+ class="tw-sr-only tw-peer">
1876
+ <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1877
+ </label>
1878
+ </div>
1879
+
1880
+ @if (settingsForm.get('soundEnabled')?.value) {
1881
+ <!-- Sound Type -->
1882
+ <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1883
+ <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Sound Type</label>
1884
+ <cide-ele-select
1885
+ formControlName="soundType"
1886
+ [options]="soundTypeOptions"
1887
+ placeholder="Select sound type">
1888
+ </cide-ele-select>
1889
+ </div>
1890
+
1891
+ <!-- Sound Volume -->
1892
+ <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1893
+ <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
1894
+ <label class="tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300">Volume</label>
1895
+ <span class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ settingsForm.get('soundVolume')?.value }}%</span>
1896
+ </div>
1897
+ <input
1898
+ type="range"
1899
+ formControlName="soundVolume"
1900
+ min="0"
1901
+ max="100"
1902
+ step="5"
1903
+ class="tw-w-full tw-h-2 tw-bg-gray-200 tw-rounded-lg tw-appearance-none tw-cursor-pointer dark:tw-bg-gray-700 tw-accent-blue-600">
1904
+ <div class="tw-flex tw-justify-between tw-text-[10px] tw-text-gray-400 tw-mt-1">
1905
+ <span>0%</span>
1906
+ <span>100%</span>
1907
+ </div>
1908
+ </div>
1909
+
1910
+ <!-- Test Sound Button -->
1911
+ <button
1912
+ type="button"
1913
+ cideEleButton
1914
+ variant="outline"
1915
+ size="sm"
1916
+ (click)="testSound()"
1917
+ class="tw-w-full">
1918
+ <cide-ele-icon>play_arrow</cide-ele-icon>
1919
+ Test Sound
1920
+ </button>
1921
+ }
1922
+ </div>
1923
+
1924
+ <!-- Quiet Hours -->
1925
+ <div class="tw-space-y-3">
1926
+ <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Quiet Hours</h4>
1927
+
1928
+ <!-- Enable Quiet Hours -->
1929
+ <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1930
+ <div class="tw-flex tw-items-center tw-gap-2">
1931
+ <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">schedule</cide-ele-icon>
1932
+ <div>
1933
+ <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Quiet Hours</label>
1934
+ <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Mute notifications during specified hours</p>
1935
+ </div>
1936
+ </div>
1937
+ <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1938
+ <input
1939
+ type="checkbox"
1940
+ [checked]="settingsForm.get('quietHoursEnabled')?.value"
1941
+ (change)="settingsForm.get('quietHoursEnabled')?.setValue($any($event.target).checked)"
1942
+ class="tw-sr-only tw-peer">
1943
+ <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1944
+ </label>
1945
+ </div>
1946
+
1947
+ @if (settingsForm.get('quietHoursEnabled')?.value) {
1948
+ <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1949
+ <div>
1950
+ <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Start Time</label>
1951
+ <cide-ele-input
1952
+ type="time"
1953
+ formControlName="quietHoursStart"
1954
+ placeholder="22:00">
1955
+ </cide-ele-input>
1956
+ </div>
1957
+ <div>
1958
+ <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">End Time</label>
1959
+ <cide-ele-input
1960
+ type="time"
1961
+ formControlName="quietHoursEnd"
1962
+ placeholder="08:00">
1963
+ </cide-ele-input>
1964
+ </div>
1965
+ </div>
1966
+ }
1967
+ </div>
1968
+
1969
+ <!-- Snooze Settings -->
1970
+ <div class="tw-space-y-3">
1971
+ <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Snooze</h4>
1972
+
1973
+ <!-- Enable Snooze -->
1974
+ <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1975
+ <div class="tw-flex tw-items-center tw-gap-2">
1976
+ <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">snooze</cide-ele-icon>
1977
+ <div>
1978
+ <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Snooze</label>
1979
+ <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Temporarily pause notifications</p>
1980
+ </div>
1981
+ </div>
1982
+ <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
1983
+ <input
1984
+ type="checkbox"
1985
+ [checked]="settingsForm.get('snoozeEnabled')?.value"
1986
+ (change)="settingsForm.get('snoozeEnabled')?.setValue($any($event.target).checked)"
1987
+ class="tw-sr-only tw-peer">
1988
+ <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
1989
+ </label>
1990
+ </div>
1991
+
1992
+ @if (settingsForm.get('snoozeEnabled')?.value) {
1993
+ <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
1994
+ <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Snooze Duration (minutes)</label>
1995
+ <cide-ele-input
1996
+ type="number"
1997
+ formControlName="snoozeDuration"
1998
+ min="5"
1999
+ max="1440"
2000
+ placeholder="30">
2001
+ </cide-ele-input>
2002
+ </div>
2003
+ }
2004
+ </div>
2005
+
2006
+ <!-- Other Settings -->
2007
+ <div class="tw-space-y-3">
2008
+ <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Other Settings</h4>
2009
+
2010
+ <!-- Desktop Notifications -->
2011
+ <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700">
2012
+ <div class="tw-flex tw-items-center tw-gap-2">
2013
+ <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">desktop_windows</cide-ele-icon>
2014
+ <div>
2015
+ <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Desktop Notifications</label>
2016
+ <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Show browser notifications</p>
2017
+ </div>
2018
+ </div>
2019
+ <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
2020
+ <input
2021
+ type="checkbox"
2022
+ [checked]="settingsForm.get('desktopNotifications')?.value"
2023
+ (change)="settingsForm.get('desktopNotifications')?.setValue($any($event.target).checked)"
2024
+ class="tw-sr-only tw-peer">
2025
+ <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
2026
+ </label>
2027
+ </div>
2028
+ </div>
2029
+
2030
+ <!-- Action Buttons -->
2031
+ <div class="tw-flex tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200 dark:tw-border-gray-700">
2032
+ <button
2033
+ type="button"
2034
+ cideEleButton
2035
+ variant="outline"
2036
+ size="sm"
2037
+ (click)="reset()"
2038
+ class="tw-flex-1">
2039
+ Reset
2040
+ </button>
2041
+ <button
2042
+ type="button"
2043
+ cideEleButton
2044
+ variant="primary"
2045
+ size="sm"
2046
+ (click)="save()"
2047
+ class="tw-flex-1">
2048
+ Save Settings
2049
+ </button>
2050
+ </div>
2051
+ </form>
2052
+ </div>
2024
2053
  `, styles: [":host{display:block}\n"] }]
2025
2054
  }] });
2026
2055
 
@@ -2052,6 +2081,9 @@ class CideLytHeaderWrapperComponent {
2052
2081
  unreadCount = computed(() => this.wsNotificationService?.unreadNotificationsCount() || 0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
2053
2082
  isNotificationDropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "isNotificationDropdownOpen" }] : []));
2054
2083
  notificationItems = signal([], ...(ngDevMode ? [{ debugName: "notificationItems" }] : []));
2084
+ // Track previously seen notification IDs to detect new ones
2085
+ previousNotificationIds = new Set();
2086
+ isInitialLoad = true; // Track if this is the first load
2055
2087
  // Animation and undo state
2056
2088
  animatingNotifications = signal(new Set(), ...(ngDevMode ? [{ debugName: "animatingNotifications" }] : []));
2057
2089
  recentlyRemovedNotifications = signal(new Map(), ...(ngDevMode ? [{ debugName: "recentlyRemovedNotifications" }] : []));
@@ -2187,6 +2219,9 @@ class CideLytHeaderWrapperComponent {
2187
2219
  });
2188
2220
  }
2189
2221
  ngOnInit() {
2222
+ // Initialize audio context early to avoid browser autoplay restrictions
2223
+ // This must be done on user interaction, so we'll do it on first user click
2224
+ this.initializeAudioContext();
2190
2225
  // Subscribe to theme service for reactive theme updates
2191
2226
  this.themeService.getEffectiveTheme$()
2192
2227
  .pipe(takeUntilDestroyed(this.destroyRef))
@@ -2320,6 +2355,23 @@ class CideLytHeaderWrapperComponent {
2320
2355
  }
2321
2356
  // Sort by timestamp (newest first)
2322
2357
  filteredNotifications.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
2358
+ // Detect new notifications and play sound
2359
+ if (!this.isInitialLoad) {
2360
+ const currentNotificationIds = new Set(filteredNotifications.map(n => n.id));
2361
+ const newNotifications = filteredNotifications.filter(n => !this.previousNotificationIds.has(n.id));
2362
+ if (newNotifications.length > 0) {
2363
+ console.log(`[Notifications] ${newNotifications.length} new notification(s) detected, playing sound...`);
2364
+ // Play sound for new notifications
2365
+ this.playNotificationSound();
2366
+ }
2367
+ // Update previous notification IDs
2368
+ this.previousNotificationIds = currentNotificationIds;
2369
+ }
2370
+ else {
2371
+ // First load - just track IDs, don't play sound
2372
+ this.previousNotificationIds = new Set(filteredNotifications.map(n => n.id));
2373
+ this.isInitialLoad = false;
2374
+ }
2323
2375
  console.log('[Notifications] Total notifications to display:', filteredNotifications.length);
2324
2376
  this.notifications.set(filteredNotifications);
2325
2377
  this.updateNotificationDropdown();
@@ -3245,6 +3297,44 @@ class CideLytHeaderWrapperComponent {
3245
3297
  }
3246
3298
  }
3247
3299
  }
3300
+ /**
3301
+ * Initialize audio context early to avoid browser autoplay restrictions
3302
+ */
3303
+ initializeAudioContext() {
3304
+ // Initialize audio context on first user interaction
3305
+ const initAudio = () => {
3306
+ try {
3307
+ const AudioContextClass = window.AudioContext || window.webkitAudioContext;
3308
+ if (AudioContextClass && !window._notificationAudioContext) {
3309
+ const audioContext = new AudioContextClass();
3310
+ // Resume to unlock audio (required for autoplay policy)
3311
+ if (audioContext.state === 'suspended') {
3312
+ audioContext.resume().then(() => {
3313
+ console.log('[Notifications] Audio context initialized and resumed');
3314
+ }).catch((error) => {
3315
+ console.warn('[Notifications] Failed to initialize audio context:', error);
3316
+ });
3317
+ }
3318
+ window._notificationAudioContext = audioContext;
3319
+ }
3320
+ }
3321
+ catch (error) {
3322
+ console.warn('[Notifications] Failed to initialize audio context:', error);
3323
+ }
3324
+ };
3325
+ // Try to initialize on any user interaction
3326
+ const events = ['click', 'touchstart', 'keydown'];
3327
+ const initOnce = () => {
3328
+ initAudio();
3329
+ // Remove listeners after first initialization
3330
+ events.forEach(event => {
3331
+ document.removeEventListener(event, initOnce);
3332
+ });
3333
+ };
3334
+ events.forEach(event => {
3335
+ document.addEventListener(event, initOnce, { once: true, passive: true });
3336
+ });
3337
+ }
3248
3338
  /**
3249
3339
  * Play notification sound based on user settings
3250
3340
  */
@@ -4397,16 +4487,8 @@ class CideLytRequestService {
4397
4487
  const id = this.generateId();
4398
4488
  const currentTabs = this.tabsSignal();
4399
4489
  console.log('currentTabs', currentTabs, route);
4400
- // Check if a tab with the same route and params already exists
4401
- const existingTab = currentTabs.find((tab) => {
4402
- const paramsMatch = JSON.stringify(tab.params || {}) === JSON.stringify(params || {});
4403
- return tab.route === route && paramsMatch;
4404
- });
4405
- console.log('existingTab', existingTab);
4406
- if (existingTab) {
4407
- this.activateTab(existingTab.id);
4408
- return existingTab.id;
4409
- }
4490
+ // Tab reuse disabled - always create new tab
4491
+ // Removed existing tab check to prevent tab reuse
4410
4492
  // Create new tab
4411
4493
  const newTab = {
4412
4494
  id,
@@ -4701,8 +4783,8 @@ class CideLytSidedrawerWrapperComponent {
4701
4783
  }
4702
4784
  ngOnInit() {
4703
4785
  // Initialize the component map (You'd likely populate this from a config or service)
4704
- this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-CIwq4Ei_.mjs').then(m => m.CideLytSidedrawerNotesComponent);
4705
- this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-D46FeYqz.mjs').then(m => m.CideLytDrawerThemeComponent);
4786
+ this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-DYbvtr2t.mjs').then(m => m.CideLytSidedrawerNotesComponent);
4787
+ this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-CAocxERw.mjs').then(m => m.CideLytDrawerThemeComponent);
4706
4788
  }
4707
4789
  async loadComponent(configFor) {
4708
4790
  console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -4873,6 +4955,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
4873
4955
  class ShortcutsPanelComponent {
4874
4956
  keyboardShortcutService = inject(KeyboardShortcutService);
4875
4957
  sanitizer = inject(DomSanitizer);
4958
+ // Inject FloatingContainerShortcutsService to ensure it's initialized and shortcuts are registered
4959
+ floatingContainerShortcutsService = inject(FloatingContainerShortcutsService);
4876
4960
  refreshInterval;
4877
4961
  shortcuts = signal([], ...(ngDevMode ? [{ debugName: "shortcuts" }] : []));
4878
4962
  searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
@@ -4895,6 +4979,8 @@ class ShortcutsPanelComponent {
4895
4979
  return Array.from(cats).sort();
4896
4980
  }, ...(ngDevMode ? [{ debugName: "categories" }] : []));
4897
4981
  ngOnInit() {
4982
+ // FloatingContainerShortcutsService is now injected, so it's initialized
4983
+ // Load shortcuts immediately
4898
4984
  this.loadShortcuts();
4899
4985
  // Reload shortcuts periodically to catch dynamically registered shortcuts
4900
4986
  // This ensures floating container shortcuts and custom shortcuts are shown
@@ -5026,278 +5112,278 @@ class ShortcutsPanelComponent {
5026
5112
  // Computed signal will automatically update
5027
5113
  }
5028
5114
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ShortcutsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5029
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ShortcutsPanelComponent, isStandalone: true, selector: "cide-lyt-shortcuts-panel", ngImport: i0, template: `
5030
- <div class="tw-p-6 tw-space-y-4 tw-bg-white dark:tw-bg-gray-900">
5031
- <!-- View Toggle and Refresh -->
5032
- <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-mb-4">
5033
- <button
5034
- type="button"
5035
- cideEleButton
5036
- variant="outline"
5037
- size="sm"
5038
- (click)="loadShortcuts()"
5039
- title="Refresh shortcuts">
5040
- <cide-ele-icon>refresh</cide-ele-icon>
5041
- Refresh
5042
- </button>
5043
- <button
5044
- type="button"
5045
- cideEleButton
5046
- variant="outline"
5047
- size="sm"
5048
- (click)="toggleView()">
5049
- <cide-ele-icon>{{ viewMode() === 'grouped' ? 'view_list' : 'category' }}</cide-ele-icon>
5050
- {{ viewMode() === 'grouped' ? 'List View' : 'Grouped View' }}
5051
- </button>
5052
- </div>
5053
-
5054
- <!-- Search -->
5055
- <div class="tw-relative">
5056
- <cide-ele-icon class="tw-absolute tw-left-2 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-text-gray-400">search</cide-ele-icon>
5057
- <input
5058
- type="text"
5059
- [value]="searchQuery()"
5060
- (input)="searchQuery.set($any($event.target).value)"
5061
- placeholder="Search shortcuts..."
5062
- class="tw-w-full tw-pl-8 tw-pr-3 tw-py-2 tw-text-sm tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500">
5063
- </div>
5064
-
5065
- <!-- Shortcuts Content -->
5066
- @if (filteredShortcuts().length === 0) {
5067
- <div class="tw-py-12 tw-text-center">
5068
- <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-2">keyboard_off</cide-ele-icon>
5069
- <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">No shortcuts found</p>
5070
- </div>
5071
- } @else {
5072
- @if (viewMode() === 'grouped') {
5073
- <!-- Grouped View -->
5074
- @for (category of categories(); track category) {
5075
- <div class="tw-space-y-2">
5076
- <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide tw-mt-4 tw-mb-2">
5077
- {{ category }}
5078
- </h4>
5079
- <div class="tw-space-y-2">
5080
- @for (shortcut of getShortcutsByCategory(category); track shortcut.id) {
5081
- <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
5082
- @if (shortcut.featuredHTML) {
5083
- <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
5084
- <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5085
- </div>
5086
- }
5087
- <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5088
- <div class="tw-flex-1">
5089
- <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5090
- <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5091
- {{ shortcut.title }}
5092
- </h5>
5093
- @if (shortcut.isUserDefined) {
5094
- <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
5095
- }
5096
- </div>
5097
- @if (shortcut.description) {
5098
- <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5099
- }
5100
- </div>
5101
- <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5102
- @for (key of getKeyParts(shortcut.keyCombination); track $index; let isLast = $last) {
5103
- <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
5104
- {{ key }}
5105
- </kbd>
5106
- @if (!isLast) {
5107
- <span class="tw-text-gray-400 tw-text-xs">+</span>
5108
- }
5109
- }
5110
- </div>
5111
- </div>
5112
- </div>
5113
- }
5114
- </div>
5115
- </div>
5116
- }
5117
- } @else {
5118
- <!-- List View -->
5119
- <div class="tw-space-y-2">
5120
- @for (shortcut of filteredShortcuts(); track shortcut.id) {
5121
- <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
5122
- @if (shortcut.featuredHTML) {
5123
- <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
5124
- <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5125
- </div>
5126
- }
5127
- <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5128
- <div class="tw-flex-1">
5129
- <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5130
- <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5131
- {{ shortcut.title }}
5132
- </h5>
5133
- @if (shortcut.isUserDefined) {
5134
- <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
5135
- }
5136
- </div>
5137
- @if (shortcut.description) {
5138
- <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5139
- }
5140
- @if (shortcut.category) {
5141
- <span class="tw-inline-block tw-mt-1 tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-medium tw-text-gray-500 dark:tw-text-gray-400 tw-bg-gray-100 dark:tw-bg-gray-600 tw-rounded">
5142
- {{ shortcut.category }}
5143
- </span>
5144
- }
5145
- </div>
5146
- <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5147
- @for (key of getKeyParts(shortcut.keyCombination); track $index) {
5148
- <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
5149
- {{ key }}
5150
- </kbd>
5151
- @if (!$last) {
5152
- <span class="tw-text-gray-400 tw-text-xs">+</span>
5153
- }
5154
- }
5155
- </div>
5156
- </div>
5157
- </div>
5158
- }
5159
- </div>
5160
- }
5161
- }
5162
- </div>
5115
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ShortcutsPanelComponent, isStandalone: true, selector: "cide-lyt-shortcuts-panel", ngImport: i0, template: `
5116
+ <div class="tw-p-6 tw-space-y-4 tw-bg-white dark:tw-bg-gray-900">
5117
+ <!-- View Toggle and Refresh -->
5118
+ <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-mb-4">
5119
+ <button
5120
+ type="button"
5121
+ cideEleButton
5122
+ variant="outline"
5123
+ size="sm"
5124
+ (click)="loadShortcuts()"
5125
+ title="Refresh shortcuts">
5126
+ <cide-ele-icon>refresh</cide-ele-icon>
5127
+ Refresh
5128
+ </button>
5129
+ <button
5130
+ type="button"
5131
+ cideEleButton
5132
+ variant="outline"
5133
+ size="sm"
5134
+ (click)="toggleView()">
5135
+ <cide-ele-icon>{{ viewMode() === 'grouped' ? 'view_list' : 'category' }}</cide-ele-icon>
5136
+ {{ viewMode() === 'grouped' ? 'List View' : 'Grouped View' }}
5137
+ </button>
5138
+ </div>
5139
+
5140
+ <!-- Search -->
5141
+ <div class="tw-relative">
5142
+ <cide-ele-icon class="tw-absolute tw-left-2 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-text-gray-400">search</cide-ele-icon>
5143
+ <input
5144
+ type="text"
5145
+ [value]="searchQuery()"
5146
+ (input)="searchQuery.set($any($event.target).value)"
5147
+ placeholder="Search shortcuts..."
5148
+ class="tw-w-full tw-pl-8 tw-pr-3 tw-py-2 tw-text-sm tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500">
5149
+ </div>
5150
+
5151
+ <!-- Shortcuts Content -->
5152
+ @if (filteredShortcuts().length === 0) {
5153
+ <div class="tw-py-12 tw-text-center">
5154
+ <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-2">keyboard_off</cide-ele-icon>
5155
+ <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">No shortcuts found</p>
5156
+ </div>
5157
+ } @else {
5158
+ @if (viewMode() === 'grouped') {
5159
+ <!-- Grouped View -->
5160
+ @for (category of categories(); track category) {
5161
+ <div class="tw-space-y-2">
5162
+ <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide tw-mt-4 tw-mb-2">
5163
+ {{ category }}
5164
+ </h4>
5165
+ <div class="tw-space-y-2">
5166
+ @for (shortcut of getShortcutsByCategory(category); track shortcut.id) {
5167
+ <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
5168
+ @if (shortcut.featuredHTML) {
5169
+ <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
5170
+ <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5171
+ </div>
5172
+ }
5173
+ <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5174
+ <div class="tw-flex-1">
5175
+ <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5176
+ <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5177
+ {{ shortcut.title }}
5178
+ </h5>
5179
+ @if (shortcut.isUserDefined) {
5180
+ <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
5181
+ }
5182
+ </div>
5183
+ @if (shortcut.description) {
5184
+ <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5185
+ }
5186
+ </div>
5187
+ <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5188
+ @for (key of getKeyParts(shortcut.keyCombination); track $index; let isLast = $last) {
5189
+ <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
5190
+ {{ key }}
5191
+ </kbd>
5192
+ @if (!isLast) {
5193
+ <span class="tw-text-gray-400 tw-text-xs">+</span>
5194
+ }
5195
+ }
5196
+ </div>
5197
+ </div>
5198
+ </div>
5199
+ }
5200
+ </div>
5201
+ </div>
5202
+ }
5203
+ } @else {
5204
+ <!-- List View -->
5205
+ <div class="tw-space-y-2">
5206
+ @for (shortcut of filteredShortcuts(); track shortcut.id) {
5207
+ <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
5208
+ @if (shortcut.featuredHTML) {
5209
+ <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
5210
+ <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5211
+ </div>
5212
+ }
5213
+ <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5214
+ <div class="tw-flex-1">
5215
+ <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5216
+ <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5217
+ {{ shortcut.title }}
5218
+ </h5>
5219
+ @if (shortcut.isUserDefined) {
5220
+ <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
5221
+ }
5222
+ </div>
5223
+ @if (shortcut.description) {
5224
+ <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5225
+ }
5226
+ @if (shortcut.category) {
5227
+ <span class="tw-inline-block tw-mt-1 tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-medium tw-text-gray-500 dark:tw-text-gray-400 tw-bg-gray-100 dark:tw-bg-gray-600 tw-rounded">
5228
+ {{ shortcut.category }}
5229
+ </span>
5230
+ }
5231
+ </div>
5232
+ <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5233
+ @for (key of getKeyParts(shortcut.keyCombination); track $index) {
5234
+ <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
5235
+ {{ key }}
5236
+ </kbd>
5237
+ @if (!$last) {
5238
+ <span class="tw-text-gray-400 tw-text-xs">+</span>
5239
+ }
5240
+ }
5241
+ </div>
5242
+ </div>
5243
+ </div>
5244
+ }
5245
+ </div>
5246
+ }
5247
+ }
5248
+ </div>
5163
5249
  `, isInline: true, styles: [":host{display:block}kbd{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
5164
5250
  }
5165
5251
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ShortcutsPanelComponent, decorators: [{
5166
5252
  type: Component,
5167
- args: [{ selector: 'cide-lyt-shortcuts-panel', standalone: true, imports: [CommonModule, FormsModule, CideIconComponent, CideEleButtonComponent], template: `
5168
- <div class="tw-p-6 tw-space-y-4 tw-bg-white dark:tw-bg-gray-900">
5169
- <!-- View Toggle and Refresh -->
5170
- <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-mb-4">
5171
- <button
5172
- type="button"
5173
- cideEleButton
5174
- variant="outline"
5175
- size="sm"
5176
- (click)="loadShortcuts()"
5177
- title="Refresh shortcuts">
5178
- <cide-ele-icon>refresh</cide-ele-icon>
5179
- Refresh
5180
- </button>
5181
- <button
5182
- type="button"
5183
- cideEleButton
5184
- variant="outline"
5185
- size="sm"
5186
- (click)="toggleView()">
5187
- <cide-ele-icon>{{ viewMode() === 'grouped' ? 'view_list' : 'category' }}</cide-ele-icon>
5188
- {{ viewMode() === 'grouped' ? 'List View' : 'Grouped View' }}
5189
- </button>
5190
- </div>
5191
-
5192
- <!-- Search -->
5193
- <div class="tw-relative">
5194
- <cide-ele-icon class="tw-absolute tw-left-2 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-text-gray-400">search</cide-ele-icon>
5195
- <input
5196
- type="text"
5197
- [value]="searchQuery()"
5198
- (input)="searchQuery.set($any($event.target).value)"
5199
- placeholder="Search shortcuts..."
5200
- class="tw-w-full tw-pl-8 tw-pr-3 tw-py-2 tw-text-sm tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500">
5201
- </div>
5202
-
5203
- <!-- Shortcuts Content -->
5204
- @if (filteredShortcuts().length === 0) {
5205
- <div class="tw-py-12 tw-text-center">
5206
- <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-2">keyboard_off</cide-ele-icon>
5207
- <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">No shortcuts found</p>
5208
- </div>
5209
- } @else {
5210
- @if (viewMode() === 'grouped') {
5211
- <!-- Grouped View -->
5212
- @for (category of categories(); track category) {
5213
- <div class="tw-space-y-2">
5214
- <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide tw-mt-4 tw-mb-2">
5215
- {{ category }}
5216
- </h4>
5217
- <div class="tw-space-y-2">
5218
- @for (shortcut of getShortcutsByCategory(category); track shortcut.id) {
5219
- <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
5220
- @if (shortcut.featuredHTML) {
5221
- <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
5222
- <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5223
- </div>
5224
- }
5225
- <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5226
- <div class="tw-flex-1">
5227
- <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5228
- <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5229
- {{ shortcut.title }}
5230
- </h5>
5231
- @if (shortcut.isUserDefined) {
5232
- <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
5233
- }
5234
- </div>
5235
- @if (shortcut.description) {
5236
- <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5237
- }
5238
- </div>
5239
- <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5240
- @for (key of getKeyParts(shortcut.keyCombination); track $index; let isLast = $last) {
5241
- <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
5242
- {{ key }}
5243
- </kbd>
5244
- @if (!isLast) {
5245
- <span class="tw-text-gray-400 tw-text-xs">+</span>
5246
- }
5247
- }
5248
- </div>
5249
- </div>
5250
- </div>
5251
- }
5252
- </div>
5253
- </div>
5254
- }
5255
- } @else {
5256
- <!-- List View -->
5257
- <div class="tw-space-y-2">
5258
- @for (shortcut of filteredShortcuts(); track shortcut.id) {
5259
- <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
5260
- @if (shortcut.featuredHTML) {
5261
- <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
5262
- <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5263
- </div>
5264
- }
5265
- <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5266
- <div class="tw-flex-1">
5267
- <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5268
- <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5269
- {{ shortcut.title }}
5270
- </h5>
5271
- @if (shortcut.isUserDefined) {
5272
- <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
5273
- }
5274
- </div>
5275
- @if (shortcut.description) {
5276
- <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5277
- }
5278
- @if (shortcut.category) {
5279
- <span class="tw-inline-block tw-mt-1 tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-medium tw-text-gray-500 dark:tw-text-gray-400 tw-bg-gray-100 dark:tw-bg-gray-600 tw-rounded">
5280
- {{ shortcut.category }}
5281
- </span>
5282
- }
5283
- </div>
5284
- <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5285
- @for (key of getKeyParts(shortcut.keyCombination); track $index) {
5286
- <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
5287
- {{ key }}
5288
- </kbd>
5289
- @if (!$last) {
5290
- <span class="tw-text-gray-400 tw-text-xs">+</span>
5291
- }
5292
- }
5293
- </div>
5294
- </div>
5295
- </div>
5296
- }
5297
- </div>
5298
- }
5299
- }
5300
- </div>
5253
+ args: [{ selector: 'cide-lyt-shortcuts-panel', standalone: true, imports: [CommonModule, FormsModule, CideIconComponent, CideEleButtonComponent], template: `
5254
+ <div class="tw-p-6 tw-space-y-4 tw-bg-white dark:tw-bg-gray-900">
5255
+ <!-- View Toggle and Refresh -->
5256
+ <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-mb-4">
5257
+ <button
5258
+ type="button"
5259
+ cideEleButton
5260
+ variant="outline"
5261
+ size="sm"
5262
+ (click)="loadShortcuts()"
5263
+ title="Refresh shortcuts">
5264
+ <cide-ele-icon>refresh</cide-ele-icon>
5265
+ Refresh
5266
+ </button>
5267
+ <button
5268
+ type="button"
5269
+ cideEleButton
5270
+ variant="outline"
5271
+ size="sm"
5272
+ (click)="toggleView()">
5273
+ <cide-ele-icon>{{ viewMode() === 'grouped' ? 'view_list' : 'category' }}</cide-ele-icon>
5274
+ {{ viewMode() === 'grouped' ? 'List View' : 'Grouped View' }}
5275
+ </button>
5276
+ </div>
5277
+
5278
+ <!-- Search -->
5279
+ <div class="tw-relative">
5280
+ <cide-ele-icon class="tw-absolute tw-left-2 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-text-gray-400">search</cide-ele-icon>
5281
+ <input
5282
+ type="text"
5283
+ [value]="searchQuery()"
5284
+ (input)="searchQuery.set($any($event.target).value)"
5285
+ placeholder="Search shortcuts..."
5286
+ class="tw-w-full tw-pl-8 tw-pr-3 tw-py-2 tw-text-sm tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500">
5287
+ </div>
5288
+
5289
+ <!-- Shortcuts Content -->
5290
+ @if (filteredShortcuts().length === 0) {
5291
+ <div class="tw-py-12 tw-text-center">
5292
+ <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-2">keyboard_off</cide-ele-icon>
5293
+ <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">No shortcuts found</p>
5294
+ </div>
5295
+ } @else {
5296
+ @if (viewMode() === 'grouped') {
5297
+ <!-- Grouped View -->
5298
+ @for (category of categories(); track category) {
5299
+ <div class="tw-space-y-2">
5300
+ <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide tw-mt-4 tw-mb-2">
5301
+ {{ category }}
5302
+ </h4>
5303
+ <div class="tw-space-y-2">
5304
+ @for (shortcut of getShortcutsByCategory(category); track shortcut.id) {
5305
+ <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
5306
+ @if (shortcut.featuredHTML) {
5307
+ <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
5308
+ <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5309
+ </div>
5310
+ }
5311
+ <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5312
+ <div class="tw-flex-1">
5313
+ <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5314
+ <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5315
+ {{ shortcut.title }}
5316
+ </h5>
5317
+ @if (shortcut.isUserDefined) {
5318
+ <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
5319
+ }
5320
+ </div>
5321
+ @if (shortcut.description) {
5322
+ <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5323
+ }
5324
+ </div>
5325
+ <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5326
+ @for (key of getKeyParts(shortcut.keyCombination); track $index; let isLast = $last) {
5327
+ <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
5328
+ {{ key }}
5329
+ </kbd>
5330
+ @if (!isLast) {
5331
+ <span class="tw-text-gray-400 tw-text-xs">+</span>
5332
+ }
5333
+ }
5334
+ </div>
5335
+ </div>
5336
+ </div>
5337
+ }
5338
+ </div>
5339
+ </div>
5340
+ }
5341
+ } @else {
5342
+ <!-- List View -->
5343
+ <div class="tw-space-y-2">
5344
+ @for (shortcut of filteredShortcuts(); track shortcut.id) {
5345
+ <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-800/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
5346
+ @if (shortcut.featuredHTML) {
5347
+ <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-700">
5348
+ <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5349
+ </div>
5350
+ }
5351
+ <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5352
+ <div class="tw-flex-1">
5353
+ <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5354
+ <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5355
+ {{ shortcut.title }}
5356
+ </h5>
5357
+ @if (shortcut.isUserDefined) {
5358
+ <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
5359
+ }
5360
+ </div>
5361
+ @if (shortcut.description) {
5362
+ <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5363
+ }
5364
+ @if (shortcut.category) {
5365
+ <span class="tw-inline-block tw-mt-1 tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-medium tw-text-gray-500 dark:tw-text-gray-400 tw-bg-gray-100 dark:tw-bg-gray-600 tw-rounded">
5366
+ {{ shortcut.category }}
5367
+ </span>
5368
+ }
5369
+ </div>
5370
+ <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5371
+ @for (key of getKeyParts(shortcut.keyCombination); track $index) {
5372
+ <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
5373
+ {{ key }}
5374
+ </kbd>
5375
+ @if (!$last) {
5376
+ <span class="tw-text-gray-400 tw-text-xs">+</span>
5377
+ }
5378
+ }
5379
+ </div>
5380
+ </div>
5381
+ </div>
5382
+ }
5383
+ </div>
5384
+ }
5385
+ }
5386
+ </div>
5301
5387
  `, styles: [":host{display:block}kbd{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;line-height:1.5}\n"] }]
5302
5388
  }] });
5303
5389
 
@@ -5360,91 +5446,91 @@ class SettingsContainerComponent {
5360
5446
  this.selectedSection.set(sectionId);
5361
5447
  }
5362
5448
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SettingsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5363
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SettingsContainerComponent, isStandalone: true, selector: "cide-lyt-settings-container", ngImport: i0, template: `
5364
- <div class="tw-flex tw-h-full tw-bg-white dark:tw-bg-gray-900">
5365
- <!-- Left Sidebar Navigation -->
5366
- <div class="tw-w-64 tw-border-r tw-border-gray-200 dark:tw-border-gray-700 tw-bg-gray-50 dark:tw-bg-gray-800 tw-flex tw-flex-col">
5367
- <!-- Header -->
5368
- <div class="tw-px-4 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
5369
- <h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Settings</h2>
5370
- <p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Manage your preferences</p>
5371
- </div>
5372
-
5373
- <!-- Navigation List -->
5374
- <nav class="tw-flex-1 tw-overflow-y-auto tw-p-2">
5375
- @for (section of sections(); track section.id) {
5376
- <button
5377
- type="button"
5378
- cideEleButton
5379
- [ngClass]="{
5380
- 'tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-text-blue-600 dark:tw-text-blue-400': selectedSection() === section.id,
5381
- 'tw-text-gray-700 dark:tw-text-gray-300': selectedSection() !== section.id
5382
- }"
5383
- (click)="selectSection(section.id)"
5384
- class="tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-mb-1 tw-rounded-lg tw-transition-colors tw-text-left hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 tw-justify-start">
5385
- <cide-ele-icon class="tw-text-lg">{{ section.icon }}</cide-ele-icon>
5386
- <div class="tw-flex-1 tw-min-w-0">
5387
- <div class="tw-flex tw-items-center tw-gap-2">
5388
- <span class="tw-text-sm tw-font-medium tw-truncate">{{ section.title }}</span>
5389
- @if (section.badge) {
5390
- <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-white tw-bg-blue-500 tw-rounded">{{ section.badge }}</span>
5391
- }
5392
- </div>
5393
- @if (section.description) {
5394
- <p class="tw-m-0 tw-mt-0.5 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400 tw-truncate">{{ section.description }}</p>
5395
- }
5396
- </div>
5397
- </button>
5398
- }
5399
- </nav>
5400
- </div>
5401
-
5402
- <!-- Main Content Area -->
5403
- <div class="tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden">
5404
- <!-- Content Header -->
5405
- <div class="tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-bg-white dark:tw-bg-gray-900">
5406
- @if (currentSection()) {
5407
- <div class="tw-flex tw-items-center tw-justify-between">
5408
- <div>
5409
- <h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">
5410
- {{ currentSection()?.title }}
5411
- </h3>
5412
- @if (currentSection()?.description) {
5413
- <p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
5414
- {{ currentSection()?.description }}
5415
- </p>
5416
- }
5417
- </div>
5418
- </div>
5419
- }
5420
- </div>
5421
-
5422
- <!-- Content Body -->
5423
- <div class="tw-flex-1 tw-overflow-y-auto tw-bg-white dark:tw-bg-gray-900">
5424
- @switch (selectedSection()) {
5425
- @case ('notifications') {
5426
- <cide-lyt-notification-settings></cide-lyt-notification-settings>
5427
- }
5428
- @case ('shortcuts') {
5429
- <cide-lyt-shortcuts-panel></cide-lyt-shortcuts-panel>
5430
- }
5431
- @default {
5432
- <div class="tw-p-6">
5433
- <div class="tw-text-center tw-py-12">
5434
- <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-3">{{ currentSection()?.icon || 'settings' }}</cide-ele-icon>
5435
- <h4 class="tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-1">
5436
- {{ currentSection()?.title || 'Settings' }}
5437
- </h4>
5438
- <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
5439
- {{ currentSection()?.description || 'Select a section from the sidebar to view settings.' }}
5440
- </p>
5441
- </div>
5442
- </div>
5443
- }
5444
- }
5445
- </div>
5446
- </div>
5447
- </div>
5449
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SettingsContainerComponent, isStandalone: true, selector: "cide-lyt-settings-container", ngImport: i0, template: `
5450
+ <div class="tw-flex tw-h-full tw-bg-white dark:tw-bg-gray-900 tw-text-gray-900 dark:tw-text-gray-100">
5451
+ <!-- Left Sidebar Navigation -->
5452
+ <div class="tw-w-64 tw-border-r tw-border-gray-200 dark:tw-border-gray-700 tw-bg-gray-50 dark:tw-bg-gray-800 tw-flex tw-flex-col">
5453
+ <!-- Header -->
5454
+ <div class="tw-px-4 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
5455
+ <h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Settings</h2>
5456
+ <p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Manage your preferences</p>
5457
+ </div>
5458
+
5459
+ <!-- Navigation List -->
5460
+ <nav class="tw-flex-1 tw-overflow-y-auto tw-p-2">
5461
+ @for (section of sections(); track section.id) {
5462
+ <button
5463
+ type="button"
5464
+ cideEleButton
5465
+ [ngClass]="{
5466
+ 'tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-text-blue-600 dark:tw-text-blue-400': selectedSection() === section.id,
5467
+ 'tw-text-gray-700 dark:tw-text-gray-300': selectedSection() !== section.id
5468
+ }"
5469
+ (click)="selectSection(section.id)"
5470
+ class="tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-mb-1 tw-rounded-lg tw-transition-colors tw-text-left hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 tw-justify-start">
5471
+ <cide-ele-icon class="tw-text-lg">{{ section.icon }}</cide-ele-icon>
5472
+ <div class="tw-flex-1 tw-min-w-0">
5473
+ <div class="tw-flex tw-items-center tw-gap-2">
5474
+ <span class="tw-text-sm tw-font-medium tw-truncate">{{ section.title }}</span>
5475
+ @if (section.badge) {
5476
+ <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-white tw-bg-blue-500 tw-rounded">{{ section.badge }}</span>
5477
+ }
5478
+ </div>
5479
+ @if (section.description) {
5480
+ <p class="tw-m-0 tw-mt-0.5 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400 tw-truncate">{{ section.description }}</p>
5481
+ }
5482
+ </div>
5483
+ </button>
5484
+ }
5485
+ </nav>
5486
+ </div>
5487
+
5488
+ <!-- Main Content Area -->
5489
+ <div class="tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden">
5490
+ <!-- Content Header -->
5491
+ <div class="tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-bg-white dark:tw-bg-gray-900">
5492
+ @if (currentSection()) {
5493
+ <div class="tw-flex tw-items-center tw-justify-between">
5494
+ <div>
5495
+ <h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">
5496
+ {{ currentSection()?.title }}
5497
+ </h3>
5498
+ @if (currentSection()?.description) {
5499
+ <p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
5500
+ {{ currentSection()?.description }}
5501
+ </p>
5502
+ }
5503
+ </div>
5504
+ </div>
5505
+ }
5506
+ </div>
5507
+
5508
+ <!-- Content Body -->
5509
+ <div class="tw-flex-1 tw-overflow-y-auto tw-bg-white dark:tw-bg-gray-900">
5510
+ @switch (selectedSection()) {
5511
+ @case ('notifications') {
5512
+ <cide-lyt-notification-settings></cide-lyt-notification-settings>
5513
+ }
5514
+ @case ('shortcuts') {
5515
+ <cide-lyt-shortcuts-panel></cide-lyt-shortcuts-panel>
5516
+ }
5517
+ @default {
5518
+ <div class="tw-p-6">
5519
+ <div class="tw-text-center tw-py-12">
5520
+ <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-3">{{ currentSection()?.icon || 'settings' }}</cide-ele-icon>
5521
+ <h4 class="tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-1">
5522
+ {{ currentSection()?.title || 'Settings' }}
5523
+ </h4>
5524
+ <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
5525
+ {{ currentSection()?.description || 'Select a section from the sidebar to view settings.' }}
5526
+ </p>
5527
+ </div>
5528
+ </div>
5529
+ }
5530
+ }
5531
+ </div>
5532
+ </div>
5533
+ </div>
5448
5534
  `, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: NotificationSettingsComponent, selector: "cide-lyt-notification-settings" }, { kind: "component", type: ShortcutsPanelComponent, selector: "cide-lyt-shortcuts-panel" }] });
5449
5535
  }
5450
5536
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SettingsContainerComponent, decorators: [{
@@ -5454,91 +5540,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
5454
5540
  CideIconComponent,
5455
5541
  NotificationSettingsComponent,
5456
5542
  ShortcutsPanelComponent
5457
- ], template: `
5458
- <div class="tw-flex tw-h-full tw-bg-white dark:tw-bg-gray-900">
5459
- <!-- Left Sidebar Navigation -->
5460
- <div class="tw-w-64 tw-border-r tw-border-gray-200 dark:tw-border-gray-700 tw-bg-gray-50 dark:tw-bg-gray-800 tw-flex tw-flex-col">
5461
- <!-- Header -->
5462
- <div class="tw-px-4 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
5463
- <h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Settings</h2>
5464
- <p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Manage your preferences</p>
5465
- </div>
5466
-
5467
- <!-- Navigation List -->
5468
- <nav class="tw-flex-1 tw-overflow-y-auto tw-p-2">
5469
- @for (section of sections(); track section.id) {
5470
- <button
5471
- type="button"
5472
- cideEleButton
5473
- [ngClass]="{
5474
- 'tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-text-blue-600 dark:tw-text-blue-400': selectedSection() === section.id,
5475
- 'tw-text-gray-700 dark:tw-text-gray-300': selectedSection() !== section.id
5476
- }"
5477
- (click)="selectSection(section.id)"
5478
- class="tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-mb-1 tw-rounded-lg tw-transition-colors tw-text-left hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 tw-justify-start">
5479
- <cide-ele-icon class="tw-text-lg">{{ section.icon }}</cide-ele-icon>
5480
- <div class="tw-flex-1 tw-min-w-0">
5481
- <div class="tw-flex tw-items-center tw-gap-2">
5482
- <span class="tw-text-sm tw-font-medium tw-truncate">{{ section.title }}</span>
5483
- @if (section.badge) {
5484
- <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-white tw-bg-blue-500 tw-rounded">{{ section.badge }}</span>
5485
- }
5486
- </div>
5487
- @if (section.description) {
5488
- <p class="tw-m-0 tw-mt-0.5 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400 tw-truncate">{{ section.description }}</p>
5489
- }
5490
- </div>
5491
- </button>
5492
- }
5493
- </nav>
5494
- </div>
5495
-
5496
- <!-- Main Content Area -->
5497
- <div class="tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden">
5498
- <!-- Content Header -->
5499
- <div class="tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-bg-white dark:tw-bg-gray-900">
5500
- @if (currentSection()) {
5501
- <div class="tw-flex tw-items-center tw-justify-between">
5502
- <div>
5503
- <h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">
5504
- {{ currentSection()?.title }}
5505
- </h3>
5506
- @if (currentSection()?.description) {
5507
- <p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
5508
- {{ currentSection()?.description }}
5509
- </p>
5510
- }
5511
- </div>
5512
- </div>
5513
- }
5514
- </div>
5515
-
5516
- <!-- Content Body -->
5517
- <div class="tw-flex-1 tw-overflow-y-auto tw-bg-white dark:tw-bg-gray-900">
5518
- @switch (selectedSection()) {
5519
- @case ('notifications') {
5520
- <cide-lyt-notification-settings></cide-lyt-notification-settings>
5521
- }
5522
- @case ('shortcuts') {
5523
- <cide-lyt-shortcuts-panel></cide-lyt-shortcuts-panel>
5524
- }
5525
- @default {
5526
- <div class="tw-p-6">
5527
- <div class="tw-text-center tw-py-12">
5528
- <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-3">{{ currentSection()?.icon || 'settings' }}</cide-ele-icon>
5529
- <h4 class="tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-1">
5530
- {{ currentSection()?.title || 'Settings' }}
5531
- </h4>
5532
- <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
5533
- {{ currentSection()?.description || 'Select a section from the sidebar to view settings.' }}
5534
- </p>
5535
- </div>
5536
- </div>
5537
- }
5538
- }
5539
- </div>
5540
- </div>
5541
- </div>
5543
+ ], template: `
5544
+ <div class="tw-flex tw-h-full tw-bg-white dark:tw-bg-gray-900 tw-text-gray-900 dark:tw-text-gray-100">
5545
+ <!-- Left Sidebar Navigation -->
5546
+ <div class="tw-w-64 tw-border-r tw-border-gray-200 dark:tw-border-gray-700 tw-bg-gray-50 dark:tw-bg-gray-800 tw-flex tw-flex-col">
5547
+ <!-- Header -->
5548
+ <div class="tw-px-4 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
5549
+ <h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Settings</h2>
5550
+ <p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Manage your preferences</p>
5551
+ </div>
5552
+
5553
+ <!-- Navigation List -->
5554
+ <nav class="tw-flex-1 tw-overflow-y-auto tw-p-2">
5555
+ @for (section of sections(); track section.id) {
5556
+ <button
5557
+ type="button"
5558
+ cideEleButton
5559
+ [ngClass]="{
5560
+ 'tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-text-blue-600 dark:tw-text-blue-400': selectedSection() === section.id,
5561
+ 'tw-text-gray-700 dark:tw-text-gray-300': selectedSection() !== section.id
5562
+ }"
5563
+ (click)="selectSection(section.id)"
5564
+ class="tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-mb-1 tw-rounded-lg tw-transition-colors tw-text-left hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700 tw-justify-start">
5565
+ <cide-ele-icon class="tw-text-lg">{{ section.icon }}</cide-ele-icon>
5566
+ <div class="tw-flex-1 tw-min-w-0">
5567
+ <div class="tw-flex tw-items-center tw-gap-2">
5568
+ <span class="tw-text-sm tw-font-medium tw-truncate">{{ section.title }}</span>
5569
+ @if (section.badge) {
5570
+ <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-white tw-bg-blue-500 tw-rounded">{{ section.badge }}</span>
5571
+ }
5572
+ </div>
5573
+ @if (section.description) {
5574
+ <p class="tw-m-0 tw-mt-0.5 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400 tw-truncate">{{ section.description }}</p>
5575
+ }
5576
+ </div>
5577
+ </button>
5578
+ }
5579
+ </nav>
5580
+ </div>
5581
+
5582
+ <!-- Main Content Area -->
5583
+ <div class="tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden">
5584
+ <!-- Content Header -->
5585
+ <div class="tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-bg-white dark:tw-bg-gray-900">
5586
+ @if (currentSection()) {
5587
+ <div class="tw-flex tw-items-center tw-justify-between">
5588
+ <div>
5589
+ <h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">
5590
+ {{ currentSection()?.title }}
5591
+ </h3>
5592
+ @if (currentSection()?.description) {
5593
+ <p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
5594
+ {{ currentSection()?.description }}
5595
+ </p>
5596
+ }
5597
+ </div>
5598
+ </div>
5599
+ }
5600
+ </div>
5601
+
5602
+ <!-- Content Body -->
5603
+ <div class="tw-flex-1 tw-overflow-y-auto tw-bg-white dark:tw-bg-gray-900">
5604
+ @switch (selectedSection()) {
5605
+ @case ('notifications') {
5606
+ <cide-lyt-notification-settings></cide-lyt-notification-settings>
5607
+ }
5608
+ @case ('shortcuts') {
5609
+ <cide-lyt-shortcuts-panel></cide-lyt-shortcuts-panel>
5610
+ }
5611
+ @default {
5612
+ <div class="tw-p-6">
5613
+ <div class="tw-text-center tw-py-12">
5614
+ <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-3">{{ currentSection()?.icon || 'settings' }}</cide-ele-icon>
5615
+ <h4 class="tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-1">
5616
+ {{ currentSection()?.title || 'Settings' }}
5617
+ </h4>
5618
+ <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
5619
+ {{ currentSection()?.description || 'Select a section from the sidebar to view settings.' }}
5620
+ </p>
5621
+ </div>
5622
+ </div>
5623
+ }
5624
+ }
5625
+ </div>
5626
+ </div>
5627
+ </div>
5542
5628
  `, styles: [":host{display:block;height:100%}\n"] }]
5543
5629
  }] });
5544
5630
 
@@ -5585,11 +5671,11 @@ class CideLytFooterWrapperComponent {
5585
5671
  this.floatingContainerService.bringToFront(containerId);
5586
5672
  }
5587
5673
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5588
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\r\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n <!-- Resizer -->\r\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\n <div></div>\r\n <div class=\"tw-flex tw-items-center tw-gap-1.5\">\r\n <cide-ele-icon \r\n size=\"3xs\" \r\n class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \r\n type=\"none\"\r\n (click)=\"openSettingsPanel()\"\r\n title=\"Settings\">\r\n settings\r\n </cide-ele-icon>\r\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] });
5674
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n <div></div>\n <div class=\"tw-flex tw-items-center tw-gap-1.5\">\n <cide-ele-icon \n size=\"3xs\" \n class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \n type=\"none\"\n (click)=\"openSettingsPanel()\"\n title=\"Settings\">\n settings\n </cide-ele-icon>\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\n </div>\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] });
5589
5675
  }
5590
5676
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterWrapperComponent, decorators: [{
5591
5677
  type: Component,
5592
- args: [{ selector: 'cide-lyt-footer-wrapper', standalone: true, imports: [CideIconComponent, CideEleResizerDirective], template: "<div\r\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n <!-- Resizer -->\r\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n </div>\r\n <div></div>\r\n <div class=\"tw-flex tw-items-center tw-gap-1.5\">\r\n <cide-ele-icon \r\n size=\"3xs\" \r\n class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \r\n type=\"none\"\r\n (click)=\"openSettingsPanel()\"\r\n title=\"Settings\">\r\n settings\r\n </cide-ele-icon>\r\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n </div>\r\n</div>" }]
5678
+ args: [{ selector: 'cide-lyt-footer-wrapper', standalone: true, imports: [CideIconComponent, CideEleResizerDirective], template: "<div\n class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\n <!-- Resizer -->\n <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\n nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\n <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n </div>\n <div></div>\n <div class=\"tw-flex tw-items-center tw-gap-1.5\">\n <cide-ele-icon \n size=\"3xs\" \n class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \n type=\"none\"\n (click)=\"openSettingsPanel()\"\n title=\"Settings\">\n settings\n </cide-ele-icon>\n <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\n </div>\n</div>" }]
5593
5679
  }], ctorParameters: () => [] });
5594
5680
 
5595
5681
  class CideLytConsoleWrapperComponent {
@@ -5934,10 +6020,9 @@ const layoutControlPannelChildRoutes = [{
5934
6020
  },
5935
6021
  {
5936
6022
  path: "home",
5937
- loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-C61ybzgc.mjs').then(c => c.CideLytHomeWrapperComponent),
6023
+ loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-D3FEDXRo.mjs').then(c => c.CideLytHomeWrapperComponent),
5938
6024
  canActivate: [authGuard],
5939
6025
  data: {
5940
- reuseTab: true, // For CustomRouteReuseStrategy
5941
6026
  sypg_page_code: "cide_lyt_home" // Used by RequestService to fetch tab properties
5942
6027
  }
5943
6028
  }
@@ -7502,4 +7587,4 @@ var floatingEntityRightsSharing_component = /*#__PURE__*/Object.freeze({
7502
7587
  */
7503
7588
 
7504
7589
  export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, NotificationSettingsService as N, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, AppStateService as e, CloudIdeLayoutService as f, CloudIdeLayoutComponent as g, CideLytSharedService as h, layoutControlPannelChildRoutes as i, CustomRouteReuseStrategy as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingEntityRightsSharingComponent as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingService as q, setCSSVariable as s, themeFactory as t };
7505
- //# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-BaeUxU6C.mjs.map
7590
+ //# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-BbcIno6W.mjs.map