purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2024-10-30 01:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

First pass through updating standalone components.

Browse Source
This commit is contained in:
Sercan Yemen 2023-05-04 11:37:40 +03:00
parent 715ab6a3aa
commit b2cb20634e
573 changed files with 14143 additions and 11263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3606
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

71
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "fuse-angular", "name": "fuse-angular",
"version": "17.2.0", "version": "18.0.0",
"description": "Fuse - Angular Admin Template and Starter Project", "description": "Fuse - Angular Admin Template and Starter Project",
"author": "https://themeforest.net/user/srcn", "author": "https://themeforest.net/user/srcn",
"license": "https://themeforest.net/licenses/standard", "license": "https://themeforest.net/licenses/standard",
@ -13,55 +13,54 @@
"test": "ng test" "test": "ng test"
}, },
"dependencies": { "dependencies": {
"@angular/animations": "15.1.1", "@angular/animations": "15.2.9",
"@angular/cdk": "15.1.1", "@angular/cdk": "15.2.9",
"@angular/common": "15.1.1", "@angular/common": "15.2.9",
"@angular/compiler": "15.1.1", "@angular/compiler": "15.2.9",
"@angular/core": "15.1.1", "@angular/core": "15.2.9",
"@angular/forms": "15.1.1", "@angular/forms": "15.2.9",
"@angular/material": "15.1.1", "@angular/material": "15.2.9",
"@angular/material-luxon-adapter": "15.1.1", "@angular/material-luxon-adapter": "15.2.9",
"@angular/platform-browser": "15.1.1", "@angular/platform-browser": "15.2.9",
"@angular/platform-browser-dynamic": "15.1.1", "@angular/platform-browser-dynamic": "15.2.9",
"@angular/router": "15.1.1", "@angular/router": "15.2.9",
"@ngneat/transloco": "4.2.2", "@ngneat/transloco": "4.2.6",
"apexcharts": "3.36.3", "apexcharts": "3.40.0",
"crypto-js": "3.3.0", "crypto-js": "3.3.0",
"highlight.js": "11.7.0", "highlight.js": "11.8.0",
"lodash-es": "4.17.21", "lodash-es": "4.17.21",
"luxon": "3.2.1", "luxon": "3.3.0",
"ng-apexcharts": "1.7.4", "ng-apexcharts": "1.7.6",
"ngx-quill": "20.0.1", "ngx-quill": "21.0.0",
"perfect-scrollbar": "1.5.5", "perfect-scrollbar": "1.5.5",
"quill": "1.3.7", "quill": "1.3.7",
"rxjs": "7.8.0", "rxjs": "7.8.1",
"tslib": "2.4.1", "tslib": "2.5.0",
"zone.js": "0.12.0" "zone.js": "0.13.0"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "15.1.2", "@angular-devkit/build-angular": "15.2.8",
"@angular/cli": "15.1.2", "@angular/cli": "15.2.8",
"@angular/compiler-cli": "15.1.1", "@angular/compiler-cli": "15.2.9",
"@tailwindcss/line-clamp": "0.4.2",
"@tailwindcss/typography": "0.5.9", "@tailwindcss/typography": "0.5.9",
"@types/chroma-js": "2.1.4", "@types/chroma-js": "2.4.0",
"@types/crypto-js": "3.1.47", "@types/crypto-js": "3.1.47",
"@types/highlight.js": "10.1.0", "@types/highlight.js": "10.1.0",
"@types/jasmine": "4.3.1", "@types/jasmine": "4.3.1",
"@types/lodash": "4.14.191", "@types/lodash": "4.14.194",
"@types/lodash-es": "4.17.6", "@types/lodash-es": "4.17.7",
"@types/luxon": "3.2.0", "@types/luxon": "3.3.0",
"autoprefixer": "10.4.13", "autoprefixer": "10.4.14",
"chroma-js": "2.4.2", "chroma-js": "2.4.2",
"jasmine-core": "4.5.0", "jasmine-core": "4.6.0",
"karma": "6.4.1", "karma": "6.4.2",
"karma-chrome-launcher": "3.1.1", "karma-chrome-launcher": "3.2.0",
"karma-coverage": "2.2.0", "karma-coverage": "2.2.0",
"karma-jasmine": "5.1.0", "karma-jasmine": "5.1.0",
"karma-jasmine-html-reporter": "2.0.0", "karma-jasmine-html-reporter": "2.0.0",
"lodash": "4.17.21", "lodash": "4.17.21",
"postcss": "8.4.21", "postcss": "8.4.23",
"tailwindcss": "3.2.4", "tailwindcss": "3.3.2",
"typescript": "4.9.4" "typescript": "4.9.5"
} }
} }

16
src/@fuse/animations/expand-collapse.ts
View File

