purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-04 09:43:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Standalone components, Angular v16 and more

Browse Source
This commit is contained in:
Sercan Yemen 2023-05-30 12:00:42 +03:00
commit 4af04eab4d
824 changed files with 20998 additions and 21180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9044
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

73
package.json
View File

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

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

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

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

@ -8,14 +8,14 @@ const fadeIn = trigger('fadeIn',
[
state('void',
style({
opacity: 0
})
opacity: 0,
}),
),
state('*',
style({
opacity: 1
})
opacity: 1,
}),
),
// Prevent the transition if the state is false
@ -25,11 +25,11 @@ const fadeIn = trigger('fadeIn',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -40,15 +40,15 @@ const fadeInTop = trigger('fadeInTop',
state('void',
style({
opacity : 0,
transform: 'translate3d(0, -100%, 0)'
})
transform: 'translate3d(0, -100%, 0)',
}),
),
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -58,11 +58,11 @@ const fadeInTop = trigger('fadeInTop',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -73,15 +73,15 @@ const fadeInBottom = trigger('fadeInBottom',
state('void',
style({
opacity : 0,
transform: 'translate3d(0, 100%, 0)'
})
transform: 'translate3d(0, 100%, 0)',
}),
),
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -91,11 +91,11 @@ const fadeInBottom = trigger('fadeInBottom',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -106,15 +106,15 @@ const fadeInLeft = trigger('fadeInLeft',
state('void',
style({
opacity : 0,
transform: 'translate3d(-100%, 0, 0)'
})
transform: 'translate3d(-100%, 0, 0)',
}),
),
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -124,11 +124,11 @@ const fadeInLeft = trigger('fadeInLeft',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -139,15 +139,15 @@ const fadeInRight = trigger('fadeInRight',
state('void',
style({
opacity : 0,
transform: 'translate3d(100%, 0, 0)'
})
transform: 'translate3d(100%, 0, 0)',
}),
),
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -157,11 +157,11 @@ const fadeInRight = trigger('fadeInRight',
transition('void => *', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -171,14 +171,14 @@ const fadeOut = trigger('fadeOut',
[
state('*',
style({
opacity: 1
})
opacity: 1,
}),
),
state('void',
style({
opacity: 0
})
opacity: 0,
}),
),
// Prevent the transition if the state is false
@ -188,11 +188,11 @@ const fadeOut = trigger('fadeOut',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -203,15 +203,15 @@ const fadeOutTop = trigger('fadeOutTop',
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
opacity : 0,
transform: 'translate3d(0, -100%, 0)'
})
transform: 'translate3d(0, -100%, 0)',
}),
),
// Prevent the transition if the state is false
@ -221,11 +221,11 @@ const fadeOutTop = trigger('fadeOutTop',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -236,15 +236,15 @@ const fadeOutBottom = trigger('fadeOutBottom',
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
opacity : 0,
transform: 'translate3d(0, 100%, 0)'
})
transform: 'translate3d(0, 100%, 0)',
}),
),
// Prevent the transition if the state is false
@ -254,11 +254,11 @@ const fadeOutBottom = trigger('fadeOutBottom',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -269,15 +269,15 @@ const fadeOutLeft = trigger('fadeOutLeft',
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
opacity : 0,
transform: 'translate3d(-100%, 0, 0)'
})
transform: 'translate3d(-100%, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -287,11 +287,11 @@ const fadeOutLeft = trigger('fadeOutLeft',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
// -----------------------------------------------------------------------------------------------------
@ -302,15 +302,15 @@ const fadeOutRight = trigger('fadeOutRight',
state('*',
style({
opacity : 1,
transform: 'translate3d(0, 0, 0)'
})
transform: 'translate3d(0, 0, 0)',
}),
),
state('void',
style({
opacity : 0,
transform: 'translate3d(100%, 0, 0)'
})
transform: 'translate3d(100%, 0, 0)',
}),
),
// Prevent the transition if the state is false
@ -320,11 +320,11 @@ const fadeOutRight = trigger('fadeOutRight',
transition('* => void', animate('{{timings}}'),
{
params: {
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
}
}
)
]
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
},
},
),
],
);
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,
slideInTop, slideInBottom, slideInLeft, slideInRight,
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([
style({
transform: 'translate3d(0, 0, 0)',
offset : 0
offset : 0,
}),
style({
transform: 'translate3d(-10px, 0, 0)',
offset : 0.1
offset : 0.1,
}),
style({
transform: 'translate3d(10px, 0, 0)',
offset : 0.2
offset : 0.2,
}),
style({
transform: 'translate3d(-10px, 0, 0)',
offset : 0.3
offset : 0.3,
}),
style({
transform: 'translate3d(10px, 0, 0)',
offset : 0.4
offset : 0.4,
}),
style({
transform: 'translate3d(-10px, 0, 0)',
offset : 0.5
offset : 0.5,
}),
style({
transform: 'translate3d(10px, 0, 0)',
offset : 0.6
offset : 0.6,
}),
style({
transform: 'translate3d(-10px, 0, 0)',
offset : 0.7
offset : 0.7,
}),
style({
transform: 'translate3d(10px, 0, 0)',
offset : 0.8
offset : 0.8,
}),
style({
transform: 'translate3d(-10px, 0, 0)',
offset : 0.9
offset : 0.9,
}),
style({
transform: 'translate3d(0, 0, 0)',
offset : 1
})
])
)
offset : 1,
}),
]),
),
],
{
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 };

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

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

4
src/@fuse/components/alert/alert.component.html
View File

