cloud-ide-layout 1.0.108 → 1.0.109

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-DKLoBtjT.mjs} +867 -876
  2. package/fesm2022/cloud-ide-layout-cloud-ide-layout-DKLoBtjT.mjs.map +1 -0
  3. package/fesm2022/{cloud-ide-layout-drawer-theme.component-D46FeYqz.mjs → cloud-ide-layout-drawer-theme.component-BnbifwOg.mjs} +2 -2
  4. package/fesm2022/{cloud-ide-layout-drawer-theme.component-D46FeYqz.mjs.map → cloud-ide-layout-drawer-theme.component-BnbifwOg.mjs.map} +1 -1
  5. package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-D_BFF6Qt.mjs → cloud-ide-layout-floating-entity-selection.component-BWt2jNzs.mjs} +2 -2
  6. package/fesm2022/{cloud-ide-layout-floating-entity-selection.component-D_BFF6Qt.mjs.map → cloud-ide-layout-floating-entity-selection.component-BWt2jNzs.mjs.map} +1 -1
  7. package/fesm2022/{cloud-ide-layout-home-wrapper.component-C61ybzgc.mjs → cloud-ide-layout-home-wrapper.component-DBEz2uEN.mjs} +2 -2
  8. package/fesm2022/{cloud-ide-layout-home-wrapper.component-C61ybzgc.mjs.map → cloud-ide-layout-home-wrapper.component-DBEz2uEN.mjs.map} +1 -1
  9. package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-CIwq4Ei_.mjs → cloud-ide-layout-sidedrawer-notes.component-CLgErxyC.mjs} +2 -2
  10. package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-CIwq4Ei_.mjs.map → cloud-ide-layout-sidedrawer-notes.component-CLgErxyC.mjs.map} +1 -1
  11. package/fesm2022/cloud-ide-layout.mjs +1 -1
  12. package/index.d.ts +1 -1
  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-DKLoBtjT.mjs} RENAMED
@@ -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-BWt2jNzs.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');
@@ -1590,216 +1590,216 @@ class NotificationSettingsComponent {
1590
1590
  this.notificationService.info('Settings reset to defaults');
1591
1591
  }
1592
1592
  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>
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>
1803
1803
  `, 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
1804
  }
1805
1805
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationSettingsComponent, decorators: [{
@@ -1811,216 +1811,216 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
1811
1811
  CideEleButtonComponent,
1812
1812
  CideInputComponent,
1813
1813
  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>
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>
2024
2024
  `, styles: [":host{display:block}\n"] }]
2025
2025
  }] });
2026
2026
 
@@ -4397,16 +4397,8 @@ class CideLytRequestService {
4397
4397
  const id = this.generateId();
4398
4398
  const currentTabs = this.tabsSignal();
4399
4399
  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
- }
4400
+ // Tab reuse disabled - always create new tab
4401
+ // Removed existing tab check to prevent tab reuse
4410
4402
  // Create new tab
