cloud-ide-layout 1.0.207 → 1.0.209
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{cloud-ide-layout-cloud-ide-layout-2qeSM8A1.mjs → cloud-ide-layout-cloud-ide-layout-C4dYqSYm.mjs} +329 -495
- package/fesm2022/cloud-ide-layout-cloud-ide-layout-C4dYqSYm.mjs.map +1 -0
- package/fesm2022/{cloud-ide-layout-dashboard-manager.component-CJHUNhoZ.mjs → cloud-ide-layout-dashboard-manager.component-BJArKBjQ.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-dashboard-manager.component-CJHUNhoZ.mjs.map → cloud-ide-layout-dashboard-manager.component-BJArKBjQ.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-drawer-theme.component-C9IMuYmm.mjs → cloud-ide-layout-drawer-theme.component-D_F14KO8.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-drawer-theme.component-C9IMuYmm.mjs.map → cloud-ide-layout-drawer-theme.component-D_F14KO8.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-home-wrapper.component-DxmyaTO-.mjs → cloud-ide-layout-home-wrapper.component-CsfkluH7.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-home-wrapper.component-DxmyaTO-.mjs.map → cloud-ide-layout-home-wrapper.component-CsfkluH7.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-De3yMh-k.mjs → cloud-ide-layout-sidedrawer-notes.component-uQ2UOmsw.mjs} +2 -2
- package/fesm2022/{cloud-ide-layout-sidedrawer-notes.component-De3yMh-k.mjs.map → cloud-ide-layout-sidedrawer-notes.component-uQ2UOmsw.mjs.map} +1 -1
- package/fesm2022/cloud-ide-layout.mjs +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/fesm2022/cloud-ide-layout-cloud-ide-layout-2qeSM8A1.mjs.map +0 -1
|
@@ -1892,20 +1892,12 @@ class NotificationSettingsComponent {
|
|
|
1892
1892
|
});
|
|
1893
1893
|
}
|
|
1894
1894
|
updateSliderBackground(value) {
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
if (isDark) {
|
|
1902
|
-
slider.style.background = `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${percentage}%, #374151 ${percentage}%, #374151 100%)`;
|
|
1903
|
-
}
|
|
1904
|
-
else {
|
|
1905
|
-
slider.style.background = `linear-gradient(to right, #2563eb 0%, #2563eb ${percentage}%, #e5e7eb ${percentage}%, #e5e7eb 100%)`;
|
|
1906
|
-
}
|
|
1907
|
-
}
|
|
1908
|
-
}, 0);
|
|
1895
|
+
const slider = document.querySelector('.volume-slider');
|
|
1896
|
+
if (slider) {
|
|
1897
|
+
const percentage = value;
|
|
1898
|
+
// Use CSS variables for colors to avoid manual theme checks in TS
|
|
1899
|
+
slider.style.background = `linear-gradient(to right, var(--slider-fill) 0%, var(--slider-fill) ${percentage}%, var(--slider-track) ${percentage}%, var(--slider-track) 100%)`;
|
|
1900
|
+
}
|
|
1909
1901
|
}
|
|
1910
1902
|
onVolumeChange(event) {
|
|
1911
1903
|
const value = parseInt(event.target.value, 10);
|
|
@@ -1928,266 +1920,187 @@ class NotificationSettingsComponent {
|
|
|
1928
1920
|
}
|
|
1929
1921
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NotificationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1930
1922
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NotificationSettingsComponent, isStandalone: true, selector: "cide-lyt-notification-settings", ngImport: i0, template: `
|
|
1931
|
-
<div class="notification-settings-container tw-p-6 tw-space-y-6 tw-bg-
|
|
1932
|
-
|
|
1933
|
-
<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">
|
|
1934
|
-
<div class="tw-w-8 tw-h-8 tw-bg-blue-500 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
|
|
1935
|
-
<cide-ele-icon class="tw-text-white">settings</cide-ele-icon>
|
|
1936
|
-
</div>
|
|
1937
|
-
<div>
|
|
1938
|
-
<h3 class="tw-m-0 tw-text-sm tw-font-semibold">Notification Settings</h3>
|
|
1939
|
-
<p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">Customize your notification preferences</p>
|
|
1940
|
-
</div>
|
|
1941
|
-
</div>
|
|
1942
|
-
|
|
1943
|
-
<form [formGroup]="settingsForm" class="tw-space-y-6">
|
|
1923
|
+
<div class="notification-settings-container tw-p-6 tw-space-y-6 tw-bg-[var(--cide-ele-bg-primary)] tw-text-[var(--cide-ele-text-primary)]">
|
|
1924
|
+
<form [formGroup]="settingsForm" class="tw-space-y-8">
|
|
1944
1925
|
<!-- Notification Channels -->
|
|
1945
|
-
<div class="tw-space-y-
|
|
1946
|
-
<h4 class="tw-text-xs tw-font-
|
|
1926
|
+
<div class="tw-space-y-4">
|
|
1927
|
+
<h4 class="tw-text-xs tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-uppercase tw-tracking-widest">Notification Channels</h4>
|
|
1947
1928
|
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
<div class="tw-flex tw-
|
|
1951
|
-
<
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1929
|
+
<div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4">
|
|
1930
|
+
<!-- In-App Notifications -->
|
|
1931
|
+
<div class="tw-flex tw-flex-col tw-justify-between tw-p-4 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-xl tw-border tw-border-[var(--cide-ele-border-primary)] hover:tw-border-[var(--cide-ele-border-active)] tw-transition-all">
|
|
1932
|
+
<div class="tw-flex tw-items-center tw-gap-3 tw-mb-4">
|
|
1933
|
+
<div class="tw-p-2 tw-bg-blue-500/10 tw-rounded-lg">
|
|
1934
|
+
<cide-ele-icon class="tw-text-blue-500">notifications</cide-ele-icon>
|
|
1935
|
+
</div>
|
|
1936
|
+
<div>
|
|
1937
|
+
<label class="tw-text-sm tw-font-semibold tw-block">In-App</label>
|
|
1938
|
+
<p class="tw-m-0 tw-text-[10px] tw-text-[var(--cide-ele-text-tertiary)]">Within the application</p>
|
|
1939
|
+
</div>
|
|
1940
|
+
</div>
|
|
1941
|
+
<div class="tw-flex tw-justify-end">
|
|
1942
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
1943
|
+
<input type="checkbox" formControlName="channelInApp" class="tw-sr-only tw-peer">
|
|
1944
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
1945
|
+
</label>
|
|
1955
1946
|
</div>
|
|
1956
1947
|
</div>
|
|
1957
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
1958
|
-
<input type="checkbox" formControlName="channelInApp" 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
1948
|
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
<
|
|
1949
|
+
<!-- Email Notifications -->
|
|
1950
|
+
<div class="tw-flex tw-flex-col tw-justify-between tw-p-4 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-xl tw-border tw-border-[var(--cide-ele-border-primary)] hover:tw-border-[var(--cide-ele-border-active)] tw-transition-all">
|
|
1951
|
+
<div class="tw-flex tw-items-center tw-gap-3 tw-mb-4">
|
|
1952
|
+
<div class="tw-p-2 tw-bg-purple-500/10 tw-rounded-lg">
|
|
1953
|
+
<cide-ele-icon class="tw-text-purple-500">mail</cide-ele-icon>
|
|
1954
|
+
</div>
|
|
1955
|
+
<div>
|
|
1956
|
+
<label class="tw-text-sm tw-font-semibold tw-block">Email</label>
|
|
1957
|
+
<p class="tw-m-0 tw-text-[10px] tw-text-[var(--cide-ele-text-tertiary)]">Via your register email</p>
|
|
1958
|
+
</div>
|
|
1959
|
+
</div>
|
|
1960
|
+
<div class="tw-flex tw-justify-end">
|
|
1961
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
1962
|
+
<input type="checkbox" formControlName="channelEmail" class="tw-sr-only tw-peer">
|
|
1963
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
1964
|
+
</label>
|
|
1970
1965
|
</div>
|
|
1971
1966
|
</div>
|
|
1972
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
1973
|
-
<input type="checkbox" formControlName="channelEmail" class="tw-sr-only tw-peer">
|
|
1974
|
-
<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>
|
|
1975
|
-
</label>
|
|
1976
|
-
</div>
|
|
1977
1967
|
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
<
|
|
1968
|
+
<!-- SMS Notifications -->
|
|
1969
|
+
<div class="tw-flex tw-flex-col tw-justify-between tw-p-4 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-xl tw-border tw-border-[var(--cide-ele-border-primary)] hover:tw-border-[var(--cide-ele-border-active)] tw-transition-all">
|
|
1970
|
+
<div class="tw-flex tw-items-center tw-gap-3 tw-mb-4">
|
|
1971
|
+
<div class="tw-p-2 tw-bg-orange-500/10 tw-rounded-lg">
|
|
1972
|
+
<cide-ele-icon class="tw-text-orange-500">sms</cide-ele-icon>
|
|
1973
|
+
</div>
|
|
1974
|
+
<div>
|
|
1975
|
+
<label class="tw-text-sm tw-font-semibold tw-block">SMS/Mobile</label>
|
|
1976
|
+
<p class="tw-m-0 tw-text-[10px] tw-text-[var(--cide-ele-text-tertiary)]">Text message updates</p>
|
|
1977
|
+
</div>
|
|
1978
|
+
</div>
|
|
1979
|
+
<div class="tw-flex tw-justify-end">
|
|
1980
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
1981
|
+
<input type="checkbox" formControlName="channelSms" class="tw-sr-only tw-peer">
|
|
1982
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
1983
|
+
</label>
|
|
1985
1984
|
</div>
|
|
1986
1985
|
</div>
|
|
1987
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
1988
|
-
<input type="checkbox" formControlName="channelSms" class="tw-sr-only tw-peer">
|
|
1989
|
-
<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>
|
|
1990
|
-
</label>
|
|
1991
1986
|
</div>
|
|
1992
1987
|
</div>
|
|
1993
1988
|
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
<
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
1989
|
+
<div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-8">
|
|
1990
|
+
<!-- Sound Settings -->
|
|
1991
|
+
<div class="tw-space-y-4">
|
|
1992
|
+
<h4 class="tw-text-xs tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-uppercase tw-tracking-widest">Sound Preferences</h4>
|
|
1993
|
+
|
|
1994
|
+
<div class="tw-p-5 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-2xl tw-border tw-border-[var(--cide-ele-border-primary)] tw-space-y-5">
|
|
1995
|
+
<div class="tw-flex tw-items-center tw-justify-between">
|
|
1996
|
+
<div class="tw-flex tw-items-center tw-gap-3">
|
|
1997
|
+
<div class="tw-p-1.5 tw-bg-blue-500/10 tw-rounded-lg">
|
|
1998
|
+
<cide-ele-icon class="tw-text-blue-500 tw-text-lg">volume_up</cide-ele-icon>
|
|
1999
|
+
</div>
|
|
2000
|
+
<span class="tw-text-sm tw-font-medium">Enable Alert Sounds</span>
|
|
2001
|
+
</div>
|
|
2002
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2003
|
+
<input type="checkbox" formControlName="soundEnabled" class="tw-sr-only tw-peer">
|
|
2004
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
2005
|
+
</label>
|
|
2005
2006
|
</div>
|
|
2006
|
-
</div>
|
|
2007
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2008
|
-
<input
|
|
2009
|
-
type="checkbox"
|
|
2010
|
-
formControlName="soundEnabled"
|
|
2011
|
-
class="tw-sr-only tw-peer">
|
|
2012
|
-
<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>
|
|
2013
|
-
</label>
|
|
2014
|
-
</div>
|
|
2015
2007
|
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
[options]="soundTypeOptions"
|
|
2023
|
-
placeholder="Select sound type">
|
|
2024
|
-
</cide-ele-select>
|
|
2025
|
-
</div>
|
|
2026
|
-
|
|
2027
|
-
<!-- Sound Volume -->
|
|
2028
|
-
<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">
|
|
2029
|
-
<div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
|
|
2030
|
-
<label class="tw-text-xs tw-font-medium">Volume</label>
|
|
2031
|
-
<span class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ settingsForm.get('soundVolume')?.value }}%</span>
|
|
2032
|
-
</div>
|
|
2033
|
-
<div class="volume-slider-container">
|
|
2034
|
-
<input
|
|
2035
|
-
type="range"
|
|
2036
|
-
formControlName="soundVolume"
|
|
2037
|
-
min="0"
|
|
2038
|
-
max="100"
|
|
2039
|
-
step="1"
|
|
2040
|
-
(input)="onVolumeChange($event)"
|
|
2041
|
-
class="volume-slider tw-w-full">
|
|
2042
|
-
</div>
|
|
2043
|
-
<div class="tw-flex tw-justify-between tw-text-[10px] tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1">
|
|
2044
|
-
<span>0%</span>
|
|
2045
|
-
<span>100%</span>
|
|
2046
|
-
</div>
|
|
2047
|
-
</div>
|
|
2008
|
+
@if (settingsForm.get('soundEnabled')?.value) {
|
|
2009
|
+
<div class="tw-space-y-4 tw-pt-2 tw-border-t tw-border-[var(--cide-ele-border-primary)] tw-border-dashed">
|
|
2010
|
+
<div>
|
|
2011
|
+
<label class="tw-block tw-text-xs tw-font-semibold tw-text-[var(--cide-ele-text-secondary)] tw-mb-3">NOTIFICATION SOUND</label>
|
|
2012
|
+
<cide-ele-select formControlName="soundType" [options]="soundTypeOptions" placeholder="Select Sound"></cide-ele-select>
|
|
2013
|
+
</div>
|
|
2048
2014
|
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
Test Sound
|
|
2059
|
-
</button>
|
|
2060
|
-
}
|
|
2061
|
-
</div>
|
|
2015
|
+
<div class="tw-space-y-3">
|
|
2016
|
+
<div class="tw-flex tw-items-center tw-justify-between">
|
|
2017
|
+
<label class="tw-text-xs tw-font-semibold tw-text-[var(--cide-ele-text-secondary)]">VOLUME LEVEL</label>
|
|
2018
|
+
<span class="tw-text-xs tw-font-bold tw-text-blue-500">{{ settingsForm.get('soundVolume')?.value }}%</span>
|
|
2019
|
+
</div>
|
|
2020
|
+
<div class="volume-slider-container">
|
|
2021
|
+
<input type="range" formControlName="soundVolume" min="0" max="100" step="1" (input)="onVolumeChange($event)" class="volume-slider tw-w-full">
|
|
2022
|
+
</div>
|
|
2023
|
+
</div>
|
|
2062
2024
|
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
<div class="tw-flex tw-items-center tw-gap-2">
|
|
2070
|
-
<cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">schedule</cide-ele-icon>
|
|
2071
|
-
<div>
|
|
2072
|
-
<label class="tw-text-sm tw-font-medium">Enable Quiet Hours</label>
|
|
2073
|
-
<p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Mute notifications during specified hours</p>
|
|
2074
|
-
</div>
|
|
2025
|
+
<button type="button" cideEleButton variant="ghost" size="sm" (click)="testSound()" class="tw-w-full tw-bg-blue-500/5 hover:tw-bg-blue-500/10 tw-text-blue-500 tw-font-semibold">
|
|
2026
|
+
<cide-ele-icon class="tw-mr-2">play_arrow</cide-ele-icon>
|
|
2027
|
+
Preview Sound
|
|
2028
|
+
</button>
|
|
2029
|
+
</div>
|
|
2030
|
+
}
|
|
2075
2031
|
</div>
|
|
2076
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2077
|
-
<input
|
|
2078
|
-
type="checkbox"
|
|
2079
|
-
formControlName="quietHoursEnabled"
|
|
2080
|
-
class="tw-sr-only tw-peer">
|
|
2081
|
-
<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>
|
|
2082
|
-
</label>
|
|
2083
2032
|
</div>
|
|
2084
2033
|
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
</div>
|
|
2104
|
-
}
|
|
2105
|
-
</div>
|
|
2034
|
+
<!-- Schedule & Snooze -->
|
|
2035
|
+
<div class="tw-space-y-6">
|
|
2036
|
+
<!-- Quiet Hours -->
|
|
2037
|
+
<div class="tw-space-y-4">
|
|
2038
|
+
<h4 class="tw-text-xs tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-uppercase tw-tracking-widest">Do Not Disturb</h4>
|
|
2039
|
+
<div class="tw-p-5 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-2xl tw-border tw-border-[var(--cide-ele-border-primary)] tw-space-y-4">
|
|
2040
|
+
<div class="tw-flex tw-items-center tw-justify-between">
|
|
2041
|
+
<div class="tw-flex tw-items-center tw-gap-3">
|
|
2042
|
+
<div class="tw-p-1.5 tw-bg-amber-500/10 tw-rounded-lg">
|
|
2043
|
+
<cide-ele-icon class="tw-text-amber-500 tw-text-lg">bedtime</cide-ele-icon>
|
|
2044
|
+
</div>
|
|
2045
|
+
<span class="tw-text-sm tw-font-medium">Quiet Hours</span>
|
|
2046
|
+
</div>
|
|
2047
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2048
|
+
<input type="checkbox" formControlName="quietHoursEnabled" class="tw-sr-only tw-peer">
|
|
2049
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
2050
|
+
</label>
|
|
2051
|
+
</div>
|
|
2106
2052
|
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2053
|
+
@if (settingsForm.get('quietHoursEnabled')?.value) {
|
|
2054
|
+
<div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-pt-2">
|
|
2055
|
+
<div>
|
|
2056
|
+
<label class="tw-block tw-text-[10px] tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-mb-1 tw-uppercase">START</label>
|
|
2057
|
+
<cide-ele-input type="time" formControlName="quietHoursStart"></cide-ele-input>
|
|
2058
|
+
</div>
|
|
2059
|
+
<div>
|
|
2060
|
+
<label class="tw-block tw-text-[10px] tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-mb-1 tw-uppercase">END</label>
|
|
2061
|
+
<cide-ele-input type="time" formControlName="quietHoursEnd"></cide-ele-input>
|
|
2062
|
+
</div>
|
|
2063
|
+
</div>
|
|
2064
|
+
}
|
|
2118
2065
|
</div>
|
|
2119
2066
|
</div>
|
|
2120
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2121
|
-
<input
|
|
2122
|
-
type="checkbox"
|
|
2123
|
-
formControlName="snoozeEnabled"
|
|
2124
|
-
class="tw-sr-only tw-peer">
|
|
2125
|
-
<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>
|
|
2126
|
-
</label>
|
|
2127
|
-
</div>
|
|
2128
2067
|
|
|
2129
|
-
|
|
2130
|
-
<div class="tw-
|
|
2131
|
-
<
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2068
|
+
<!-- Snooze -->
|
|
2069
|
+
<div class="tw-space-y-4">
|
|
2070
|
+
<div class="tw-p-5 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-2xl tw-border tw-border-[var(--cide-ele-border-primary)] tw-space-y-4">
|
|
2071
|
+
<div class="tw-flex tw-items-center tw-justify-between">
|
|
2072
|
+
<div class="tw-flex tw-items-center tw-gap-3">
|
|
2073
|
+
<div class="tw-p-1.5 tw-bg-rose-500/10 tw-rounded-lg">
|
|
2074
|
+
<cide-ele-icon class="tw-text-rose-500 tw-text-lg">snooze</cide-ele-icon>
|
|
2075
|
+
</div>
|
|
2076
|
+
<span class="tw-text-sm tw-font-medium">Snooze Notifications</span>
|
|
2077
|
+
</div>
|
|
2078
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2079
|
+
<input type="checkbox" formControlName="snoozeEnabled" class="tw-sr-only tw-peer">
|
|
2080
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
2081
|
+
</label>
|
|
2082
|
+
</div>
|
|
2142
2083
|
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
<div class="tw-flex tw-items-center tw-gap-2">
|
|
2150
|
-
<cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">desktop_windows</cide-ele-icon>
|
|
2151
|
-
<div>
|
|
2152
|
-
<label class="tw-text-sm tw-font-medium">Desktop Notifications</label>
|
|
2153
|
-
<p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Show browser notifications</p>
|
|
2084
|
+
@if (settingsForm.get('snoozeEnabled')?.value) {
|
|
2085
|
+
<div>
|
|
2086
|
+
<label class="tw-block tw-text-[10px] tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-mb-1 tw-uppercase">DURATION (MINUTES)</label>
|
|
2087
|
+
<cide-ele-input type="number" formControlName="snoozeDuration" min="5" max="1440"></cide-ele-input>
|
|
2088
|
+
</div>
|
|
2089
|
+
}
|
|
2154
2090
|
</div>
|
|
2155
2091
|
</div>
|
|
2156
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2157
|
-
<input
|
|
2158
|
-
type="checkbox"
|
|
2159
|
-
formControlName="desktopNotifications"
|
|
2160
|
-
class="tw-sr-only tw-peer">
|
|
2161
|
-
<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>
|
|
2162
|
-
</label>
|
|
2163
2092
|
</div>
|
|
2164
2093
|
</div>
|
|
2165
2094
|
|
|
2166
|
-
<!--
|
|
2167
|
-
<div class="tw-flex tw-gap-
|
|
2168
|
-
<button
|
|
2169
|
-
|
|
2170
|
-
cideEleButton
|
|
2171
|
-
variant="outline"
|
|
2172
|
-
size="sm"
|
|
2173
|
-
(click)="reset()"
|
|
2174
|
-
class="tw-flex-1">
|
|
2175
|
-
Reset
|
|
2176
|
-
</button>
|
|
2177
|
-
<button
|
|
2178
|
-
type="button"
|
|
2179
|
-
cideEleButton
|
|
2180
|
-
variant="primary"
|
|
2181
|
-
size="sm"
|
|
2182
|
-
(click)="save()"
|
|
2183
|
-
class="tw-flex-1">
|
|
2184
|
-
Save Settings
|
|
2185
|
-
</button>
|
|
2095
|
+
<!-- Footer Actions -->
|
|
2096
|
+
<div class="tw-flex tw-items-center tw-justify-end tw-gap-3 tw-pt-6 tw-border-t tw-border-[var(--cide-ele-border-primary)]">
|
|
2097
|
+
<button type="button" cideEleButton variant="ghost" (click)="reset()" class="tw-text-[var(--cide-ele-text-secondary)] tw-font-medium">Discard Changes</button>
|
|
2098
|
+
<button type="button" cideEleButton variant="primary" (click)="save()" [disabled]="settingsForm.pristine || settingsForm.invalid" class="tw-px-8 tw-shadow-lg tw-shadow-blue-500/20">Apply Settings</button>
|
|
2186
2099
|
</div>
|
|
2187
2100
|
</form>
|
|
2188
2101
|
</div>
|
|
2189
2102
|
|
|
2190
|
-
`, isInline: true, styles: ["
|
|
2103
|
+
`, isInline: true, styles: [".volume-slider-container{position:relative;width:100%;--slider-fill: #2563eb;--slider-track: #e5e7eb}:host-context(.dark-mode) .volume-slider-container{--slider-fill: #3b82f6;--slider-track: #374151}.volume-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;transition:all .2s ease}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#2563eb;cursor:pointer;border:2px solid #ffffff;box-shadow:0 2px 4px #0003;transition:all .2s ease}.volume-slider::-webkit-slider-thumb:hover{background:#1d4ed8;transform:scale(1.1);box-shadow:0 3px 6px #0000004d}:host-context(.dark-mode) .volume-slider::-webkit-slider-thumb{background:#3b82f6;border-color:#1e293b}.volume-slider{background-size:var(--slider-value, 0%) 100%;background-repeat:no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
|
|
2191
2104
|
}
|
|
2192
2105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NotificationSettingsComponent, decorators: [{
|
|
2193
2106
|
type: Component,
|
|
@@ -2199,266 +2112,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2199
2112
|
CideInputComponent,
|
|
2200
2113
|
CideSelectComponent
|
|
2201
2114
|
], template: `
|
|
2202
|
-
<div class="notification-settings-container tw-p-6 tw-space-y-6 tw-bg-
|
|
2203
|
-
|
|
2204
|
-
<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">
|
|
2205
|
-
<div class="tw-w-8 tw-h-8 tw-bg-blue-500 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
|
|
2206
|
-
<cide-ele-icon class="tw-text-white">settings</cide-ele-icon>
|
|
2207
|
-
</div>
|
|
2208
|
-
<div>
|
|
2209
|
-
<h3 class="tw-m-0 tw-text-sm tw-font-semibold">Notification Settings</h3>
|
|
2210
|
-
<p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">Customize your notification preferences</p>
|
|
2211
|
-
</div>
|
|
2212
|
-
</div>
|
|
2213
|
-
|
|
2214
|
-
<form [formGroup]="settingsForm" class="tw-space-y-6">
|
|
2115
|
+
<div class="notification-settings-container tw-p-6 tw-space-y-6 tw-bg-[var(--cide-ele-bg-primary)] tw-text-[var(--cide-ele-text-primary)]">
|
|
2116
|
+
<form [formGroup]="settingsForm" class="tw-space-y-8">
|
|
2215
2117
|
<!-- Notification Channels -->
|
|
2216
|
-
<div class="tw-space-y-
|
|
2217
|
-
<h4 class="tw-text-xs tw-font-
|
|
2118
|
+
<div class="tw-space-y-4">
|
|
2119
|
+
<h4 class="tw-text-xs tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-uppercase tw-tracking-widest">Notification Channels</h4>
|
|
2218
2120
|
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
<div class="tw-flex tw-
|
|
2222
|
-
<
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2121
|
+
<div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4">
|
|
2122
|
+
<!-- In-App Notifications -->
|
|
2123
|
+
<div class="tw-flex tw-flex-col tw-justify-between tw-p-4 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-xl tw-border tw-border-[var(--cide-ele-border-primary)] hover:tw-border-[var(--cide-ele-border-active)] tw-transition-all">
|
|
2124
|
+
<div class="tw-flex tw-items-center tw-gap-3 tw-mb-4">
|
|
2125
|
+
<div class="tw-p-2 tw-bg-blue-500/10 tw-rounded-lg">
|
|
2126
|
+
<cide-ele-icon class="tw-text-blue-500">notifications</cide-ele-icon>
|
|
2127
|
+
</div>
|
|
2128
|
+
<div>
|
|
2129
|
+
<label class="tw-text-sm tw-font-semibold tw-block">In-App</label>
|
|
2130
|
+
<p class="tw-m-0 tw-text-[10px] tw-text-[var(--cide-ele-text-tertiary)]">Within the application</p>
|
|
2131
|
+
</div>
|
|
2132
|
+
</div>
|
|
2133
|
+
<div class="tw-flex tw-justify-end">
|
|
2134
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2135
|
+
<input type="checkbox" formControlName="channelInApp" class="tw-sr-only tw-peer">
|
|
2136
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
2137
|
+
</label>
|
|
2226
2138
|
</div>
|
|
2227
2139
|
</div>
|
|
2228
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2229
|
-
<input type="checkbox" formControlName="channelInApp" class="tw-sr-only tw-peer">
|
|
2230
|
-
<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>
|
|
2231
|
-
</label>
|
|
2232
|
-
</div>
|
|
2233
2140
|
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
<
|
|
2141
|
+
<!-- Email Notifications -->
|
|
2142
|
+
<div class="tw-flex tw-flex-col tw-justify-between tw-p-4 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-xl tw-border tw-border-[var(--cide-ele-border-primary)] hover:tw-border-[var(--cide-ele-border-active)] tw-transition-all">
|
|
2143
|
+
<div class="tw-flex tw-items-center tw-gap-3 tw-mb-4">
|
|
2144
|
+
<div class="tw-p-2 tw-bg-purple-500/10 tw-rounded-lg">
|
|
2145
|
+
<cide-ele-icon class="tw-text-purple-500">mail</cide-ele-icon>
|
|
2146
|
+
</div>
|
|
2147
|
+
<div>
|
|
2148
|
+
<label class="tw-text-sm tw-font-semibold tw-block">Email</label>
|
|
2149
|
+
<p class="tw-m-0 tw-text-[10px] tw-text-[var(--cide-ele-text-tertiary)]">Via your register email</p>
|
|
2150
|
+
</div>
|
|
2151
|
+
</div>
|
|
2152
|
+
<div class="tw-flex tw-justify-end">
|
|
2153
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2154
|
+
<input type="checkbox" formControlName="channelEmail" class="tw-sr-only tw-peer">
|
|
2155
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
2156
|
+
</label>
|
|
2241
2157
|
</div>
|
|
2242
2158
|
</div>
|
|
2243
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2244
|
-
<input type="checkbox" formControlName="channelEmail" class="tw-sr-only tw-peer">
|
|
2245
|
-
<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>
|
|
2246
|
-
</label>
|
|
2247
|
-
</div>
|
|
2248
2159
|
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
<
|
|
2160
|
+
<!-- SMS Notifications -->
|
|
2161
|
+
<div class="tw-flex tw-flex-col tw-justify-between tw-p-4 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-xl tw-border tw-border-[var(--cide-ele-border-primary)] hover:tw-border-[var(--cide-ele-border-active)] tw-transition-all">
|
|
2162
|
+
<div class="tw-flex tw-items-center tw-gap-3 tw-mb-4">
|
|
2163
|
+
<div class="tw-p-2 tw-bg-orange-500/10 tw-rounded-lg">
|
|
2164
|
+
<cide-ele-icon class="tw-text-orange-500">sms</cide-ele-icon>
|
|
2165
|
+
</div>
|
|
2166
|
+
<div>
|
|
2167
|
+
<label class="tw-text-sm tw-font-semibold tw-block">SMS/Mobile</label>
|
|
2168
|
+
<p class="tw-m-0 tw-text-[10px] tw-text-[var(--cide-ele-text-tertiary)]">Text message updates</p>
|
|
2169
|
+
</div>
|
|
2170
|
+
</div>
|
|
2171
|
+
<div class="tw-flex tw-justify-end">
|
|
2172
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2173
|
+
<input type="checkbox" formControlName="channelSms" class="tw-sr-only tw-peer">
|
|
2174
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
2175
|
+
</label>
|
|
2256
2176
|
</div>
|
|
2257
2177
|
</div>
|
|
2258
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2259
|
-
<input type="checkbox" formControlName="channelSms" class="tw-sr-only tw-peer">
|
|
2260
|
-
<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>
|
|
2261
|
-
</label>
|
|
2262
2178
|
</div>
|
|
2263
2179
|
</div>
|
|
2264
2180
|
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
<
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2181
|
+
<div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-8">
|
|
2182
|
+
<!-- Sound Settings -->
|
|
2183
|
+
<div class="tw-space-y-4">
|
|
2184
|
+
<h4 class="tw-text-xs tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-uppercase tw-tracking-widest">Sound Preferences</h4>
|
|
2185
|
+
|
|
2186
|
+
<div class="tw-p-5 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-2xl tw-border tw-border-[var(--cide-ele-border-primary)] tw-space-y-5">
|
|
2187
|
+
<div class="tw-flex tw-items-center tw-justify-between">
|
|
2188
|
+
<div class="tw-flex tw-items-center tw-gap-3">
|
|
2189
|
+
<div class="tw-p-1.5 tw-bg-blue-500/10 tw-rounded-lg">
|
|
2190
|
+
<cide-ele-icon class="tw-text-blue-500 tw-text-lg">volume_up</cide-ele-icon>
|
|
2191
|
+
</div>
|
|
2192
|
+
<span class="tw-text-sm tw-font-medium">Enable Alert Sounds</span>
|
|
2193
|
+
</div>
|
|
2194
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2195
|
+
<input type="checkbox" formControlName="soundEnabled" class="tw-sr-only tw-peer">
|
|
2196
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
2197
|
+
</label>
|
|
2276
2198
|
</div>
|
|
2277
|
-
</div>
|
|
2278
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2279
|
-
<input
|
|
2280
|
-
type="checkbox"
|
|
2281
|
-
formControlName="soundEnabled"
|
|
2282
|
-
class="tw-sr-only tw-peer">
|
|
2283
|
-
<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>
|
|
2284
|
-
</label>
|
|
2285
|
-
</div>
|
|
2286
|
-
|
|
2287
|
-
@if (settingsForm.get('soundEnabled')?.value) {
|
|
2288
|
-
<!-- Sound Type -->
|
|
2289
|
-
<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">
|
|
2290
|
-
<label class="tw-block tw-text-xs tw-font-medium tw-mb-2">Sound Type</label>
|
|
2291
|
-
<cide-ele-select
|
|
2292
|
-
formControlName="soundType"
|
|
2293
|
-
[options]="soundTypeOptions"
|
|
2294
|
-
placeholder="Select sound type">
|
|
2295
|
-
</cide-ele-select>
|
|
2296
|
-
</div>
|
|
2297
2199
|
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
<div class="volume-slider-container">
|
|
2305
|
-
<input
|
|
2306
|
-
type="range"
|
|
2307
|
-
formControlName="soundVolume"
|
|
2308
|
-
min="0"
|
|
2309
|
-
max="100"
|
|
2310
|
-
step="1"
|
|
2311
|
-
(input)="onVolumeChange($event)"
|
|
2312
|
-
class="volume-slider tw-w-full">
|
|
2313
|
-
</div>
|
|
2314
|
-
<div class="tw-flex tw-justify-between tw-text-[10px] tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1">
|
|
2315
|
-
<span>0%</span>
|
|
2316
|
-
<span>100%</span>
|
|
2317
|
-
</div>
|
|
2318
|
-
</div>
|
|
2200
|
+
@if (settingsForm.get('soundEnabled')?.value) {
|
|
2201
|
+
<div class="tw-space-y-4 tw-pt-2 tw-border-t tw-border-[var(--cide-ele-border-primary)] tw-border-dashed">
|
|
2202
|
+
<div>
|
|
2203
|
+
<label class="tw-block tw-text-xs tw-font-semibold tw-text-[var(--cide-ele-text-secondary)] tw-mb-3">NOTIFICATION SOUND</label>
|
|
2204
|
+
<cide-ele-select formControlName="soundType" [options]="soundTypeOptions" placeholder="Select Sound"></cide-ele-select>
|
|
2205
|
+
</div>
|
|
2319
2206
|
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
Test Sound
|
|
2330
|
-
</button>
|
|
2331
|
-
}
|
|
2332
|
-
</div>
|
|
2207
|
+
<div class="tw-space-y-3">
|
|
2208
|
+
<div class="tw-flex tw-items-center tw-justify-between">
|
|
2209
|
+
<label class="tw-text-xs tw-font-semibold tw-text-[var(--cide-ele-text-secondary)]">VOLUME LEVEL</label>
|
|
2210
|
+
<span class="tw-text-xs tw-font-bold tw-text-blue-500">{{ settingsForm.get('soundVolume')?.value }}%</span>
|
|
2211
|
+
</div>
|
|
2212
|
+
<div class="volume-slider-container">
|
|
2213
|
+
<input type="range" formControlName="soundVolume" min="0" max="100" step="1" (input)="onVolumeChange($event)" class="volume-slider tw-w-full">
|
|
2214
|
+
</div>
|
|
2215
|
+
</div>
|
|
2333
2216
|
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
<div class="tw-flex tw-items-center tw-gap-2">
|
|
2341
|
-
<cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">schedule</cide-ele-icon>
|
|
2342
|
-
<div>
|
|
2343
|
-
<label class="tw-text-sm tw-font-medium">Enable Quiet Hours</label>
|
|
2344
|
-
<p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Mute notifications during specified hours</p>
|
|
2345
|
-
</div>
|
|
2217
|
+
<button type="button" cideEleButton variant="ghost" size="sm" (click)="testSound()" class="tw-w-full tw-bg-blue-500/5 hover:tw-bg-blue-500/10 tw-text-blue-500 tw-font-semibold">
|
|
2218
|
+
<cide-ele-icon class="tw-mr-2">play_arrow</cide-ele-icon>
|
|
2219
|
+
Preview Sound
|
|
2220
|
+
</button>
|
|
2221
|
+
</div>
|
|
2222
|
+
}
|
|
2346
2223
|
</div>
|
|
2347
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2348
|
-
<input
|
|
2349
|
-
type="checkbox"
|
|
2350
|
-
formControlName="quietHoursEnabled"
|
|
2351
|
-
class="tw-sr-only tw-peer">
|
|
2352
|
-
<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>
|
|
2353
|
-
</label>
|
|
2354
2224
|
</div>
|
|
2355
2225
|
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
</div>
|
|
2375
|
-
}
|
|
2376
|
-
</div>
|
|
2226
|
+
<!-- Schedule & Snooze -->
|
|
2227
|
+
<div class="tw-space-y-6">
|
|
2228
|
+
<!-- Quiet Hours -->
|
|
2229
|
+
<div class="tw-space-y-4">
|
|
2230
|
+
<h4 class="tw-text-xs tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-uppercase tw-tracking-widest">Do Not Disturb</h4>
|
|
2231
|
+
<div class="tw-p-5 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-2xl tw-border tw-border-[var(--cide-ele-border-primary)] tw-space-y-4">
|
|
2232
|
+
<div class="tw-flex tw-items-center tw-justify-between">
|
|
2233
|
+
<div class="tw-flex tw-items-center tw-gap-3">
|
|
2234
|
+
<div class="tw-p-1.5 tw-bg-amber-500/10 tw-rounded-lg">
|
|
2235
|
+
<cide-ele-icon class="tw-text-amber-500 tw-text-lg">bedtime</cide-ele-icon>
|
|
2236
|
+
</div>
|
|
2237
|
+
<span class="tw-text-sm tw-font-medium">Quiet Hours</span>
|
|
2238
|
+
</div>
|
|
2239
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2240
|
+
<input type="checkbox" formControlName="quietHoursEnabled" class="tw-sr-only tw-peer">
|
|
2241
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
2242
|
+
</label>
|
|
2243
|
+
</div>
|
|
2377
2244
|
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
|
|
2383
|
-
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
|
|
2245
|
+
@if (settingsForm.get('quietHoursEnabled')?.value) {
|
|
2246
|
+
<div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-pt-2">
|
|
2247
|
+
<div>
|
|
2248
|
+
<label class="tw-block tw-text-[10px] tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-mb-1 tw-uppercase">START</label>
|
|
2249
|
+
<cide-ele-input type="time" formControlName="quietHoursStart"></cide-ele-input>
|
|
2250
|
+
</div>
|
|
2251
|
+
<div>
|
|
2252
|
+
<label class="tw-block tw-text-[10px] tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-mb-1 tw-uppercase">END</label>
|
|
2253
|
+
<cide-ele-input type="time" formControlName="quietHoursEnd"></cide-ele-input>
|
|
2254
|
+
</div>
|
|
2255
|
+
</div>
|
|
2256
|
+
}
|
|
2389
2257
|
</div>
|
|
2390
2258
|
</div>
|
|
2391
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2392
|
-
<input
|
|
2393
|
-
type="checkbox"
|
|
2394
|
-
formControlName="snoozeEnabled"
|
|
2395
|
-
class="tw-sr-only tw-peer">
|
|
2396
|
-
<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>
|
|
2397
|
-
</label>
|
|
2398
|
-
</div>
|
|
2399
2259
|
|
|
2400
|
-
|
|
2401
|
-
<div class="tw-
|
|
2402
|
-
<
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2260
|
+
<!-- Snooze -->
|
|
2261
|
+
<div class="tw-space-y-4">
|
|
2262
|
+
<div class="tw-p-5 tw-bg-[var(--cide-ele-bg-secondary)] tw-rounded-2xl tw-border tw-border-[var(--cide-ele-border-primary)] tw-space-y-4">
|
|
2263
|
+
<div class="tw-flex tw-items-center tw-justify-between">
|
|
2264
|
+
<div class="tw-flex tw-items-center tw-gap-3">
|
|
2265
|
+
<div class="tw-p-1.5 tw-bg-rose-500/10 tw-rounded-lg">
|
|
2266
|
+
<cide-ele-icon class="tw-text-rose-500 tw-text-lg">snooze</cide-ele-icon>
|
|
2267
|
+
</div>
|
|
2268
|
+
<span class="tw-text-sm tw-font-medium">Snooze Notifications</span>
|
|
2269
|
+
</div>
|
|
2270
|
+
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2271
|
+
<input type="checkbox" formControlName="snoozeEnabled" class="tw-sr-only tw-peer">
|
|
2272
|
+
<div class="tw-w-10 tw-h-5 tw-bg-gray-200 peer-focus:tw-outline-none 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-4 after:tw-w-4 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
|
|
2273
|
+
</label>
|
|
2274
|
+
</div>
|
|
2413
2275
|
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
<div class="tw-flex tw-items-center tw-gap-2">
|
|
2421
|
-
<cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">desktop_windows</cide-ele-icon>
|
|
2422
|
-
<div>
|
|
2423
|
-
<label class="tw-text-sm tw-font-medium">Desktop Notifications</label>
|
|
2424
|
-
<p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Show browser notifications</p>
|
|
2276
|
+
@if (settingsForm.get('snoozeEnabled')?.value) {
|
|
2277
|
+
<div>
|
|
2278
|
+
<label class="tw-block tw-text-[10px] tw-font-bold tw-text-[var(--cide-ele-text-tertiary)] tw-mb-1 tw-uppercase">DURATION (MINUTES)</label>
|
|
2279
|
+
<cide-ele-input type="number" formControlName="snoozeDuration" min="5" max="1440"></cide-ele-input>
|
|
2280
|
+
</div>
|
|
2281
|
+
}
|
|
2425
2282
|
</div>
|
|
2426
2283
|
</div>
|
|
2427
|
-
<label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
|
|
2428
|
-
<input
|
|
2429
|
-
type="checkbox"
|
|
2430
|
-
formControlName="desktopNotifications"
|
|
2431
|
-
class="tw-sr-only tw-peer">
|
|
2432
|
-
<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>
|
|
2433
|
-
</label>
|
|
2434
2284
|
</div>
|
|
2435
2285
|
</div>
|
|
2436
2286
|
|
|
2437
|
-
<!--
|
|
2438
|
-
<div class="tw-flex tw-gap-
|
|
2439
|
-
<button
|
|
2440
|
-
|
|
2441
|
-
cideEleButton
|
|
2442
|
-
variant="outline"
|
|
2443
|
-
size="sm"
|
|
2444
|
-
(click)="reset()"
|
|
2445
|
-
class="tw-flex-1">
|
|
2446
|
-
Reset
|
|
2447
|
-
</button>
|
|
2448
|
-
<button
|
|
2449
|
-
type="button"
|
|
2450
|
-
cideEleButton
|
|
2451
|
-
variant="primary"
|
|
2452
|
-
size="sm"
|
|
2453
|
-
(click)="save()"
|
|
2454
|
-
class="tw-flex-1">
|
|
2455
|
-
Save Settings
|
|
2456
|
-
</button>
|
|
2287
|
+
<!-- Footer Actions -->
|
|
2288
|
+
<div class="tw-flex tw-items-center tw-justify-end tw-gap-3 tw-pt-6 tw-border-t tw-border-[var(--cide-ele-border-primary)]">
|
|
2289
|
+
<button type="button" cideEleButton variant="ghost" (click)="reset()" class="tw-text-[var(--cide-ele-text-secondary)] tw-font-medium">Discard Changes</button>
|
|
2290
|
+
<button type="button" cideEleButton variant="primary" (click)="save()" [disabled]="settingsForm.pristine || settingsForm.invalid" class="tw-px-8 tw-shadow-lg tw-shadow-blue-500/20">Apply Settings</button>
|
|
2457
2291
|
</div>
|
|
2458
2292
|
</form>
|
|
2459
2293
|
</div>
|
|
2460
2294
|
|
|
2461
|
-
`, styles: ["
|
|
2295
|
+
`, styles: [".volume-slider-container{position:relative;width:100%;--slider-fill: #2563eb;--slider-track: #e5e7eb}:host-context(.dark-mode) .volume-slider-container{--slider-fill: #3b82f6;--slider-track: #374151}.volume-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;transition:all .2s ease}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#2563eb;cursor:pointer;border:2px solid #ffffff;box-shadow:0 2px 4px #0003;transition:all .2s ease}.volume-slider::-webkit-slider-thumb:hover{background:#1d4ed8;transform:scale(1.1);box-shadow:0 3px 6px #0000004d}:host-context(.dark-mode) .volume-slider::-webkit-slider-thumb{background:#3b82f6;border-color:#1e293b}.volume-slider{background-size:var(--slider-value, 0%) 100%;background-repeat:no-repeat}\n"] }]
|
|
2462
2296
|
}] });
|
|
2463
2297
|
|
|
2464
2298
|
class CideLytHeaderWrapperComponent {
|
|
@@ -5635,8 +5469,8 @@ class CideLytSidedrawerWrapperComponent {
|
|
|
5635
5469
|
}
|
|
5636
5470
|
ngOnInit() {
|
|
5637
5471
|
// Initialize the component map (You'd likely populate this from a config or service)
|
|
5638
|
-
this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-
|
|
5639
|
-
this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-
|
|
5472
|
+
this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-uQ2UOmsw.mjs').then(m => m.CideLytSidedrawerNotesComponent);
|
|
5473
|
+
this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-D_F14KO8.mjs').then(m => m.CideLytDrawerThemeComponent);
|
|
5640
5474
|
}
|
|
5641
5475
|
async loadComponent(configFor) {
|
|
5642
5476
|
console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
|
|
@@ -6299,13 +6133,13 @@ class SettingsContainerComponent {
|
|
|
6299
6133
|
}
|
|
6300
6134
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SettingsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6301
6135
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SettingsContainerComponent, isStandalone: true, selector: "cide-lyt-settings-container", ngImport: i0, template: `
|
|
6302
|
-
<div class="tw-flex tw-h-full tw-bg-
|
|
6136
|
+
<div class="tw-flex tw-h-full tw-bg-[var(--cide-ele-bg-primary)] tw-text-[var(--cide-ele-text-primary)]">
|
|
6303
6137
|
<!-- Left Sidebar Navigation -->
|
|
6304
|
-
<div class="tw-w-64 tw-border-r tw-border-
|
|
6138
|
+
<div class="tw-w-64 tw-border-r tw-border-[var(--cide-ele-border-primary)] tw-bg-[var(--cide-ele-bg-secondary)] tw-flex tw-flex-col">
|
|
6305
6139
|
<!-- Header -->
|
|
6306
|
-
<div class="tw-px-4 tw-py-4 tw-border-b tw-border-
|
|
6307
|
-
<h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-
|
|
6308
|
-
<p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-
|
|
6140
|
+
<div class="tw-px-4 tw-py-4 tw-border-b tw-border-[var(--cide-ele-border-primary)]">
|
|
6141
|
+
<h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-[var(--cide-ele-text-primary)]">Settings</h2>
|
|
6142
|
+
<p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-[var(--cide-ele-text-secondary)]">Manage your preferences</p>
|
|
6309
6143
|
</div>
|
|
6310
6144
|
|
|
6311
6145
|
<!-- Navigation List -->
|
|
@@ -6316,10 +6150,10 @@ class SettingsContainerComponent {
|
|
|
6316
6150
|
cideEleButton
|
|
6317
6151
|
[ngClass]="{
|
|
6318
6152
|
'tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-text-blue-600 dark:tw-text-blue-400': selectedSection() === section.id,
|
|
6319
|
-
'tw-text-
|
|
6153
|
+
'tw-text-[var(--cide-ele-text-secondary)]': selectedSection() !== section.id
|
|
6320
6154
|
}"
|
|
6321
6155
|
(click)="selectSection(section.id)"
|
|
6322
|
-
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-
|
|
6156
|
+
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-[var(--cide-ele-bg-hover)] tw-justify-start">
|
|
6323
6157
|
<cide-ele-icon class="tw-text-lg">{{ section.icon }}</cide-ele-icon>
|
|
6324
6158
|
<div class="tw-flex-1 tw-min-w-0">
|
|
6325
6159
|
<div class="tw-flex tw-items-center tw-gap-2">
|
|
@@ -6329,7 +6163,7 @@ class SettingsContainerComponent {
|
|
|
6329
6163
|
}
|
|
6330
6164
|
</div>
|
|
6331
6165
|
@if (section.description) {
|
|
6332
|
-
<p class="tw-m-0 tw-mt-0.5 tw-text-xs tw-text-
|
|
6166
|
+
<p class="tw-m-0 tw-mt-0.5 tw-text-xs tw-text-[var(--cide-ele-text-tertiary)] tw-truncate">{{ section.description }}</p>
|
|
6333
6167
|
}
|
|
6334
6168
|
</div>
|
|
6335
6169
|
</button>
|
|
@@ -6340,15 +6174,15 @@ class SettingsContainerComponent {
|
|
|
6340
6174
|
<!-- Main Content Area -->
|
|
6341
6175
|
<div class="tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden">
|
|
6342
6176
|
<!-- Content Header -->
|
|
6343
|
-
<div class="tw-px-6 tw-py-4 tw-border-b tw-border-
|
|
6177
|
+
<div class="tw-px-6 tw-py-4 tw-border-b tw-border-[var(--cide-ele-border-primary)] tw-bg-[var(--cide-ele-bg-primary)]">
|
|
6344
6178
|
@if (currentSection()) {
|
|
6345
6179
|
<div class="tw-flex tw-items-center tw-justify-between">
|
|
6346
6180
|
<div>
|
|
6347
|
-
<h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-
|
|
6181
|
+
<h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-[var(--cide-ele-text-primary)]">
|
|
6348
6182
|
{{ currentSection()?.title }}
|
|
6349
6183
|
</h3>
|
|
6350
6184
|
@if (currentSection()?.description) {
|
|
6351
|
-
<p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-
|
|
6185
|
+
<p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-[var(--cide-ele-text-secondary)]">
|
|
6352
6186
|
{{ currentSection()?.description }}
|
|
6353
6187
|
</p>
|
|
6354
6188
|
}
|
|
@@ -6358,7 +6192,7 @@ class SettingsContainerComponent {
|
|
|
6358
6192
|
</div>
|
|
6359
6193
|
|
|
6360
6194
|
<!-- Content Body -->
|
|
6361
|
-
<div class="tw-flex-1 tw-overflow-y-auto tw-bg-
|
|
6195
|
+
<div class="tw-flex-1 tw-overflow-y-auto tw-bg-[var(--cide-ele-bg-primary)]">
|
|
6362
6196
|
@switch (selectedSection()) {
|
|
6363
6197
|
@case ('notifications') {
|
|
6364
6198
|
<cide-lyt-notification-settings></cide-lyt-notification-settings>
|
|
@@ -6393,13 +6227,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6393
6227
|
NotificationSettingsComponent,
|
|
6394
6228
|
ShortcutsPanelComponent
|
|
6395
6229
|
], template: `
|
|
6396
|
-
<div class="tw-flex tw-h-full tw-bg-
|
|
6230
|
+
<div class="tw-flex tw-h-full tw-bg-[var(--cide-ele-bg-primary)] tw-text-[var(--cide-ele-text-primary)]">
|
|
6397
6231
|
<!-- Left Sidebar Navigation -->
|
|
6398
|
-
<div class="tw-w-64 tw-border-r tw-border-
|
|
6232
|
+
<div class="tw-w-64 tw-border-r tw-border-[var(--cide-ele-border-primary)] tw-bg-[var(--cide-ele-bg-secondary)] tw-flex tw-flex-col">
|
|
6399
6233
|
<!-- Header -->
|
|
6400
|
-
<div class="tw-px-4 tw-py-4 tw-border-b tw-border-
|
|
6401
|
-
<h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-
|
|
6402
|
-
<p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-
|
|
6234
|
+
<div class="tw-px-4 tw-py-4 tw-border-b tw-border-[var(--cide-ele-border-primary)]">
|
|
6235
|
+
<h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-[var(--cide-ele-text-primary)]">Settings</h2>
|
|
6236
|
+
<p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-[var(--cide-ele-text-secondary)]">Manage your preferences</p>
|
|
6403
6237
|
</div>
|
|
6404
6238
|
|
|
6405
6239
|
<!-- Navigation List -->
|
|
@@ -6410,10 +6244,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6410
6244
|
cideEleButton
|
|
6411
6245
|
[ngClass]="{
|
|
6412
6246
|
'tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-text-blue-600 dark:tw-text-blue-400': selectedSection() === section.id,
|
|
6413
|
-
'tw-text-
|
|
6247
|
+
'tw-text-[var(--cide-ele-text-secondary)]': selectedSection() !== section.id
|
|
6414
6248
|
}"
|
|
6415
6249
|
(click)="selectSection(section.id)"
|
|
6416
|
-
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-
|
|
6250
|
+
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-[var(--cide-ele-bg-hover)] tw-justify-start">
|
|
6417
6251
|
<cide-ele-icon class="tw-text-lg">{{ section.icon }}</cide-ele-icon>
|
|
6418
6252
|
<div class="tw-flex-1 tw-min-w-0">
|
|
6419
6253
|
<div class="tw-flex tw-items-center tw-gap-2">
|
|
@@ -6423,7 +6257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6423
6257
|
}
|
|
6424
6258
|
</div>
|
|
6425
6259
|
@if (section.description) {
|
|
6426
|
-
<p class="tw-m-0 tw-mt-0.5 tw-text-xs tw-text-
|
|
6260
|
+
<p class="tw-m-0 tw-mt-0.5 tw-text-xs tw-text-[var(--cide-ele-text-tertiary)] tw-truncate">{{ section.description }}</p>
|
|
6427
6261
|
}
|
|
6428
6262
|
</div>
|
|
6429
6263
|
</button>
|
|
@@ -6434,15 +6268,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6434
6268
|
<!-- Main Content Area -->
|
|
6435
6269
|
<div class="tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden">
|
|
6436
6270
|
<!-- Content Header -->
|
|
6437
|
-
<div class="tw-px-6 tw-py-4 tw-border-b tw-border-
|
|
6271
|
+
<div class="tw-px-6 tw-py-4 tw-border-b tw-border-[var(--cide-ele-border-primary)] tw-bg-[var(--cide-ele-bg-primary)]">
|
|
6438
6272
|
@if (currentSection()) {
|
|
6439
6273
|
<div class="tw-flex tw-items-center tw-justify-between">
|
|
6440
6274
|
<div>
|
|
6441
|
-
<h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-
|
|
6275
|
+
<h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-[var(--cide-ele-text-primary)]">
|
|
6442
6276
|
{{ currentSection()?.title }}
|
|
6443
6277
|
</h3>
|
|
6444
6278
|
@if (currentSection()?.description) {
|
|
6445
|
-
<p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-
|
|
6279
|
+
<p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-[var(--cide-ele-text-secondary)]">
|
|
6446
6280
|
{{ currentSection()?.description }}
|
|
6447
6281
|
</p>
|
|
6448
6282
|
}
|
|
@@ -6452,7 +6286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6452
6286
|
</div>
|
|
6453
6287
|
|
|
6454
6288
|
<!-- Content Body -->
|
|
6455
|
-
<div class="tw-flex-1 tw-overflow-y-auto tw-bg-
|
|
6289
|
+
<div class="tw-flex-1 tw-overflow-y-auto tw-bg-[var(--cide-ele-bg-primary)]">
|
|
6456
6290
|
@switch (selectedSection()) {
|
|
6457
6291
|
@case ('notifications') {
|
|
6458
6292
|
<cide-lyt-notification-settings></cide-lyt-notification-settings>
|
|
@@ -7335,7 +7169,7 @@ const layoutControlPannelChildRoutes = [{
|
|
|
7335
7169
|
},
|
|
7336
7170
|
{
|
|
7337
7171
|
path: "home",
|
|
7338
|
-
loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-
|
|
7172
|
+
loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-CsfkluH7.mjs').then(c => c.CideLytHomeWrapperComponent),
|
|
7339
7173
|
canActivate: [authGuard],
|
|
7340
7174
|
data: {
|
|
7341
7175
|
sypg_page_code: "cide_lyt_home" // Used by RequestService to fetch tab properties
|
|
@@ -7343,7 +7177,7 @@ const layoutControlPannelChildRoutes = [{
|
|
|
7343
7177
|
},
|
|
7344
7178
|
{
|
|
7345
7179
|
path: "dashboard-manager",
|
|
7346
|
-
loadComponent: () => import('./cloud-ide-layout-dashboard-manager.component-
|
|
7180
|
+
loadComponent: () => import('./cloud-ide-layout-dashboard-manager.component-BJArKBjQ.mjs').then(c => c.DashboardManagerComponent),
|
|
7347
7181
|
canActivate: [authGuard],
|
|
7348
7182
|
data: {
|
|
7349
7183
|
sypg_page_code: "cide_lyt_dashboard_manager"
|
|
@@ -9167,4 +9001,4 @@ var floatingEntitySelection_component = /*#__PURE__*/Object.freeze({
|
|
|
9167
9001
|
*/
|
|
9168
9002
|
|
|
9169
9003
|
export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, NotificationSettingsService as N, RightsService as R, CideLytSidebarService as a, CideLytSidedrawerService as b, CideLytThemeService as c, CloudIdeLayoutService as d, CloudIdeLayoutComponent as e, CideLytSharedService as f, ComponentContextService as g, layoutControlPannelChildRoutes as h, CustomRouteReuseStrategy as i, AppStateService as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingEntityRightsSharingComponent as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingService as q, CideLytFloatingEntitySelectionComponent as r, setCSSVariable as s, themeFactory as t, CideLytFloatingEntitySelectionService as u };
|
|
9170
|
-
//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-
|
|
9004
|
+
//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-C4dYqSYm.mjs.map
|