@ -48,7 +48,7 @@
<mat-icon
*ngIf="type === 'warning'"
[svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
[svgIcon]="'heroicons_solid:exclamation-triangle'"></mat-icon>
<mat-icon
*ngIf="type === 'error'"
@ -76,7 +76,7 @@
class="fuse-alert-dismiss-button"
mat-icon-button
(click)="dismiss()">
<mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon>
<mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
</button>
</div>

29
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 { 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 { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
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 { filter, Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-alert',
@ -13,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
animations : fuseAnimations,
exportAs : 'fuseAlert'
exportAs : 'fuseAlert',
standalone : true,
imports : [NgIf, MatIconModule, MatButtonModule],
})
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
{
@ -39,7 +44,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
constructor(
private _changeDetectorRef: ChangeDetectorRef,
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-success' : this.type === 'success',
'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 */
}
@ -119,10 +124,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
this._fuseAlertService.onDismiss
.pipe(
filter(name => this.name === name),
takeUntil(this._unsubscribeAll)
takeUntil(this._unsubscribeAll),
)
.subscribe(() => {
.subscribe(() =>
{
// Dismiss the alert
this.dismiss();
});
@ -131,10 +136,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
this._fuseAlertService.onShow
.pipe(
filter(name => this.name === name),
takeUntil(this._unsubscribeAll)
takeUntil(this._unsubscribeAll),
)
.subscribe(() => {
.subscribe(() =>
{
// Show the alert
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
{
}

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

@ -1,9 +1,7 @@
import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
@Injectable({providedIn: 'root'})
export class FuseAlertService
{
private readonly _onDismiss: ReplaySubject<string> = new ReplaySubject<string>(1);

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.module';
export * from '@fuse/components/alert/alert.service';
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 { NgIf } from '@angular/common';
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { fuseAnimations } from '@fuse/animations';
import { FuseCardFace } from '@fuse/components/card/card.types';
@ -9,7 +10,9 @@ import { FuseCardFace } from '@fuse/components/card/card.types';
styleUrls : ['./card.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations,
exportAs : 'fuseCard'
exportAs : 'fuseCard',
standalone : true,
imports : [NgIf],
})
export class FuseCardComponent implements OnChanges
{
@ -43,7 +46,7 @@ export class FuseCardComponent implements OnChanges
'fuse-card-expanded' : this.expanded,
'fuse-card-face-back' : this.flippable && this.face === 'back',
'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 */
}

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.module';

31
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 { 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 { 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({
selector : 'fuse-drawer',
templateUrl : './drawer.component.html',
styleUrls : ['./drawer.component.scss'],
encapsulation: ViewEncapsulation.None,
exportAs : 'fuseDrawer'
exportAs : 'fuseDrawer',
standalone : true,
})
export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
{
@ -45,10 +46,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
private _elementRef: ElementRef,
private _renderer2: Renderer2,
private _fuseDrawerService: FuseDrawerService,
private _fuseUtilsService: FuseUtilsService
private _fuseUtilsService: FuseUtilsService,
)
{
this._handleOverlayClick = (): void => {
this._handleOverlayClick = (): void =>
{
this.close();
};
}
@ -69,7 +71,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
'fuse-drawer-hover' : this._hovered,
[`fuse-drawer-mode-${this.mode}`] : true,
'fuse-drawer-opened' : this.opened,
[`fuse-drawer-position-${this.position}`]: true
[`fuse-drawer-position-${this.position}`]: true,
};
/* eslint-enable @typescript-eslint/naming-convention */
}
@ -80,7 +82,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
@HostBinding('style') get styleList(): any
{
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
// The delay must be bigger than the current transition-duration
// to make sure nothing will be animated while the mode is changing
setTimeout(() => {
setTimeout(() =>
{
this._enableAnimations();
}, 500);
}
@ -345,7 +348,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
// Create enter animation and attach it to the player
this._player = this._animationBuilder.build([
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);
// Play the animation
@ -369,15 +372,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
// Create the leave animation and attach it to the player
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);
// Play the animation
this._player.play();
// Once the animation is done...
this._player.onDone(() => {
this._player.onDone(() =>
{
// If the overlay still exists...
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
{
}

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

@ -1,9 +1,7 @@
import { Injectable } from '@angular/core';
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
@Injectable({
providedIn: 'root'
})
@Injectable({providedIn: 'root'})
export class FuseDrawerService
{
private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<string, FuseDrawerComponent>();

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.module';
export * from '@fuse/components/drawer/drawer.service';
export * from '@fuse/components/drawer/drawer.types';

2
src/@fuse/components/fullscreen/fullscreen.component.html
View File

@ -8,5 +8,5 @@
<!-- Default icon -->
<ng-template #defaultIconTpl>
<mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
<mat-icon [svgIcon]="'heroicons_outline:arrows-pointing-out'"></mat-icon>
</ng-template>

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 { 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';
@Component({
@ -7,7 +10,9 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
templateUrl : './fullscreen.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseFullscreen'
exportAs : 'fuseFullscreen',
standalone : true,
imports : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
})
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.module';
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 { DomSanitizer } from '@angular/platform-browser';
import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
@ -8,7 +9,9 @@ import { FuseHighlightService } from '@fuse/components/highlight/highlight.servi
styleUrls : ['./highlight.component.scss'],
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseHighlight'
exportAs : 'fuseHighlight',
standalone : true,
imports : [NgClass],
})
export class FuseHighlightComponent implements OnChanges, AfterViewInit
{
@ -28,7 +31,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
private _elementRef: ElementRef,
private _renderer2: Renderer2,
private _fuseHighlightService: FuseHighlightService,
private _viewContainerRef: ViewContainerRef
private _viewContainerRef: ViewContainerRef,
)
{
}
@ -123,7 +126,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
// Render and insert the template
this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
highlightedCode: this.highlightedCode,
lang : this.lang
lang : this.lang,
});
// 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
{
}

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

@ -1,9 +1,7 @@
import { Injectable } from '@angular/core';
import hljs from 'highlight.js';
@Injectable({
providedIn: 'root'
})
@Injectable({providedIn: 'root'})
export class FuseHighlightService
{
/**
@ -61,19 +59,19 @@ export class FuseHighlightService
// Iterate through the lines
lines.filter(line => line.length)
.forEach((line, index) => {
.forEach((line, index) =>
{
// Always get the indentation of the first line so we can
// have something to compare with
if ( index === 0 )
{
indentation = line.search(/\S|$/);
return;
}
// Always get the indentation of the first line so we can
// have something to compare with
if ( index === 0 )
{
indentation = line.search(/\S|$/);
return;
}
// Look at all the remaining lines to figure out the smallest indentation.
indentation = Math.min(line.search(/\S|$/), indentation);
});
// Look at all the remaining lines to figure out the smallest indentation.
indentation = Math.min(line.search(/\S|$/), indentation);
});
// Iterate through the lines one more time, remove the extra
// indentation, join them together and return it

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.module';
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 { 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 { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-loading-bar',
templateUrl : './loading-bar.component.html',
styleUrls : ['./loading-bar.component.scss'],
encapsulation: ViewEncapsulation.None,
exportAs : 'fuseLoadingBar'
exportAs : 'fuseLoadingBar',
standalone : true,
imports : [NgIf, MatProgressBarModule],
})
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
{
@ -52,19 +56,22 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
// Subscribe to the service
this._fuseLoadingService.mode$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => {
.subscribe((value) =>
{
this.mode = value;
});
this._fuseLoadingService.progress$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => {
.subscribe((value) =>
{
this.progress = value;
});
this._fuseLoadingService.show$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((value) => {
.subscribe((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.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 { fuseAnimations } from '@fuse/animations';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
@ -7,7 +8,9 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
templateUrl : './masonry.component.html',
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations,
exportAs : 'fuseMasonry'
exportAs : 'fuseMasonry',
standalone : true,
imports : [NgTemplateOutlet],
})
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.module';

20
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 { IsActiveMatchOptions } from '@angular/router';
import { Subject, takeUntil } from 'rxjs';
import { MatIconModule } from '@angular/material/icon';
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 { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-horizontal-navigation-basic-item',
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
{
@ -26,7 +32,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService
private _fuseUtilsService: FuseUtilsService,
)
{
// Set the equivalent of {exact: false} as default for active match options.
@ -61,9 +67,9 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
// Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();
});

23
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 { MatMenu } from '@angular/material/menu';
import { Subject, takeUntil } from 'rxjs';
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
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 { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-horizontal-navigation-branch-item',
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
{
@ -30,7 +37,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -49,9 +56,9 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
// Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();
});

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

15
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 { Subject, takeUntil } from 'rxjs';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
import { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-horizontal-navigation-spacer-item',
templateUrl : './spacer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
standalone : true,
imports : [NgClass],
})
export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
{
@ -22,7 +25,7 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -41,9 +44,9 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
// Subscribe to onRefreshed on the navigation component
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
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 { ReplaySubject, Subject } from 'rxjs';
import { fuseAnimations } from '@fuse/animations';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
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 { 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({
selector : 'fuse-horizontal-navigation',
@ -12,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
animations : fuseAnimations,
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'fuseHorizontalNavigation'
exportAs : 'fuseHorizontalNavigation',
standalone : true,
imports : [NgFor, NgIf, FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationSpacerItemComponent],
})
export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
{
@ -28,7 +34,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
constructor(
private _changeDetectorRef: ChangeDetectorRef,
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
{
}

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

@ -1,9 +1,7 @@
import { Injectable } from '@angular/core';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@Injectable({
providedIn: 'root'
})
@Injectable({providedIn: 'root'})
export class FuseNavigationService
{
private _componentRegistry: Map<string, any> = new Map<string, any>();
@ -160,7 +158,7 @@ export class FuseNavigationService
getItemParent(
id: string,
navigation: FuseNavigationItem[],
parent: FuseNavigationItem[] | FuseNavigationItem
parent: FuseNavigationItem[] | FuseNavigationItem,
): FuseNavigationItem[] | FuseNavigationItem | null
{
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/vertical/vertical.component';
export * from '@fuse/components/navigation/navigation.module';
export * from '@fuse/components/navigation/navigation.service';
export * from '@fuse/components/navigation/navigation.types';

34
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 { filter, Subject, takeUntil } from 'rxjs';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { NgClass, NgFor, NgIf } from '@angular/common';
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 { 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({
selector : 'fuse-vertical-navigation-aside-item',
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
{
@ -34,7 +44,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _router: Router,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -70,10 +80,10 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
this._router.events
.pipe(
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll)
takeUntil(this._unsubscribeAll),
)
.subscribe((event: NavigationEnd) => {
.subscribe((event: NavigationEnd) =>
{
// Mark if active
this._markIfActive(event.urlAfterRedirects);
});
@ -83,9 +93,9 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
// Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();
});

21
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 { IsActiveMatchOptions } from '@angular/router';
import { Subject, takeUntil } from 'rxjs';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
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 { Subject, takeUntil } from 'rxjs';
@Component({
selector : 'fuse-vertical-navigation-basic-item',
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
{
@ -26,7 +31,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService
private _fuseUtilsService: FuseUtilsService,
)
{
// Set the equivalent of {exact: false} as default for active match options.
@ -61,9 +66,9 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
// Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();
});

43
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 { 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 { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
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({
selector : 'fuse-vertical-navigation-collapsable-item',
templateUrl : './collapsable.component.html',
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
{
@ -34,7 +43,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
constructor(
private _changeDetectorRef: ChangeDetectorRef,
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 */
return {
'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 */
}
@ -86,8 +95,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
// Listen for the onCollapsableItemCollapsed from the service
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((collapsedItem) => {
.subscribe((collapsedItem) =>
{
// Check if the collapsed item is null
if ( collapsedItem === null )
{
@ -106,8 +115,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
{
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((expandedItem) => {
.subscribe((expandedItem) =>
{
// Check if the expanded item is null
if ( expandedItem === null )
{
@ -141,10 +150,10 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
this._router.events
.pipe(
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 ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
{
@ -163,9 +172,9 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
// Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();
});

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

24
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 { Subject, takeUntil } from 'rxjs';
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
import { NgClass, NgFor, NgIf } from '@angular/common';
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 { 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({
selector : 'fuse-vertical-navigation-group-item',
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
{
@ -28,7 +36,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService
private _fuseNavigationService: FuseNavigationService,
)
{
}
@ -47,9 +55,9 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
// Subscribe to onRefreshed on the navigation component
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
takeUntil(this._unsubscribeAll)
).subscribe(() => {
takeUntil(this._unsubscribeAll),
).subscribe(() =>
{
// Mark for check
this._changeDetectorRef.markForCheck();
});

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

86
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 { DOCUMENT } from '@angular/common';
import { NavigationEnd, Router } from '@angular/router';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
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 { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
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 { 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({
selector : 'fuse-vertical-navigation',
@ -18,7 +24,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
animations : fuseAnimations,
encapsulation : ViewEncapsulation.None,
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
{
@ -72,13 +80,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
private _router: Router,
private _scrollStrategyOptions: ScrollStrategyOptions,
private _fuseNavigationService: FuseNavigationService,
private _fuseUtilsService: FuseUtilsService
private _fuseUtilsService: FuseUtilsService,
)
{
this._handleAsideOverlayClick = (): void => {
this._handleAsideOverlayClick = (): void =>
{
this.closeAside();
};
this._handleOverlayClick = (): void => {
this._handleOverlayClick = (): void =>
{
this.close();
};
}
@ -102,7 +112,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
'fuse-vertical-navigation-mode-side' : this.mode === 'side',
'fuse-vertical-navigation-opened' : this.opened,
'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 */
}
@ -113,7 +123,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
@HostBinding('style') get styleList(): any
{
return {
'visibility': this.opened ? 'visible' : 'hidden'
'visibility': this.opened ? 'visible' : 'hidden',
};
}
@ -142,16 +152,17 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._fuseScrollbarDirectivesSubscription =
merge(
this.onCollapsableItemCollapsed,
this.onCollapsableItemExpanded
this.onCollapsableItemExpanded,
)
.pipe(
takeUntil(this._unsubscribeAll),
delay(250)
delay(250),
)
.subscribe(() => {
.subscribe(() =>
{
// Loop through the scrollbars and update them
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
{
fuseScrollbarDirective.update();
});
});
@ -253,7 +264,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Enable the animations after a delay
// The delay must be bigger than the current transition-duration
// to make sure nothing will be animated while the mode changing
setTimeout(() => {
setTimeout(() =>
{
this._enableAnimations();
}, 500);
}
@ -308,10 +320,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
this._router.events
.pipe(
filter(event => event instanceof NavigationEnd),
takeUntil(this._unsubscribeAll)
takeUntil(this._unsubscribeAll),
)
.subscribe(() => {
.subscribe(() =>
{
// If the mode is 'over' and the navigation is opened...
if ( this.mode === 'over' && this.opened )
{
@ -339,8 +351,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// 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
// 'marginTop' to the navigation itself.
this._mutationObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
this._mutationObserver = new MutationObserver((mutations) =>
{
mutations.forEach((mutation) =>
{
const mutationTarget = mutation.target as HTMLElement;
if ( mutation.attributeName === 'class' )
{
@ -358,11 +372,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
});
this._mutationObserver.observe(this._document.documentElement, {
attributes : true,
attributeFilter: ['class']
attributeFilter: ['class'],
});
setTimeout(() => {
setTimeout(() =>
{
// Return if 'navigation content' element does not exist
if ( !this._navigationContentEl )
{
@ -386,8 +400,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
else
{
// Go through all the scrollbar directives
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
{
// Skip if not enabled
if ( !fuseScrollbarDirective.isEnabled() )
{
@ -624,7 +638,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Create the enter animation and attach it to the player
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);
// Play the animation
@ -648,15 +662,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
// Create the leave animation and attach it to the player
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);
// Play the animation
this._player.play();
// Once the animation is done...
this._player.onDone(() => {
this._player.onDone(() =>
{
// If the overlay still exists...
if ( this._overlay )
{
@ -699,7 +713,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
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._asideOverlay);
// Play the animation
@ -725,15 +739,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
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._asideOverlay);
// Play the animation
this._player.play();
// Once the animation is done...
this._player.onDone(() => {
this._player.onDone(() =>
{
// If the aside overlay still exists...
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.module';

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

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

36
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 { Platform } from '@angular/cdk/platform';
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
import PerfectScrollbar from 'perfect-scrollbar';
import { merge } from 'lodash-es';
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { Router } from '@angular/router';
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
*/
@Directive({
selector: '[fuseScrollbar]',
exportAs: 'fuseScrollbar'
selector : '[fuseScrollbar]',
exportAs : 'fuseScrollbar',
standalone: true,
})
export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
{
@ -34,7 +35,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
constructor(
private _elementRef: ElementRef,
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
setTimeout(() => {
setTimeout(() =>
{
this._destroy();
});
setTimeout(() => {
setTimeout(() =>
{
this._init();
});
}
@ -120,10 +123,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
fromEvent(window, 'resize')
.pipe(
takeUntil(this._unsubscribeAll),
debounceTime(150)
debounceTime(150),
)
.subscribe(() => {
.subscribe(() =>
{
// Update the PerfectScrollbar
this.update();
});
@ -203,14 +206,14 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
{
scrollbarPosition = new ScrollbarPosition(
this._ps.reach.x || 0,
this._ps.reach.y || 0
this._ps.reach.y || 0,
);
}
else
{
scrollbarPosition = new ScrollbarPosition(
this._elementRef.nativeElement.scrollLeft,
this._elementRef.nativeElement.scrollTop
this._elementRef.nativeElement.scrollTop,
);
}
@ -388,7 +391,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
const cosParameter = (oldValue - value) / 2;
const step = (newTimestamp: number): void => {
const step = (newTimestamp: number): void =>
{
scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
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
{
}

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

@ -1,51 +0,0 @@
import { NgModule, Optional, SkipSelf } from '@angular/core';
import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { FuseConfirmationModule } from '@fuse/services/confirmation';
import { FuseLoadingModule } from '@fuse/services/loading';
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
import { FusePlatformModule } from '@fuse/services/platform/platform.module';
import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
@NgModule({
imports : [
FuseConfirmationModule,
FuseLoadingModule,
FuseMediaWatcherModule,
FusePlatformModule,
FuseSplashScreenModule,
FuseUtilsModule
],
providers: [
{
// Disable 'theme' sanity check
provide : MATERIAL_SANITY_CHECKS,
useValue: {
doctype: true,
theme : false,
version: true
}
},
{
// Use the 'fill' appearance on Angular Material form fields by default
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: {
appearance: 'fill'
}
}
]
})
export class FuseModule
{
/**
* Constructor
*/
constructor(@Optional() @SkipSelf() parentModule?: FuseModule)
{
if ( parentModule )
{
throw new Error('FuseModule has already been loaded. Import this module in the AppModule only!');
}
}
}

108
src/@fuse/fuse.provider.ts Normal file
View File

@ -0,0 +1,108 @@
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { APP_INITIALIZER, ENVIRONMENT_INITIALIZER, EnvironmentProviders, importProvidersFrom, inject, Provider } from '@angular/core';
import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
import { MatDialogModule } from '@angular/material/dialog';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { FUSE_MOCK_API_DEFAULT_DELAY, mockApiInterceptor } from '@fuse/lib/mock-api';
import { FuseConfig } from '@fuse/services/config';
import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
import { FuseConfirmationService } from '@fuse/services/confirmation';
import { fuseLoadingInterceptor, FuseLoadingService } from '@fuse/services/loading';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FusePlatformService } from '@fuse/services/platform';
import { FuseSplashScreenService } from '@fuse/services/splash-screen';
import { FuseUtilsService } from '@fuse/services/utils';
export type FuseProviderConfig = {
mockApi?: {
delay?: number;
services?: any[];
},
fuse?: FuseConfig
}
/**
* Fuse provider
*/
export const provideFuse = (config: FuseProviderConfig): Array<Provider | EnvironmentProviders> =>
{
// Base providers
const providers: Array<Provider | EnvironmentProviders> = [
{
// Disable 'theme' sanity check
provide : MATERIAL_SANITY_CHECKS,
useValue: {
doctype: true,
theme : false,
version: true,
},
},
{
// Use the 'fill' appearance on Angular Material form fields by default
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: {
appearance: 'fill',
},
},
{
provide : FUSE_MOCK_API_DEFAULT_DELAY,
useValue: config?.mockApi?.delay ?? 0,
},
{
provide : FUSE_CONFIG,
useValue: config?.fuse ?? {},
},
importProvidersFrom(MatDialogModule),
{
provide : ENVIRONMENT_INITIALIZER,
useValue: () => inject(FuseConfirmationService),
multi : true,
},
provideHttpClient(withInterceptors([fuseLoadingInterceptor])),
{
provide : ENVIRONMENT_INITIALIZER,
useValue: () => inject(FuseLoadingService),
multi : true,
},
{
provide : ENVIRONMENT_INITIALIZER,
useValue: () => inject(FuseMediaWatcherService),
multi : true,
},
{
provide : ENVIRONMENT_INITIALIZER,
useValue: () => inject(FusePlatformService),
multi : true,
},
{
provide : ENVIRONMENT_INITIALIZER,
useValue: () => inject(FuseSplashScreenService),
multi : true,
},
{
provide : ENVIRONMENT_INITIALIZER,
useValue: () => inject(FuseUtilsService),
multi : true,
},
];
// Mock Api services
if ( config?.mockApi?.services )
{
providers.push(
provideHttpClient(withInterceptors([mockApiInterceptor])),
{
provide : APP_INITIALIZER,
deps : [...config.mockApi.services],
useFactory: () => (): any => null,
multi : true,
},
);
}
// Return the providers
return providers;
};

2
src/@fuse/index.ts
View File

@ -1 +1 @@
export * from './fuse.module';
export * from './fuse.provider';

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

@ -1,96 +1,77 @@
import { Inject, Injectable } from '@angular/core';
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { delay, Observable, of, switchMap, throwError } from 'rxjs';
import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest, HttpResponse } from '@angular/common/http';
import { inject } from '@angular/core';
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 { delay, Observable, of, switchMap, throwError } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FuseMockApiInterceptor implements HttpInterceptor
export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
{
/**
* Constructor
*/
constructor(
@Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number,
private _fuseMockApiService: FuseMockApiService
)
const defaultDelay = inject(FUSE_MOCK_API_DEFAULT_DELAY);
const fuseMockApiService = inject(FuseMockApiService);
// Try to get the request handler
const {
handler,
urlParams,
} = fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
// Pass through if the request handler does not exist
if ( !handler )
{
return next(request);
}
/**
* Intercept
*
* @param request
* @param next
*/
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
{
// Try to get the request handler
const {
handler,
urlParams
} = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
// Set the intercepted request on the handler
handler.request = request;
// Pass through if the request handler does not exist
if ( !handler )
// Set the url params on the handler
handler.urlParams = urlParams;
// Subscribe to the response function observable
return handler.response.pipe(
delay(handler.delay ?? defaultDelay ?? 0),
switchMap((response) =>
{
return next.handle(request);
}
// Set the intercepted request on the handler
handler.request = request;
// Set the url params on the handler
handler.urlParams = urlParams;
// Subscribe to the response function observable
return handler.response.pipe(
delay(handler.delay ?? this._defaultDelay ?? 0),
switchMap((response) => {
// If there is no response data,
// throw an error response
if ( !response )
{
response = new HttpErrorResponse({
error : 'NOT FOUND',
status : 404,
statusText: 'NOT FOUND'
});
return throwError(response);
}
// Parse the response data
const data = {
status: response[0],
body : response[1]
};
// If the status code is in between 200 and 300,
// return a success response
if ( data.status >= 200 && data.status < 300 )
{
response = new HttpResponse({
body : data.body,
status : data.status,
statusText: 'OK'
});
return of(response);
}
// For other status codes,
// throw an error response
// If there is no response data,
// throw an error response
if ( !response )
{
response = new HttpErrorResponse({
error : data.body.error,
status : data.status,
statusText: 'ERROR'
error : 'NOT FOUND',
status : 404,
statusText: 'NOT FOUND',
});
return throwError(response);
}));
}
}
}
// Parse the response data
const data = {
status: response[0],
body : response[1],
};
// If the status code is in between 200 and 300,
// return a success response
if ( data.status >= 200 && data.status < 300 )
{
response = new HttpResponse({
body : data.body,
status : data.status,
statusText: 'OK',
});
return of(response);
}
// For other status codes,
// throw an error response
response = new HttpErrorResponse({
error : data.body.error,
status : data.status,
statusText: 'ERROR',
});
return throwError(response);
}));
};

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

@ -1,42 +0,0 @@
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor';
@NgModule({
providers: [
{
provide : HTTP_INTERCEPTORS,
useClass: FuseMockApiInterceptor,
multi : true
}
]
})
export class FuseMockApiModule
{
/**
* FuseMockApi module default configuration.
*
* @param mockApiServices - Array of services that register mock API handlers
* @param config - Configuration options
* @param config.delay - Default delay value in milliseconds to apply all responses
*/
static forRoot(mockApiServices: any[], config?: { delay?: number }): ModuleWithProviders<FuseMockApiModule>
{
return {
ngModule : FuseMockApiModule,
providers: [
{
provide : APP_INITIALIZER,
deps : [...mockApiServices],
useFactory: () => (): any => null,
multi : true
},
{
provide : FUSE_MOCK_API_DEFAULT_DELAY,
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 { Observable, of, take, throwError } from 'rxjs';
import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
import { Observable, of, take, throwError } from 'rxjs';
export class FuseMockApiHandler
{
@ -17,7 +17,7 @@ export class FuseMockApiHandler
*/
constructor(
public url: string,
public delay?: number
public delay?: number,
)
{
}
@ -55,7 +55,7 @@ export class FuseMockApiHandler
// Execute the reply callback
const replyResult = this._reply({
request : this.request,
urlParams: this.urlParams
urlParams: this.urlParams,
});
// If the result of the reply callback is an observable...

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

@ -1,11 +1,9 @@
import { Injectable } from '@angular/core';
import { compact, fromPairs } from 'lodash-es';
import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler';
import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
import { compact, fromPairs } from 'lodash-es';
@Injectable({
providedIn: 'root'
})
@Injectable({providedIn: 'root'})
export class FuseMockApiService
{
private _handlers: { [key: string]: Map<string, FuseMockApiHandler> } = {
@ -16,7 +14,7 @@ export class FuseMockApiService
'put' : new Map<string, FuseMockApiHandler>(),
'head' : new Map<string, FuseMockApiHandler>(),
'jsonp' : new Map<string, FuseMockApiHandler>(),
'options': new Map<string, FuseMockApiHandler>()
'options': new Map<string, FuseMockApiHandler>(),
};
/**
@ -42,7 +40,7 @@ export class FuseMockApiService
// Prepare the return object
const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
handler : undefined,
urlParams: {}
urlParams: {},
};
// Split the url
@ -52,8 +50,8 @@ export class FuseMockApiService
const handlers = this._handlers[method.toLowerCase()];
// Iterate through the handlers
handlers.forEach((handler, handlerUrl) => {
handlers.forEach((handler, handlerUrl) =>
{
// Skip if there is already a matching handler
if ( matchingHandler.handler )
{
@ -80,7 +78,7 @@ export class FuseMockApiService
// Extract and assign the parameters
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();
}
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;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);

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

@ -1,5 +1,5 @@
export * from '@fuse/lib/mock-api/mock-api.constants';
export * from '@fuse/lib/mock-api/mock-api.module';
export * from '@fuse/lib/mock-api/mock-api.interceptor';
export * from '@fuse/lib/mock-api/mock-api.service';
export * from '@fuse/lib/mock-api/mock-api.types';
export * from '@fuse/lib/mock-api/mock-api.utils';

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
{
}

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

@ -4,8 +4,9 @@ import { Pipe, PipeTransform } from '@angular/core';
* Finds an object from given source using the given key - value pairs
*/
@Pipe({
name: 'fuseFindByKey',
pure: false
name : 'fuseFindByKey',
pure : false,
standalone: true,
})
export class FuseFindByKeyPipe implements PipeTransform
{

2
src/@fuse/services/config/config.constants.ts
View File

@ -1,3 +1,3 @@
import { InjectionToken } from '@angular/core';
export const FUSE_APP_CONFIG = new InjectionToken<any>('FUSE_APP_CONFIG');
export const FUSE_CONFIG = new InjectionToken<any>('FUSE_APP_CONFIG');

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

@ -1,32 +0,0 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
import { FuseConfigService } from '@fuse/services/config/config.service';
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
@NgModule()
export class FuseConfigModule
{
/**
* Constructor
*/
constructor(private _fuseConfigService: FuseConfigService)
{
}
/**
* forRoot method for setting user configuration
*
* @param config
*/
static forRoot(config: any): ModuleWithProviders<FuseConfigModule>
{
return {
ngModule : FuseConfigModule,
providers: [
{
provide : FUSE_APP_CONFIG,
useValue: config
}
]
};
}
}

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

@ -1,11 +1,9 @@
import { Inject, Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
import { merge } from 'lodash-es';
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
@Injectable({providedIn: 'root'})
export class FuseConfigService
{
private _config: BehaviorSubject<any>;
@ -13,7 +11,7 @@ export class FuseConfigService
/**
* Constructor
*/
constructor(@Inject(FUSE_APP_CONFIG) config: any)
constructor(@Inject(FUSE_CONFIG) config: any)
{
// Private
this._config = new BehaviorSubject(config);

18
src/@fuse/services/config/config.types.ts Normal file
View File

@ -0,0 +1,18 @@
// Types
export type Scheme = 'auto' | 'dark' | 'light';
export type Screens = { [key: string]: string };
export type Theme = 'theme-default' | string;
export type Themes = { id: string; name: string }[];
/**
* AppConfig interface. Update this interface to strictly type your config
* object.
*/
export interface FuseConfig
{
layout: string;
scheme: Scheme;
screens: Screens;
theme: Theme;
themes: Themes;
}

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

@ -1,2 +1,2 @@
export * from '@fuse/services/config/config.module';
export * from '@fuse/services/config/config.service';
export * from '@fuse/services/config/config.types';

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

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

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

@ -1,40 +1,39 @@
import { Injectable } from '@angular/core';
import { inject, Injectable } from '@angular/core';
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 { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
import { merge } from 'lodash-es';
@Injectable()
@Injectable({providedIn: 'root'})
export class FuseConfirmationService
{
private _matDialog: MatDialog = inject(MatDialog);
private _defaultConfig: FuseConfirmationConfig = {
title : 'Confirm action',
message : 'Are you sure you want to confirm this action?',
icon : {
show : true,
name : 'heroicons_outline:exclamation',
color: 'warn'
name : 'heroicons_outline:exclamation-triangle',
color: 'warn',
},
actions : {
confirm: {
show : true,
label: 'Confirm',
color: 'warn'
color: 'warn',
},
cancel : {
show : true,
label: 'Cancel'
}
label: 'Cancel',
},
},
dismissible: false
dismissible: false,
};
/**
* Constructor
*/
constructor(
private _matDialog: MatDialog
)
constructor()
{
}
@ -52,7 +51,7 @@ export class FuseConfirmationService
autoFocus : false,
disableClose: !userConfig.dismissible,
data : userConfig,
panelClass : 'fuse-confirmation-dialog-panel'
panelClass : 'fuse-confirmation-dialog-panel',
});
}
}

2
src/@fuse/services/confirmation/dialog/dialog.component.html
View File

@ -8,7 +8,7 @@
[matDialogClose]="undefined">
<mat-icon
class="text-secondary"
[svgIcon]="'heroicons_outline:x'"></mat-icon>
[svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
</button>
</div>
</ng-container>

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 { 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';
@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
{

1
src/@fuse/services/confirmation/public-api.ts
View File

@ -1,3 +1,2 @@
export * from '@fuse/services/confirmation/confirmation.module';
export * from '@fuse/services/confirmation/confirmation.service';
export * from '@fuse/services/confirmation/confirmation.types';

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

@ -1,48 +1,33 @@
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { finalize, Observable } from 'rxjs';
import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
import { inject } from '@angular/core';
import { FuseLoadingService } from '@fuse/services/loading/loading.service';
import { finalize, Observable, take } from 'rxjs';
@Injectable()
export class FuseLoadingInterceptor implements HttpInterceptor
export const fuseLoadingInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
{
handleRequestsAutomatically: boolean;
const fuseLoadingService = inject(FuseLoadingService);
let handleRequestsAutomatically = false;
/**
* Constructor
*/
constructor(
private _fuseLoadingService: FuseLoadingService
)
{
// Subscribe to the auto
this._fuseLoadingService.auto$
.subscribe((value) => {
this.handleRequestsAutomatically = value;
});
}
/**
* Intercept
*
* @param req
* @param next
*/
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
{
// If the Auto mode is turned off, do nothing
if ( !this.handleRequestsAutomatically )
fuseLoadingService.auto$
.pipe(take(1))
.subscribe((value) =>
{
return next.handle(req);
}
handleRequestsAutomatically = value;
});
// Set the loading status to true
this._fuseLoadingService._setLoadingStatus(true, req.url);
return next.handle(req).pipe(
finalize(() => {
// Set the status to false if there are any errors or the request is completed
this._fuseLoadingService._setLoadingStatus(false, req.url);
}));
// If the Auto mode is turned off, do nothing
if ( !handleRequestsAutomatically )
{
return next(req);
}
}
// Set the loading status to true
fuseLoadingService._setLoadingStatus(true, req.url);
return next(req).pipe(
finalize(() =>
{
// Set the status to false if there are any errors or the request is completed
fuseLoadingService._setLoadingStatus(false, req.url);
}));
};

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

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

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

@ -1,10 +1,8 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
@Injectable({providedIn: 'root'})
export class FuseLoadingService
{
private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);

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

@ -1,2 +1,2 @@
export * from '@fuse/services/loading/loading.service';
export * from '@fuse/services/loading/loading.module';
export * from '@fuse/services/loading/loading.interceptor';

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

@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher/media-watcher.service';
@NgModule({
providers: [
FuseMediaWatcherService
]
})
export class FuseMediaWatcherModule
{
/**
* Constructor
*/
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
{
}
}

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

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

1
src/@fuse/services/media-watcher/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/services/media-watcher/media-watcher.module';
export * from '@fuse/services/media-watcher/media-watcher.service';

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

@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { FusePlatformService } from '@fuse/services/platform/platform.service';
@NgModule({
providers: [
FusePlatformService
]
})
export class FusePlatformModule
{
/**
* Constructor
*/
constructor(private _fusePlatformService: FusePlatformService)
{
}
}

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

@ -1,9 +1,7 @@
import { Injectable } from '@angular/core';
import { Platform } from '@angular/cdk/platform';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
@Injectable({providedIn: 'root'})
export class FusePlatformService
{
osName = 'os-unknown';

1
src/@fuse/services/splash-screen/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/services/splash-screen/splash-screen.module';
export * from '@fuse/services/splash-screen/splash-screen.service';

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

@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { FuseSplashScreenService } from '@fuse/services/splash-screen/splash-screen.service';
@NgModule({
providers: [
FuseSplashScreenService
]
})
export class FuseSplashScreenModule
{
/**
* Constructor
*/
constructor(private _fuseSplashScreenService: FuseSplashScreenService)
{
}
}

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

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

1
src/@fuse/services/utils/public-api.ts
View File

@ -1,2 +1 @@
export * from '@fuse/services/utils/utils.module';
export * from '@fuse/services/utils/utils.service';

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

@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
@NgModule({
providers: [
FuseUtilsService
]
})
export class FuseUtilsModule
{
/**
* Constructor
*/
constructor(private _fuseUtilsService: FuseUtilsService)
{
}
}

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

@ -1,9 +1,7 @@
import { Injectable } from '@angular/core';
import { IsActiveMatchOptions } from '@angular/router';
@Injectable({
providedIn: 'root'
})
@Injectable({providedIn: 'root'})
export class FuseUtilsService
{
/**
@ -26,7 +24,7 @@ export class FuseUtilsService
paths : 'exact',
fragment : 'ignored',
matrixParams: 'ignored',
queryParams : 'exact'
queryParams : 'exact',
};
}
@ -39,7 +37,7 @@ export class FuseUtilsService
paths : 'subset',
fragment : '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(
({
matchUtilities,
theme
theme,
}) =>
{
matchUtilities(
@ -17,12 +17,12 @@ module.exports = plugin(
lineHeight: value,
[`svg`] : {
width : value,
height: value
}
})
height: value,
},
}),
},
{
values: theme('iconSize')
values: theme('iconSize'),
});
},
{
@ -43,8 +43,8 @@ module.exports = plugin(
18 : '4.5rem',
20 : '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,
{
...palette,
DEFAULT: palette['DEFAULT'] || palette[500]
}
]
DEFAULT: palette['DEFAULT'] || palette[500],
},
],
));
};
@ -38,7 +38,7 @@ const normalizeTheme = (theme) =>
const theming = plugin.withOptions((options) => ({
addComponents,
e,
theme
theme,
}) =>
{
/**
@ -48,7 +48,7 @@ const theming = plugin.withOptions((options) => ({
*/
const userThemes = _.fromPairs(_.map(options.themes, (theme, 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) => [
themeName,
normalizeTheme(theme)
normalizeTheme(theme),
]));
/**
@ -73,12 +73,12 @@ const theming = plugin.withOptions((options) => ({
...palette,
contrast: _.fromPairs(_.map(generateContrasts(palette), (color, 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,
{
selector: `".theme-${themeName}"`,
...theme
}
...theme,
},
]));
/* 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) => [
[
e(paletteName),
palette
palette,
],
[
`on-${e(paletteName)}`,
_.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(',')]])))
]))
_.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(',')]]))),
])),
);
/**
@ -185,8 +185,8 @@ const theming = plugin.withOptions((options) => ({
/* 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(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) => [
[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 : {
customProps: {
@ -223,7 +223,7 @@ const theming = plugin.withOptions((options) => ({
'bg-default' : colors.slate[100],
'bg-dialog' : '#FFFFFF',
'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(),
'bg-status-bar': colors.slate[300]
'bg-status-bar': colors.slate[300],
},
dark : {
'bg-app-bar' : colors.slate[900],
@ -231,8 +231,8 @@ const theming = plugin.withOptions((options) => ({
'bg-default' : colors.slate[900],
'bg-dialog' : colors.slate[800],
'bg-hover' : 'rgba(255, 255, 255, 0.05)',
'bg-status-bar': colors.slate[900]
}
'bg-status-bar': colors.slate[900],
},
},
foreground: {
light: {
@ -243,7 +243,7 @@ const theming = plugin.withOptions((options) => ({
'border' : colors.slate[200],
'divider' : colors.slate[200],
'icon' : colors.slate[500],
'mat-icon' : colors.slate[500]
'mat-icon' : colors.slate[500],
},
dark : {
'text-default' : '#FFFFFF',
@ -253,14 +253,14 @@ const theming = plugin.withOptions((options) => ({
'border' : chroma(colors.slate[100]).alpha(0.12).css(),
'divider' : chroma(colors.slate[100]).alpha(0.12).css(),
'icon' : colors.slate[400],
'mat-icon' : colors.slate[400]
}
}
}
}
}
'mat-icon' : colors.slate[400],
},
},
},
},
},
};
}
},
);
module.exports = theming;

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

@ -1,7 +1,7 @@
const plugin = require('tailwindcss/plugin');
module.exports = plugin(({
addComponents
addComponents,
}) =>
{
/*
@ -13,55 +13,55 @@ module.exports = plugin(({
{
'.mat-icon' : {
'--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' : {
'--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' : {
'--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' : {
'--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' : {
'--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' : {
color: 'var(--fuse-divider) !important'
color: 'var(--fuse-divider) !important',
},
'.bg-card' : {
'--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' : {
'--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' : {
'--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': {
'--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' : {
'--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(
{
'.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
return _.fromPairs(_.map(palette, ((color, 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,
700: null,
800: null,
900: null
900: null,
};
// If a single color is provided,
@ -58,14 +58,14 @@ const generatePalette = (config) =>
colors.unshift(
chroma.scale(['white', palette[500]])
.domain([0, 1])
.mode("lrgb")
.colors(50)[1]
.mode('lrgb')
.colors(50)[1],
);
colors.push(
chroma.scale(['black', palette[500]])
.domain([0, 1])
.mode("lrgb")
.colors(10)[1]
.mode('lrgb')
.colors(10)[1],
);
// Prepare the domains array
@ -74,7 +74,7 @@ const generatePalette = (config) =>
...Object.entries(palette)
.filter(([key, value]) => value)
.map(([key]) => parseInt(key) / 1000),
1
1,
];
// Generate the color scale
@ -93,7 +93,7 @@ const generatePalette = (config) =>
600: scale(0.6).hex(),
700: scale(0.7).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 = '';
if ( typeof chunk === "object" && !Array.isArray(chunk) )
if ( typeof chunk === 'object' && !Array.isArray(chunk) )
{
_.mapKeys(chunk, (value, key) =>
{
scss += key + ': ';
if ( typeof value === "object" )
if ( typeof value === 'object' )
{
if ( Array.isArray(value) )
{

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

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

2
src/@fuse/version/fuse-version.ts
View File

@ -1,3 +1,3 @@
import { Version } from '@fuse/version/version';
export const FUSE_VERSION = new Version('17.2.0').full;
export const FUSE_VERSION = new Version('18.0.0').full;

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