4411
4403
  const newTab = {
4412
4404
  id,
@@ -4701,8 +4693,8 @@ class CideLytSidedrawerWrapperComponent {
4701
4693
  }
4702
4694
  ngOnInit() {
4703
4695
  // 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);
4696
+ this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-CLgErxyC.mjs').then(m => m.CideLytSidedrawerNotesComponent);
4697
+ this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-BnbifwOg.mjs').then(m => m.CideLytDrawerThemeComponent);
4706
4698
  }
4707
4699
  async loadComponent(configFor) {
4708
4700
  console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -5026,278 +5018,278 @@ class ShortcutsPanelComponent {
5026
5018
  // Computed signal will automatically update
5027
5019
  }
5028
5020
  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>
5021
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ShortcutsPanelComponent, isStandalone: true, selector: "cide-lyt-shortcuts-panel", ngImport: i0, template: `
5022
+ <div class="tw-p-6 tw-space-y-4 tw-bg-white dark:tw-bg-gray-900">
5023
+ <!-- View Toggle and Refresh -->
5024
+ <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-mb-4">
5025
+ <button
5026
+ type="button"
5027
+ cideEleButton
5028
+ variant="outline"
5029
+ size="sm"
5030
+ (click)="loadShortcuts()"
5031
+ title="Refresh shortcuts">
5032
+ <cide-ele-icon>refresh</cide-ele-icon>
5033
+ Refresh
5034
+ </button>
5035
+ <button
5036
+ type="button"
5037
+ cideEleButton
5038
+ variant="outline"
5039
+ size="sm"
5040
+ (click)="toggleView()">
5041
+ <cide-ele-icon>{{ viewMode() === 'grouped' ? 'view_list' : 'category' }}</cide-ele-icon>
5042
+ {{ viewMode() === 'grouped' ? 'List View' : 'Grouped View' }}
5043
+ </button>
5044
+ </div>
5045
+
5046
+ <!-- Search -->
5047
+ <div class="tw-relative">
5048
+ <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>
5049
+ <input
5050
+ type="text"
5051
+ [value]="searchQuery()"
5052
+ (input)="searchQuery.set($any($event.target).value)"
5053
+ placeholder="Search shortcuts..."
5054
+ 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">
5055
+ </div>
5056
+
5057
+ <!-- Shortcuts Content -->
5058
+ @if (filteredShortcuts().length === 0) {
5059
+ <div class="tw-py-12 tw-text-center">
5060
+ <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-2">keyboard_off</cide-ele-icon>
5061
+ <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">No shortcuts found</p>
5062
+ </div>
5063
+ } @else {
5064
+ @if (viewMode() === 'grouped') {
5065
+ <!-- Grouped View -->
5066
+ @for (category of categories(); track category) {
5067
+ <div class="tw-space-y-2">
5068
+ <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">
5069
+ {{ category }}
5070
+ </h4>
5071
+ <div class="tw-space-y-2">
5072
+ @for (shortcut of getShortcutsByCategory(category); track shortcut.id) {
5073
+ <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">
5074
+ @if (shortcut.featuredHTML) {
5075
+ <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">
5076
+ <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5077
+ </div>
5078
+ }
5079
+ <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5080
+ <div class="tw-flex-1">
5081
+ <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5082
+ <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5083
+ {{ shortcut.title }}
5084
+ </h5>
5085
+ @if (shortcut.isUserDefined) {
5086
+ <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>
5087
+ }
5088
+ </div>
5089
+ @if (shortcut.description) {
5090
+ <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5091
+ }
5092
+ </div>
5093
+ <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5094
+ @for (key of getKeyParts(shortcut.keyCombination); track $index; let isLast = $last) {
5095
+ <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">
5096
+ {{ key }}
5097
+ </kbd>
5098
+ @if (!isLast) {
5099
+ <span class="tw-text-gray-400 tw-text-xs">+</span>
5100
+ }
5101
+ }
5102
+ </div>
5103
+ </div>
5104
+ </div>
5105
+ }
5106
+ </div>
5107
+ </div>
5108
+ }
5109
+ } @else {
5110
+ <!-- List View -->
5111
+ <div class="tw-space-y-2">
5112
+ @for (shortcut of filteredShortcuts(); track shortcut.id) {
5113
+ <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">
5114
+ @if (shortcut.featuredHTML) {
5115
+ <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">
5116
+ <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5117
+ </div>
5118
+ }
5119
+ <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5120
+ <div class="tw-flex-1">
5121
+ <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5122
+ <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5123
+ {{ shortcut.title }}
5124
+ </h5>
5125
+ @if (shortcut.isUserDefined) {
5126
+ <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>
5127
+ }
5128
+ </div>
5129
+ @if (shortcut.description) {
5130
+ <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5131
+ }
5132
+ @if (shortcut.category) {
5133
+ <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">
5134
+ {{ shortcut.category }}
5135
+ </span>
5136
+ }
5137
+ </div>
5138
+ <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5139
+ @for (key of getKeyParts(shortcut.keyCombination); track $index) {
5140
+ <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">
5141
+ {{ key }}
5142
+ </kbd>
5143
+ @if (!$last) {
5144
+ <span class="tw-text-gray-400 tw-text-xs">+</span>
5145
+ }
5146
+ }
5147
+ </div>
5148
+ </div>
5149
+ </div>
5150
+ }
5151
+ </div>
5152
+ }
5153
+ }
5154
+ </div>
5163
5155
  `, 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
5156
  }
5165
5157
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ShortcutsPanelComponent, decorators: [{
5166
5158
  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>
5159
+ args: [{ selector: 'cide-lyt-shortcuts-panel', standalone: true, imports: [CommonModule, FormsModule, CideIconComponent, CideEleButtonComponent], template: `
5160
+ <div class="tw-p-6 tw-space-y-4 tw-bg-white dark:tw-bg-gray-900">
5161
+ <!-- View Toggle and Refresh -->
5162
+ <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-mb-4">
5163
+ <button
5164
+ type="button"
5165
+ cideEleButton
5166
+ variant="outline"
5167
+ size="sm"
5168
+ (click)="loadShortcuts()"
5169
+ title="Refresh shortcuts">
5170
+ <cide-ele-icon>refresh</cide-ele-icon>
5171
+ Refresh
5172
+ </button>
5173
+ <button
5174
+ type="button"
5175
+ cideEleButton
5176
+ variant="outline"
5177
+ size="sm"
5178
+ (click)="toggleView()">
5179
+ <cide-ele-icon>{{ viewMode() === 'grouped' ? 'view_list' : 'category' }}</cide-ele-icon>
5180
+ {{ viewMode() === 'grouped' ? 'List View' : 'Grouped View' }}
5181
+ </button>
5182
+ </div>
5183
+
5184
+ <!-- Search -->
5185
+ <div class="tw-relative">
5186
+ <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>
5187
+ <input
5188
+ type="text"
5189
+ [value]="searchQuery()"
5190
+ (input)="searchQuery.set($any($event.target).value)"
5191
+ placeholder="Search shortcuts..."
5192
+ 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">
5193
+ </div>
5194
+
5195
+ <!-- Shortcuts Content -->
5196
+ @if (filteredShortcuts().length === 0) {
5197
+ <div class="tw-py-12 tw-text-center">
5198
+ <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-2">keyboard_off</cide-ele-icon>
5199
+ <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">No shortcuts found</p>
5200
+ </div>
5201
+ } @else {
5202
+ @if (viewMode() === 'grouped') {
5203
+ <!-- Grouped View -->
5204
+ @for (category of categories(); track category) {
5205
+ <div class="tw-space-y-2">
5206
+ <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">
5207
+ {{ category }}
5208
+ </h4>
5209
+ <div class="tw-space-y-2">
5210
+ @for (shortcut of getShortcutsByCategory(category); track shortcut.id) {
5211
+ <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">
5212
+ @if (shortcut.featuredHTML) {
5213
+ <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">
5214
+ <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5215
+ </div>
5216
+ }
5217
+ <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5218
+ <div class="tw-flex-1">
5219
+ <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5220
+ <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5221
+ {{ shortcut.title }}
5222
+ </h5>
5223
+ @if (shortcut.isUserDefined) {
5224
+ <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>
5225
+ }
5226
+ </div>
5227
+ @if (shortcut.description) {
5228
+ <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5229
+ }
5230
+ </div>
5231
+ <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5232
+ @for (key of getKeyParts(shortcut.keyCombination); track $index; let isLast = $last) {
5233
+ <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">
5234
+ {{ key }}
5235
+ </kbd>
5236
+ @if (!isLast) {
5237
+ <span class="tw-text-gray-400 tw-text-xs">+</span>
5238
+ }
5239
+ }
5240
+ </div>
5241
+ </div>
5242
+ </div>
5243
+ }
5244
+ </div>
5245
+ </div>
5246
+ }
5247
+ } @else {
5248
+ <!-- List View -->
5249
+ <div class="tw-space-y-2">
5250
+ @for (shortcut of filteredShortcuts(); track shortcut.id) {
5251
+ <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">
5252
+ @if (shortcut.featuredHTML) {
5253
+ <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">
5254
+ <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
5255
+ </div>
5256
+ }
5257
+ <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
5258
+ <div class="tw-flex-1">
5259
+ <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
5260
+ <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
5261
+ {{ shortcut.title }}
5262
+ </h5>
5263
+ @if (shortcut.isUserDefined) {
5264
+ <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>
5265
+ }
5266
+ </div>
5267
+ @if (shortcut.description) {
5268
+ <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
5269
+ }
5270
+ @if (shortcut.category) {
5271
+ <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">
5272
+ {{ shortcut.category }}
5273
+ </span>
5274
+ }
5275
+ </div>
5276
+ <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
5277
+ @for (key of getKeyParts(shortcut.keyCombination); track $index) {
5278
+ <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">
5279
+ {{ key }}
5280
+ </kbd>
5281
+ @if (!$last) {
5282
+ <span class="tw-text-gray-400 tw-text-xs">+</span>
5283
+ }
5284
+ }
5285
+ </div>
5286
+ </div>
5287
+ </div>
5288
+ }
5289
+ </div>
5290
+ }
5291
+ }
5292
+ </div>
5301
5293
  `, 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
5294
  }] });
5303
5295
 
@@ -5360,91 +5352,91 @@ class SettingsContainerComponent {
5360
5352
  this.selectedSection.set(sectionId);
5361
5353
  }
5362
5354
  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>
5355
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SettingsContainerComponent, isStandalone: true, selector: "cide-lyt-settings-container", ngImport: i0, template: `
5356
+ <div class="tw-flex tw-h-full tw-bg-white dark:tw-bg-gray-900">
5357
+ <!-- Left Sidebar Navigation -->
5358
+ <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">
5359
+ <!-- Header -->
5360
+ <div class="tw-px-4 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
5361
+ <h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Settings</h2>
5362
+ <p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Manage your preferences</p>
5363
+ </div>
5364
+
5365
+ <!-- Navigation List -->
5366
+ <nav class="tw-flex-1 tw-overflow-y-auto tw-p-2">
5367
+ @for (section of sections(); track section.id) {
5368
+ <button
5369
+ type="button"
5370
+ cideEleButton
5371
+ [ngClass]="{
5372
+ 'tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-text-blue-600 dark:tw-text-blue-400': selectedSection() === section.id,
5373
+ 'tw-text-gray-700 dark:tw-text-gray-300': selectedSection() !== section.id
5374
+ }"
5375
+ (click)="selectSection(section.id)"
5376
+ 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">
5377
+ <cide-ele-icon class="tw-text-lg">{{ section.icon }}</cide-ele-icon>
5378
+ <div class="tw-flex-1 tw-min-w-0">
5379
+ <div class="tw-flex tw-items-center tw-gap-2">
5380
+ <span class="tw-text-sm tw-font-medium tw-truncate">{{ section.title }}</span>
5381
+ @if (section.badge) {
5382
+ <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>
5383
+ }
5384
+ </div>
5385
+ @if (section.description) {
5386
+ <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>
5387
+ }
5388
+ </div>
5389
+ </button>
5390
+ }
5391
+ </nav>
5392
+ </div>
5393
+
5394
+ <!-- Main Content Area -->
5395
+ <div class="tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden">
5396
+ <!-- Content Header -->
5397
+ <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">
5398
+ @if (currentSection()) {
5399
+ <div class="tw-flex tw-items-center tw-justify-between">
5400
+ <div>
5401
+ <h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">
5402
+ {{ currentSection()?.title }}
5403
+ </h3>
5404
+ @if (currentSection()?.description) {
5405
+ <p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
5406
+ {{ currentSection()?.description }}
5407
+ </p>
5408
+ }
5409
+ </div>
5410
+ </div>
5411
+ }
5412
+ </div>
5413
+
5414
+ <!-- Content Body -->
5415
+ <div class="tw-flex-1 tw-overflow-y-auto tw-bg-white dark:tw-bg-gray-900">
5416
+ @switch (selectedSection()) {
5417
+ @case ('notifications') {
5418
+ <cide-lyt-notification-settings></cide-lyt-notification-settings>
5419
+ }
5420
+ @case ('shortcuts') {
5421
+ <cide-lyt-shortcuts-panel></cide-lyt-shortcuts-panel>
5422
+ }
5423
+ @default {
5424
+ <div class="tw-p-6">
5425
+ <div class="tw-text-center tw-py-12">
5426
+ <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>
5427
+ <h4 class="tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-1">
5428
+ {{ currentSection()?.title || 'Settings' }}
5429
+ </h4>
5430
+ <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
5431
+ {{ currentSection()?.description || 'Select a section from the sidebar to view settings.' }}
5432
+ </p>
5433
+ </div>
5434
+ </div>
5435
+ }
5436
+ }
5437
+ </div>
5438
+ </div>
5439
+ </div>
5448
5440
  `, 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
5441
  }