@ -8,12 +8,12 @@ const expandCollapse = trigger('expandCollapse',
[ [
state('void, collapsed', state('void, collapsed',
style({ style({
height: '0' height: '0',
}) }),
), ),
state('*, expanded', state('*, expanded',
style('*') style('*'),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -24,11 +24,11 @@ const expandCollapse = trigger('expandCollapse',
animate('{{timings}}'), animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
export { expandCollapse }; export { expandCollapse };

180
src/@fuse/animations/fade.ts
View File

@ -8,14 +8,14 @@ const fadeIn = trigger('fadeIn',
[ [
state('void', state('void',
style({ style({
opacity: 0 opacity: 0,
}) }),
), ),
state('*', state('*',
style({ style({
opacity: 1 opacity: 1,
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -25,11 +25,11 @@ const fadeIn = trigger('fadeIn',
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -40,15 +40,15 @@ const fadeInTop = trigger('fadeInTop',
state('void', state('void',
style({ style({
opacity : 0, opacity : 0,
transform: 'translate3d(0, -100%, 0)' transform: 'translate3d(0, -100%, 0)',
}) }),
), ),
state('*', state('*',
style({ style({
opacity : 1, opacity : 1,
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -58,11 +58,11 @@ const fadeInTop = trigger('fadeInTop',
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -73,15 +73,15 @@ const fadeInBottom = trigger('fadeInBottom',
state('void', state('void',
style({ style({
opacity : 0, opacity : 0,
transform: 'translate3d(0, 100%, 0)' transform: 'translate3d(0, 100%, 0)',
}) }),
), ),
state('*', state('*',
style({ style({
opacity : 1, opacity : 1,
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -91,11 +91,11 @@ const fadeInBottom = trigger('fadeInBottom',
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -106,15 +106,15 @@ const fadeInLeft = trigger('fadeInLeft',
state('void', state('void',
style({ style({
opacity : 0, opacity : 0,
transform: 'translate3d(-100%, 0, 0)' transform: 'translate3d(-100%, 0, 0)',
}) }),
), ),
state('*', state('*',
style({ style({
opacity : 1, opacity : 1,
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -124,11 +124,11 @@ const fadeInLeft = trigger('fadeInLeft',
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -139,15 +139,15 @@ const fadeInRight = trigger('fadeInRight',
state('void', state('void',
style({ style({
opacity : 0, opacity : 0,
transform: 'translate3d(100%, 0, 0)' transform: 'translate3d(100%, 0, 0)',
}) }),
), ),
state('*', state('*',
style({ style({
opacity : 1, opacity : 1,
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -157,11 +157,11 @@ const fadeInRight = trigger('fadeInRight',
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -171,14 +171,14 @@ const fadeOut = trigger('fadeOut',
[ [
state('*', state('*',
style({ style({
opacity: 1 opacity: 1,
}) }),
), ),
state('void', state('void',
style({ style({
opacity: 0 opacity: 0,
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -188,11 +188,11 @@ const fadeOut = trigger('fadeOut',
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -203,15 +203,15 @@ const fadeOutTop = trigger('fadeOutTop',
state('*', state('*',
style({ style({
opacity : 1, opacity : 1,
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
state('void', state('void',
style({ style({
opacity : 0, opacity : 0,
transform: 'translate3d(0, -100%, 0)' transform: 'translate3d(0, -100%, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -221,11 +221,11 @@ const fadeOutTop = trigger('fadeOutTop',
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -236,15 +236,15 @@ const fadeOutBottom = trigger('fadeOutBottom',
state('*', state('*',
style({ style({
opacity : 1, opacity : 1,
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
state('void', state('void',
style({ style({
opacity : 0, opacity : 0,
transform: 'translate3d(0, 100%, 0)' transform: 'translate3d(0, 100%, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -254,11 +254,11 @@ const fadeOutBottom = trigger('fadeOutBottom',
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -269,15 +269,15 @@ const fadeOutLeft = trigger('fadeOutLeft',
state('*', state('*',
style({ style({
opacity : 1, opacity : 1,
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
state('void', state('void',
style({ style({
opacity : 0, opacity : 0,
transform: 'translate3d(-100%, 0, 0)' transform: 'translate3d(-100%, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -287,11 +287,11 @@ const fadeOutLeft = trigger('fadeOutLeft',
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -302,15 +302,15 @@ const fadeOutRight = trigger('fadeOutRight',
state('*', state('*',
style({ style({
opacity : 1, opacity : 1,
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
state('void', state('void',
style({ style({
opacity : 0, opacity : 0,
transform: 'translate3d(100%, 0, 0)' transform: 'translate3d(100%, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -320,11 +320,11 @@ const fadeOutRight = trigger('fadeOutRight',
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
} },
} },
) ),
] ],
); );
export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight }; export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };

2
src/@fuse/animations/public-api.ts
View File

@ -11,5 +11,5 @@ export const fuseAnimations = [
shake, shake,
slideInTop, slideInBottom, slideInLeft, slideInRight, slideInTop, slideInBottom, slideInLeft, slideInRight,
slideOutTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
zoomIn, zoomOut zoomIn, zoomOut,
]; ];

38
src/@fuse/animations/shake.ts
View File

@ -16,58 +16,58 @@ const shake = trigger('shake',
keyframes([ keyframes([
style({ style({
transform: 'translate3d(0, 0, 0)', transform: 'translate3d(0, 0, 0)',
offset : 0 offset : 0,
}), }),
style({ style({
transform: 'translate3d(-10px, 0, 0)', transform: 'translate3d(-10px, 0, 0)',
offset : 0.1 offset : 0.1,
}), }),
style({ style({
transform: 'translate3d(10px, 0, 0)', transform: 'translate3d(10px, 0, 0)',
offset : 0.2 offset : 0.2,
}), }),
style({ style({
transform: 'translate3d(-10px, 0, 0)', transform: 'translate3d(-10px, 0, 0)',
offset : 0.3 offset : 0.3,
}), }),
style({ style({
transform: 'translate3d(10px, 0, 0)', transform: 'translate3d(10px, 0, 0)',
offset : 0.4 offset : 0.4,
}), }),
style({ style({
transform: 'translate3d(-10px, 0, 0)', transform: 'translate3d(-10px, 0, 0)',
offset : 0.5 offset : 0.5,
}), }),
style({ style({
transform: 'translate3d(10px, 0, 0)', transform: 'translate3d(10px, 0, 0)',
offset : 0.6 offset : 0.6,
}), }),
style({ style({
transform: 'translate3d(-10px, 0, 0)', transform: 'translate3d(-10px, 0, 0)',
offset : 0.7 offset : 0.7,
}), }),
style({ style({
transform: 'translate3d(10px, 0, 0)', transform: 'translate3d(10px, 0, 0)',
offset : 0.8 offset : 0.8,
}), }),
style({ style({
transform: 'translate3d(-10px, 0, 0)', transform: 'translate3d(-10px, 0, 0)',
offset : 0.9 offset : 0.9,
}), }),
style({ style({
transform: 'translate3d(0, 0, 0)', transform: 'translate3d(0, 0, 0)',
offset : 1 offset : 1,
}) }),
]) ]),
) ),
], ],
{ {
params: { params: {
timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)' timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
} },
} },
) ),
] ],
); );
export { shake }; export { shake };

144
src/@fuse/animations/slide.ts
View File

@ -8,14 +8,14 @@ const slideInTop = trigger('slideInTop',
[ [
state('void', state('void',
style({ style({
transform: 'translate3d(0, -100%, 0)' transform: 'translate3d(0, -100%, 0)',
}) }),
), ),
state('*', state('*',
style({ style({
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -25,11 +25,11 @@ const slideInTop = trigger('slideInTop',
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -39,14 +39,14 @@ const slideInBottom = trigger('slideInBottom',
[ [
state('void', state('void',
style({ style({
transform: 'translate3d(0, 100%, 0)' transform: 'translate3d(0, 100%, 0)',
}) }),
), ),
state('*', state('*',
style({ style({
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -56,11 +56,11 @@ const slideInBottom = trigger('slideInBottom',
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -70,14 +70,14 @@ const slideInLeft = trigger('slideInLeft',
[ [
state('void', state('void',
style({ style({
transform: 'translate3d(-100%, 0, 0)' transform: 'translate3d(-100%, 0, 0)',
}) }),
), ),
state('*', state('*',
style({ style({
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -87,11 +87,11 @@ const slideInLeft = trigger('slideInLeft',
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -101,14 +101,14 @@ const slideInRight = trigger('slideInRight',
[ [
state('void', state('void',
style({ style({
transform: 'translate3d(100%, 0, 0)' transform: 'translate3d(100%, 0, 0)',
}) }),
), ),
state('*', state('*',
style({ style({
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -118,11 +118,11 @@ const slideInRight = trigger('slideInRight',
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -132,14 +132,14 @@ const slideOutTop = trigger('slideOutTop',
[ [
state('*', state('*',
style({ style({
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
state('void', state('void',
style({ style({
transform: 'translate3d(0, -100%, 0)' transform: 'translate3d(0, -100%, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -149,11 +149,11 @@ const slideOutTop = trigger('slideOutTop',
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -163,14 +163,14 @@ const slideOutBottom = trigger('slideOutBottom',
[ [
state('*', state('*',
style({ style({
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
state('void', state('void',
style({ style({
transform: 'translate3d(0, 100%, 0)' transform: 'translate3d(0, 100%, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -180,11 +180,11 @@ const slideOutBottom = trigger('slideOutBottom',
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -194,14 +194,14 @@ const slideOutLeft = trigger('slideOutLeft',
[ [
state('*', state('*',
style({ style({
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
state('void', state('void',
style({ style({
transform: 'translate3d(-100%, 0, 0)' transform: 'translate3d(-100%, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -211,11 +211,11 @@ const slideOutLeft = trigger('slideOutLeft',
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -225,14 +225,14 @@ const slideOutRight = trigger('slideOutRight',
[ [
state('*', state('*',
style({ style({
transform: 'translate3d(0, 0, 0)' transform: 'translate3d(0, 0, 0)',
}) }),
), ),
state('void', state('void',
style({ style({
transform: 'translate3d(100%, 0, 0)' transform: 'translate3d(100%, 0, 0)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -242,11 +242,11 @@ const slideOutRight = trigger('slideOutRight',
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
} },
} },
) ),
] ],
); );
export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight }; export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };

36
src/@fuse/animations/zoom.ts
View File

@ -10,15 +10,15 @@ const zoomIn = trigger('zoomIn',
state('void', state('void',
style({ style({
opacity : 0, opacity : 0,
transform: 'scale(0.5)' transform: 'scale(0.5)',
}) }),
), ),
state('*', state('*',
style({ style({
opacity : 1, opacity : 1,
transform: 'scale(1)' transform: 'scale(1)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -28,11 +28,11 @@ const zoomIn = trigger('zoomIn',
transition('void => *', animate('{{timings}}'), transition('void => *', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}` timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
} },
} },
) ),
] ],
); );
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -44,15 +44,15 @@ const zoomOut = trigger('zoomOut',
state('*', state('*',
style({ style({
opacity : 1, opacity : 1,
transform: 'scale(1)' transform: 'scale(1)',
}) }),
), ),
state('void', state('void',
style({ style({
opacity : 0, opacity : 0,
transform: 'scale(0.5)' transform: 'scale(0.5)',
}) }),
), ),
// Prevent the transition if the state is false // Prevent the transition if the state is false
@ -62,11 +62,11 @@ const zoomOut = trigger('zoomOut',
transition('* => void', animate('{{timings}}'), transition('* => void', animate('{{timings}}'),
{ {
params: { params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}` timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
} },
} },
) ),
] ],
); );
export { zoomIn, zoomOut }; export { zoomIn, zoomOut };

27
src/@fuse/components/alert/alert.component.ts
View File

@ -1,10 +1,13 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { filter, Subject, takeUntil } from 'rxjs';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
import { FuseAlertService } from '@fuse/components/alert/alert.service'; import { FuseAlertService } from '@fuse/components/alert/alert.service';
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { filter, Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-alert', selector : 'fuse-alert',
@ -13,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
encapsulation : ViewEncapsulation.None, encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
animations : fuseAnimations, animations : fuseAnimations,
exportAs : 'fuseAlert' exportAs : 'fuseAlert',
standalone : true,
imports : [NgIf, MatIconModule, MatButtonModule],
}) })
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
{ {
@ -39,7 +44,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseAlertService: FuseAlertService, private _fuseAlertService: FuseAlertService,
private _fuseUtilsService: FuseUtilsService private _fuseUtilsService: FuseUtilsService,
) )
{ {
} }
@ -69,7 +74,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
'fuse-alert-type-info' : this.type === 'info', 'fuse-alert-type-info' : this.type === 'info',
'fuse-alert-type-success' : this.type === 'success', 'fuse-alert-type-success' : this.type === 'success',
'fuse-alert-type-warning' : this.type === 'warning', 'fuse-alert-type-warning' : this.type === 'warning',
'fuse-alert-type-error' : this.type === 'error' 'fuse-alert-type-error' : this.type === 'error',
}; };
/* eslint-enable @typescript-eslint/naming-convention */ /* eslint-enable @typescript-eslint/naming-convention */
} }
@ -119,9 +124,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
this._fuseAlertService.onDismiss this._fuseAlertService.onDismiss
.pipe( .pipe(
filter(name => this.name === name), filter(name => this.name === name),
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
) )
.subscribe(() => { .subscribe(() =>
{
// Dismiss the alert // Dismiss the alert
this.dismiss(); this.dismiss();
@ -131,9 +137,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
this._fuseAlertService.onShow this._fuseAlertService.onShow
.pipe( .pipe(
filter(name => this.name === name), filter(name => this.name === name),
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
) )
.subscribe(() => { .subscribe(() =>
{
// Show the alert // Show the alert
this.show(); this.show();

22
src/@fuse/components/alert/alert.module.ts
View File

@ -1,22 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { FuseAlertComponent } from '@fuse/components/alert/alert.component';
@NgModule({
declarations: [
FuseAlertComponent
],
imports : [
CommonModule,
MatButtonModule,
MatIconModule
],
exports : [
FuseAlertComponent
]
})
export class FuseAlertModule
{
}

2
src/@fuse/components/alert/alert.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs'; import { Observable, ReplaySubject } from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class FuseAlertService export class FuseAlertService
{ {

1
src/@fuse/components/alert/public-api.ts
View File

@ -1,4 +1,3 @@
export * from '@fuse/components/alert/alert.component'; export * from '@fuse/components/alert/alert.component';
export * from '@fuse/components/alert/alert.module';
export * from '@fuse/components/alert/alert.service'; export * from '@fuse/components/alert/alert.service';
export * from '@fuse/components/alert/alert.types'; export * from '@fuse/components/alert/alert.types';

9
src/@fuse/components/card/card.component.ts
View File

@ -1,5 +1,6 @@
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgIf } from '@angular/common';
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseCardFace } from '@fuse/components/card/card.types'; import { FuseCardFace } from '@fuse/components/card/card.types';
@ -9,7 +10,9 @@ import { FuseCardFace } from '@fuse/components/card/card.types';
styleUrls : ['./card.component.scss'], styleUrls : ['./card.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
animations : fuseAnimations, animations : fuseAnimations,
exportAs : 'fuseCard' exportAs : 'fuseCard',
standalone : true,
imports : [NgIf],
}) })
export class FuseCardComponent implements OnChanges export class FuseCardComponent implements OnChanges
{ {
@ -43,7 +46,7 @@ export class FuseCardComponent implements OnChanges
'fuse-card-expanded' : this.expanded, 'fuse-card-expanded' : this.expanded,
'fuse-card-face-back' : this.flippable && this.face === 'back', 'fuse-card-face-back' : this.flippable && this.face === 'back',
'fuse-card-face-front': this.flippable && this.face === 'front', 'fuse-card-face-front': this.flippable && this.face === 'front',
'fuse-card-flippable' : this.flippable 'fuse-card-flippable' : this.flippable,
}; };
/* eslint-enable @typescript-eslint/naming-convention */ /* eslint-enable @typescript-eslint/naming-convention */
} }

18
src/@fuse/components/card/card.module.ts
View File

@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FuseCardComponent } from '@fuse/components/card/card.component';
@NgModule({
declarations: [
FuseCardComponent
],
imports : [
CommonModule
],
exports : [
FuseCardComponent
]
})
export class FuseCardModule
{
}

1
src/@fuse/components/card/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/components/card/card.component'; export * from '@fuse/components/card/card.component';
export * from '@fuse/components/card/card.module';

30
src/@fuse/components/drawer/drawer.component.ts
View File

@ -1,16 +1,17 @@
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
@Component({ @Component({
selector : 'fuse-drawer', selector : 'fuse-drawer',
templateUrl : './drawer.component.html', templateUrl : './drawer.component.html',
styleUrls : ['./drawer.component.scss'], styleUrls : ['./drawer.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
exportAs : 'fuseDrawer' exportAs : 'fuseDrawer',
standalone : true,
}) })
export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
{ {
@ -45,10 +46,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
private _elementRef: ElementRef, private _elementRef: ElementRef,
private _renderer2: Renderer2, private _renderer2: Renderer2,
private _fuseDrawerService: FuseDrawerService, private _fuseDrawerService: FuseDrawerService,
private _fuseUtilsService: FuseUtilsService private _fuseUtilsService: FuseUtilsService,
) )
{ {
this._handleOverlayClick = (): void => { this._handleOverlayClick = (): void =>
{
this.close(); this.close();
}; };
} }
@ -69,7 +71,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
'fuse-drawer-hover' : this._hovered, 'fuse-drawer-hover' : this._hovered,
[`fuse-drawer-mode-${this.mode}`] : true, [`fuse-drawer-mode-${this.mode}`] : true,
'fuse-drawer-opened' : this.opened, 'fuse-drawer-opened' : this.opened,
[`fuse-drawer-position-${this.position}`]: true [`fuse-drawer-position-${this.position}`]: true,
}; };
/* eslint-enable @typescript-eslint/naming-convention */ /* eslint-enable @typescript-eslint/naming-convention */
} }
@ -80,7 +82,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
@HostBinding('style') get styleList(): any @HostBinding('style') get styleList(): any
{ {
return { return {
'visibility': this.opened ? 'visible' : 'hidden' 'visibility': this.opened ? 'visible' : 'hidden',
}; };
} }
@ -173,7 +175,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
// Enable the animations after a delay // Enable the animations after a delay
// The delay must be bigger than the current transition-duration // The delay must be bigger than the current transition-duration
// to make sure nothing will be animated while the mode is changing // to make sure nothing will be animated while the mode is changing
setTimeout(() => { setTimeout(() =>
{
this._enableAnimations(); this._enableAnimations();
}, 500); }, 500);
} }
@ -345,7 +348,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
// Create enter animation and attach it to the player // Create enter animation and attach it to the player
this._player = this._animationBuilder.build([ this._player = this._animationBuilder.build([
style({opacity: 0}), style({opacity: 0}),
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})) animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
]).create(this._overlay); ]).create(this._overlay);
// Play the animation // Play the animation
@ -369,14 +372,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
// Create the leave animation and attach it to the player // Create the leave animation and attach it to the player
this._player = this._animationBuilder.build([ this._player = this._animationBuilder.build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})) animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
]).create(this._overlay); ]).create(this._overlay);
// Play the animation // Play the animation
this._player.play(); this._player.play();
// Once the animation is done... // Once the animation is done...
this._player.onDone(() => { this._player.onDone(() =>
{
// If the overlay still exists... // If the overlay still exists...
if ( this._overlay ) if ( this._overlay )

18
src/@fuse/components/drawer/drawer.module.ts
View File

@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
@NgModule({
declarations: [
FuseDrawerComponent
],
imports : [
CommonModule
],
exports : [
FuseDrawerComponent
]
})
export class FuseDrawerModule
{
}

2
src/@fuse/components/drawer/drawer.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component'; import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class FuseDrawerService export class FuseDrawerService
{ {

1
src/@fuse/components/drawer/public-api.ts
View File

@ -1,4 +1,3 @@
export * from '@fuse/components/drawer/drawer.component'; export * from '@fuse/components/drawer/drawer.component';
export * from '@fuse/components/drawer/drawer.module';
export * from '@fuse/components/drawer/drawer.service'; export * from '@fuse/components/drawer/drawer.service';
export * from '@fuse/components/drawer/drawer.types'; export * from '@fuse/components/drawer/drawer.types';

9
src/@fuse/components/fullscreen/fullscreen.component.ts
View File

@ -1,5 +1,8 @@
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core'; import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
import { DOCUMENT } from '@angular/common'; import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types'; import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
@Component({ @Component({
@ -7,7 +10,9 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
templateUrl : './fullscreen.component.html', templateUrl : './fullscreen.component.html',
encapsulation : ViewEncapsulation.None, encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseFullscreen' exportAs : 'fuseFullscreen',
standalone : true,
imports : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
}) })
export class FuseFullscreenComponent implements OnInit export class FuseFullscreenComponent implements OnInit
{ {

24
src/@fuse/components/fullscreen/fullscreen.module.ts
View File

@ -1,24 +0,0 @@
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [
FuseFullscreenComponent
],
imports : [
MatButtonModule,
MatIconModule,
MatTooltipModule,
CommonModule
],
exports : [
FuseFullscreenComponent
]
})
export class FuseFullscreenModule
{
}

1
src/@fuse/components/fullscreen/public-api.ts
View File

@ -1,3 +1,2 @@
export * from '@fuse/components/fullscreen/fullscreen.component'; export * from '@fuse/components/fullscreen/fullscreen.component';
export * from '@fuse/components/fullscreen/fullscreen.module';
export * from '@fuse/components/fullscreen/fullscreen.types'; export * from '@fuse/components/fullscreen/fullscreen.types';

9
src/@fuse/components/highlight/highlight.component.ts
View File

@ -1,3 +1,4 @@
import { NgClass } from '@angular/common';
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EmbeddedViewRef, Input, OnChanges, Renderer2, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EmbeddedViewRef, Input, OnChanges, Renderer2, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { FuseHighlightService } from '@fuse/components/highlight/highlight.service'; import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
@ -8,7 +9,9 @@ import { FuseHighlightService } from '@fuse/components/highlight/highlight.servi
styleUrls : ['./highlight.component.scss'], styleUrls : ['./highlight.component.scss'],
encapsulation : ViewEncapsulation.None, encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseHighlight' exportAs : 'fuseHighlight',
standalone : true,
imports : [NgClass],
}) })
export class FuseHighlightComponent implements OnChanges, AfterViewInit export class FuseHighlightComponent implements OnChanges, AfterViewInit
{ {
@ -28,7 +31,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
private _elementRef: ElementRef, private _elementRef: ElementRef,
private _renderer2: Renderer2, private _renderer2: Renderer2,
private _fuseHighlightService: FuseHighlightService, private _fuseHighlightService: FuseHighlightService,
private _viewContainerRef: ViewContainerRef private _viewContainerRef: ViewContainerRef,
) )
{ {
} }
@ -123,7 +126,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
// Render and insert the template // Render and insert the template
this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, { this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
highlightedCode: this.highlightedCode, highlightedCode: this.highlightedCode,
lang : this.lang lang : this.lang,
}); });
// Detect the changes // Detect the changes

18
src/@fuse/components/highlight/highlight.module.ts
View File

@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
@NgModule({
declarations: [
FuseHighlightComponent
],
imports : [
CommonModule
],
exports : [
FuseHighlightComponent
]
})
export class FuseHighlightModule
{
}

5
src/@fuse/components/highlight/highlight.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import hljs from 'highlight.js'; import hljs from 'highlight.js';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class FuseHighlightService export class FuseHighlightService
{ {
@ -61,7 +61,8 @@ export class FuseHighlightService
// Iterate through the lines // Iterate through the lines
lines.filter(line => line.length) lines.filter(line => line.length)
.forEach((line, index) => { .forEach((line, index) =>
{
// Always get the indentation of the first line so we can // Always get the indentation of the first line so we can
// have something to compare with // have something to compare with

1
src/@fuse/components/highlight/public-api.ts
View File

@ -1,3 +1,2 @@
export * from '@fuse/components/highlight/highlight.component'; export * from '@fuse/components/highlight/highlight.component';
export * from '@fuse/components/highlight/highlight.module';
export * from '@fuse/components/highlight/highlight.service'; export * from '@fuse/components/highlight/highlight.service';

19
src/@fuse/components/loading-bar/loading-bar.component.ts
View File

@ -1,14 +1,18 @@
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Subject, takeUntil } from 'rxjs'; import { NgIf } from '@angular/common';
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { FuseLoadingService } from '@fuse/services/loading'; import { FuseLoadingService } from '@fuse/services/loading';
import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-loading-bar', selector : 'fuse-loading-bar',
templateUrl : './loading-bar.component.html', templateUrl : './loading-bar.component.html',
styleUrls : ['./loading-bar.component.scss'], styleUrls : ['./loading-bar.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
exportAs : 'fuseLoadingBar' exportAs : 'fuseLoadingBar',
standalone : true,
imports : [NgIf, MatProgressBarModule],
}) })
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
{ {
@ -52,19 +56,22 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
// Subscribe to the service // Subscribe to the service
this._fuseLoadingService.mode$ this._fuseLoadingService.mode$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => { .subscribe((value) =>
{
this.mode = value; this.mode = value;
}); });
this._fuseLoadingService.progress$ this._fuseLoadingService.progress$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => { .subscribe((value) =>
{
this.progress = value; this.progress = value;
}); });
this._fuseLoadingService.show$ this._fuseLoadingService.show$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => { .subscribe((value) =>
{
this.show = value; this.show = value;
}); });

20
src/@fuse/components/loading-bar/loading-bar.module.ts
View File

@ -1,20 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar/loading-bar.component';
@NgModule({
declarations: [
FuseLoadingBarComponent
],
imports : [
CommonModule,
MatProgressBarModule
],
exports : [
FuseLoadingBarComponent
]
})
export class FuseLoadingBarModule
{
}

1
src/@fuse/components/loading-bar/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/components/loading-bar/loading-bar.component'; export * from '@fuse/components/loading-bar/loading-bar.component';
export * from '@fuse/components/loading-bar/loading-bar.module';

5
src/@fuse/components/masonry/masonry.component.ts
View File

@ -1,3 +1,4 @@
import { NgTemplateOutlet } from '@angular/common';
import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core'; import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
@ -7,7 +8,9 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
templateUrl : './masonry.component.html', templateUrl : './masonry.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
animations : fuseAnimations, animations : fuseAnimations,
exportAs : 'fuseMasonry' exportAs : 'fuseMasonry',
standalone : true,
imports : [NgTemplateOutlet],
}) })
export class FuseMasonryComponent implements OnChanges, AfterViewInit export class FuseMasonryComponent implements OnChanges, AfterViewInit
{ {

18
src/@fuse/components/masonry/masonry.module.ts
View File

@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FuseMasonryComponent } from '@fuse/components/masonry/masonry.component';
@NgModule({
declarations: [
FuseMasonryComponent
],
imports : [
CommonModule
],
exports : [
FuseMasonryComponent
]
})
export class FuseMasonryModule
{
}

1
src/@fuse/components/masonry/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/components/masonry/masonry.component'; export * from '@fuse/components/masonry/masonry.component';
export * from '@fuse/components/masonry/masonry.module';

19
src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
View File

@ -1,15 +1,21 @@
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { IsActiveMatchOptions } from '@angular/router'; import { MatIconModule } from '@angular/material/icon';
import { Subject, takeUntil } from 'rxjs'; import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-horizontal-navigation-basic-item', selector : 'fuse-horizontal-navigation-basic-item',
templateUrl : './basic.component.html', templateUrl : './basic.component.html',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule],
}) })
export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
{ {
@ -26,7 +32,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService private _fuseUtilsService: FuseUtilsService,
) )
{ {
// Set the equivalent of {exact: false} as default for active match options. // Set the equivalent of {exact: false} as default for active match options.
@ -61,8 +67,9 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe( this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();

22
src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
View File

@ -1,15 +1,22 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { MatMenu } from '@angular/material/menu'; import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import { Subject, takeUntil } from 'rxjs'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatMenu, MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-horizontal-navigation-branch-item', selector : 'fuse-horizontal-navigation-branch-item',
templateUrl : './branch.component.html', templateUrl : './branch.component.html',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgIf, NgClass, MatMenuModule, NgTemplateOutlet, NgFor, FuseHorizontalNavigationBasicItemComponent, forwardRef(() => FuseHorizontalNavigationBranchItemComponent), FuseHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule],
}) })
export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
{ {
@ -30,7 +37,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
*/ */
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService private _fuseNavigationService: FuseNavigationService,
) )
{ {
} }
@ -49,8 +56,9 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe( this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();

14
src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts
View File

@ -1,13 +1,16 @@
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-horizontal-navigation-divider-item', selector : 'fuse-horizontal-navigation-divider-item',
templateUrl : './divider.component.html', templateUrl : './divider.component.html',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass],
}) })
export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
{ {
@ -22,7 +25,7 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
*/ */
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService private _fuseNavigationService: FuseNavigationService,
) )
{ {
} }
@ -41,8 +44,9 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe( this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();

14
src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts
View File

@ -1,13 +1,16 @@
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component'; import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-horizontal-navigation-spacer-item', selector : 'fuse-horizontal-navigation-spacer-item',
templateUrl : './spacer.component.html', templateUrl : './spacer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass],
}) })
export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
{ {
@ -22,7 +25,7 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
*/ */
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService private _fuseNavigationService: FuseNavigationService,
) )
{ {
} }
@ -41,8 +44,9 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe( this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();

14
src/@fuse/components/navigation/horizontal/horizontal.component.ts
View File

@ -1,9 +1,13 @@
import { NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { ReplaySubject, Subject } from 'rxjs';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { ReplaySubject, Subject } from 'rxjs';
import { FuseHorizontalNavigationBasicItemComponent } from './components/basic/basic.component';
import { FuseHorizontalNavigationBranchItemComponent } from './components/branch/branch.component';
import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component';
@Component({ @Component({
selector : 'fuse-horizontal-navigation', selector : 'fuse-horizontal-navigation',
@ -12,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
animations : fuseAnimations, animations : fuseAnimations,
encapsulation : ViewEncapsulation.None, encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseHorizontalNavigation' exportAs : 'fuseHorizontalNavigation',
standalone : true,
imports : [NgFor, NgIf, FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationSpacerItemComponent],
}) })
export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
{ {
@ -28,7 +34,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService private _fuseUtilsService: FuseUtilsService,
) )
{ {
} }

55
src/@fuse/components/navigation/navigation.module.ts
View File

@ -1,55 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseScrollbarModule } from '@fuse/directives/scrollbar/public-api';
import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
import { FuseHorizontalNavigationBranchItemComponent } from '@fuse/components/navigation/horizontal/components/branch/branch.component';
import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
import { FuseHorizontalNavigationSpacerItemComponent } from '@fuse/components/navigation/horizontal/components/spacer/spacer.component';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
@NgModule({
declarations: [
FuseHorizontalNavigationBasicItemComponent,
FuseHorizontalNavigationBranchItemComponent,
FuseHorizontalNavigationDividerItemComponent,
FuseHorizontalNavigationSpacerItemComponent,
FuseHorizontalNavigationComponent,
FuseVerticalNavigationAsideItemComponent,
FuseVerticalNavigationBasicItemComponent,
FuseVerticalNavigationCollapsableItemComponent,
FuseVerticalNavigationDividerItemComponent,
FuseVerticalNavigationGroupItemComponent,
FuseVerticalNavigationSpacerItemComponent,
FuseVerticalNavigationComponent
],
imports : [
CommonModule,
RouterModule,
MatButtonModule,
MatDividerModule,
MatIconModule,
MatMenuModule,
MatTooltipModule,
FuseScrollbarModule
],
exports : [
FuseHorizontalNavigationComponent,
FuseVerticalNavigationComponent
]
})
export class FuseNavigationModule
{
}

4
src/@fuse/components/navigation/navigation.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class FuseNavigationService export class FuseNavigationService
{ {
@ -160,7 +160,7 @@ export class FuseNavigationService
getItemParent( getItemParent(
id: string, id: string,
navigation: FuseNavigationItem[], navigation: FuseNavigationItem[],
parent: FuseNavigationItem[] | FuseNavigationItem parent: FuseNavigationItem[] | FuseNavigationItem,
): FuseNavigationItem[] | FuseNavigationItem | null ): FuseNavigationItem[] | FuseNavigationItem | null
{ {
for ( const item of navigation ) for ( const item of navigation )

1
src/@fuse/components/navigation/public-api.ts
View File

@ -1,5 +1,4 @@
export * from '@fuse/components/navigation/horizontal/horizontal.component'; export * from '@fuse/components/navigation/horizontal/horizontal.component';
export * from '@fuse/components/navigation/vertical/vertical.component'; export * from '@fuse/components/navigation/vertical/vertical.component';
export * from '@fuse/components/navigation/navigation.module';
export * from '@fuse/components/navigation/navigation.service'; export * from '@fuse/components/navigation/navigation.service';
export * from '@fuse/components/navigation/navigation.types'; export * from '@fuse/components/navigation/navigation.types';

32
src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
View File

@ -1,15 +1,25 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { filter, Subject, takeUntil } from 'rxjs'; import { NgClass, NgFor, NgIf } from '@angular/common';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { NavigationEnd, Router } from '@angular/router';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { filter, Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-aside-item', selector : 'fuse-vertical-navigation-aside-item',
templateUrl : './aside.component.html', templateUrl : './aside.component.html',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
}) })
export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy
{ {
@ -34,7 +44,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _router: Router, private _router: Router,
private _fuseNavigationService: FuseNavigationService private _fuseNavigationService: FuseNavigationService,
) )
{ {
} }
@ -70,9 +80,10 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
this._router.events this._router.events
.pipe( .pipe(
filter((event): event is NavigationEnd => event instanceof NavigationEnd), filter((event): event is NavigationEnd => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
) )
.subscribe((event: NavigationEnd) => { .subscribe((event: NavigationEnd) =>
{
// Mark if active // Mark if active
this._markIfActive(event.urlAfterRedirects); this._markIfActive(event.urlAfterRedirects);
@ -83,8 +94,9 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();

20
src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
View File

@ -1,15 +1,20 @@
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { IsActiveMatchOptions } from '@angular/router'; import { MatIconModule } from '@angular/material/icon';
import { Subject, takeUntil } from 'rxjs'; import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-basic-item', selector : 'fuse-vertical-navigation-basic-item',
templateUrl : './basic.component.html', templateUrl : './basic.component.html',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule],
}) })
export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy
{ {
@ -26,7 +31,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService private _fuseUtilsService: FuseUtilsService,
) )
{ {
// Set the equivalent of {exact: false} as default for active match options. // Set the equivalent of {exact: false} as default for active match options.
@ -61,8 +66,9 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();

39
src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
View File

@ -1,17 +1,26 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { filter, Subject, takeUntil } from 'rxjs'; import { NgClass, NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { NavigationEnd, Router } from '@angular/router';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { filter, Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-collapsable-item', selector : 'fuse-vertical-navigation-collapsable-item',
templateUrl : './collapsable.component.html', templateUrl : './collapsable.component.html',
animations : fuseAnimations, animations : fuseAnimations,
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, forwardRef(() => FuseVerticalNavigationCollapsableItemComponent), FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
}) })
export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy
{ {
@ -34,7 +43,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _router: Router, private _router: Router,
private _fuseNavigationService: FuseNavigationService private _fuseNavigationService: FuseNavigationService,
) )
{ {
} }
@ -51,7 +60,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
return { return {
'fuse-vertical-navigation-item-collapsed': this.isCollapsed, 'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
'fuse-vertical-navigation-item-expanded' : this.isExpanded 'fuse-vertical-navigation-item-expanded' : this.isExpanded,
}; };
/* eslint-enable @typescript-eslint/naming-convention */ /* eslint-enable @typescript-eslint/naming-convention */
} }
@ -86,7 +95,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
// Listen for the onCollapsableItemCollapsed from the service // Listen for the onCollapsableItemCollapsed from the service
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((collapsedItem) => { .subscribe((collapsedItem) =>
{
// Check if the collapsed item is null // Check if the collapsed item is null
if ( collapsedItem === null ) if ( collapsedItem === null )
@ -106,7 +116,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
{ {
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((expandedItem) => { .subscribe((expandedItem) =>
{
// Check if the expanded item is null // Check if the expanded item is null
if ( expandedItem === null ) if ( expandedItem === null )
@ -141,9 +152,10 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
this._router.events this._router.events
.pipe( .pipe(
filter((event): event is NavigationEnd => event instanceof NavigationEnd), filter((event): event is NavigationEnd => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
) )
.subscribe((event: NavigationEnd) => { .subscribe((event: NavigationEnd) =>
{
// If the item has a children that has a matching url with the current url, expand... // If the item has a children that has a matching url with the current url, expand...
if ( this._hasActiveChild(this.item, event.urlAfterRedirects) ) if ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
@ -163,8 +175,9 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();

16
src/@fuse/components/navigation/vertical/components/divider/divider.component.ts
View File

@ -1,13 +1,16 @@
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-divider-item', selector : 'fuse-vertical-navigation-divider-item',
templateUrl : './divider.component.html', templateUrl : './divider.component.html',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass],
}) })
export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
{ {
@ -22,7 +25,7 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
*/ */
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService private _fuseNavigationService: FuseNavigationService,
) )
{ {
} }
@ -41,8 +44,9 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();

23
src/@fuse/components/navigation/vertical/components/group/group.component.ts
View File

@ -1,14 +1,22 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { Subject, takeUntil } from 'rxjs'; import { NgClass, NgFor, NgIf } from '@angular/common';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-group-item', selector : 'fuse-vertical-navigation-group-item',
templateUrl : './group.component.html', templateUrl : './group.component.html',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, forwardRef(() => FuseVerticalNavigationGroupItemComponent), FuseVerticalNavigationSpacerItemComponent],
}) })
export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy
{ {
@ -28,7 +36,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
*/ */
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService private _fuseNavigationService: FuseNavigationService,
) )
{ {
} }
@ -47,8 +55,9 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();

16
src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts
View File

@ -1,13 +1,16 @@
import { NgClass } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types'; import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation-spacer-item', selector : 'fuse-vertical-navigation-spacer-item',
templateUrl : './spacer.component.html', templateUrl : './spacer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass],
}) })
export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy
{ {
@ -22,7 +25,7 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
*/ */
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService private _fuseNavigationService: FuseNavigationService,
) )
{ {
} }
@ -41,8 +44,9 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
// Subscribe to onRefreshed on the navigation component // Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe( this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();

80
src/@fuse/components/navigation/vertical/vertical.component.ts
View File

@ -1,15 +1,21 @@
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { DOCUMENT } from '@angular/common'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NavigationEnd, Router } from '@angular/router';
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay'; import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs'; import { DOCUMENT, NgFor, NgIf } from '@angular/common';
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive'; import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
import { FuseUtilsService } from '@fuse/services/utils/utils.service'; import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'fuse-vertical-navigation', selector : 'fuse-vertical-navigation',
@ -18,7 +24,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
animations : fuseAnimations, animations : fuseAnimations,
encapsulation : ViewEncapsulation.None, encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseVerticalNavigation' exportAs : 'fuseVerticalNavigation',
standalone : true,
imports : [FuseScrollbarDirective, NgFor, NgIf, FuseVerticalNavigationAsideItemComponent, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
}) })
export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy
{ {
@ -72,13 +80,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
private _router: Router, private _router: Router,
private _scrollStrategyOptions: ScrollStrategyOptions, private _scrollStrategyOptions: ScrollStrategyOptions,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService private _fuseUtilsService: FuseUtilsService,
) )
{ {
this._handleAsideOverlayClick = (): void => { this._handleAsideOverlayClick = (): void =>
{
this.closeAside(); this.closeAside();
}; };
this._handleOverlayClick = (): void => { this._handleOverlayClick = (): void =>
{
this.close(); this.close();
}; };
} }
@ -102,7 +112,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
'fuse-vertical-navigation-mode-side' : this.mode === 'side', 'fuse-vertical-navigation-mode-side' : this.mode === 'side',
'fuse-vertical-navigation-opened' : this.opened, 'fuse-vertical-navigation-opened' : this.opened,
'fuse-vertical-navigation-position-left' : this.position === 'left', 'fuse-vertical-navigation-position-left' : this.position === 'left',
'fuse-vertical-navigation-position-right' : this.position === 'right' 'fuse-vertical-navigation-position-right' : this.position === 'right',
}; };
/* eslint-enable @typescript-eslint/naming-convention */ /* eslint-enable @typescript-eslint/naming-convention */
} }
@ -113,7 +123,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
@HostBinding('style') get styleList(): any @HostBinding('style') get styleList(): any
{ {
return { return {
'visibility': this.opened ? 'visible' : 'hidden' 'visibility': this.opened ? 'visible' : 'hidden',
}; };
} }
@ -142,16 +152,18 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._fuseScrollbarDirectivesSubscription = this._fuseScrollbarDirectivesSubscription =
merge( merge(
this.onCollapsableItemCollapsed, this.onCollapsableItemCollapsed,
this.onCollapsableItemExpanded this.onCollapsableItemExpanded,
) )
.pipe( .pipe(
takeUntil(this._unsubscribeAll), takeUntil(this._unsubscribeAll),
delay(250) delay(250),
) )
.subscribe(() => { .subscribe(() =>
{
// Loop through the scrollbars and update them // Loop through the scrollbars and update them
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => { fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
{
fuseScrollbarDirective.update(); fuseScrollbarDirective.update();
}); });
}); });
@ -253,7 +265,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Enable the animations after a delay // Enable the animations after a delay
// The delay must be bigger than the current transition-duration // The delay must be bigger than the current transition-duration
// to make sure nothing will be animated while the mode changing // to make sure nothing will be animated while the mode changing
setTimeout(() => { setTimeout(() =>
{
this._enableAnimations(); this._enableAnimations();
}, 500); }, 500);
} }
@ -308,9 +321,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._router.events this._router.events
.pipe( .pipe(
filter(event => event instanceof NavigationEnd), filter(event => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
) )
.subscribe(() => { .subscribe(() =>
{
// If the mode is 'over' and the navigation is opened... // If the mode is 'over' and the navigation is opened...
if ( this.mode === 'over' && this.opened ) if ( this.mode === 'over' && this.opened )
@ -339,8 +353,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position. // adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
// This fixes the problem by reading the 'top' value from the html element and adding it as a // This fixes the problem by reading the 'top' value from the html element and adding it as a
// 'marginTop' to the navigation itself. // 'marginTop' to the navigation itself.
this._mutationObserver = new MutationObserver((mutations) => { this._mutationObserver = new MutationObserver((mutations) =>
mutations.forEach((mutation) => { {
mutations.forEach((mutation) =>
{
const mutationTarget = mutation.target as HTMLElement; const mutationTarget = mutation.target as HTMLElement;
if ( mutation.attributeName === 'class' ) if ( mutation.attributeName === 'class' )
{ {
@ -358,10 +374,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
}); });
this._mutationObserver.observe(this._document.documentElement, { this._mutationObserver.observe(this._document.documentElement, {
attributes : true, attributes : true,
attributeFilter: ['class'] attributeFilter: ['class'],
}); });
setTimeout(() => { setTimeout(() =>
{
// Return if 'navigation content' element does not exist // Return if 'navigation content' element does not exist
if ( !this._navigationContentEl ) if ( !this._navigationContentEl )
@ -386,7 +403,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
else else
{ {
// Go through all the scrollbar directives // Go through all the scrollbar directives
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => { this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
{
// Skip if not enabled // Skip if not enabled
if ( !fuseScrollbarDirective.isEnabled() ) if ( !fuseScrollbarDirective.isEnabled() )
@ -624,7 +642,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Create the enter animation and attach it to the player // Create the enter animation and attach it to the player
this._player = this._animationBuilder.build([ this._player = this._animationBuilder.build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})) animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
]).create(this._overlay); ]).create(this._overlay);
// Play the animation // Play the animation
@ -648,14 +666,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Create the leave animation and attach it to the player // Create the leave animation and attach it to the player
this._player = this._animationBuilder.build([ this._player = this._animationBuilder.build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})) animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
]).create(this._overlay); ]).create(this._overlay);
// Play the animation // Play the animation
this._player.play(); this._player.play();
// Once the animation is done... // Once the animation is done...
this._player.onDone(() => { this._player.onDone(() =>
{
// If the overlay still exists... // If the overlay still exists...
if ( this._overlay ) if ( this._overlay )
@ -699,7 +718,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._player = this._player =
this._animationBuilder this._animationBuilder
.build([ .build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})) animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
]).create(this._asideOverlay); ]).create(this._asideOverlay);
// Play the animation // Play the animation
@ -725,14 +744,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._player = this._player =
this._animationBuilder this._animationBuilder
.build([ .build([
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})) animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
]).create(this._asideOverlay); ]).create(this._asideOverlay);
// Play the animation // Play the animation
this._player.play(); this._player.play();
// Once the animation is done... // Once the animation is done...
this._player.onDone(() => { this._player.onDone(() =>
{
// If the aside overlay still exists... // If the aside overlay still exists...
if ( this._asideOverlay ) if ( this._asideOverlay )

1
src/@fuse/directives/scroll-reset/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/directives/scroll-reset/scroll-reset.directive'; export * from '@fuse/directives/scroll-reset/scroll-reset.directive';
export * from '@fuse/directives/scroll-reset/scroll-reset.module';

10
src/@fuse/directives/scroll-reset/scroll-reset.directive.ts
View File

@ -4,7 +4,8 @@ import { filter, Subject, takeUntil } from 'rxjs';
@Directive({ @Directive({
selector : '[fuseScrollReset]', selector : '[fuseScrollReset]',
exportAs: 'fuseScrollReset' exportAs : 'fuseScrollReset',
standalone: true,
}) })
export class FuseScrollResetDirective implements OnInit, OnDestroy export class FuseScrollResetDirective implements OnInit, OnDestroy
{ {
@ -15,7 +16,7 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
*/ */
constructor( constructor(
private _elementRef: ElementRef, private _elementRef: ElementRef,
private _router: Router private _router: Router,
) )
{ {
} }
@ -32,8 +33,9 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
// Subscribe to NavigationEnd event // Subscribe to NavigationEnd event
this._router.events.pipe( this._router.events.pipe(
filter(event => event instanceof NavigationEnd), filter(event => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll) takeUntil(this._unsubscribeAll),
).subscribe(() => { ).subscribe(() =>
{
// Reset the element's scroll position to the top // Reset the element's scroll position to the top
this._elementRef.nativeElement.scrollTop = 0; this._elementRef.nativeElement.scrollTop = 0;

14
src/@fuse/directives/scroll-reset/scroll-reset.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import { FuseScrollResetDirective } from '@fuse/directives/scroll-reset/scroll-reset.directive';
@NgModule({
declarations: [
FuseScrollResetDirective
],
exports : [
FuseScrollResetDirective
]
})
export class FuseScrollResetModule
{
}

1
src/@fuse/directives/scrollbar/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/directives/scrollbar/scrollbar.directive'; export * from '@fuse/directives/scrollbar/scrollbar.directive';
export * from '@fuse/directives/scrollbar/scrollbar.module';

33
src/@fuse/directives/scrollbar/scrollbar.directive.ts
View File

@ -1,18 +1,19 @@
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { Router } from '@angular/router';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform'; import { Platform } from '@angular/cdk/platform';
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs'; import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import PerfectScrollbar from 'perfect-scrollbar'; import { Router } from '@angular/router';
import { merge } from 'lodash-es';
import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types'; import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
import { merge } from 'lodash-es';
import PerfectScrollbar from 'perfect-scrollbar';
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
/** /**
* Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar * Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
*/ */
@Directive({ @Directive({
selector : '[fuseScrollbar]', selector : '[fuseScrollbar]',
exportAs: 'fuseScrollbar' exportAs : 'fuseScrollbar',
standalone: true,
}) })
export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
{ {
@ -34,7 +35,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
constructor( constructor(
private _elementRef: ElementRef, private _elementRef: ElementRef,
private _platform: Platform, private _platform: Platform,
private _router: Router private _router: Router,
) )
{ {
} }
@ -101,11 +102,13 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
} }
// Destroy and re-init the PerfectScrollbar to update its options // Destroy and re-init the PerfectScrollbar to update its options
setTimeout(() => { setTimeout(() =>
{
this._destroy(); this._destroy();
}); });
setTimeout(() => { setTimeout(() =>
{
this._init(); this._init();
}); });
} }
@ -120,9 +123,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
fromEvent(window, 'resize') fromEvent(window, 'resize')
.pipe( .pipe(
takeUntil(this._unsubscribeAll), takeUntil(this._unsubscribeAll),
debounceTime(150) debounceTime(150),
) )
.subscribe(() => { .subscribe(() =>
{
// Update the PerfectScrollbar // Update the PerfectScrollbar
this.update(); this.update();
@ -203,14 +207,14 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
{ {
scrollbarPosition = new ScrollbarPosition( scrollbarPosition = new ScrollbarPosition(
this._ps.reach.x || 0, this._ps.reach.x || 0,
this._ps.reach.y || 0 this._ps.reach.y || 0,
); );
} }
else else
{ {
scrollbarPosition = new ScrollbarPosition( scrollbarPosition = new ScrollbarPosition(
this._elementRef.nativeElement.scrollLeft, this._elementRef.nativeElement.scrollLeft,
this._elementRef.nativeElement.scrollTop this._elementRef.nativeElement.scrollTop,
); );
} }
@ -388,7 +392,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
const cosParameter = (oldValue - value) / 2; const cosParameter = (oldValue - value) / 2;
const step = (newTimestamp: number): void => { const step = (newTimestamp: number): void =>
{
scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp)); scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount)); newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));

14
src/@fuse/directives/scrollbar/scrollbar.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
@NgModule({
declarations: [
FuseScrollbarDirective
],
exports : [
FuseScrollbarDirective
]
})
export class FuseScrollbarModule
{
}

14
src/@fuse/fuse.module.ts
View File

@ -15,7 +15,7 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
FuseMediaWatcherModule, FuseMediaWatcherModule,
FusePlatformModule, FusePlatformModule,
FuseSplashScreenModule, FuseSplashScreenModule,
FuseUtilsModule FuseUtilsModule,
], ],
providers: [ providers: [
{ {
@ -24,17 +24,17 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
useValue: { useValue: {
doctype: true, doctype: true,
theme : false, theme : false,
version: true version: true,
} },
}, },
{ {
// Use the 'fill' appearance on Angular Material form fields by default // Use the 'fill' appearance on Angular Material form fields by default
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS, provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: { useValue: {
appearance: 'fill' appearance: 'fill',
} },
} },
] ],
}) })
export class FuseModule export class FuseModule
{ {

21
src/@fuse/lib/mock-api/mock-api.interceptor.ts
View File

@ -1,11 +1,11 @@
import { Inject, Injectable } from '@angular/core';
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http'; import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { delay, Observable, of, switchMap, throwError } from 'rxjs'; import { Inject, Injectable } from '@angular/core';
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants'; import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service'; import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
import { delay, Observable, of, switchMap, throwError } from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class FuseMockApiInterceptor implements HttpInterceptor export class FuseMockApiInterceptor implements HttpInterceptor
{ {
@ -14,7 +14,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
*/ */
constructor( constructor(
@Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number, @Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number,
private _fuseMockApiService: FuseMockApiService private _fuseMockApiService: FuseMockApiService,
) )
{ {
} }
@ -30,7 +30,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
// Try to get the request handler // Try to get the request handler
const { const {
handler, handler,
urlParams urlParams,
} = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url); } = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
// Pass through if the request handler does not exist // Pass through if the request handler does not exist
@ -48,7 +48,8 @@ export class FuseMockApiInterceptor implements HttpInterceptor
// Subscribe to the response function observable // Subscribe to the response function observable
return handler.response.pipe( return handler.response.pipe(
delay(handler.delay ?? this._defaultDelay ?? 0), delay(handler.delay ?? this._defaultDelay ?? 0),
switchMap((response) => { switchMap((response) =>
{
// If there is no response data, // If there is no response data,
// throw an error response // throw an error response
@ -57,7 +58,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
response = new HttpErrorResponse({ response = new HttpErrorResponse({
error : 'NOT FOUND', error : 'NOT FOUND',
status : 404, status : 404,
statusText: 'NOT FOUND' statusText: 'NOT FOUND',
}); });
return throwError(response); return throwError(response);
@ -66,7 +67,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
// Parse the response data // Parse the response data
const data = { const data = {
status: response[0], status: response[0],
body : response[1] body : response[1],
}; };
// If the status code is in between 200 and 300, // If the status code is in between 200 and 300,
@ -76,7 +77,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
response = new HttpResponse({ response = new HttpResponse({
body : data.body, body : data.body,
status : data.status, status : data.status,
statusText: 'OK' statusText: 'OK',
}); });
return of(response); return of(response);
@ -87,7 +88,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
response = new HttpErrorResponse({ response = new HttpErrorResponse({
error : data.body.error, error : data.body.error,
status : data.status, status : data.status,
statusText: 'ERROR' statusText: 'ERROR',
}); });
return throwError(response); return throwError(response);

16
src/@fuse/lib/mock-api/mock-api.module.ts
View File

@ -1,5 +1,5 @@
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants'; import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor'; import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor';
@ -8,9 +8,9 @@ import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor'
{ {
provide : HTTP_INTERCEPTORS, provide : HTTP_INTERCEPTORS,
useClass: FuseMockApiInterceptor, useClass: FuseMockApiInterceptor,
multi : true multi : true,
} },
] ],
}) })
export class FuseMockApiModule export class FuseMockApiModule
{ {
@ -30,13 +30,13 @@ export class FuseMockApiModule
provide : APP_INITIALIZER, provide : APP_INITIALIZER,
deps : [...mockApiServices], deps : [...mockApiServices],
useFactory: () => (): any => null, useFactory: () => (): any => null,
multi : true multi : true,
}, },
{ {
provide : FUSE_MOCK_API_DEFAULT_DELAY, provide : FUSE_MOCK_API_DEFAULT_DELAY,
useValue: config?.delay ?? 0 useValue: config?.delay ?? 0,
} },
] ],
}; };
} }
} }

6
src/@fuse/lib/mock-api/mock-api.request-handler.ts
View File

@ -1,6 +1,6 @@
import { HttpRequest } from '@angular/common/http'; import { HttpRequest } from '@angular/common/http';
import { Observable, of, take, throwError } from 'rxjs';
import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types'; import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
import { Observable, of, take, throwError } from 'rxjs';
export class FuseMockApiHandler export class FuseMockApiHandler
{ {
@ -17,7 +17,7 @@ export class FuseMockApiHandler
*/ */
constructor( constructor(
public url: string, public url: string,
public delay?: number public delay?: number,
) )
{ {
} }
@ -55,7 +55,7 @@ export class FuseMockApiHandler
// Execute the reply callback // Execute the reply callback
const replyResult = this._reply({ const replyResult = this._reply({
request : this.request, request : this.request,
urlParams: this.urlParams urlParams: this.urlParams,
}); });
// If the result of the reply callback is an observable... // If the result of the reply callback is an observable...

13
src/@fuse/lib/mock-api/mock-api.service.ts
View File

@ -1,10 +1,10 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { compact, fromPairs } from 'lodash-es';
import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler'; import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler';
import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types'; import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
import { compact, fromPairs } from 'lodash-es';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class FuseMockApiService export class FuseMockApiService
{ {
@ -16,7 +16,7 @@ export class FuseMockApiService
'put' : new Map<string, FuseMockApiHandler>(), 'put' : new Map<string, FuseMockApiHandler>(),
'head' : new Map<string, FuseMockApiHandler>(), 'head' : new Map<string, FuseMockApiHandler>(),
'jsonp' : new Map<string, FuseMockApiHandler>(), 'jsonp' : new Map<string, FuseMockApiHandler>(),
'options': new Map<string, FuseMockApiHandler>() 'options': new Map<string, FuseMockApiHandler>(),
}; };
/** /**
@ -42,7 +42,7 @@ export class FuseMockApiService
// Prepare the return object // Prepare the return object
const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = { const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
handler : undefined, handler : undefined,
urlParams: {} urlParams: {},
}; };
// Split the url // Split the url
@ -52,7 +52,8 @@ export class FuseMockApiService
const handlers = this._handlers[method.toLowerCase()]; const handlers = this._handlers[method.toLowerCase()];
// Iterate through the handlers // Iterate through the handlers
handlers.forEach((handler, handlerUrl) => { handlers.forEach((handler, handlerUrl) =>
{
// Skip if there is already a matching handler // Skip if there is already a matching handler
if ( matchingHandler.handler ) if ( matchingHandler.handler )
@ -80,7 +81,7 @@ export class FuseMockApiService
// Extract and assign the parameters // Extract and assign the parameters
matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) => matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) =>
handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined,
))); )));
} }
}); });

3
src/@fuse/lib/mock-api/mock-api.utils.ts
View File

@ -26,7 +26,8 @@ export class FuseMockApiUtils
d += performance.now(); d += performance.now();
} }
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) =>
{
const r = (d + Math.random() * 16) % 16 | 0; const r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16); d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);

14
src/@fuse/pipes/find-by-key/find-by-key.module.ts
View File

@ -1,14 +0,0 @@
import { NgModule } from '@angular/core';
import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe';
@NgModule({
declarations: [
FuseFindByKeyPipe
],
exports : [
FuseFindByKeyPipe
]
})
export class FuseFindByKeyPipeModule
{
}

3
src/@fuse/pipes/find-by-key/find-by-key.pipe.ts
View File

@ -5,7 +5,8 @@ import { Pipe, PipeTransform } from '@angular/core';
*/ */
@Pipe({ @Pipe({
name : 'fuseFindByKey', name : 'fuseFindByKey',
pure: false pure : false,
standalone: true,
}) })
export class FuseFindByKeyPipe implements PipeTransform export class FuseFindByKeyPipe implements PipeTransform
{ {

8
src/@fuse/services/config/config.module.ts
View File

@ -1,6 +1,6 @@
import { ModuleWithProviders, NgModule } from '@angular/core'; import { ModuleWithProviders, NgModule } from '@angular/core';
import { FuseConfigService } from '@fuse/services/config/config.service';
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants'; import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
import { FuseConfigService } from '@fuse/services/config/config.service';
@NgModule() @NgModule()
export class FuseConfigModule export class FuseConfigModule
@ -24,9 +24,9 @@ export class FuseConfigModule
providers: [ providers: [
{ {
provide : FUSE_APP_CONFIG, provide : FUSE_APP_CONFIG,
useValue: config useValue: config,
} },
] ],
}; };
} }
} }

6
src/@fuse/services/config/config.service.ts
View File

@ -1,10 +1,10 @@
import { Inject, Injectable } from '@angular/core'; import { Inject, Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { merge } from 'lodash-es';
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants'; import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
import { merge } from 'lodash-es';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class FuseConfigService export class FuseConfigService
{ {

12
src/@fuse/services/confirmation/confirmation.module.ts
View File

@ -1,24 +1,22 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service'; import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service';
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component'; import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
import { CommonModule } from '@angular/common';
@NgModule({ @NgModule({
declarations: [
FuseConfirmationDialogComponent
],
imports : [ imports : [
MatButtonModule, MatButtonModule,
MatDialogModule, MatDialogModule,
MatIconModule, MatIconModule,
CommonModule CommonModule,
FuseConfirmationDialogComponent,
], ],
providers: [ providers: [
FuseConfirmationService FuseConfirmationService,
] ],
}) })
export class FuseConfirmationModule export class FuseConfirmationModule
{ {

18
src/@fuse/services/confirmation/confirmation.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { merge } from 'lodash-es';
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types'; import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
import { merge } from 'lodash-es';
@Injectable() @Injectable()
export class FuseConfirmationService export class FuseConfirmationService
@ -13,27 +13,27 @@ export class FuseConfirmationService
icon : { icon : {
show : true, show : true,
name : 'heroicons_outline:exclamation', name : 'heroicons_outline:exclamation',
color: 'warn' color: 'warn',
}, },
actions : { actions : {
confirm: { confirm: {
show : true, show : true,
label: 'Confirm', label: 'Confirm',
color: 'warn' color: 'warn',
}, },
cancel : { cancel : {
show : true, show : true,
label: 'Cancel' label: 'Cancel',
}
}, },
dismissible: false },
dismissible: false,
}; };
/** /**
* Constructor * Constructor
*/ */
constructor( constructor(
private _matDialog: MatDialog private _matDialog: MatDialog,
) )
{ {
} }
@ -52,7 +52,7 @@ export class FuseConfirmationService
autoFocus : false, autoFocus : false,
disableClose: !userConfig.dismissible, disableClose: !userConfig.dismissible,
data : userConfig, data : userConfig,
panelClass : 'fuse-confirmation-dialog-panel' panelClass : 'fuse-confirmation-dialog-panel',
}); });
} }
} }

11
src/@fuse/services/confirmation/dialog/dialog.component.ts
View File

@ -1,5 +1,8 @@
import { NgClass, NgIf } from '@angular/common';
import { Component, Inject, ViewEncapsulation } from '@angular/core'; import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types'; import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
@Component({ @Component({
@ -20,9 +23,11 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
} }
} }
} }
` `,
], ],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None,
standalone : true,
imports : [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
}) })
export class FuseConfirmationDialogComponent export class FuseConfirmationDialogComponent
{ {

12
src/@fuse/services/loading/loading.interceptor.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { finalize, Observable } from 'rxjs'; import { Injectable } from '@angular/core';
import { FuseLoadingService } from '@fuse/services/loading/loading.service'; import { FuseLoadingService } from '@fuse/services/loading/loading.service';
import { finalize, Observable } from 'rxjs';
@Injectable() @Injectable()
export class FuseLoadingInterceptor implements HttpInterceptor export class FuseLoadingInterceptor implements HttpInterceptor
@ -12,12 +12,13 @@ export class FuseLoadingInterceptor implements HttpInterceptor
* Constructor * Constructor
*/ */
constructor( constructor(
private _fuseLoadingService: FuseLoadingService private _fuseLoadingService: FuseLoadingService,
) )
{ {
// Subscribe to the auto // Subscribe to the auto
this._fuseLoadingService.auto$ this._fuseLoadingService.auto$
.subscribe((value) => { .subscribe((value) =>
{
this.handleRequestsAutomatically = value; this.handleRequestsAutomatically = value;
}); });
} }
@ -40,7 +41,8 @@ export class FuseLoadingInterceptor implements HttpInterceptor
this._fuseLoadingService._setLoadingStatus(true, req.url); this._fuseLoadingService._setLoadingStatus(true, req.url);
return next.handle(req).pipe( return next.handle(req).pipe(
finalize(() => { finalize(() =>
{
// Set the status to false if there are any errors or the request is completed // Set the status to false if there are any errors or the request is completed
this._fuseLoadingService._setLoadingStatus(false, req.url); this._fuseLoadingService._setLoadingStatus(false, req.url);
})); }));

8
src/@fuse/services/loading/loading.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor'; import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor';
@NgModule({ @NgModule({
@ -7,9 +7,9 @@ import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.intercept
{ {
provide : HTTP_INTERCEPTORS, provide : HTTP_INTERCEPTORS,
useClass: FuseLoadingInterceptor, useClass: FuseLoadingInterceptor,
multi : true multi : true,
} },
] ],
}) })
export class FuseLoadingModule export class FuseLoadingModule
{ {

4
src/@fuse/services/loading/loading.service.ts
View File

@ -1,9 +1,9 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class FuseLoadingService export class FuseLoadingService
{ {

4
src/@fuse/services/media-watcher/media-watcher.module.ts
View File

@ -3,8 +3,8 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher/media-watc
@NgModule({ @NgModule({
providers: [ providers: [
FuseMediaWatcherService FuseMediaWatcherService,
] ],
}) })
export class FuseMediaWatcherModule export class FuseMediaWatcherModule
{ {

17
src/@fuse/services/media-watcher/media-watcher.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { map, Observable, ReplaySubject, switchMap } from 'rxjs'; import { Injectable } from '@angular/core';
import { fromPairs } from 'lodash-es';
import { FuseConfigService } from '@fuse/services/config'; import { FuseConfigService } from '@fuse/services/config';
import { fromPairs } from 'lodash-es';
import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
@Injectable() @Injectable()
export class FuseMediaWatcherService export class FuseMediaWatcherService
@ -14,13 +14,14 @@ export class FuseMediaWatcherService
*/ */
constructor( constructor(
private _breakpointObserver: BreakpointObserver, private _breakpointObserver: BreakpointObserver,
private _fuseConfigService: FuseConfigService private _fuseConfigService: FuseConfigService,
) )
{ {
this._fuseConfigService.config$.pipe( this._fuseConfigService.config$.pipe(
map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))), map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe( switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
map((state) => { map((state) =>
{
// Prepare the observable values and set their defaults // Prepare the observable values and set their defaults
const matchingAliases: string[] = []; const matchingAliases: string[] = [];
@ -44,10 +45,10 @@ export class FuseMediaWatcherService
// Execute the observable // Execute the observable
this._onMediaChange.next({ this._onMediaChange.next({
matchingAliases, matchingAliases,
matchingQueries matchingQueries,
}); });
}) }),
)) )),
).subscribe(); ).subscribe();
} }

4
src/@fuse/services/platform/platform.module.ts
View File

@ -3,8 +3,8 @@ import { FusePlatformService } from '@fuse/services/platform/platform.service';
@NgModule({ @NgModule({
providers: [ providers: [
FusePlatformService FusePlatformService,
] ],
}) })
export class FusePlatformModule export class FusePlatformModule
{ {

4
src/@fuse/services/platform/platform.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { Platform } from '@angular/cdk/platform'; import { Platform } from '@angular/cdk/platform';
import { Injectable } from '@angular/core';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class FusePlatformService export class FusePlatformService
{ {

4
src/@fuse/services/splash-screen/splash-screen.module.ts
View File

@ -3,8 +3,8 @@ import { FuseSplashScreenService } from '@fuse/services/splash-screen/splash-scr
@NgModule({ @NgModule({
providers: [ providers: [
FuseSplashScreenService FuseSplashScreenService,
] ],
}) })
export class FuseSplashScreenModule export class FuseSplashScreenModule
{ {

9
src/@fuse/services/splash-screen/splash-screen.service.ts
View File

@ -1,5 +1,5 @@
import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router'; import { NavigationEnd, Router } from '@angular/router';
import { filter, take } from 'rxjs'; import { filter, take } from 'rxjs';
@ -11,16 +11,17 @@ export class FuseSplashScreenService
*/ */
constructor( constructor(
@Inject(DOCUMENT) private _document: any, @Inject(DOCUMENT) private _document: any,
private _router: Router private _router: Router,
) )
{ {
// Hide it on the first NavigationEnd event // Hide it on the first NavigationEnd event
this._router.events this._router.events
.pipe( .pipe(
filter(event => event instanceof NavigationEnd), filter(event => event instanceof NavigationEnd),
take(1) take(1),
) )
.subscribe(() => { .subscribe(() =>
{
this.hide(); this.hide();
}); });
} }

4
src/@fuse/services/utils/utils.module.ts
View File

@ -3,8 +3,8 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
@NgModule({ @NgModule({
providers: [ providers: [
FuseUtilsService FuseUtilsService,
] ],
}) })
export class FuseUtilsModule export class FuseUtilsModule
{ {

6
src/@fuse/services/utils/utils.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { IsActiveMatchOptions } from '@angular/router'; import { IsActiveMatchOptions } from '@angular/router';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class FuseUtilsService export class FuseUtilsService
{ {
@ -26,7 +26,7 @@ export class FuseUtilsService
paths : 'exact', paths : 'exact',
fragment : 'ignored', fragment : 'ignored',
matrixParams: 'ignored', matrixParams: 'ignored',
queryParams : 'exact' queryParams : 'exact',
}; };
} }
@ -39,7 +39,7 @@ export class FuseUtilsService
paths : 'subset', paths : 'subset',
fragment : 'ignored', fragment : 'ignored',
matrixParams: 'ignored', matrixParams: 'ignored',
queryParams : 'subset' queryParams : 'subset',
}; };
} }

2
src/@fuse/styles/user-themes.scss
View File

File diff suppressed because one or more lines are too long

18
src/@fuse/tailwind/plugins/icon-size.js
View File

@ -3,7 +3,7 @@ const plugin = require('tailwindcss/plugin');
module.exports = plugin( module.exports = plugin(
({ ({
matchUtilities, matchUtilities,
theme theme,
}) => }) =>
{ {
matchUtilities( matchUtilities(
@ -17,12 +17,12 @@ module.exports = plugin(
lineHeight: value, lineHeight: value,
[`svg`] : { [`svg`] : {
width : value, width : value,
height: value height: value,
} },
}) }),
}, },
{ {
values: theme('iconSize') values: theme('iconSize'),
}); });
}, },
{ {
@ -43,8 +43,8 @@ module.exports = plugin(
18 : '4.5rem', 18 : '4.5rem',
20 : '5rem', 20 : '5rem',
22 : '5.5rem', 22 : '5.5rem',
24 : '6rem' 24 : '6rem',
} },
} },
} },
); );

68
src/@fuse/tailwind/plugins/theming.js
View File

@ -26,9 +26,9 @@ const normalizeTheme = (theme) =>
paletteName, paletteName,
{ {
...palette, ...palette,
DEFAULT: palette['DEFAULT'] || palette[500] DEFAULT: palette['DEFAULT'] || palette[500],
} },
] ],
)); ));
}; };
@ -38,7 +38,7 @@ const normalizeTheme = (theme) =>
const theming = plugin.withOptions((options) => ({ const theming = plugin.withOptions((options) => ({
addComponents, addComponents,
e, e,
theme theme,
}) => }) =>
{ {
/** /**
@ -48,7 +48,7 @@ const theming = plugin.withOptions((options) => ({
*/ */
const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [ const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
themeName, themeName,
_.defaults({}, theme, options.themes['default']) _.defaults({}, theme, options.themes['default']),
])); ]));
/** /**
@ -57,7 +57,7 @@ const theming = plugin.withOptions((options) => ({
*/ */
let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [ let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
themeName, themeName,
normalizeTheme(theme) normalizeTheme(theme),
])); ]));
/** /**
@ -73,12 +73,12 @@ const theming = plugin.withOptions((options) => ({
...palette, ...palette,
contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [ contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
hue, hue,
_.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color,
]))
}
])), ])),
['primary', 'accent', 'warn'] },
) ])),
['primary', 'accent', 'warn'],
),
])); ]));
/** /**
@ -89,8 +89,8 @@ const theming = plugin.withOptions((options) => ({
themeName, themeName,
{ {
selector: `".theme-${themeName}"`, selector: `".theme-${themeName}"`,
...theme ...theme,
} },
])); ]));
/* Generate the SASS map using the themes object */ /* Generate the SASS map using the themes object */
@ -134,15 +134,15 @@ const theming = plugin.withOptions((options) => ({
_.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [ _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
[ [
e(paletteName), e(paletteName),
palette palette,
], ],
[ [
`on-${e(paletteName)}`, `on-${e(paletteName)}`,
_.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color])) _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color])),
] ],
]) ]),
))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))) ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
])) ])),
); );
/** /**
@ -185,8 +185,8 @@ const theming = plugin.withOptions((options) => ({
/* Generate custom properties from customProps */ /* Generate custom properties from customProps */
..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))), ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))) ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
} },
}; };
}); });
@ -211,8 +211,8 @@ const theming = plugin.withOptions((options) => ({
*/ */
colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [ colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
[name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`], [name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
[`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`] [`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`],
]))) ]))),
}, },
fuse : { fuse : {
customProps: { customProps: {
@ -223,7 +223,7 @@ const theming = plugin.withOptions((options) => ({
'bg-default' : colors.slate[100], 'bg-default' : colors.slate[100],
'bg-dialog' : '#FFFFFF', 'bg-dialog' : '#FFFFFF',
'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(), 'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(),
'bg-status-bar': colors.slate[300] 'bg-status-bar': colors.slate[300],
}, },
dark : { dark : {
'bg-app-bar' : colors.slate[900], 'bg-app-bar' : colors.slate[900],
@ -231,8 +231,8 @@ const theming = plugin.withOptions((options) => ({
'bg-default' : colors.slate[900], 'bg-default' : colors.slate[900],
'bg-dialog' : colors.slate[800], 'bg-dialog' : colors.slate[800],
'bg-hover' : 'rgba(255, 255, 255, 0.05)', 'bg-hover' : 'rgba(255, 255, 255, 0.05)',
'bg-status-bar': colors.slate[900] 'bg-status-bar': colors.slate[900],
} },
}, },
foreground: { foreground: {
light: { light: {
@ -243,7 +243,7 @@ const theming = plugin.withOptions((options) => ({
'border' : colors.slate[200], 'border' : colors.slate[200],
'divider' : colors.slate[200], 'divider' : colors.slate[200],
'icon' : colors.slate[500], 'icon' : colors.slate[500],
'mat-icon' : colors.slate[500] 'mat-icon' : colors.slate[500],
}, },
dark : { dark : {
'text-default' : '#FFFFFF', 'text-default' : '#FFFFFF',
@ -253,14 +253,14 @@ const theming = plugin.withOptions((options) => ({
'border' : chroma(colors.slate[100]).alpha(0.12).css(), 'border' : chroma(colors.slate[100]).alpha(0.12).css(),
'divider' : chroma(colors.slate[100]).alpha(0.12).css(), 'divider' : chroma(colors.slate[100]).alpha(0.12).css(),
'icon' : colors.slate[400], 'icon' : colors.slate[400],
'mat-icon' : colors.slate[400] 'mat-icon' : colors.slate[400],
} },
} },
} },
} },
} },
}; };
} },
); );
module.exports = theming; module.exports = theming;

34
src/@fuse/tailwind/plugins/utilities.js
View File

@ -1,7 +1,7 @@
const plugin = require('tailwindcss/plugin'); const plugin = require('tailwindcss/plugin');
module.exports = plugin(({ module.exports = plugin(({
addComponents addComponents,
}) => }) =>
{ {
/* /*
@ -13,55 +13,55 @@ module.exports = plugin(({
{ {
'.mat-icon' : { '.mat-icon' : {
'--tw-text-opacity': '1', '--tw-text-opacity': '1',
color : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))' color : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))',
}, },
'.text-default' : { '.text-default' : {
'--tw-text-opacity': '1 !important', '--tw-text-opacity': '1 !important',
color : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important' color : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important',
}, },
'.text-secondary' : { '.text-secondary' : {
'--tw-text-opacity': '1 !important', '--tw-text-opacity': '1 !important',
color : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important' color : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important',
}, },
'.text-hint' : { '.text-hint' : {
'--tw-text-opacity': '1 !important', '--tw-text-opacity': '1 !important',
color : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important' color : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important',
}, },
'.text-disabled' : { '.text-disabled' : {
'--tw-text-opacity': '1 !important', '--tw-text-opacity': '1 !important',
color : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important' color : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important',
}, },
'.divider' : { '.divider' : {
color: 'var(--fuse-divider) !important' color: 'var(--fuse-divider) !important',
}, },
'.bg-card' : { '.bg-card' : {
'--tw-bg-opacity': '1 !important', '--tw-bg-opacity': '1 !important',
backgroundColor : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important' backgroundColor : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important',
}, },
'.bg-default' : { '.bg-default' : {
'--tw-bg-opacity': '1 !important', '--tw-bg-opacity': '1 !important',
backgroundColor : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important' backgroundColor : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important',
}, },
'.bg-dialog' : { '.bg-dialog' : {
'--tw-bg-opacity': '1 !important', '--tw-bg-opacity': '1 !important',
backgroundColor : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important' backgroundColor : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important',
}, },
'.ring-bg-default': { '.ring-bg-default': {
'--tw-ring-opacity': '1 !important', '--tw-ring-opacity': '1 !important',
'--tw-ring-color' : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important' '--tw-ring-color' : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important',
}, },
'.ring-bg-card' : { '.ring-bg-card' : {
'--tw-ring-opacity': '1 !important', '--tw-ring-opacity': '1 !important',
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important' '--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important',
} },
} },
); );
addComponents( addComponents(
{ {
'.bg-hover': { '.bg-hover': {
backgroundColor: 'var(--fuse-bg-hover) !important' backgroundColor: 'var(--fuse-bg-hover) !important',
} },
} },
); );
}); });

2
src/@fuse/tailwind/utils/generate-contrasts.js
View File

@ -23,7 +23,7 @@ const generateContrasts = (palette) =>
// Generate the contrasting colors // Generate the contrasting colors
return _.fromPairs(_.map(palette, ((color, hue) => [ return _.fromPairs(_.map(palette, ((color, hue) => [
hue, hue,
chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor,
] ]
))); )));
}; };

14
src/@fuse/tailwind/utils/generate-palette.js
View File

@ -22,7 +22,7 @@ const generatePalette = (config) =>
600: null, 600: null,
700: null, 700: null,
800: null, 800: null,
900: null 900: null,
}; };
// If a single color is provided, // If a single color is provided,
@ -58,14 +58,14 @@ const generatePalette = (config) =>
colors.unshift( colors.unshift(
chroma.scale(['white', palette[500]]) chroma.scale(['white', palette[500]])
.domain([0, 1]) .domain([0, 1])
.mode("lrgb") .mode('lrgb')
.colors(50)[1] .colors(50)[1],
); );
colors.push( colors.push(
chroma.scale(['black', palette[500]]) chroma.scale(['black', palette[500]])
.domain([0, 1]) .domain([0, 1])
.mode("lrgb") .mode('lrgb')
.colors(10)[1] .colors(10)[1],
); );
// Prepare the domains array // Prepare the domains array
@ -74,7 +74,7 @@ const generatePalette = (config) =>
...Object.entries(palette) ...Object.entries(palette)
.filter(([key, value]) => value) .filter(([key, value]) => value)
.map(([key]) => parseInt(key) / 1000), .map(([key]) => parseInt(key) / 1000),
1 1,
]; ];
// Generate the color scale // Generate the color scale
@ -93,7 +93,7 @@ const generatePalette = (config) =>
600: scale(0.6).hex(), 600: scale(0.6).hex(),
700: scale(0.7).hex(), 700: scale(0.7).hex(),
800: scale(0.8).hex(), 800: scale(0.8).hex(),
900: scale(0.9).hex() 900: scale(0.9).hex(),
}; };
}; };

4
src/@fuse/tailwind/utils/json-to-sass-map.js
View File

@ -13,13 +13,13 @@ module.exports = (data) =>
{ {
let scss = ''; let scss = '';
if ( typeof chunk === "object" && !Array.isArray(chunk) ) if ( typeof chunk === 'object' && !Array.isArray(chunk) )
{ {
_.mapKeys(chunk, (value, key) => _.mapKeys(chunk, (value, key) =>
{ {
scss += key + ': '; scss += key + ': ';
if ( typeof value === "object" ) if ( typeof value === 'object' )
{ {
if ( Array.isArray(value) ) if ( Array.isArray(value) )
{ {

3
src/@fuse/validators/validators.ts
View File

@ -20,7 +20,8 @@ export class FuseValidators
*/ */
static mustMatch(controlPath: string, matchingControlPath: string): ValidatorFn static mustMatch(controlPath: string, matchingControlPath: string): ValidatorFn
{ {
return (formGroup: AbstractControl): ValidationErrors | null => { return (formGroup: AbstractControl): ValidationErrors | null =>
{
// Get the control and matching control // Get the control and matching control
const control = formGroup.get(controlPath); const control = formGroup.get(controlPath);

5
src/app/app.component.ts
View File

@ -1,9 +1,12 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({ @Component({
selector : 'app-root', selector : 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls : ['./app.component.scss'] styleUrls : ['./app.component.scss'],
standalone : true,
imports : [RouterOutlet],
}) })
export class AppComponent export class AppComponent
{ {

46
src/app/app.module.ts
View File

@ -1,46 +0,0 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router';
import { FuseModule } from '@fuse';
import { FuseConfigModule } from '@fuse/services/config';
import { FuseMockApiModule } from '@fuse/lib/mock-api';
import { CoreModule } from 'app/core/core.module';
import { appConfig } from 'app/core/config/app.config';
import { mockApiServices } from 'app/mock-api';
import { LayoutModule } from 'app/layout/layout.module';
import { AppComponent } from 'app/app.component';
import { appRoutes } from 'app/app.routing';
const routerConfig: ExtraOptions = {
preloadingStrategy : PreloadAllModules,
scrollPositionRestoration: 'enabled'
};
@NgModule({
declarations: [
AppComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes, routerConfig),
// Fuse, FuseConfig & FuseMockAPI
FuseModule,
FuseConfigModule.forRoot(appConfig),
FuseMockApiModule.forRoot(mockApiServices),
// Core module of your application
CoreModule,
// Layout module of your application
LayoutModule
],
bootstrap : [
AppComponent
]
})
export class AppModule
{
}

10
src/app/app.resolvers.ts
View File

@ -1,14 +1,14 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { forkJoin, Observable } from 'rxjs';
import { MessagesService } from 'app/layout/common/messages/messages.service';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { MessagesService } from 'app/layout/common/messages/messages.service';
import { NotificationsService } from 'app/layout/common/notifications/notifications.service'; import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service'; import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service'; import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
import { forkJoin, Observable } from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class InitialDataResolver implements Resolve<any> export class InitialDataResolver implements Resolve<any>
{ {
@ -20,7 +20,7 @@ export class InitialDataResolver implements Resolve<any>
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _notificationsService: NotificationsService, private _notificationsService: NotificationsService,
private _quickChatService: QuickChatService, private _quickChatService: QuickChatService,
private _shortcutsService: ShortcutsService private _shortcutsService: ShortcutsService,
) )
{ {
} }
@ -43,7 +43,7 @@ export class InitialDataResolver implements Resolve<any>
this._messagesService.getAll(), this._messagesService.getAll(),
this._notificationsService.getAll(), this._notificationsService.getAll(),
this._quickChatService.getChats(), this._quickChatService.getChats(),
this._shortcutsService.getAll() this._shortcutsService.getAll(),
]); ]);
} }
} }

2
src/app/app.routing.ts
View File

@ -1,8 +1,8 @@
import { Route } from '@angular/router'; import { Route } from '@angular/router';
import { InitialDataResolver } from 'app/app.resolvers';
import { AuthGuard } from 'app/core/auth/guards/auth.guard'; import { AuthGuard } from 'app/core/auth/guards/auth.guard';
import { NoAuthGuard } from 'app/core/auth/guards/noAuth.guard'; import { NoAuthGuard } from 'app/core/auth/guards/noAuth.guard';
import { LayoutComponent } from 'app/layout/layout.component'; import { LayoutComponent } from 'app/layout/layout.component';
import { InitialDataResolver } from 'app/app.resolvers';
// @formatter:off // @formatter:off
/* eslint-disable max-len */ /* eslint-disable max-len */

11
src/app/core/auth/auth.interceptor.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { catchError, Observable, throwError } from 'rxjs'; import { Injectable } from '@angular/core';
import { AuthService } from 'app/core/auth/auth.service'; import { AuthService } from 'app/core/auth/auth.service';
import { AuthUtils } from 'app/core/auth/auth.utils'; import { AuthUtils } from 'app/core/auth/auth.utils';
import { catchError, Observable, throwError } from 'rxjs';
@Injectable() @Injectable()
export class AuthInterceptor implements HttpInterceptor export class AuthInterceptor implements HttpInterceptor
@ -36,13 +36,14 @@ export class AuthInterceptor implements HttpInterceptor
if ( this._authService.accessToken && !AuthUtils.isTokenExpired(this._authService.accessToken) ) if ( this._authService.accessToken && !AuthUtils.isTokenExpired(this._authService.accessToken) )
{ {
newReq = req.clone({ newReq = req.clone({
headers: req.headers.set('Authorization', 'Bearer ' + this._authService.accessToken) headers: req.headers.set('Authorization', 'Bearer ' + this._authService.accessToken),
}); });
} }
// Response // Response
return next.handle(newReq).pipe( return next.handle(newReq).pipe(
catchError((error) => { catchError((error) =>
{
// Catch "401 Unauthorized" responses // Catch "401 Unauthorized" responses
if ( error instanceof HttpErrorResponse && error.status === 401 ) if ( error instanceof HttpErrorResponse && error.status === 401 )
@ -55,7 +56,7 @@ export class AuthInterceptor implements HttpInterceptor
} }
return throwError(error); return throwError(error);
}) }),
); );
} }
} }

12
src/app/core/auth/auth.module.ts
View File

@ -1,20 +1,20 @@
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthService } from 'app/core/auth/auth.service'; import { NgModule } from '@angular/core';
import { AuthInterceptor } from 'app/core/auth/auth.interceptor'; import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
import { AuthService } from 'app/core/auth/auth.service';
@NgModule({ @NgModule({
imports : [ imports : [
HttpClientModule HttpClientModule,
], ],
providers: [ providers: [
AuthService, AuthService,
{ {
provide : HTTP_INTERCEPTORS, provide : HTTP_INTERCEPTORS,
useClass: AuthInterceptor, useClass: AuthInterceptor,
multi : true multi : true,
} },
] ],
}) })
export class AuthModule export class AuthModule
{ {

20
src/app/core/auth/auth.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { catchError, Observable, of, switchMap, throwError } from 'rxjs'; import { Injectable } from '@angular/core';
import { AuthUtils } from 'app/core/auth/auth.utils'; import { AuthUtils } from 'app/core/auth/auth.utils';
import { UserService } from 'app/core/user/user.service'; import { UserService } from 'app/core/user/user.service';
import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
@Injectable() @Injectable()
export class AuthService export class AuthService
@ -14,7 +14,7 @@ export class AuthService
*/ */
constructor( constructor(
private _httpClient: HttpClient, private _httpClient: HttpClient,
private _userService: UserService private _userService: UserService,
) )
{ {
} }
@ -74,7 +74,8 @@ export class AuthService
} }
return this._httpClient.post('api/auth/sign-in', credentials).pipe( return this._httpClient.post('api/auth/sign-in', credentials).pipe(
switchMap((response: any) => { switchMap((response: any) =>
{
// Store the access token in the local storage // Store the access token in the local storage
this.accessToken = response.accessToken; this.accessToken = response.accessToken;
@ -87,7 +88,7 @@ export class AuthService
// Return a new observable with the response // Return a new observable with the response
return of(response); return of(response);
}) }),
); );
} }
@ -98,14 +99,15 @@ export class AuthService
{ {
// Sign in using the token // Sign in using the token
return this._httpClient.post('api/auth/sign-in-with-token', { return this._httpClient.post('api/auth/sign-in-with-token', {
accessToken: this.accessToken accessToken: this.accessToken,
}).pipe( }).pipe(
catchError(() => catchError(() =>
// Return false // Return false
of(false) of(false),
), ),
switchMap((response: any) => { switchMap((response: any) =>
{
// Replace the access token with the new one if it's available on // Replace the access token with the new one if it's available on
// the response object. // the response object.
@ -127,7 +129,7 @@ export class AuthService
// Return true // Return true
return of(true); return of(true);
}) }),
); );
} }

4
src/app/core/auth/auth.utils.ts
View File

@ -67,7 +67,7 @@ export class AuthUtils
if ( str.length % 4 === 1 ) if ( str.length % 4 === 1 )
{ {
throw new Error( throw new Error(
'\'atob\' failed: The string to be decoded is not correctly encoded.' '\'atob\' failed: The string to be decoded is not correctly encoded.',
); );
} }
@ -108,7 +108,7 @@ export class AuthUtils
return decodeURIComponent( return decodeURIComponent(
Array.prototype.map Array.prototype.map
.call(this._b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)) .call(this._b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
.join('') .join(''),
); );
} }

10
src/app/core/auth/guards/auth.guard.ts
View File

@ -1,14 +1,16 @@
import { inject } from '@angular/core'; import { inject } from '@angular/core';
import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router'; import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
import { of, switchMap } from 'rxjs';
import { AuthService } from 'app/core/auth/auth.service'; import { AuthService } from 'app/core/auth/auth.service';
import { of, switchMap } from 'rxjs';
export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => { export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
{
const router: Router = inject(Router); const router: Router = inject(Router);
// Check the authentication status // Check the authentication status
return inject(AuthService).check().pipe( return inject(AuthService).check().pipe(
switchMap((authenticated) => { switchMap((authenticated) =>
{
// If the user is not authenticated... // If the user is not authenticated...
if ( !authenticated ) if ( !authenticated )
@ -22,6 +24,6 @@ export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
// Allow the access // Allow the access
return of(true); return of(true);
}) }),
); );
}; };

10
src/app/core/auth/guards/noAuth.guard.ts
View File

@ -1,14 +1,16 @@
import { inject } from '@angular/core'; import { inject } from '@angular/core';
import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router'; import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
import { of, switchMap } from 'rxjs';
import { AuthService } from 'app/core/auth/auth.service'; import { AuthService } from 'app/core/auth/auth.service';
import { of, switchMap } from 'rxjs';
export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => { export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
{
const router: Router = inject(Router); const router: Router = inject(Router);
// Check the authentication status // Check the authentication status
return inject(AuthService).check().pipe( return inject(AuthService).check().pipe(
switchMap((authenticated) => { switchMap((authenticated) =>
{
// If the user is authenticated... // If the user is authenticated...
if ( authenticated ) if ( authenticated )
@ -18,6 +20,6 @@ export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
// Allow the access // Allow the access
return of(true); return of(true);
}) }),
); );
}; };

18
src/app/core/config/app.config.ts
View File

@ -39,33 +39,33 @@ export const appConfig: AppConfig = {
sm: '600px', sm: '600px',
md: '960px', md: '960px',
lg: '1280px', lg: '1280px',
xl: '1440px' xl: '1440px',
}, },
theme : 'theme-default', theme : 'theme-default',
themes : [ themes : [
{ {
id : 'theme-default', id : 'theme-default',
name: 'Default' name: 'Default',
}, },
{ {
id : 'theme-brand', id : 'theme-brand',
name: 'Brand' name: 'Brand',
}, },
{ {
id : 'theme-teal', id : 'theme-teal',
name: 'Teal' name: 'Teal',
}, },
{ {
id : 'theme-rose', id : 'theme-rose',
name: 'Rose' name: 'Rose',
}, },
{ {
id : 'theme-purple', id : 'theme-purple',
name: 'Purple' name: 'Purple',
}, },
{ {
id : 'theme-amber', id : 'theme-amber',
name: 'Amber' name: 'Amber',
} },
] ],
}; };

6
src/app/core/core.module.ts
View File

@ -7,8 +7,8 @@ import { TranslocoCoreModule } from 'app/core/transloco/transloco.module';
imports: [ imports: [
AuthModule, AuthModule,
IconsModule, IconsModule,
TranslocoCoreModule TranslocoCoreModule,
] ],
}) })
export class CoreModule export class CoreModule
{ {
@ -16,7 +16,7 @@ export class CoreModule
* Constructor * Constructor
*/ */
constructor( constructor(
@Optional() @SkipSelf() parentModule?: CoreModule @Optional() @SkipSelf() parentModule?: CoreModule,
) )
{ {
// Do not allow multiple injections // Do not allow multiple injections

4
src/app/core/icons/icons.module.ts
View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material/icon'; import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
@NgModule() @NgModule()
export class IconsModule export class IconsModule
@ -10,7 +10,7 @@ export class IconsModule
*/ */
constructor( constructor(
private _domSanitizer: DomSanitizer, private _domSanitizer: DomSanitizer,
private _matIconRegistry: MatIconRegistry private _matIconRegistry: MatIconRegistry,
) )
{ {
// Register icon sets // Register icon sets

11
src/app/core/navigation/navigation.service.ts
View File

@ -1,10 +1,10 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject, tap } from 'rxjs'; import { Injectable } from '@angular/core';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
import { Observable, ReplaySubject, tap } from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class NavigationService export class NavigationService
{ {
@ -39,9 +39,10 @@ export class NavigationService
get(): Observable<Navigation> get(): Observable<Navigation>
{ {
return this._httpClient.get<Navigation>('api/common/navigation').pipe( return this._httpClient.get<Navigation>('api/common/navigation').pipe(
tap((navigation) => { tap((navigation) =>
{
this._navigation.next(navigation); this._navigation.next(navigation);
}) }),
); );
} }
} }

6
src/app/core/transloco/transloco.http-loader.ts
View File

@ -1,10 +1,10 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs'; import { Injectable } from '@angular/core';
import { Translation, TranslocoLoader } from '@ngneat/transloco'; import { Translation, TranslocoLoader } from '@ngneat/transloco';
import { Observable } from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root',
}) })
export class TranslocoHttpLoader implements TranslocoLoader export class TranslocoHttpLoader implements TranslocoLoader
{ {

Some files were not shown because too many files have changed in this diff Show More