5450
5442
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SettingsContainerComponent, decorators: [{
@@ -5454,91 +5446,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
5454
5446
  CideIconComponent,
5455
5447
  NotificationSettingsComponent,
5456
5448
  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>
5449
+ ], template: `
5450
+ <div class="tw-flex tw-h-full tw-bg-white dark:tw-bg-gray-900">
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>
5542
5534
  `, styles: [":host{display:block;height:100%}\n"] }]
5543
5535
  }] });
5544
5536
 
@@ -5585,11 +5577,11 @@ class CideLytFooterWrapperComponent {
5585
5577
  this.floatingContainerService.bringToFront(containerId);
5586
5578
  }
5587
5579
  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"] }] });
5580
+ 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
5581
  }
5590
5582
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterWrapperComponent, decorators: [{
5591
5583
  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>" }]
5584
+ 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
5585
  }], ctorParameters: () => [] });
5594
5586
 
5595
5587
  class CideLytConsoleWrapperComponent {
@@ -5934,10 +5926,9 @@ const layoutControlPannelChildRoutes = [{
5934
5926
  },
5935
5927
  {
5936
5928
  path: "home",
5937
- loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-C61ybzgc.mjs').then(c => c.CideLytHomeWrapperComponent),
5929
+ loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-DBEz2uEN.mjs').then(c => c.CideLytHomeWrapperComponent),
5938
5930
  canActivate: [authGuard],
5939
5931
  data: {
5940
- reuseTab: true, // For CustomRouteReuseStrategy
5941
5932
  sypg_page_code: "cide_lyt_home" // Used by RequestService to fetch tab properties
5942
5933
  }
5943
5934
  }
@@ -7502,4 +7493,4 @@ var floatingEntityRightsSharing_component = /*#__PURE__*/Object.freeze({
7502
7493
  */
7503
7494
 
7504
7495
  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
7496
+ //# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-DKLoBtjT.mjs.map