mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2024-10-30 01:08:47 +00:00
First pass through updating standalone components.
This commit is contained in:
parent
715ab6a3aa
commit
b2cb20634e
3606
package-lock.json
generated
3606
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
71
package.json
71
package.json
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "fuse-angular",
|
"name": "fuse-angular",
|
||||||
"version": "17.2.0",
|
"version": "18.0.0",
|
||||||
"description": "Fuse - Angular Admin Template and Starter Project",
|
"description": "Fuse - Angular Admin Template and Starter Project",
|
||||||
"author": "https://themeforest.net/user/srcn",
|
"author": "https://themeforest.net/user/srcn",
|
||||||
"license": "https://themeforest.net/licenses/standard",
|
"license": "https://themeforest.net/licenses/standard",
|
||||||
|
@ -13,55 +13,54 @@
|
||||||
"test": "ng test"
|
"test": "ng test"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "15.1.1",
|
"@angular/animations": "15.2.9",
|
||||||
"@angular/cdk": "15.1.1",
|
"@angular/cdk": "15.2.9",
|
||||||
"@angular/common": "15.1.1",
|
"@angular/common": "15.2.9",
|
||||||
"@angular/compiler": "15.1.1",
|
"@angular/compiler": "15.2.9",
|
||||||
"@angular/core": "15.1.1",
|
"@angular/core": "15.2.9",
|
||||||
"@angular/forms": "15.1.1",
|
"@angular/forms": "15.2.9",
|
||||||
"@angular/material": "15.1.1",
|
"@angular/material": "15.2.9",
|
||||||
"@angular/material-luxon-adapter": "15.1.1",
|
"@angular/material-luxon-adapter": "15.2.9",
|
||||||
"@angular/platform-browser": "15.1.1",
|
"@angular/platform-browser": "15.2.9",
|
||||||
"@angular/platform-browser-dynamic": "15.1.1",
|
"@angular/platform-browser-dynamic": "15.2.9",
|
||||||
"@angular/router": "15.1.1",
|
"@angular/router": "15.2.9",
|
||||||
"@ngneat/transloco": "4.2.2",
|
"@ngneat/transloco": "4.2.6",
|
||||||
"apexcharts": "3.36.3",
|
"apexcharts": "3.40.0",
|
||||||
"crypto-js": "3.3.0",
|
"crypto-js": "3.3.0",
|
||||||
"highlight.js": "11.7.0",
|
"highlight.js": "11.8.0",
|
||||||
"lodash-es": "4.17.21",
|
"lodash-es": "4.17.21",
|
||||||
"luxon": "3.2.1",
|
"luxon": "3.3.0",
|
||||||
"ng-apexcharts": "1.7.4",
|
"ng-apexcharts": "1.7.6",
|
||||||
"ngx-quill": "20.0.1",
|
"ngx-quill": "21.0.0",
|
||||||
"perfect-scrollbar": "1.5.5",
|
"perfect-scrollbar": "1.5.5",
|
||||||
"quill": "1.3.7",
|
"quill": "1.3.7",
|
||||||
"rxjs": "7.8.0",
|
"rxjs": "7.8.1",
|
||||||
"tslib": "2.4.1",
|
"tslib": "2.5.0",
|
||||||
"zone.js": "0.12.0"
|
"zone.js": "0.13.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "15.1.2",
|
"@angular-devkit/build-angular": "15.2.8",
|
||||||
"@angular/cli": "15.1.2",
|
"@angular/cli": "15.2.8",
|
||||||
"@angular/compiler-cli": "15.1.1",
|
"@angular/compiler-cli": "15.2.9",
|
||||||
"@tailwindcss/line-clamp": "0.4.2",
|
|
||||||
"@tailwindcss/typography": "0.5.9",
|
"@tailwindcss/typography": "0.5.9",
|
||||||
"@types/chroma-js": "2.1.4",
|
"@types/chroma-js": "2.4.0",
|
||||||
"@types/crypto-js": "3.1.47",
|
"@types/crypto-js": "3.1.47",
|
||||||
"@types/highlight.js": "10.1.0",
|
"@types/highlight.js": "10.1.0",
|
||||||
"@types/jasmine": "4.3.1",
|
"@types/jasmine": "4.3.1",
|
||||||
"@types/lodash": "4.14.191",
|
"@types/lodash": "4.14.194",
|
||||||
"@types/lodash-es": "4.17.6",
|
"@types/lodash-es": "4.17.7",
|
||||||
"@types/luxon": "3.2.0",
|
"@types/luxon": "3.3.0",
|
||||||
"autoprefixer": "10.4.13",
|
"autoprefixer": "10.4.14",
|
||||||
"chroma-js": "2.4.2",
|
"chroma-js": "2.4.2",
|
||||||
"jasmine-core": "4.5.0",
|
"jasmine-core": "4.6.0",
|
||||||
"karma": "6.4.1",
|
"karma": "6.4.2",
|
||||||
"karma-chrome-launcher": "3.1.1",
|
"karma-chrome-launcher": "3.2.0",
|
||||||
"karma-coverage": "2.2.0",
|
"karma-coverage": "2.2.0",
|
||||||
"karma-jasmine": "5.1.0",
|
"karma-jasmine": "5.1.0",
|
||||||
"karma-jasmine-html-reporter": "2.0.0",
|
"karma-jasmine-html-reporter": "2.0.0",
|
||||||
"lodash": "4.17.21",
|
"lodash": "4.17.21",
|
||||||
"postcss": "8.4.21",
|
"postcss": "8.4.23",
|
||||||
"tailwindcss": "3.2.4",
|
"tailwindcss": "3.3.2",
|
||||||
"typescript": "4.9.4"
|
"typescript": "4.9.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,12 +8,12 @@ const expandCollapse = trigger('expandCollapse',
|
||||||
[
|
[
|
||||||
state('void, collapsed',
|
state('void, collapsed',
|
||||||
style({
|
style({
|
||||||
height: '0'
|
height: '0',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*, expanded',
|
state('*, expanded',
|
||||||
style('*')
|
style('*'),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -24,11 +24,11 @@ const expandCollapse = trigger('expandCollapse',
|
||||||
animate('{{timings}}'),
|
animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
export { expandCollapse };
|
export { expandCollapse };
|
||||||
|
|
|
@ -8,14 +8,14 @@ const fadeIn = trigger('fadeIn',
|
||||||
[
|
[
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity: 0
|
opacity: 0,
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity: 1
|
opacity: 1,
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -25,11 +25,11 @@ const fadeIn = trigger('fadeIn',
|
||||||
transition('void => *', animate('{{timings}}'),
|
transition('void => *', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -40,15 +40,15 @@ const fadeInTop = trigger('fadeInTop',
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity : 0,
|
opacity : 0,
|
||||||
transform: 'translate3d(0, -100%, 0)'
|
transform: 'translate3d(0, -100%, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity : 1,
|
opacity : 1,
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -58,11 +58,11 @@ const fadeInTop = trigger('fadeInTop',
|
||||||
transition('void => *', animate('{{timings}}'),
|
transition('void => *', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -73,15 +73,15 @@ const fadeInBottom = trigger('fadeInBottom',
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity : 0,
|
opacity : 0,
|
||||||
transform: 'translate3d(0, 100%, 0)'
|
transform: 'translate3d(0, 100%, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity : 1,
|
opacity : 1,
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -91,11 +91,11 @@ const fadeInBottom = trigger('fadeInBottom',
|
||||||
transition('void => *', animate('{{timings}}'),
|
transition('void => *', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -106,15 +106,15 @@ const fadeInLeft = trigger('fadeInLeft',
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity : 0,
|
opacity : 0,
|
||||||
transform: 'translate3d(-100%, 0, 0)'
|
transform: 'translate3d(-100%, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity : 1,
|
opacity : 1,
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -124,11 +124,11 @@ const fadeInLeft = trigger('fadeInLeft',
|
||||||
transition('void => *', animate('{{timings}}'),
|
transition('void => *', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -139,15 +139,15 @@ const fadeInRight = trigger('fadeInRight',
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity : 0,
|
opacity : 0,
|
||||||
transform: 'translate3d(100%, 0, 0)'
|
transform: 'translate3d(100%, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity : 1,
|
opacity : 1,
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -157,11 +157,11 @@ const fadeInRight = trigger('fadeInRight',
|
||||||
transition('void => *', animate('{{timings}}'),
|
transition('void => *', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -171,14 +171,14 @@ const fadeOut = trigger('fadeOut',
|
||||||
[
|
[
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity: 1
|
opacity: 1,
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity: 0
|
opacity: 0,
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -188,11 +188,11 @@ const fadeOut = trigger('fadeOut',
|
||||||
transition('* => void', animate('{{timings}}'),
|
transition('* => void', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -203,15 +203,15 @@ const fadeOutTop = trigger('fadeOutTop',
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity : 1,
|
opacity : 1,
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity : 0,
|
opacity : 0,
|
||||||
transform: 'translate3d(0, -100%, 0)'
|
transform: 'translate3d(0, -100%, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -221,11 +221,11 @@ const fadeOutTop = trigger('fadeOutTop',
|
||||||
transition('* => void', animate('{{timings}}'),
|
transition('* => void', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -236,15 +236,15 @@ const fadeOutBottom = trigger('fadeOutBottom',
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity : 1,
|
opacity : 1,
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity : 0,
|
opacity : 0,
|
||||||
transform: 'translate3d(0, 100%, 0)'
|
transform: 'translate3d(0, 100%, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -254,11 +254,11 @@ const fadeOutBottom = trigger('fadeOutBottom',
|
||||||
transition('* => void', animate('{{timings}}'),
|
transition('* => void', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -269,15 +269,15 @@ const fadeOutLeft = trigger('fadeOutLeft',
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity : 1,
|
opacity : 1,
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity : 0,
|
opacity : 0,
|
||||||
transform: 'translate3d(-100%, 0, 0)'
|
transform: 'translate3d(-100%, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -287,11 +287,11 @@ const fadeOutLeft = trigger('fadeOutLeft',
|
||||||
transition('* => void', animate('{{timings}}'),
|
transition('* => void', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -302,15 +302,15 @@ const fadeOutRight = trigger('fadeOutRight',
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity : 1,
|
opacity : 1,
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity : 0,
|
opacity : 0,
|
||||||
transform: 'translate3d(100%, 0, 0)'
|
transform: 'translate3d(100%, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -320,11 +320,11 @@ const fadeOutRight = trigger('fadeOutRight',
|
||||||
transition('* => void', animate('{{timings}}'),
|
transition('* => void', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };
|
export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };
|
||||||
|
|
|
@ -11,5 +11,5 @@ export const fuseAnimations = [
|
||||||
shake,
|
shake,
|
||||||
slideInTop, slideInBottom, slideInLeft, slideInRight,
|
slideInTop, slideInBottom, slideInLeft, slideInRight,
|
||||||
slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
|
slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
|
||||||
zoomIn, zoomOut
|
zoomIn, zoomOut,
|
||||||
];
|
];
|
||||||
|
|
|
@ -16,58 +16,58 @@ const shake = trigger('shake',
|
||||||
keyframes([
|
keyframes([
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 0, 0)',
|
transform: 'translate3d(0, 0, 0)',
|
||||||
offset : 0
|
offset : 0,
|
||||||
}),
|
}),
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(-10px, 0, 0)',
|
transform: 'translate3d(-10px, 0, 0)',
|
||||||
offset : 0.1
|
offset : 0.1,
|
||||||
}),
|
}),
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(10px, 0, 0)',
|
transform: 'translate3d(10px, 0, 0)',
|
||||||
offset : 0.2
|
offset : 0.2,
|
||||||
}),
|
}),
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(-10px, 0, 0)',
|
transform: 'translate3d(-10px, 0, 0)',
|
||||||
offset : 0.3
|
offset : 0.3,
|
||||||
}),
|
}),
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(10px, 0, 0)',
|
transform: 'translate3d(10px, 0, 0)',
|
||||||
offset : 0.4
|
offset : 0.4,
|
||||||
}),
|
}),
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(-10px, 0, 0)',
|
transform: 'translate3d(-10px, 0, 0)',
|
||||||
offset : 0.5
|
offset : 0.5,
|
||||||
}),
|
}),
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(10px, 0, 0)',
|
transform: 'translate3d(10px, 0, 0)',
|
||||||
offset : 0.6
|
offset : 0.6,
|
||||||
}),
|
}),
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(-10px, 0, 0)',
|
transform: 'translate3d(-10px, 0, 0)',
|
||||||
offset : 0.7
|
offset : 0.7,
|
||||||
}),
|
}),
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(10px, 0, 0)',
|
transform: 'translate3d(10px, 0, 0)',
|
||||||
offset : 0.8
|
offset : 0.8,
|
||||||
}),
|
}),
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(-10px, 0, 0)',
|
transform: 'translate3d(-10px, 0, 0)',
|
||||||
offset : 0.9
|
offset : 0.9,
|
||||||
}),
|
}),
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 0, 0)',
|
transform: 'translate3d(0, 0, 0)',
|
||||||
offset : 1
|
offset : 1,
|
||||||
})
|
}),
|
||||||
])
|
]),
|
||||||
)
|
),
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)'
|
timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
export { shake };
|
export { shake };
|
||||||
|
|
|
@ -8,14 +8,14 @@ const slideInTop = trigger('slideInTop',
|
||||||
[
|
[
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, -100%, 0)'
|
transform: 'translate3d(0, -100%, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -25,11 +25,11 @@ const slideInTop = trigger('slideInTop',
|
||||||
transition('void => *', animate('{{timings}}'),
|
transition('void => *', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -39,14 +39,14 @@ const slideInBottom = trigger('slideInBottom',
|
||||||
[
|
[
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 100%, 0)'
|
transform: 'translate3d(0, 100%, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -56,11 +56,11 @@ const slideInBottom = trigger('slideInBottom',
|
||||||
transition('void => *', animate('{{timings}}'),
|
transition('void => *', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -70,14 +70,14 @@ const slideInLeft = trigger('slideInLeft',
|
||||||
[
|
[
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(-100%, 0, 0)'
|
transform: 'translate3d(-100%, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -87,11 +87,11 @@ const slideInLeft = trigger('slideInLeft',
|
||||||
transition('void => *', animate('{{timings}}'),
|
transition('void => *', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -101,14 +101,14 @@ const slideInRight = trigger('slideInRight',
|
||||||
[
|
[
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(100%, 0, 0)'
|
transform: 'translate3d(100%, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -118,11 +118,11 @@ const slideInRight = trigger('slideInRight',
|
||||||
transition('void => *', animate('{{timings}}'),
|
transition('void => *', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -132,14 +132,14 @@ const slideOutTop = trigger('slideOutTop',
|
||||||
[
|
[
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, -100%, 0)'
|
transform: 'translate3d(0, -100%, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -149,11 +149,11 @@ const slideOutTop = trigger('slideOutTop',
|
||||||
transition('* => void', animate('{{timings}}'),
|
transition('* => void', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -163,14 +163,14 @@ const slideOutBottom = trigger('slideOutBottom',
|
||||||
[
|
[
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 100%, 0)'
|
transform: 'translate3d(0, 100%, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -180,11 +180,11 @@ const slideOutBottom = trigger('slideOutBottom',
|
||||||
transition('* => void', animate('{{timings}}'),
|
transition('* => void', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -194,14 +194,14 @@ const slideOutLeft = trigger('slideOutLeft',
|
||||||
[
|
[
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(-100%, 0, 0)'
|
transform: 'translate3d(-100%, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -211,11 +211,11 @@ const slideOutLeft = trigger('slideOutLeft',
|
||||||
transition('* => void', animate('{{timings}}'),
|
transition('* => void', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -225,14 +225,14 @@ const slideOutRight = trigger('slideOutRight',
|
||||||
[
|
[
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(0, 0, 0)'
|
transform: 'translate3d(0, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
transform: 'translate3d(100%, 0, 0)'
|
transform: 'translate3d(100%, 0, 0)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -242,11 +242,11 @@ const slideOutRight = trigger('slideOutRight',
|
||||||
transition('* => void', animate('{{timings}}'),
|
transition('* => void', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };
|
export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };
|
||||||
|
|
|
@ -10,15 +10,15 @@ const zoomIn = trigger('zoomIn',
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity : 0,
|
opacity : 0,
|
||||||
transform: 'scale(0.5)'
|
transform: 'scale(0.5)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity : 1,
|
opacity : 1,
|
||||||
transform: 'scale(1)'
|
transform: 'scale(1)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -28,11 +28,11 @@ const zoomIn = trigger('zoomIn',
|
||||||
transition('void => *', animate('{{timings}}'),
|
transition('void => *', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
@ -44,15 +44,15 @@ const zoomOut = trigger('zoomOut',
|
||||||
state('*',
|
state('*',
|
||||||
style({
|
style({
|
||||||
opacity : 1,
|
opacity : 1,
|
||||||
transform: 'scale(1)'
|
transform: 'scale(1)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
state('void',
|
state('void',
|
||||||
style({
|
style({
|
||||||
opacity : 0,
|
opacity : 0,
|
||||||
transform: 'scale(0.5)'
|
transform: 'scale(0.5)',
|
||||||
})
|
}),
|
||||||
),
|
),
|
||||||
|
|
||||||
// Prevent the transition if the state is false
|
// Prevent the transition if the state is false
|
||||||
|
@ -62,11 +62,11 @@ const zoomOut = trigger('zoomOut',
|
||||||
transition('* => void', animate('{{timings}}'),
|
transition('* => void', animate('{{timings}}'),
|
||||||
{
|
{
|
||||||
params: {
|
params: {
|
||||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
)
|
),
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
export { zoomIn, zoomOut };
|
export { zoomIn, zoomOut };
|
||||||
|
|
|
@ -1,10 +1,13 @@
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
|
||||||
import { filter, Subject, takeUntil } from 'rxjs';
|
|
||||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||||
|
import { NgIf } from '@angular/common';
|
||||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { fuseAnimations } from '@fuse/animations';
|
import { fuseAnimations } from '@fuse/animations';
|
||||||
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
|
|
||||||
import { FuseAlertService } from '@fuse/components/alert/alert.service';
|
import { FuseAlertService } from '@fuse/components/alert/alert.service';
|
||||||
|
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
|
||||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||||
|
import { filter, Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-alert',
|
selector : 'fuse-alert',
|
||||||
|
@ -13,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||||
encapsulation : ViewEncapsulation.None,
|
encapsulation : ViewEncapsulation.None,
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
animations : fuseAnimations,
|
animations : fuseAnimations,
|
||||||
exportAs : 'fuseAlert'
|
exportAs : 'fuseAlert',
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgIf, MatIconModule, MatButtonModule],
|
||||||
})
|
})
|
||||||
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -39,7 +44,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _fuseAlertService: FuseAlertService,
|
private _fuseAlertService: FuseAlertService,
|
||||||
private _fuseUtilsService: FuseUtilsService
|
private _fuseUtilsService: FuseUtilsService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -69,7 +74,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
||||||
'fuse-alert-type-info' : this.type === 'info',
|
'fuse-alert-type-info' : this.type === 'info',
|
||||||
'fuse-alert-type-success' : this.type === 'success',
|
'fuse-alert-type-success' : this.type === 'success',
|
||||||
'fuse-alert-type-warning' : this.type === 'warning',
|
'fuse-alert-type-warning' : this.type === 'warning',
|
||||||
'fuse-alert-type-error' : this.type === 'error'
|
'fuse-alert-type-error' : this.type === 'error',
|
||||||
};
|
};
|
||||||
/* eslint-enable @typescript-eslint/naming-convention */
|
/* eslint-enable @typescript-eslint/naming-convention */
|
||||||
}
|
}
|
||||||
|
@ -119,9 +124,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
||||||
this._fuseAlertService.onDismiss
|
this._fuseAlertService.onDismiss
|
||||||
.pipe(
|
.pipe(
|
||||||
filter(name => this.name === name),
|
filter(name => this.name === name),
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
)
|
)
|
||||||
.subscribe(() => {
|
.subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Dismiss the alert
|
// Dismiss the alert
|
||||||
this.dismiss();
|
this.dismiss();
|
||||||
|
@ -131,9 +137,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
||||||
this._fuseAlertService.onShow
|
this._fuseAlertService.onShow
|
||||||
.pipe(
|
.pipe(
|
||||||
filter(name => this.name === name),
|
filter(name => this.name === name),
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
)
|
)
|
||||||
.subscribe(() => {
|
.subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Show the alert
|
// Show the alert
|
||||||
this.show();
|
this.show();
|
||||||
|
|
|
@ -1,22 +0,0 @@
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { CommonModule } from '@angular/common';
|
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
|
||||||
import { FuseAlertComponent } from '@fuse/components/alert/alert.component';
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
declarations: [
|
|
||||||
FuseAlertComponent
|
|
||||||
],
|
|
||||||
imports : [
|
|
||||||
CommonModule,
|
|
||||||
MatButtonModule,
|
|
||||||
MatIconModule
|
|
||||||
],
|
|
||||||
exports : [
|
|
||||||
FuseAlertComponent
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class FuseAlertModule
|
|
||||||
{
|
|
||||||
}
|
|
|
@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
|
||||||
import { Observable, ReplaySubject } from 'rxjs';
|
import { Observable, ReplaySubject } from 'rxjs';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class FuseAlertService
|
export class FuseAlertService
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
export * from '@fuse/components/alert/alert.component';
|
export * from '@fuse/components/alert/alert.component';
|
||||||
export * from '@fuse/components/alert/alert.module';
|
|
||||||
export * from '@fuse/components/alert/alert.service';
|
export * from '@fuse/components/alert/alert.service';
|
||||||
export * from '@fuse/components/alert/alert.types';
|
export * from '@fuse/components/alert/alert.types';
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
|
||||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||||
|
import { NgIf } from '@angular/common';
|
||||||
|
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||||
import { fuseAnimations } from '@fuse/animations';
|
import { fuseAnimations } from '@fuse/animations';
|
||||||
import { FuseCardFace } from '@fuse/components/card/card.types';
|
import { FuseCardFace } from '@fuse/components/card/card.types';
|
||||||
|
|
||||||
|
@ -9,7 +10,9 @@ import { FuseCardFace } from '@fuse/components/card/card.types';
|
||||||
styleUrls : ['./card.component.scss'],
|
styleUrls : ['./card.component.scss'],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
animations : fuseAnimations,
|
animations : fuseAnimations,
|
||||||
exportAs : 'fuseCard'
|
exportAs : 'fuseCard',
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgIf],
|
||||||
})
|
})
|
||||||
export class FuseCardComponent implements OnChanges
|
export class FuseCardComponent implements OnChanges
|
||||||
{
|
{
|
||||||
|
@ -43,7 +46,7 @@ export class FuseCardComponent implements OnChanges
|
||||||
'fuse-card-expanded' : this.expanded,
|
'fuse-card-expanded' : this.expanded,
|
||||||
'fuse-card-face-back' : this.flippable && this.face === 'back',
|
'fuse-card-face-back' : this.flippable && this.face === 'back',
|
||||||
'fuse-card-face-front': this.flippable && this.face === 'front',
|
'fuse-card-face-front': this.flippable && this.face === 'front',
|
||||||
'fuse-card-flippable' : this.flippable
|
'fuse-card-flippable' : this.flippable,
|
||||||
};
|
};
|
||||||
/* eslint-enable @typescript-eslint/naming-convention */
|
/* eslint-enable @typescript-eslint/naming-convention */
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,2 +1 @@
|
||||||
export * from '@fuse/components/card/card.component';
|
export * from '@fuse/components/card/card.component';
|
||||||
export * from '@fuse/components/card/card.module';
|
|
||||||
|
|
|
@ -1,16 +1,17 @@
|
||||||
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
|
||||||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||||
import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
|
|
||||||
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
|
|
||||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
|
||||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||||
|
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
|
||||||
|
import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
|
||||||
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-drawer',
|
selector : 'fuse-drawer',
|
||||||
templateUrl : './drawer.component.html',
|
templateUrl : './drawer.component.html',
|
||||||
styleUrls : ['./drawer.component.scss'],
|
styleUrls : ['./drawer.component.scss'],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
exportAs : 'fuseDrawer'
|
exportAs : 'fuseDrawer',
|
||||||
|
standalone : true,
|
||||||
})
|
})
|
||||||
export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -45,10 +46,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
private _elementRef: ElementRef,
|
private _elementRef: ElementRef,
|
||||||
private _renderer2: Renderer2,
|
private _renderer2: Renderer2,
|
||||||
private _fuseDrawerService: FuseDrawerService,
|
private _fuseDrawerService: FuseDrawerService,
|
||||||
private _fuseUtilsService: FuseUtilsService
|
private _fuseUtilsService: FuseUtilsService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
this._handleOverlayClick = (): void => {
|
this._handleOverlayClick = (): void =>
|
||||||
|
{
|
||||||
this.close();
|
this.close();
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -69,7 +71,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
'fuse-drawer-hover' : this._hovered,
|
'fuse-drawer-hover' : this._hovered,
|
||||||
[`fuse-drawer-mode-${this.mode}`] : true,
|
[`fuse-drawer-mode-${this.mode}`] : true,
|
||||||
'fuse-drawer-opened' : this.opened,
|
'fuse-drawer-opened' : this.opened,
|
||||||
[`fuse-drawer-position-${this.position}`]: true
|
[`fuse-drawer-position-${this.position}`]: true,
|
||||||
};
|
};
|
||||||
/* eslint-enable @typescript-eslint/naming-convention */
|
/* eslint-enable @typescript-eslint/naming-convention */
|
||||||
}
|
}
|
||||||
|
@ -80,7 +82,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
@HostBinding('style') get styleList(): any
|
@HostBinding('style') get styleList(): any
|
||||||
{
|
{
|
||||||
return {
|
return {
|
||||||
'visibility': this.opened ? 'visible' : 'hidden'
|
'visibility': this.opened ? 'visible' : 'hidden',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -173,7 +175,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
// Enable the animations after a delay
|
// Enable the animations after a delay
|
||||||
// The delay must be bigger than the current transition-duration
|
// The delay must be bigger than the current transition-duration
|
||||||
// to make sure nothing will be animated while the mode is changing
|
// to make sure nothing will be animated while the mode is changing
|
||||||
setTimeout(() => {
|
setTimeout(() =>
|
||||||
|
{
|
||||||
this._enableAnimations();
|
this._enableAnimations();
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
@ -345,7 +348,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
// Create enter animation and attach it to the player
|
// Create enter animation and attach it to the player
|
||||||
this._player = this._animationBuilder.build([
|
this._player = this._animationBuilder.build([
|
||||||
style({opacity: 0}),
|
style({opacity: 0}),
|
||||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
|
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
|
||||||
]).create(this._overlay);
|
]).create(this._overlay);
|
||||||
|
|
||||||
// Play the animation
|
// Play the animation
|
||||||
|
@ -369,14 +372,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||||
|
|
||||||
// Create the leave animation and attach it to the player
|
// Create the leave animation and attach it to the player
|
||||||
this._player = this._animationBuilder.build([
|
this._player = this._animationBuilder.build([
|
||||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
|
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
|
||||||
]).create(this._overlay);
|
]).create(this._overlay);
|
||||||
|
|
||||||
// Play the animation
|
// Play the animation
|
||||||
this._player.play();
|
this._player.play();
|
||||||
|
|
||||||
// Once the animation is done...
|
// Once the animation is done...
|
||||||
this._player.onDone(() => {
|
this._player.onDone(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// If the overlay still exists...
|
// If the overlay still exists...
|
||||||
if ( this._overlay )
|
if ( this._overlay )
|
||||||
|
|
|
@ -1,18 +0,0 @@
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { CommonModule } from '@angular/common';
|
|
||||||
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
declarations: [
|
|
||||||
FuseDrawerComponent
|
|
||||||
],
|
|
||||||
imports : [
|
|
||||||
CommonModule
|
|
||||||
],
|
|
||||||
exports : [
|
|
||||||
FuseDrawerComponent
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class FuseDrawerModule
|
|
||||||
{
|
|
||||||
}
|
|
|
@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
|
||||||
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
|
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class FuseDrawerService
|
export class FuseDrawerService
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
export * from '@fuse/components/drawer/drawer.component';
|
export * from '@fuse/components/drawer/drawer.component';
|
||||||
export * from '@fuse/components/drawer/drawer.module';
|
|
||||||
export * from '@fuse/components/drawer/drawer.service';
|
export * from '@fuse/components/drawer/drawer.service';
|
||||||
export * from '@fuse/components/drawer/drawer.types';
|
export * from '@fuse/components/drawer/drawer.types';
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
|
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
|
||||||
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
|
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
|
||||||
import { DOCUMENT } from '@angular/common';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||||
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
|
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -7,7 +10,9 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
|
||||||
templateUrl : './fullscreen.component.html',
|
templateUrl : './fullscreen.component.html',
|
||||||
encapsulation : ViewEncapsulation.None,
|
encapsulation : ViewEncapsulation.None,
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
exportAs : 'fuseFullscreen'
|
exportAs : 'fuseFullscreen',
|
||||||
|
standalone : true,
|
||||||
|
imports : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
|
||||||
})
|
})
|
||||||
export class FuseFullscreenComponent implements OnInit
|
export class FuseFullscreenComponent implements OnInit
|
||||||
{
|
{
|
||||||
|
|
|
@ -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,3 +1,2 @@
|
||||||
export * from '@fuse/components/fullscreen/fullscreen.component';
|
export * from '@fuse/components/fullscreen/fullscreen.component';
|
||||||
export * from '@fuse/components/fullscreen/fullscreen.module';
|
|
||||||
export * from '@fuse/components/fullscreen/fullscreen.types';
|
export * from '@fuse/components/fullscreen/fullscreen.types';
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { NgClass } from '@angular/common';
|
||||||
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EmbeddedViewRef, Input, OnChanges, Renderer2, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EmbeddedViewRef, Input, OnChanges, Renderer2, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||||
import { DomSanitizer } from '@angular/platform-browser';
|
import { DomSanitizer } from '@angular/platform-browser';
|
||||||
import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
|
import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
|
||||||
|
@ -8,7 +9,9 @@ import { FuseHighlightService } from '@fuse/components/highlight/highlight.servi
|
||||||
styleUrls : ['./highlight.component.scss'],
|
styleUrls : ['./highlight.component.scss'],
|
||||||
encapsulation : ViewEncapsulation.None,
|
encapsulation : ViewEncapsulation.None,
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
exportAs : 'fuseHighlight'
|
exportAs : 'fuseHighlight',
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgClass],
|
||||||
})
|
})
|
||||||
export class FuseHighlightComponent implements OnChanges, AfterViewInit
|
export class FuseHighlightComponent implements OnChanges, AfterViewInit
|
||||||
{
|
{
|
||||||
|
@ -28,7 +31,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
|
||||||
private _elementRef: ElementRef,
|
private _elementRef: ElementRef,
|
||||||
private _renderer2: Renderer2,
|
private _renderer2: Renderer2,
|
||||||
private _fuseHighlightService: FuseHighlightService,
|
private _fuseHighlightService: FuseHighlightService,
|
||||||
private _viewContainerRef: ViewContainerRef
|
private _viewContainerRef: ViewContainerRef,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -123,7 +126,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
|
||||||
// Render and insert the template
|
// Render and insert the template
|
||||||
this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
|
this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
|
||||||
highlightedCode: this.highlightedCode,
|
highlightedCode: this.highlightedCode,
|
||||||
lang : this.lang
|
lang : this.lang,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Detect the changes
|
// Detect the changes
|
||||||
|
|
|
@ -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
|
|
||||||
{
|
|
||||||
}
|
|
|
@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
|
||||||
import hljs from 'highlight.js';
|
import hljs from 'highlight.js';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class FuseHighlightService
|
export class FuseHighlightService
|
||||||
{
|
{
|
||||||
|
@ -61,19 +61,20 @@ export class FuseHighlightService
|
||||||
|
|
||||||
// Iterate through the lines
|
// Iterate through the lines
|
||||||
lines.filter(line => line.length)
|
lines.filter(line => line.length)
|
||||||
.forEach((line, index) => {
|
.forEach((line, index) =>
|
||||||
|
{
|
||||||
|
|
||||||
// Always get the indentation of the first line so we can
|
// Always get the indentation of the first line so we can
|
||||||
// have something to compare with
|
// have something to compare with
|
||||||
if ( index === 0 )
|
if ( index === 0 )
|
||||||
{
|
{
|
||||||
indentation = line.search(/\S|$/);
|
indentation = line.search(/\S|$/);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Look at all the remaining lines to figure out the smallest indentation.
|
// Look at all the remaining lines to figure out the smallest indentation.
|
||||||
indentation = Math.min(line.search(/\S|$/), indentation);
|
indentation = Math.min(line.search(/\S|$/), indentation);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Iterate through the lines one more time, remove the extra
|
// Iterate through the lines one more time, remove the extra
|
||||||
// indentation, join them together and return it
|
// indentation, join them together and return it
|
||||||
|
|
|
@ -1,3 +1,2 @@
|
||||||
export * from '@fuse/components/highlight/highlight.component';
|
export * from '@fuse/components/highlight/highlight.component';
|
||||||
export * from '@fuse/components/highlight/highlight.module';
|
|
||||||
export * from '@fuse/components/highlight/highlight.service';
|
export * from '@fuse/components/highlight/highlight.service';
|
||||||
|
|
|
@ -1,14 +1,18 @@
|
||||||
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
|
||||||
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||||
import { Subject, takeUntil } from 'rxjs';
|
import { NgIf } from '@angular/common';
|
||||||
|
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||||
import { FuseLoadingService } from '@fuse/services/loading';
|
import { FuseLoadingService } from '@fuse/services/loading';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-loading-bar',
|
selector : 'fuse-loading-bar',
|
||||||
templateUrl : './loading-bar.component.html',
|
templateUrl : './loading-bar.component.html',
|
||||||
styleUrls : ['./loading-bar.component.scss'],
|
styleUrls : ['./loading-bar.component.scss'],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
exportAs : 'fuseLoadingBar'
|
exportAs : 'fuseLoadingBar',
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgIf, MatProgressBarModule],
|
||||||
})
|
})
|
||||||
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
|
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -52,19 +56,22 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
|
||||||
// Subscribe to the service
|
// Subscribe to the service
|
||||||
this._fuseLoadingService.mode$
|
this._fuseLoadingService.mode$
|
||||||
.pipe(takeUntil(this._unsubscribeAll))
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
.subscribe((value) => {
|
.subscribe((value) =>
|
||||||
|
{
|
||||||
this.mode = value;
|
this.mode = value;
|
||||||
});
|
});
|
||||||
|
|
||||||
this._fuseLoadingService.progress$
|
this._fuseLoadingService.progress$
|
||||||
.pipe(takeUntil(this._unsubscribeAll))
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
.subscribe((value) => {
|
.subscribe((value) =>
|
||||||
|
{
|
||||||
this.progress = value;
|
this.progress = value;
|
||||||
});
|
});
|
||||||
|
|
||||||
this._fuseLoadingService.show$
|
this._fuseLoadingService.show$
|
||||||
.pipe(takeUntil(this._unsubscribeAll))
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
.subscribe((value) => {
|
.subscribe((value) =>
|
||||||
|
{
|
||||||
this.show = value;
|
this.show = value;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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,2 +1 @@
|
||||||
export * from '@fuse/components/loading-bar/loading-bar.component';
|
export * from '@fuse/components/loading-bar/loading-bar.component';
|
||||||
export * from '@fuse/components/loading-bar/loading-bar.module';
|
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { NgTemplateOutlet } from '@angular/common';
|
||||||
import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
|
import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
|
||||||
import { fuseAnimations } from '@fuse/animations';
|
import { fuseAnimations } from '@fuse/animations';
|
||||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||||
|
@ -7,7 +8,9 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||||
templateUrl : './masonry.component.html',
|
templateUrl : './masonry.component.html',
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
animations : fuseAnimations,
|
animations : fuseAnimations,
|
||||||
exportAs : 'fuseMasonry'
|
exportAs : 'fuseMasonry',
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgTemplateOutlet],
|
||||||
})
|
})
|
||||||
export class FuseMasonryComponent implements OnChanges, AfterViewInit
|
export class FuseMasonryComponent implements OnChanges, AfterViewInit
|
||||||
{
|
{
|
||||||
|
|
|
@ -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,2 +1 @@
|
||||||
export * from '@fuse/components/masonry/masonry.component';
|
export * from '@fuse/components/masonry/masonry.component';
|
||||||
export * from '@fuse/components/masonry/masonry.module';
|
|
||||||
|
|
|
@ -1,15 +1,21 @@
|
||||||
|
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
import { IsActiveMatchOptions } from '@angular/router';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { Subject, takeUntil } from 'rxjs';
|
import { MatMenuModule } from '@angular/material/menu';
|
||||||
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||||
|
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
|
||||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-horizontal-navigation-basic-item',
|
selector : 'fuse-horizontal-navigation-basic-item',
|
||||||
templateUrl : './basic.component.html',
|
templateUrl : './basic.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule],
|
||||||
})
|
})
|
||||||
export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
|
export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -26,7 +32,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _fuseNavigationService: FuseNavigationService,
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
private _fuseUtilsService: FuseUtilsService
|
private _fuseUtilsService: FuseUtilsService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
// Set the equivalent of {exact: false} as default for active match options.
|
// Set the equivalent of {exact: false} as default for active match options.
|
||||||
|
@ -61,8 +67,9 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
|
||||||
|
|
||||||
// Subscribe to onRefreshed on the navigation component
|
// Subscribe to onRefreshed on the navigation component
|
||||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark for check
|
// Mark for check
|
||||||
this._changeDetectorRef.markForCheck();
|
this._changeDetectorRef.markForCheck();
|
||||||
|
|
|
@ -1,15 +1,22 @@
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
|
||||||
import { BooleanInput } from '@angular/cdk/coercion';
|
import { BooleanInput } from '@angular/cdk/coercion';
|
||||||
import { MatMenu } from '@angular/material/menu';
|
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||||
import { Subject, takeUntil } from 'rxjs';
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { MatMenu, MatMenuModule } from '@angular/material/menu';
|
||||||
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||||
|
import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
|
||||||
|
import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
|
||||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-horizontal-navigation-branch-item',
|
selector : 'fuse-horizontal-navigation-branch-item',
|
||||||
templateUrl : './branch.component.html',
|
templateUrl : './branch.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgIf, NgClass, MatMenuModule, NgTemplateOutlet, NgFor, FuseHorizontalNavigationBasicItemComponent, forwardRef(() => FuseHorizontalNavigationBranchItemComponent), FuseHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule],
|
||||||
})
|
})
|
||||||
export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
|
export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -30,7 +37,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _fuseNavigationService: FuseNavigationService
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -49,8 +56,9 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
|
||||||
|
|
||||||
// Subscribe to onRefreshed on the navigation component
|
// Subscribe to onRefreshed on the navigation component
|
||||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark for check
|
// Mark for check
|
||||||
this._changeDetectorRef.markForCheck();
|
this._changeDetectorRef.markForCheck();
|
||||||
|
|
|
@ -1,13 +1,16 @@
|
||||||
|
import { NgClass } from '@angular/common';
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
import { Subject, takeUntil } from 'rxjs';
|
|
||||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-horizontal-navigation-divider-item',
|
selector : 'fuse-horizontal-navigation-divider-item',
|
||||||
templateUrl : './divider.component.html',
|
templateUrl : './divider.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgClass],
|
||||||
})
|
})
|
||||||
export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
|
export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -22,7 +25,7 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _fuseNavigationService: FuseNavigationService
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -41,8 +44,9 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
|
||||||
|
|
||||||
// Subscribe to onRefreshed on the navigation component
|
// Subscribe to onRefreshed on the navigation component
|
||||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark for check
|
// Mark for check
|
||||||
this._changeDetectorRef.markForCheck();
|
this._changeDetectorRef.markForCheck();
|
||||||
|
|
|
@ -1,13 +1,16 @@
|
||||||
|
import { NgClass } from '@angular/common';
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
import { Subject, takeUntil } from 'rxjs';
|
|
||||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-horizontal-navigation-spacer-item',
|
selector : 'fuse-horizontal-navigation-spacer-item',
|
||||||
templateUrl : './spacer.component.html',
|
templateUrl : './spacer.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgClass],
|
||||||
})
|
})
|
||||||
export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
|
export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -22,7 +25,7 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _fuseNavigationService: FuseNavigationService
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -41,8 +44,9 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
|
||||||
|
|
||||||
// Subscribe to onRefreshed on the navigation component
|
// Subscribe to onRefreshed on the navigation component
|
||||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark for check
|
// Mark for check
|
||||||
this._changeDetectorRef.markForCheck();
|
this._changeDetectorRef.markForCheck();
|
||||||
|
|
|
@ -1,9 +1,13 @@
|
||||||
|
import { NgFor, NgIf } from '@angular/common';
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||||
import { ReplaySubject, Subject } from 'rxjs';
|
|
||||||
import { fuseAnimations } from '@fuse/animations';
|
import { fuseAnimations } from '@fuse/animations';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||||
|
import { ReplaySubject, Subject } from 'rxjs';
|
||||||
|
import { FuseHorizontalNavigationBasicItemComponent } from './components/basic/basic.component';
|
||||||
|
import { FuseHorizontalNavigationBranchItemComponent } from './components/branch/branch.component';
|
||||||
|
import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-horizontal-navigation',
|
selector : 'fuse-horizontal-navigation',
|
||||||
|
@ -12,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||||
animations : fuseAnimations,
|
animations : fuseAnimations,
|
||||||
encapsulation : ViewEncapsulation.None,
|
encapsulation : ViewEncapsulation.None,
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
exportAs : 'fuseHorizontalNavigation'
|
exportAs : 'fuseHorizontalNavigation',
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgFor, NgIf, FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationSpacerItemComponent],
|
||||||
})
|
})
|
||||||
export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
|
export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -28,7 +34,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _fuseNavigationService: FuseNavigationService,
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
private _fuseUtilsService: FuseUtilsService
|
private _fuseUtilsService: FuseUtilsService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
|
||||||
{
|
|
||||||
}
|
|
|
@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class FuseNavigationService
|
export class FuseNavigationService
|
||||||
{
|
{
|
||||||
|
@ -160,7 +160,7 @@ export class FuseNavigationService
|
||||||
getItemParent(
|
getItemParent(
|
||||||
id: string,
|
id: string,
|
||||||
navigation: FuseNavigationItem[],
|
navigation: FuseNavigationItem[],
|
||||||
parent: FuseNavigationItem[] | FuseNavigationItem
|
parent: FuseNavigationItem[] | FuseNavigationItem,
|
||||||
): FuseNavigationItem[] | FuseNavigationItem | null
|
): FuseNavigationItem[] | FuseNavigationItem | null
|
||||||
{
|
{
|
||||||
for ( const item of navigation )
|
for ( const item of navigation )
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
export * from '@fuse/components/navigation/horizontal/horizontal.component';
|
export * from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||||
export * from '@fuse/components/navigation/vertical/vertical.component';
|
export * from '@fuse/components/navigation/vertical/vertical.component';
|
||||||
export * from '@fuse/components/navigation/navigation.module';
|
|
||||||
export * from '@fuse/components/navigation/navigation.service';
|
export * from '@fuse/components/navigation/navigation.service';
|
||||||
export * from '@fuse/components/navigation/navigation.types';
|
export * from '@fuse/components/navigation/navigation.types';
|
||||||
|
|
|
@ -1,15 +1,25 @@
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
|
||||||
import { NavigationEnd, Router } from '@angular/router';
|
|
||||||
import { BooleanInput } from '@angular/cdk/coercion';
|
import { BooleanInput } from '@angular/cdk/coercion';
|
||||||
import { filter, Subject, takeUntil } from 'rxjs';
|
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||||
|
import { NavigationEnd, Router } from '@angular/router';
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
|
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
|
||||||
|
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
|
||||||
|
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
|
||||||
|
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
|
||||||
|
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||||
|
import { filter, Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-vertical-navigation-aside-item',
|
selector : 'fuse-vertical-navigation-aside-item',
|
||||||
templateUrl : './aside.component.html',
|
templateUrl : './aside.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
|
||||||
})
|
})
|
||||||
export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy
|
export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -34,7 +44,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _router: Router,
|
private _router: Router,
|
||||||
private _fuseNavigationService: FuseNavigationService
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -70,9 +80,10 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
|
||||||
this._router.events
|
this._router.events
|
||||||
.pipe(
|
.pipe(
|
||||||
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
|
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
)
|
)
|
||||||
.subscribe((event: NavigationEnd) => {
|
.subscribe((event: NavigationEnd) =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark if active
|
// Mark if active
|
||||||
this._markIfActive(event.urlAfterRedirects);
|
this._markIfActive(event.urlAfterRedirects);
|
||||||
|
@ -83,8 +94,9 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
|
||||||
|
|
||||||
// Subscribe to onRefreshed on the navigation component
|
// Subscribe to onRefreshed on the navigation component
|
||||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark for check
|
// Mark for check
|
||||||
this._changeDetectorRef.markForCheck();
|
this._changeDetectorRef.markForCheck();
|
||||||
|
|
|
@ -1,15 +1,20 @@
|
||||||
|
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
import { IsActiveMatchOptions } from '@angular/router';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { Subject, takeUntil } from 'rxjs';
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-vertical-navigation-basic-item',
|
selector : 'fuse-vertical-navigation-basic-item',
|
||||||
templateUrl : './basic.component.html',
|
templateUrl : './basic.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule],
|
||||||
})
|
})
|
||||||
export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy
|
export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -26,7 +31,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _fuseNavigationService: FuseNavigationService,
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
private _fuseUtilsService: FuseUtilsService
|
private _fuseUtilsService: FuseUtilsService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
// Set the equivalent of {exact: false} as default for active match options.
|
// Set the equivalent of {exact: false} as default for active match options.
|
||||||
|
@ -61,8 +66,9 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
|
||||||
|
|
||||||
// Subscribe to onRefreshed on the navigation component
|
// Subscribe to onRefreshed on the navigation component
|
||||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark for check
|
// Mark for check
|
||||||
this._changeDetectorRef.markForCheck();
|
this._changeDetectorRef.markForCheck();
|
||||||
|
|
|
@ -1,17 +1,26 @@
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
|
|
||||||
import { NavigationEnd, Router } from '@angular/router';
|
|
||||||
import { BooleanInput } from '@angular/cdk/coercion';
|
import { BooleanInput } from '@angular/cdk/coercion';
|
||||||
import { filter, Subject, takeUntil } from 'rxjs';
|
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||||
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||||
|
import { NavigationEnd, Router } from '@angular/router';
|
||||||
import { fuseAnimations } from '@fuse/animations';
|
import { fuseAnimations } from '@fuse/animations';
|
||||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
|
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
|
||||||
|
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
|
||||||
|
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
|
||||||
|
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||||
|
import { filter, Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-vertical-navigation-collapsable-item',
|
selector : 'fuse-vertical-navigation-collapsable-item',
|
||||||
templateUrl : './collapsable.component.html',
|
templateUrl : './collapsable.component.html',
|
||||||
animations : fuseAnimations,
|
animations : fuseAnimations,
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, forwardRef(() => FuseVerticalNavigationCollapsableItemComponent), FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
|
||||||
})
|
})
|
||||||
export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy
|
export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -34,7 +43,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _router: Router,
|
private _router: Router,
|
||||||
private _fuseNavigationService: FuseNavigationService
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -51,7 +60,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
||||||
/* eslint-disable @typescript-eslint/naming-convention */
|
/* eslint-disable @typescript-eslint/naming-convention */
|
||||||
return {
|
return {
|
||||||
'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
|
'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
|
||||||
'fuse-vertical-navigation-item-expanded' : this.isExpanded
|
'fuse-vertical-navigation-item-expanded' : this.isExpanded,
|
||||||
};
|
};
|
||||||
/* eslint-enable @typescript-eslint/naming-convention */
|
/* eslint-enable @typescript-eslint/naming-convention */
|
||||||
}
|
}
|
||||||
|
@ -86,7 +95,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
||||||
// Listen for the onCollapsableItemCollapsed from the service
|
// Listen for the onCollapsableItemCollapsed from the service
|
||||||
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
|
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
|
||||||
.pipe(takeUntil(this._unsubscribeAll))
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
.subscribe((collapsedItem) => {
|
.subscribe((collapsedItem) =>
|
||||||
|
{
|
||||||
|
|
||||||
// Check if the collapsed item is null
|
// Check if the collapsed item is null
|
||||||
if ( collapsedItem === null )
|
if ( collapsedItem === null )
|
||||||
|
@ -106,7 +116,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
||||||
{
|
{
|
||||||
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
|
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
|
||||||
.pipe(takeUntil(this._unsubscribeAll))
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
.subscribe((expandedItem) => {
|
.subscribe((expandedItem) =>
|
||||||
|
{
|
||||||
|
|
||||||
// Check if the expanded item is null
|
// Check if the expanded item is null
|
||||||
if ( expandedItem === null )
|
if ( expandedItem === null )
|
||||||
|
@ -141,9 +152,10 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
||||||
this._router.events
|
this._router.events
|
||||||
.pipe(
|
.pipe(
|
||||||
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
|
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
)
|
)
|
||||||
.subscribe((event: NavigationEnd) => {
|
.subscribe((event: NavigationEnd) =>
|
||||||
|
{
|
||||||
|
|
||||||
// If the item has a children that has a matching url with the current url, expand...
|
// If the item has a children that has a matching url with the current url, expand...
|
||||||
if ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
|
if ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
|
||||||
|
@ -163,8 +175,9 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
||||||
|
|
||||||
// Subscribe to onRefreshed on the navigation component
|
// Subscribe to onRefreshed on the navigation component
|
||||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark for check
|
// Mark for check
|
||||||
this._changeDetectorRef.markForCheck();
|
this._changeDetectorRef.markForCheck();
|
||||||
|
|
|
@ -1,13 +1,16 @@
|
||||||
|
import { NgClass } from '@angular/common';
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
import { Subject, takeUntil } from 'rxjs';
|
|
||||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-vertical-navigation-divider-item',
|
selector : 'fuse-vertical-navigation-divider-item',
|
||||||
templateUrl : './divider.component.html',
|
templateUrl : './divider.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgClass],
|
||||||
})
|
})
|
||||||
export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
|
export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -22,7 +25,7 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _fuseNavigationService: FuseNavigationService
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -41,8 +44,9 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
|
||||||
|
|
||||||
// Subscribe to onRefreshed on the navigation component
|
// Subscribe to onRefreshed on the navigation component
|
||||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark for check
|
// Mark for check
|
||||||
this._changeDetectorRef.markForCheck();
|
this._changeDetectorRef.markForCheck();
|
||||||
|
|
|
@ -1,14 +1,22 @@
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
|
||||||
import { BooleanInput } from '@angular/cdk/coercion';
|
import { BooleanInput } from '@angular/cdk/coercion';
|
||||||
import { Subject, takeUntil } from 'rxjs';
|
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
|
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
|
||||||
|
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
|
||||||
|
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
|
||||||
|
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-vertical-navigation-group-item',
|
selector : 'fuse-vertical-navigation-group-item',
|
||||||
templateUrl : './group.component.html',
|
templateUrl : './group.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgClass, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, forwardRef(() => FuseVerticalNavigationGroupItemComponent), FuseVerticalNavigationSpacerItemComponent],
|
||||||
})
|
})
|
||||||
export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy
|
export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -28,7 +36,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _fuseNavigationService: FuseNavigationService
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -47,8 +55,9 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
|
||||||
|
|
||||||
// Subscribe to onRefreshed on the navigation component
|
// Subscribe to onRefreshed on the navigation component
|
||||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark for check
|
// Mark for check
|
||||||
this._changeDetectorRef.markForCheck();
|
this._changeDetectorRef.markForCheck();
|
||||||
|
|
|
@ -1,13 +1,16 @@
|
||||||
|
import { NgClass } from '@angular/common';
|
||||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
import { Subject, takeUntil } from 'rxjs';
|
|
||||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||||
|
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-vertical-navigation-spacer-item',
|
selector : 'fuse-vertical-navigation-spacer-item',
|
||||||
templateUrl : './spacer.component.html',
|
templateUrl : './spacer.component.html',
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgClass],
|
||||||
})
|
})
|
||||||
export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy
|
export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -22,7 +25,7 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _changeDetectorRef: ChangeDetectorRef,
|
private _changeDetectorRef: ChangeDetectorRef,
|
||||||
private _fuseNavigationService: FuseNavigationService
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -41,8 +44,9 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
|
||||||
|
|
||||||
// Subscribe to onRefreshed on the navigation component
|
// Subscribe to onRefreshed on the navigation component
|
||||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Mark for check
|
// Mark for check
|
||||||
this._changeDetectorRef.markForCheck();
|
this._changeDetectorRef.markForCheck();
|
||||||
|
|
|
@ -1,15 +1,21 @@
|
||||||
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
|
|
||||||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||||
import { DOCUMENT } from '@angular/common';
|
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||||
import { NavigationEnd, Router } from '@angular/router';
|
|
||||||
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
|
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
|
||||||
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
|
import { DOCUMENT, NgFor, NgIf } from '@angular/common';
|
||||||
|
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { NavigationEnd, Router } from '@angular/router';
|
||||||
import { fuseAnimations } from '@fuse/animations';
|
import { fuseAnimations } from '@fuse/animations';
|
||||||
import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
|
|
||||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||||
|
import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
|
||||||
|
import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
|
||||||
|
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
|
||||||
|
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
|
||||||
|
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
|
||||||
|
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
|
||||||
|
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||||
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
|
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
|
||||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-vertical-navigation',
|
selector : 'fuse-vertical-navigation',
|
||||||
|
@ -18,7 +24,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||||
animations : fuseAnimations,
|
animations : fuseAnimations,
|
||||||
encapsulation : ViewEncapsulation.None,
|
encapsulation : ViewEncapsulation.None,
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
exportAs : 'fuseVerticalNavigation'
|
exportAs : 'fuseVerticalNavigation',
|
||||||
|
standalone : true,
|
||||||
|
imports : [FuseScrollbarDirective, NgFor, NgIf, FuseVerticalNavigationAsideItemComponent, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
|
||||||
})
|
})
|
||||||
export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy
|
export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -72,13 +80,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
private _router: Router,
|
private _router: Router,
|
||||||
private _scrollStrategyOptions: ScrollStrategyOptions,
|
private _scrollStrategyOptions: ScrollStrategyOptions,
|
||||||
private _fuseNavigationService: FuseNavigationService,
|
private _fuseNavigationService: FuseNavigationService,
|
||||||
private _fuseUtilsService: FuseUtilsService
|
private _fuseUtilsService: FuseUtilsService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
this._handleAsideOverlayClick = (): void => {
|
this._handleAsideOverlayClick = (): void =>
|
||||||
|
{
|
||||||
this.closeAside();
|
this.closeAside();
|
||||||
};
|
};
|
||||||
this._handleOverlayClick = (): void => {
|
this._handleOverlayClick = (): void =>
|
||||||
|
{
|
||||||
this.close();
|
this.close();
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -102,7 +112,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
'fuse-vertical-navigation-mode-side' : this.mode === 'side',
|
'fuse-vertical-navigation-mode-side' : this.mode === 'side',
|
||||||
'fuse-vertical-navigation-opened' : this.opened,
|
'fuse-vertical-navigation-opened' : this.opened,
|
||||||
'fuse-vertical-navigation-position-left' : this.position === 'left',
|
'fuse-vertical-navigation-position-left' : this.position === 'left',
|
||||||
'fuse-vertical-navigation-position-right' : this.position === 'right'
|
'fuse-vertical-navigation-position-right' : this.position === 'right',
|
||||||
};
|
};
|
||||||
/* eslint-enable @typescript-eslint/naming-convention */
|
/* eslint-enable @typescript-eslint/naming-convention */
|
||||||
}
|
}
|
||||||
|
@ -113,7 +123,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
@HostBinding('style') get styleList(): any
|
@HostBinding('style') get styleList(): any
|
||||||
{
|
{
|
||||||
return {
|
return {
|
||||||
'visibility': this.opened ? 'visible' : 'hidden'
|
'visibility': this.opened ? 'visible' : 'hidden',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -142,16 +152,18 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
this._fuseScrollbarDirectivesSubscription =
|
this._fuseScrollbarDirectivesSubscription =
|
||||||
merge(
|
merge(
|
||||||
this.onCollapsableItemCollapsed,
|
this.onCollapsableItemCollapsed,
|
||||||
this.onCollapsableItemExpanded
|
this.onCollapsableItemExpanded,
|
||||||
)
|
)
|
||||||
.pipe(
|
.pipe(
|
||||||
takeUntil(this._unsubscribeAll),
|
takeUntil(this._unsubscribeAll),
|
||||||
delay(250)
|
delay(250),
|
||||||
)
|
)
|
||||||
.subscribe(() => {
|
.subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Loop through the scrollbars and update them
|
// Loop through the scrollbars and update them
|
||||||
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
|
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
|
||||||
|
{
|
||||||
fuseScrollbarDirective.update();
|
fuseScrollbarDirective.update();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -253,7 +265,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
// Enable the animations after a delay
|
// Enable the animations after a delay
|
||||||
// The delay must be bigger than the current transition-duration
|
// The delay must be bigger than the current transition-duration
|
||||||
// to make sure nothing will be animated while the mode changing
|
// to make sure nothing will be animated while the mode changing
|
||||||
setTimeout(() => {
|
setTimeout(() =>
|
||||||
|
{
|
||||||
this._enableAnimations();
|
this._enableAnimations();
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
@ -308,9 +321,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
this._router.events
|
this._router.events
|
||||||
.pipe(
|
.pipe(
|
||||||
filter(event => event instanceof NavigationEnd),
|
filter(event => event instanceof NavigationEnd),
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
)
|
)
|
||||||
.subscribe(() => {
|
.subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// If the mode is 'over' and the navigation is opened...
|
// If the mode is 'over' and the navigation is opened...
|
||||||
if ( this.mode === 'over' && this.opened )
|
if ( this.mode === 'over' && this.opened )
|
||||||
|
@ -339,8 +353,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
// adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
|
// adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
|
||||||
// This fixes the problem by reading the 'top' value from the html element and adding it as a
|
// This fixes the problem by reading the 'top' value from the html element and adding it as a
|
||||||
// 'marginTop' to the navigation itself.
|
// 'marginTop' to the navigation itself.
|
||||||
this._mutationObserver = new MutationObserver((mutations) => {
|
this._mutationObserver = new MutationObserver((mutations) =>
|
||||||
mutations.forEach((mutation) => {
|
{
|
||||||
|
mutations.forEach((mutation) =>
|
||||||
|
{
|
||||||
const mutationTarget = mutation.target as HTMLElement;
|
const mutationTarget = mutation.target as HTMLElement;
|
||||||
if ( mutation.attributeName === 'class' )
|
if ( mutation.attributeName === 'class' )
|
||||||
{
|
{
|
||||||
|
@ -358,10 +374,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
});
|
});
|
||||||
this._mutationObserver.observe(this._document.documentElement, {
|
this._mutationObserver.observe(this._document.documentElement, {
|
||||||
attributes : true,
|
attributes : true,
|
||||||
attributeFilter: ['class']
|
attributeFilter: ['class'],
|
||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Return if 'navigation content' element does not exist
|
// Return if 'navigation content' element does not exist
|
||||||
if ( !this._navigationContentEl )
|
if ( !this._navigationContentEl )
|
||||||
|
@ -386,7 +403,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
// Go through all the scrollbar directives
|
// Go through all the scrollbar directives
|
||||||
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
|
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
|
||||||
|
{
|
||||||
|
|
||||||
// Skip if not enabled
|
// Skip if not enabled
|
||||||
if ( !fuseScrollbarDirective.isEnabled() )
|
if ( !fuseScrollbarDirective.isEnabled() )
|
||||||
|
@ -624,7 +642,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
|
|
||||||
// Create the enter animation and attach it to the player
|
// Create the enter animation and attach it to the player
|
||||||
this._player = this._animationBuilder.build([
|
this._player = this._animationBuilder.build([
|
||||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
|
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
|
||||||
]).create(this._overlay);
|
]).create(this._overlay);
|
||||||
|
|
||||||
// Play the animation
|
// Play the animation
|
||||||
|
@ -648,14 +666,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
|
|
||||||
// Create the leave animation and attach it to the player
|
// Create the leave animation and attach it to the player
|
||||||
this._player = this._animationBuilder.build([
|
this._player = this._animationBuilder.build([
|
||||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
|
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
|
||||||
]).create(this._overlay);
|
]).create(this._overlay);
|
||||||
|
|
||||||
// Play the animation
|
// Play the animation
|
||||||
this._player.play();
|
this._player.play();
|
||||||
|
|
||||||
// Once the animation is done...
|
// Once the animation is done...
|
||||||
this._player.onDone(() => {
|
this._player.onDone(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// If the overlay still exists...
|
// If the overlay still exists...
|
||||||
if ( this._overlay )
|
if ( this._overlay )
|
||||||
|
@ -699,7 +718,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
this._player =
|
this._player =
|
||||||
this._animationBuilder
|
this._animationBuilder
|
||||||
.build([
|
.build([
|
||||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
|
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
|
||||||
]).create(this._asideOverlay);
|
]).create(this._asideOverlay);
|
||||||
|
|
||||||
// Play the animation
|
// Play the animation
|
||||||
|
@ -725,14 +744,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||||
this._player =
|
this._player =
|
||||||
this._animationBuilder
|
this._animationBuilder
|
||||||
.build([
|
.build([
|
||||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
|
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
|
||||||
]).create(this._asideOverlay);
|
]).create(this._asideOverlay);
|
||||||
|
|
||||||
// Play the animation
|
// Play the animation
|
||||||
this._player.play();
|
this._player.play();
|
||||||
|
|
||||||
// Once the animation is done...
|
// Once the animation is done...
|
||||||
this._player.onDone(() => {
|
this._player.onDone(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// If the aside overlay still exists...
|
// If the aside overlay still exists...
|
||||||
if ( this._asideOverlay )
|
if ( this._asideOverlay )
|
||||||
|
|
|
@ -1,2 +1 @@
|
||||||
export * from '@fuse/directives/scroll-reset/scroll-reset.directive';
|
export * from '@fuse/directives/scroll-reset/scroll-reset.directive';
|
||||||
export * from '@fuse/directives/scroll-reset/scroll-reset.module';
|
|
||||||
|
|
|
@ -3,8 +3,9 @@ import { NavigationEnd, Router } from '@angular/router';
|
||||||
import { filter, Subject, takeUntil } from 'rxjs';
|
import { filter, Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[fuseScrollReset]',
|
selector : '[fuseScrollReset]',
|
||||||
exportAs: 'fuseScrollReset'
|
exportAs : 'fuseScrollReset',
|
||||||
|
standalone: true,
|
||||||
})
|
})
|
||||||
export class FuseScrollResetDirective implements OnInit, OnDestroy
|
export class FuseScrollResetDirective implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -15,7 +16,7 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _elementRef: ElementRef,
|
private _elementRef: ElementRef,
|
||||||
private _router: Router
|
private _router: Router,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -32,8 +33,9 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
|
||||||
// Subscribe to NavigationEnd event
|
// Subscribe to NavigationEnd event
|
||||||
this._router.events.pipe(
|
this._router.events.pipe(
|
||||||
filter(event => event instanceof NavigationEnd),
|
filter(event => event instanceof NavigationEnd),
|
||||||
takeUntil(this._unsubscribeAll)
|
takeUntil(this._unsubscribeAll),
|
||||||
).subscribe(() => {
|
).subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Reset the element's scroll position to the top
|
// Reset the element's scroll position to the top
|
||||||
this._elementRef.nativeElement.scrollTop = 0;
|
this._elementRef.nativeElement.scrollTop = 0;
|
||||||
|
|
|
@ -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,2 +1 @@
|
||||||
export * from '@fuse/directives/scrollbar/scrollbar.directive';
|
export * from '@fuse/directives/scrollbar/scrollbar.directive';
|
||||||
export * from '@fuse/directives/scrollbar/scrollbar.module';
|
|
||||||
|
|
|
@ -1,18 +1,19 @@
|
||||||
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
|
||||||
import { Router } from '@angular/router';
|
|
||||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||||
import { Platform } from '@angular/cdk/platform';
|
import { Platform } from '@angular/cdk/platform';
|
||||||
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
|
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
||||||
import PerfectScrollbar from 'perfect-scrollbar';
|
import { Router } from '@angular/router';
|
||||||
import { merge } from 'lodash-es';
|
|
||||||
import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
|
import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
|
||||||
|
import { merge } from 'lodash-es';
|
||||||
|
import PerfectScrollbar from 'perfect-scrollbar';
|
||||||
|
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
|
* Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
|
||||||
*/
|
*/
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[fuseScrollbar]',
|
selector : '[fuseScrollbar]',
|
||||||
exportAs: 'fuseScrollbar'
|
exportAs : 'fuseScrollbar',
|
||||||
|
standalone: true,
|
||||||
})
|
})
|
||||||
export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
|
@ -34,7 +35,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
||||||
constructor(
|
constructor(
|
||||||
private _elementRef: ElementRef,
|
private _elementRef: ElementRef,
|
||||||
private _platform: Platform,
|
private _platform: Platform,
|
||||||
private _router: Router
|
private _router: Router,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -101,11 +102,13 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
||||||
}
|
}
|
||||||
|
|
||||||
// Destroy and re-init the PerfectScrollbar to update its options
|
// Destroy and re-init the PerfectScrollbar to update its options
|
||||||
setTimeout(() => {
|
setTimeout(() =>
|
||||||
|
{
|
||||||
this._destroy();
|
this._destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() =>
|
||||||
|
{
|
||||||
this._init();
|
this._init();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -120,9 +123,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
||||||
fromEvent(window, 'resize')
|
fromEvent(window, 'resize')
|
||||||
.pipe(
|
.pipe(
|
||||||
takeUntil(this._unsubscribeAll),
|
takeUntil(this._unsubscribeAll),
|
||||||
debounceTime(150)
|
debounceTime(150),
|
||||||
)
|
)
|
||||||
.subscribe(() => {
|
.subscribe(() =>
|
||||||
|
{
|
||||||
|
|
||||||
// Update the PerfectScrollbar
|
// Update the PerfectScrollbar
|
||||||
this.update();
|
this.update();
|
||||||
|
@ -203,14 +207,14 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
scrollbarPosition = new ScrollbarPosition(
|
scrollbarPosition = new ScrollbarPosition(
|
||||||
this._ps.reach.x || 0,
|
this._ps.reach.x || 0,
|
||||||
this._ps.reach.y || 0
|
this._ps.reach.y || 0,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
scrollbarPosition = new ScrollbarPosition(
|
scrollbarPosition = new ScrollbarPosition(
|
||||||
this._elementRef.nativeElement.scrollLeft,
|
this._elementRef.nativeElement.scrollLeft,
|
||||||
this._elementRef.nativeElement.scrollTop
|
this._elementRef.nativeElement.scrollTop,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -388,7 +392,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
||||||
|
|
||||||
const cosParameter = (oldValue - value) / 2;
|
const cosParameter = (oldValue - value) / 2;
|
||||||
|
|
||||||
const step = (newTimestamp: number): void => {
|
const step = (newTimestamp: number): void =>
|
||||||
|
{
|
||||||
scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
|
scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
|
||||||
newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
|
newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
|
||||||
|
|
||||||
|
|
|
@ -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
|
|
||||||
{
|
|
||||||
}
|
|
|
@ -15,7 +15,7 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
|
||||||
FuseMediaWatcherModule,
|
FuseMediaWatcherModule,
|
||||||
FusePlatformModule,
|
FusePlatformModule,
|
||||||
FuseSplashScreenModule,
|
FuseSplashScreenModule,
|
||||||
FuseUtilsModule
|
FuseUtilsModule,
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
{
|
{
|
||||||
|
@ -24,17 +24,17 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
|
||||||
useValue: {
|
useValue: {
|
||||||
doctype: true,
|
doctype: true,
|
||||||
theme : false,
|
theme : false,
|
||||||
version: true
|
version: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// Use the 'fill' appearance on Angular Material form fields by default
|
// Use the 'fill' appearance on Angular Material form fields by default
|
||||||
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
||||||
useValue: {
|
useValue: {
|
||||||
appearance: 'fill'
|
appearance: 'fill',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
export class FuseModule
|
export class FuseModule
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
import { Inject, Injectable } from '@angular/core';
|
|
||||||
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
|
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
|
||||||
import { delay, Observable, of, switchMap, throwError } from 'rxjs';
|
import { Inject, Injectable } from '@angular/core';
|
||||||
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
|
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
|
||||||
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
|
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
|
||||||
|
import { delay, Observable, of, switchMap, throwError } from 'rxjs';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class FuseMockApiInterceptor implements HttpInterceptor
|
export class FuseMockApiInterceptor implements HttpInterceptor
|
||||||
{
|
{
|
||||||
|
@ -14,7 +14,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
@Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number,
|
@Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number,
|
||||||
private _fuseMockApiService: FuseMockApiService
|
private _fuseMockApiService: FuseMockApiService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -29,9 +29,9 @@ export class FuseMockApiInterceptor implements HttpInterceptor
|
||||||
{
|
{
|
||||||
// Try to get the request handler
|
// Try to get the request handler
|
||||||
const {
|
const {
|
||||||
handler,
|
handler,
|
||||||
urlParams
|
urlParams,
|
||||||
} = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
|
} = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
|
||||||
|
|
||||||
// Pass through if the request handler does not exist
|
// Pass through if the request handler does not exist
|
||||||
if ( !handler )
|
if ( !handler )
|
||||||
|
@ -48,7 +48,8 @@ export class FuseMockApiInterceptor implements HttpInterceptor
|
||||||
// Subscribe to the response function observable
|
// Subscribe to the response function observable
|
||||||
return handler.response.pipe(
|
return handler.response.pipe(
|
||||||
delay(handler.delay ?? this._defaultDelay ?? 0),
|
delay(handler.delay ?? this._defaultDelay ?? 0),
|
||||||
switchMap((response) => {
|
switchMap((response) =>
|
||||||
|
{
|
||||||
|
|
||||||
// If there is no response data,
|
// If there is no response data,
|
||||||
// throw an error response
|
// throw an error response
|
||||||
|
@ -57,7 +58,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
|
||||||
response = new HttpErrorResponse({
|
response = new HttpErrorResponse({
|
||||||
error : 'NOT FOUND',
|
error : 'NOT FOUND',
|
||||||
status : 404,
|
status : 404,
|
||||||
statusText: 'NOT FOUND'
|
statusText: 'NOT FOUND',
|
||||||
});
|
});
|
||||||
|
|
||||||
return throwError(response);
|
return throwError(response);
|
||||||
|
@ -66,7 +67,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
|
||||||
// Parse the response data
|
// Parse the response data
|
||||||
const data = {
|
const data = {
|
||||||
status: response[0],
|
status: response[0],
|
||||||
body : response[1]
|
body : response[1],
|
||||||
};
|
};
|
||||||
|
|
||||||
// If the status code is in between 200 and 300,
|
// If the status code is in between 200 and 300,
|
||||||
|
@ -76,7 +77,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
|
||||||
response = new HttpResponse({
|
response = new HttpResponse({
|
||||||
body : data.body,
|
body : data.body,
|
||||||
status : data.status,
|
status : data.status,
|
||||||
statusText: 'OK'
|
statusText: 'OK',
|
||||||
});
|
});
|
||||||
|
|
||||||
return of(response);
|
return of(response);
|
||||||
|
@ -87,7 +88,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
|
||||||
response = new HttpErrorResponse({
|
response = new HttpErrorResponse({
|
||||||
error : data.body.error,
|
error : data.body.error,
|
||||||
status : data.status,
|
status : data.status,
|
||||||
statusText: 'ERROR'
|
statusText: 'ERROR',
|
||||||
});
|
});
|
||||||
|
|
||||||
return throwError(response);
|
return throwError(response);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
|
|
||||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||||
|
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
|
||||||
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
|
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
|
||||||
import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor';
|
import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor';
|
||||||
|
|
||||||
|
@ -8,9 +8,9 @@ import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor'
|
||||||
{
|
{
|
||||||
provide : HTTP_INTERCEPTORS,
|
provide : HTTP_INTERCEPTORS,
|
||||||
useClass: FuseMockApiInterceptor,
|
useClass: FuseMockApiInterceptor,
|
||||||
multi : true
|
multi : true,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
export class FuseMockApiModule
|
export class FuseMockApiModule
|
||||||
{
|
{
|
||||||
|
@ -30,13 +30,13 @@ export class FuseMockApiModule
|
||||||
provide : APP_INITIALIZER,
|
provide : APP_INITIALIZER,
|
||||||
deps : [...mockApiServices],
|
deps : [...mockApiServices],
|
||||||
useFactory: () => (): any => null,
|
useFactory: () => (): any => null,
|
||||||
multi : true
|
multi : true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
provide : FUSE_MOCK_API_DEFAULT_DELAY,
|
provide : FUSE_MOCK_API_DEFAULT_DELAY,
|
||||||
useValue: config?.delay ?? 0
|
useValue: config?.delay ?? 0,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { HttpRequest } from '@angular/common/http';
|
import { HttpRequest } from '@angular/common/http';
|
||||||
import { Observable, of, take, throwError } from 'rxjs';
|
|
||||||
import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
|
import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
|
||||||
|
import { Observable, of, take, throwError } from 'rxjs';
|
||||||
|
|
||||||
export class FuseMockApiHandler
|
export class FuseMockApiHandler
|
||||||
{
|
{
|
||||||
|
@ -17,7 +17,7 @@ export class FuseMockApiHandler
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
public url: string,
|
public url: string,
|
||||||
public delay?: number
|
public delay?: number,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -55,7 +55,7 @@ export class FuseMockApiHandler
|
||||||
// Execute the reply callback
|
// Execute the reply callback
|
||||||
const replyResult = this._reply({
|
const replyResult = this._reply({
|
||||||
request : this.request,
|
request : this.request,
|
||||||
urlParams: this.urlParams
|
urlParams: this.urlParams,
|
||||||
});
|
});
|
||||||
|
|
||||||
// If the result of the reply callback is an observable...
|
// If the result of the reply callback is an observable...
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { compact, fromPairs } from 'lodash-es';
|
|
||||||
import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler';
|
import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler';
|
||||||
import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
|
import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
|
||||||
|
import { compact, fromPairs } from 'lodash-es';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class FuseMockApiService
|
export class FuseMockApiService
|
||||||
{
|
{
|
||||||
|
@ -16,7 +16,7 @@ export class FuseMockApiService
|
||||||
'put' : new Map<string, FuseMockApiHandler>(),
|
'put' : new Map<string, FuseMockApiHandler>(),
|
||||||
'head' : new Map<string, FuseMockApiHandler>(),
|
'head' : new Map<string, FuseMockApiHandler>(),
|
||||||
'jsonp' : new Map<string, FuseMockApiHandler>(),
|
'jsonp' : new Map<string, FuseMockApiHandler>(),
|
||||||
'options': new Map<string, FuseMockApiHandler>()
|
'options': new Map<string, FuseMockApiHandler>(),
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -42,7 +42,7 @@ export class FuseMockApiService
|
||||||
// Prepare the return object
|
// Prepare the return object
|
||||||
const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
|
const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
|
||||||
handler : undefined,
|
handler : undefined,
|
||||||
urlParams: {}
|
urlParams: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
// Split the url
|
// Split the url
|
||||||
|
@ -52,7 +52,8 @@ export class FuseMockApiService
|
||||||
const handlers = this._handlers[method.toLowerCase()];
|
const handlers = this._handlers[method.toLowerCase()];
|
||||||
|
|
||||||
// Iterate through the handlers
|
// Iterate through the handlers
|
||||||
handlers.forEach((handler, handlerUrl) => {
|
handlers.forEach((handler, handlerUrl) =>
|
||||||
|
{
|
||||||
|
|
||||||
// Skip if there is already a matching handler
|
// Skip if there is already a matching handler
|
||||||
if ( matchingHandler.handler )
|
if ( matchingHandler.handler )
|
||||||
|
@ -80,7 +81,7 @@ export class FuseMockApiService
|
||||||
|
|
||||||
// Extract and assign the parameters
|
// Extract and assign the parameters
|
||||||
matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) =>
|
matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) =>
|
||||||
handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined
|
handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined,
|
||||||
)));
|
)));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -26,7 +26,8 @@ export class FuseMockApiUtils
|
||||||
d += performance.now();
|
d += performance.now();
|
||||||
}
|
}
|
||||||
|
|
||||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) =>
|
||||||
|
{
|
||||||
const r = (d + Math.random() * 16) % 16 | 0;
|
const r = (d + Math.random() * 16) % 16 | 0;
|
||||||
d = Math.floor(d / 16);
|
d = Math.floor(d / 16);
|
||||||
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
||||||
|
|
|
@ -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
|
|
||||||
{
|
|
||||||
}
|
|
|
@ -4,8 +4,9 @@ import { Pipe, PipeTransform } from '@angular/core';
|
||||||
* Finds an object from given source using the given key - value pairs
|
* Finds an object from given source using the given key - value pairs
|
||||||
*/
|
*/
|
||||||
@Pipe({
|
@Pipe({
|
||||||
name: 'fuseFindByKey',
|
name : 'fuseFindByKey',
|
||||||
pure: false
|
pure : false,
|
||||||
|
standalone: true,
|
||||||
})
|
})
|
||||||
export class FuseFindByKeyPipe implements PipeTransform
|
export class FuseFindByKeyPipe implements PipeTransform
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { ModuleWithProviders, NgModule } from '@angular/core';
|
import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||||
import { FuseConfigService } from '@fuse/services/config/config.service';
|
|
||||||
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
|
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
|
||||||
|
import { FuseConfigService } from '@fuse/services/config/config.service';
|
||||||
|
|
||||||
@NgModule()
|
@NgModule()
|
||||||
export class FuseConfigModule
|
export class FuseConfigModule
|
||||||
|
@ -24,9 +24,9 @@ export class FuseConfigModule
|
||||||
providers: [
|
providers: [
|
||||||
{
|
{
|
||||||
provide : FUSE_APP_CONFIG,
|
provide : FUSE_APP_CONFIG,
|
||||||
useValue: config
|
useValue: config,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
import { Inject, Injectable } from '@angular/core';
|
import { Inject, Injectable } from '@angular/core';
|
||||||
import { BehaviorSubject, Observable } from 'rxjs';
|
|
||||||
import { merge } from 'lodash-es';
|
|
||||||
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
|
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
|
||||||
|
import { merge } from 'lodash-es';
|
||||||
|
import { BehaviorSubject, Observable } from 'rxjs';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class FuseConfigService
|
export class FuseConfigService
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,24 +1,22 @@
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatDialogModule } from '@angular/material/dialog';
|
import { MatDialogModule } from '@angular/material/dialog';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service';
|
import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service';
|
||||||
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
|
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
|
||||||
import { CommonModule } from '@angular/common';
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
imports : [
|
||||||
FuseConfirmationDialogComponent
|
|
||||||
],
|
|
||||||
imports : [
|
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatDialogModule,
|
MatDialogModule,
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
CommonModule
|
CommonModule,
|
||||||
|
FuseConfirmationDialogComponent,
|
||||||
|
],
|
||||||
|
providers: [
|
||||||
|
FuseConfirmationService,
|
||||||
],
|
],
|
||||||
providers : [
|
|
||||||
FuseConfirmationService
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
export class FuseConfirmationModule
|
export class FuseConfirmationModule
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||||
import { merge } from 'lodash-es';
|
|
||||||
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
|
|
||||||
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
|
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
|
||||||
|
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
|
||||||
|
import { merge } from 'lodash-es';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class FuseConfirmationService
|
export class FuseConfirmationService
|
||||||
|
@ -13,27 +13,27 @@ export class FuseConfirmationService
|
||||||
icon : {
|
icon : {
|
||||||
show : true,
|
show : true,
|
||||||
name : 'heroicons_outline:exclamation',
|
name : 'heroicons_outline:exclamation',
|
||||||
color: 'warn'
|
color: 'warn',
|
||||||
},
|
},
|
||||||
actions : {
|
actions : {
|
||||||
confirm: {
|
confirm: {
|
||||||
show : true,
|
show : true,
|
||||||
label: 'Confirm',
|
label: 'Confirm',
|
||||||
color: 'warn'
|
color: 'warn',
|
||||||
},
|
},
|
||||||
cancel : {
|
cancel : {
|
||||||
show : true,
|
show : true,
|
||||||
label: 'Cancel'
|
label: 'Cancel',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
dismissible: false
|
dismissible: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Constructor
|
* Constructor
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _matDialog: MatDialog
|
private _matDialog: MatDialog,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -52,7 +52,7 @@ export class FuseConfirmationService
|
||||||
autoFocus : false,
|
autoFocus : false,
|
||||||
disableClose: !userConfig.dismissible,
|
disableClose: !userConfig.dismissible,
|
||||||
data : userConfig,
|
data : userConfig,
|
||||||
panelClass : 'fuse-confirmation-dialog-panel'
|
panelClass : 'fuse-confirmation-dialog-panel',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
|
import { NgClass, NgIf } from '@angular/common';
|
||||||
import { Component, Inject, ViewEncapsulation } from '@angular/core';
|
import { Component, Inject, ViewEncapsulation } from '@angular/core';
|
||||||
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
|
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -20,9 +23,11 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`,
|
||||||
],
|
],
|
||||||
encapsulation: ViewEncapsulation.None
|
encapsulation: ViewEncapsulation.None,
|
||||||
|
standalone : true,
|
||||||
|
imports : [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
|
||||||
})
|
})
|
||||||
export class FuseConfirmationDialogComponent
|
export class FuseConfirmationDialogComponent
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
|
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
|
||||||
import { finalize, Observable } from 'rxjs';
|
import { Injectable } from '@angular/core';
|
||||||
import { FuseLoadingService } from '@fuse/services/loading/loading.service';
|
import { FuseLoadingService } from '@fuse/services/loading/loading.service';
|
||||||
|
import { finalize, Observable } from 'rxjs';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class FuseLoadingInterceptor implements HttpInterceptor
|
export class FuseLoadingInterceptor implements HttpInterceptor
|
||||||
|
@ -12,12 +12,13 @@ export class FuseLoadingInterceptor implements HttpInterceptor
|
||||||
* Constructor
|
* Constructor
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _fuseLoadingService: FuseLoadingService
|
private _fuseLoadingService: FuseLoadingService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
// Subscribe to the auto
|
// Subscribe to the auto
|
||||||
this._fuseLoadingService.auto$
|
this._fuseLoadingService.auto$
|
||||||
.subscribe((value) => {
|
.subscribe((value) =>
|
||||||
|
{
|
||||||
this.handleRequestsAutomatically = value;
|
this.handleRequestsAutomatically = value;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -40,7 +41,8 @@ export class FuseLoadingInterceptor implements HttpInterceptor
|
||||||
this._fuseLoadingService._setLoadingStatus(true, req.url);
|
this._fuseLoadingService._setLoadingStatus(true, req.url);
|
||||||
|
|
||||||
return next.handle(req).pipe(
|
return next.handle(req).pipe(
|
||||||
finalize(() => {
|
finalize(() =>
|
||||||
|
{
|
||||||
// Set the status to false if there are any errors or the request is completed
|
// Set the status to false if there are any errors or the request is completed
|
||||||
this._fuseLoadingService._setLoadingStatus(false, req.url);
|
this._fuseLoadingService._setLoadingStatus(false, req.url);
|
||||||
}));
|
}));
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor';
|
import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
@ -7,9 +7,9 @@ import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.intercept
|
||||||
{
|
{
|
||||||
provide : HTTP_INTERCEPTORS,
|
provide : HTTP_INTERCEPTORS,
|
||||||
useClass: FuseLoadingInterceptor,
|
useClass: FuseLoadingInterceptor,
|
||||||
multi : true
|
multi : true,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
export class FuseLoadingModule
|
export class FuseLoadingModule
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
import { BehaviorSubject, Observable } from 'rxjs';
|
import { BehaviorSubject, Observable } from 'rxjs';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class FuseLoadingService
|
export class FuseLoadingService
|
||||||
{
|
{
|
||||||
|
|
|
@ -3,8 +3,8 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher/media-watc
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
providers: [
|
providers: [
|
||||||
FuseMediaWatcherService
|
FuseMediaWatcherService,
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
export class FuseMediaWatcherModule
|
export class FuseMediaWatcherModule
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
|
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
|
||||||
import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
|
import { Injectable } from '@angular/core';
|
||||||
import { fromPairs } from 'lodash-es';
|
|
||||||
import { FuseConfigService } from '@fuse/services/config';
|
import { FuseConfigService } from '@fuse/services/config';
|
||||||
|
import { fromPairs } from 'lodash-es';
|
||||||
|
import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class FuseMediaWatcherService
|
export class FuseMediaWatcherService
|
||||||
|
@ -14,13 +14,14 @@ export class FuseMediaWatcherService
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _breakpointObserver: BreakpointObserver,
|
private _breakpointObserver: BreakpointObserver,
|
||||||
private _fuseConfigService: FuseConfigService
|
private _fuseConfigService: FuseConfigService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
this._fuseConfigService.config$.pipe(
|
this._fuseConfigService.config$.pipe(
|
||||||
map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
|
map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
|
||||||
switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
|
switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
|
||||||
map((state) => {
|
map((state) =>
|
||||||
|
{
|
||||||
|
|
||||||
// Prepare the observable values and set their defaults
|
// Prepare the observable values and set their defaults
|
||||||
const matchingAliases: string[] = [];
|
const matchingAliases: string[] = [];
|
||||||
|
@ -44,10 +45,10 @@ export class FuseMediaWatcherService
|
||||||
// Execute the observable
|
// Execute the observable
|
||||||
this._onMediaChange.next({
|
this._onMediaChange.next({
|
||||||
matchingAliases,
|
matchingAliases,
|
||||||
matchingQueries
|
matchingQueries,
|
||||||
});
|
});
|
||||||
})
|
}),
|
||||||
))
|
)),
|
||||||
).subscribe();
|
).subscribe();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,8 +3,8 @@ import { FusePlatformService } from '@fuse/services/platform/platform.service';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
providers: [
|
providers: [
|
||||||
FusePlatformService
|
FusePlatformService,
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
export class FusePlatformModule
|
export class FusePlatformModule
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { Platform } from '@angular/cdk/platform';
|
import { Platform } from '@angular/cdk/platform';
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class FusePlatformService
|
export class FusePlatformService
|
||||||
{
|
{
|
||||||
|
|
|
@ -3,8 +3,8 @@ import { FuseSplashScreenService } from '@fuse/services/splash-screen/splash-scr
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
providers: [
|
providers: [
|
||||||
FuseSplashScreenService
|
FuseSplashScreenService,
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
export class FuseSplashScreenModule
|
export class FuseSplashScreenModule
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Inject, Injectable } from '@angular/core';
|
|
||||||
import { DOCUMENT } from '@angular/common';
|
import { DOCUMENT } from '@angular/common';
|
||||||
|
import { Inject, Injectable } from '@angular/core';
|
||||||
import { NavigationEnd, Router } from '@angular/router';
|
import { NavigationEnd, Router } from '@angular/router';
|
||||||
import { filter, take } from 'rxjs';
|
import { filter, take } from 'rxjs';
|
||||||
|
|
||||||
|
@ -11,16 +11,17 @@ export class FuseSplashScreenService
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
@Inject(DOCUMENT) private _document: any,
|
@Inject(DOCUMENT) private _document: any,
|
||||||
private _router: Router
|
private _router: Router,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
// Hide it on the first NavigationEnd event
|
// Hide it on the first NavigationEnd event
|
||||||
this._router.events
|
this._router.events
|
||||||
.pipe(
|
.pipe(
|
||||||
filter(event => event instanceof NavigationEnd),
|
filter(event => event instanceof NavigationEnd),
|
||||||
take(1)
|
take(1),
|
||||||
)
|
)
|
||||||
.subscribe(() => {
|
.subscribe(() =>
|
||||||
|
{
|
||||||
this.hide();
|
this.hide();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,8 +3,8 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
providers: [
|
providers: [
|
||||||
FuseUtilsService
|
FuseUtilsService,
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
export class FuseUtilsModule
|
export class FuseUtilsModule
|
||||||
{
|
{
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
|
||||||
import { IsActiveMatchOptions } from '@angular/router';
|
import { IsActiveMatchOptions } from '@angular/router';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class FuseUtilsService
|
export class FuseUtilsService
|
||||||
{
|
{
|
||||||
|
@ -26,7 +26,7 @@ export class FuseUtilsService
|
||||||
paths : 'exact',
|
paths : 'exact',
|
||||||
fragment : 'ignored',
|
fragment : 'ignored',
|
||||||
matrixParams: 'ignored',
|
matrixParams: 'ignored',
|
||||||
queryParams : 'exact'
|
queryParams : 'exact',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -39,7 +39,7 @@ export class FuseUtilsService
|
||||||
paths : 'subset',
|
paths : 'subset',
|
||||||
fragment : 'ignored',
|
fragment : 'ignored',
|
||||||
matrixParams: 'ignored',
|
matrixParams: 'ignored',
|
||||||
queryParams : 'subset'
|
queryParams : 'subset',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3,7 +3,7 @@ const plugin = require('tailwindcss/plugin');
|
||||||
module.exports = plugin(
|
module.exports = plugin(
|
||||||
({
|
({
|
||||||
matchUtilities,
|
matchUtilities,
|
||||||
theme
|
theme,
|
||||||
}) =>
|
}) =>
|
||||||
{
|
{
|
||||||
matchUtilities(
|
matchUtilities(
|
||||||
|
@ -17,12 +17,12 @@ module.exports = plugin(
|
||||||
lineHeight: value,
|
lineHeight: value,
|
||||||
[`svg`] : {
|
[`svg`] : {
|
||||||
width : value,
|
width : value,
|
||||||
height: value
|
height: value,
|
||||||
}
|
},
|
||||||
})
|
}),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
values: theme('iconSize')
|
values: theme('iconSize'),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -43,8 +43,8 @@ module.exports = plugin(
|
||||||
18 : '4.5rem',
|
18 : '4.5rem',
|
||||||
20 : '5rem',
|
20 : '5rem',
|
||||||
22 : '5.5rem',
|
22 : '5.5rem',
|
||||||
24 : '6rem'
|
24 : '6rem',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
|
@ -26,9 +26,9 @@ const normalizeTheme = (theme) =>
|
||||||
paletteName,
|
paletteName,
|
||||||
{
|
{
|
||||||
...palette,
|
...palette,
|
||||||
DEFAULT: palette['DEFAULT'] || palette[500]
|
DEFAULT: palette['DEFAULT'] || palette[500],
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
));
|
));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -38,7 +38,7 @@ const normalizeTheme = (theme) =>
|
||||||
const theming = plugin.withOptions((options) => ({
|
const theming = plugin.withOptions((options) => ({
|
||||||
addComponents,
|
addComponents,
|
||||||
e,
|
e,
|
||||||
theme
|
theme,
|
||||||
}) =>
|
}) =>
|
||||||
{
|
{
|
||||||
/**
|
/**
|
||||||
|
@ -48,7 +48,7 @@ const theming = plugin.withOptions((options) => ({
|
||||||
*/
|
*/
|
||||||
const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
|
const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
|
||||||
themeName,
|
themeName,
|
||||||
_.defaults({}, theme, options.themes['default'])
|
_.defaults({}, theme, options.themes['default']),
|
||||||
]));
|
]));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -57,7 +57,7 @@ const theming = plugin.withOptions((options) => ({
|
||||||
*/
|
*/
|
||||||
let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
|
let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
|
||||||
themeName,
|
themeName,
|
||||||
normalizeTheme(theme)
|
normalizeTheme(theme),
|
||||||
]));
|
]));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -73,12 +73,12 @@ const theming = plugin.withOptions((options) => ({
|
||||||
...palette,
|
...palette,
|
||||||
contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
|
contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
|
||||||
hue,
|
hue,
|
||||||
_.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
|
_.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color,
|
||||||
]))
|
])),
|
||||||
}
|
},
|
||||||
])),
|
])),
|
||||||
['primary', 'accent', 'warn']
|
['primary', 'accent', 'warn'],
|
||||||
)
|
),
|
||||||
]));
|
]));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -89,8 +89,8 @@ const theming = plugin.withOptions((options) => ({
|
||||||
themeName,
|
themeName,
|
||||||
{
|
{
|
||||||
selector: `".theme-${themeName}"`,
|
selector: `".theme-${themeName}"`,
|
||||||
...theme
|
...theme,
|
||||||
}
|
},
|
||||||
]));
|
]));
|
||||||
|
|
||||||
/* Generate the SASS map using the themes object */
|
/* Generate the SASS map using the themes object */
|
||||||
|
@ -134,15 +134,15 @@ const theming = plugin.withOptions((options) => ({
|
||||||
_.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
|
_.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
|
||||||
[
|
[
|
||||||
e(paletteName),
|
e(paletteName),
|
||||||
palette
|
palette,
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
`on-${e(paletteName)}`,
|
`on-${e(paletteName)}`,
|
||||||
_.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
|
_.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color])),
|
||||||
]
|
],
|
||||||
])
|
]),
|
||||||
))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
|
))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
|
||||||
]))
|
])),
|
||||||
);
|
);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -185,8 +185,8 @@ const theming = plugin.withOptions((options) => ({
|
||||||
|
|
||||||
/* Generate custom properties from customProps */
|
/* Generate custom properties from customProps */
|
||||||
..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
|
..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
|
||||||
..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
|
..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -211,8 +211,8 @@ const theming = plugin.withOptions((options) => ({
|
||||||
*/
|
*/
|
||||||
colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
|
colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
|
||||||
[name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
|
[name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
|
||||||
[`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`]
|
[`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`],
|
||||||
])))
|
]))),
|
||||||
},
|
},
|
||||||
fuse : {
|
fuse : {
|
||||||
customProps: {
|
customProps: {
|
||||||
|
@ -223,7 +223,7 @@ const theming = plugin.withOptions((options) => ({
|
||||||
'bg-default' : colors.slate[100],
|
'bg-default' : colors.slate[100],
|
||||||
'bg-dialog' : '#FFFFFF',
|
'bg-dialog' : '#FFFFFF',
|
||||||
'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(),
|
'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(),
|
||||||
'bg-status-bar': colors.slate[300]
|
'bg-status-bar': colors.slate[300],
|
||||||
},
|
},
|
||||||
dark : {
|
dark : {
|
||||||
'bg-app-bar' : colors.slate[900],
|
'bg-app-bar' : colors.slate[900],
|
||||||
|
@ -231,8 +231,8 @@ const theming = plugin.withOptions((options) => ({
|
||||||
'bg-default' : colors.slate[900],
|
'bg-default' : colors.slate[900],
|
||||||
'bg-dialog' : colors.slate[800],
|
'bg-dialog' : colors.slate[800],
|
||||||
'bg-hover' : 'rgba(255, 255, 255, 0.05)',
|
'bg-hover' : 'rgba(255, 255, 255, 0.05)',
|
||||||
'bg-status-bar': colors.slate[900]
|
'bg-status-bar': colors.slate[900],
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
foreground: {
|
foreground: {
|
||||||
light: {
|
light: {
|
||||||
|
@ -243,7 +243,7 @@ const theming = plugin.withOptions((options) => ({
|
||||||
'border' : colors.slate[200],
|
'border' : colors.slate[200],
|
||||||
'divider' : colors.slate[200],
|
'divider' : colors.slate[200],
|
||||||
'icon' : colors.slate[500],
|
'icon' : colors.slate[500],
|
||||||
'mat-icon' : colors.slate[500]
|
'mat-icon' : colors.slate[500],
|
||||||
},
|
},
|
||||||
dark : {
|
dark : {
|
||||||
'text-default' : '#FFFFFF',
|
'text-default' : '#FFFFFF',
|
||||||
|
@ -253,14 +253,14 @@ const theming = plugin.withOptions((options) => ({
|
||||||
'border' : chroma(colors.slate[100]).alpha(0.12).css(),
|
'border' : chroma(colors.slate[100]).alpha(0.12).css(),
|
||||||
'divider' : chroma(colors.slate[100]).alpha(0.12).css(),
|
'divider' : chroma(colors.slate[100]).alpha(0.12).css(),
|
||||||
'icon' : colors.slate[400],
|
'icon' : colors.slate[400],
|
||||||
'mat-icon' : colors.slate[400]
|
'mat-icon' : colors.slate[400],
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
module.exports = theming;
|
module.exports = theming;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
const plugin = require('tailwindcss/plugin');
|
const plugin = require('tailwindcss/plugin');
|
||||||
|
|
||||||
module.exports = plugin(({
|
module.exports = plugin(({
|
||||||
addComponents
|
addComponents,
|
||||||
}) =>
|
}) =>
|
||||||
{
|
{
|
||||||
/*
|
/*
|
||||||
|
@ -13,55 +13,55 @@ module.exports = plugin(({
|
||||||
{
|
{
|
||||||
'.mat-icon' : {
|
'.mat-icon' : {
|
||||||
'--tw-text-opacity': '1',
|
'--tw-text-opacity': '1',
|
||||||
color : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))'
|
color : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))',
|
||||||
},
|
},
|
||||||
'.text-default' : {
|
'.text-default' : {
|
||||||
'--tw-text-opacity': '1 !important',
|
'--tw-text-opacity': '1 !important',
|
||||||
color : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important'
|
color : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important',
|
||||||
},
|
},
|
||||||
'.text-secondary' : {
|
'.text-secondary' : {
|
||||||
'--tw-text-opacity': '1 !important',
|
'--tw-text-opacity': '1 !important',
|
||||||
color : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important'
|
color : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important',
|
||||||
},
|
},
|
||||||
'.text-hint' : {
|
'.text-hint' : {
|
||||||
'--tw-text-opacity': '1 !important',
|
'--tw-text-opacity': '1 !important',
|
||||||
color : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important'
|
color : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important',
|
||||||
},
|
},
|
||||||
'.text-disabled' : {
|
'.text-disabled' : {
|
||||||
'--tw-text-opacity': '1 !important',
|
'--tw-text-opacity': '1 !important',
|
||||||
color : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important'
|
color : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important',
|
||||||
},
|
},
|
||||||
'.divider' : {
|
'.divider' : {
|
||||||
color: 'var(--fuse-divider) !important'
|
color: 'var(--fuse-divider) !important',
|
||||||
},
|
},
|
||||||
'.bg-card' : {
|
'.bg-card' : {
|
||||||
'--tw-bg-opacity': '1 !important',
|
'--tw-bg-opacity': '1 !important',
|
||||||
backgroundColor : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important'
|
backgroundColor : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important',
|
||||||
},
|
},
|
||||||
'.bg-default' : {
|
'.bg-default' : {
|
||||||
'--tw-bg-opacity': '1 !important',
|
'--tw-bg-opacity': '1 !important',
|
||||||
backgroundColor : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important'
|
backgroundColor : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important',
|
||||||
},
|
},
|
||||||
'.bg-dialog' : {
|
'.bg-dialog' : {
|
||||||
'--tw-bg-opacity': '1 !important',
|
'--tw-bg-opacity': '1 !important',
|
||||||
backgroundColor : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important'
|
backgroundColor : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important',
|
||||||
},
|
},
|
||||||
'.ring-bg-default': {
|
'.ring-bg-default': {
|
||||||
'--tw-ring-opacity': '1 !important',
|
'--tw-ring-opacity': '1 !important',
|
||||||
'--tw-ring-color' : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important'
|
'--tw-ring-color' : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important',
|
||||||
},
|
},
|
||||||
'.ring-bg-card' : {
|
'.ring-bg-card' : {
|
||||||
'--tw-ring-opacity': '1 !important',
|
'--tw-ring-opacity': '1 !important',
|
||||||
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important'
|
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
addComponents(
|
addComponents(
|
||||||
{
|
{
|
||||||
'.bg-hover': {
|
'.bg-hover': {
|
||||||
backgroundColor: 'var(--fuse-bg-hover) !important'
|
backgroundColor: 'var(--fuse-bg-hover) !important',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -23,7 +23,7 @@ const generateContrasts = (palette) =>
|
||||||
// Generate the contrasting colors
|
// Generate the contrasting colors
|
||||||
return _.fromPairs(_.map(palette, ((color, hue) => [
|
return _.fromPairs(_.map(palette, ((color, hue) => [
|
||||||
hue,
|
hue,
|
||||||
chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor
|
chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor,
|
||||||
]
|
]
|
||||||
)));
|
)));
|
||||||
};
|
};
|
||||||
|
|
|
@ -22,7 +22,7 @@ const generatePalette = (config) =>
|
||||||
600: null,
|
600: null,
|
||||||
700: null,
|
700: null,
|
||||||
800: null,
|
800: null,
|
||||||
900: null
|
900: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
// If a single color is provided,
|
// If a single color is provided,
|
||||||
|
@ -58,14 +58,14 @@ const generatePalette = (config) =>
|
||||||
colors.unshift(
|
colors.unshift(
|
||||||
chroma.scale(['white', palette[500]])
|
chroma.scale(['white', palette[500]])
|
||||||
.domain([0, 1])
|
.domain([0, 1])
|
||||||
.mode("lrgb")
|
.mode('lrgb')
|
||||||
.colors(50)[1]
|
.colors(50)[1],
|
||||||
);
|
);
|
||||||
colors.push(
|
colors.push(
|
||||||
chroma.scale(['black', palette[500]])
|
chroma.scale(['black', palette[500]])
|
||||||
.domain([0, 1])
|
.domain([0, 1])
|
||||||
.mode("lrgb")
|
.mode('lrgb')
|
||||||
.colors(10)[1]
|
.colors(10)[1],
|
||||||
);
|
);
|
||||||
|
|
||||||
// Prepare the domains array
|
// Prepare the domains array
|
||||||
|
@ -74,7 +74,7 @@ const generatePalette = (config) =>
|
||||||
...Object.entries(palette)
|
...Object.entries(palette)
|
||||||
.filter(([key, value]) => value)
|
.filter(([key, value]) => value)
|
||||||
.map(([key]) => parseInt(key) / 1000),
|
.map(([key]) => parseInt(key) / 1000),
|
||||||
1
|
1,
|
||||||
];
|
];
|
||||||
|
|
||||||
// Generate the color scale
|
// Generate the color scale
|
||||||
|
@ -93,7 +93,7 @@ const generatePalette = (config) =>
|
||||||
600: scale(0.6).hex(),
|
600: scale(0.6).hex(),
|
||||||
700: scale(0.7).hex(),
|
700: scale(0.7).hex(),
|
||||||
800: scale(0.8).hex(),
|
800: scale(0.8).hex(),
|
||||||
900: scale(0.9).hex()
|
900: scale(0.9).hex(),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -13,13 +13,13 @@ module.exports = (data) =>
|
||||||
{
|
{
|
||||||
let scss = '';
|
let scss = '';
|
||||||
|
|
||||||
if ( typeof chunk === "object" && !Array.isArray(chunk) )
|
if ( typeof chunk === 'object' && !Array.isArray(chunk) )
|
||||||
{
|
{
|
||||||
_.mapKeys(chunk, (value, key) =>
|
_.mapKeys(chunk, (value, key) =>
|
||||||
{
|
{
|
||||||
scss += key + ': ';
|
scss += key + ': ';
|
||||||
|
|
||||||
if ( typeof value === "object" )
|
if ( typeof value === 'object' )
|
||||||
{
|
{
|
||||||
if ( Array.isArray(value) )
|
if ( Array.isArray(value) )
|
||||||
{
|
{
|
||||||
|
|
|
@ -20,7 +20,8 @@ export class FuseValidators
|
||||||
*/
|
*/
|
||||||
static mustMatch(controlPath: string, matchingControlPath: string): ValidatorFn
|
static mustMatch(controlPath: string, matchingControlPath: string): ValidatorFn
|
||||||
{
|
{
|
||||||
return (formGroup: AbstractControl): ValidationErrors | null => {
|
return (formGroup: AbstractControl): ValidationErrors | null =>
|
||||||
|
{
|
||||||
|
|
||||||
// Get the control and matching control
|
// Get the control and matching control
|
||||||
const control = formGroup.get(controlPath);
|
const control = formGroup.get(controlPath);
|
||||||
|
|
|
@ -1,9 +1,12 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
import { RouterOutlet } from '@angular/router';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'app-root',
|
selector : 'app-root',
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrls : ['./app.component.scss']
|
styleUrls : ['./app.component.scss'],
|
||||||
|
standalone : true,
|
||||||
|
imports : [RouterOutlet],
|
||||||
})
|
})
|
||||||
export class AppComponent
|
export class AppComponent
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,46 +0,0 @@
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
||||||
import { ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router';
|
|
||||||
import { FuseModule } from '@fuse';
|
|
||||||
import { FuseConfigModule } from '@fuse/services/config';
|
|
||||||
import { FuseMockApiModule } from '@fuse/lib/mock-api';
|
|
||||||
import { CoreModule } from 'app/core/core.module';
|
|
||||||
import { appConfig } from 'app/core/config/app.config';
|
|
||||||
import { mockApiServices } from 'app/mock-api';
|
|
||||||
import { LayoutModule } from 'app/layout/layout.module';
|
|
||||||
import { AppComponent } from 'app/app.component';
|
|
||||||
import { appRoutes } from 'app/app.routing';
|
|
||||||
|
|
||||||
const routerConfig: ExtraOptions = {
|
|
||||||
preloadingStrategy : PreloadAllModules,
|
|
||||||
scrollPositionRestoration: 'enabled'
|
|
||||||
};
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
declarations: [
|
|
||||||
AppComponent
|
|
||||||
],
|
|
||||||
imports : [
|
|
||||||
BrowserModule,
|
|
||||||
BrowserAnimationsModule,
|
|
||||||
RouterModule.forRoot(appRoutes, routerConfig),
|
|
||||||
|
|
||||||
// Fuse, FuseConfig & FuseMockAPI
|
|
||||||
FuseModule,
|
|
||||||
FuseConfigModule.forRoot(appConfig),
|
|
||||||
FuseMockApiModule.forRoot(mockApiServices),
|
|
||||||
|
|
||||||
// Core module of your application
|
|
||||||
CoreModule,
|
|
||||||
|
|
||||||
// Layout module of your application
|
|
||||||
LayoutModule
|
|
||||||
],
|
|
||||||
bootstrap : [
|
|
||||||
AppComponent
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class AppModule
|
|
||||||
{
|
|
||||||
}
|
|
|
@ -1,14 +1,14 @@
|
||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
|
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
|
||||||
import { forkJoin, Observable } from 'rxjs';
|
|
||||||
import { MessagesService } from 'app/layout/common/messages/messages.service';
|
|
||||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||||
|
import { MessagesService } from 'app/layout/common/messages/messages.service';
|
||||||
import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
|
import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
|
||||||
import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
|
import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
|
||||||
import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
|
import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
|
||||||
|
import { forkJoin, Observable } from 'rxjs';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class InitialDataResolver implements Resolve<any>
|
export class InitialDataResolver implements Resolve<any>
|
||||||
{
|
{
|
||||||
|
@ -20,7 +20,7 @@ export class InitialDataResolver implements Resolve<any>
|
||||||
private _navigationService: NavigationService,
|
private _navigationService: NavigationService,
|
||||||
private _notificationsService: NotificationsService,
|
private _notificationsService: NotificationsService,
|
||||||
private _quickChatService: QuickChatService,
|
private _quickChatService: QuickChatService,
|
||||||
private _shortcutsService: ShortcutsService
|
private _shortcutsService: ShortcutsService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -43,7 +43,7 @@ export class InitialDataResolver implements Resolve<any>
|
||||||
this._messagesService.getAll(),
|
this._messagesService.getAll(),
|
||||||
this._notificationsService.getAll(),
|
this._notificationsService.getAll(),
|
||||||
this._quickChatService.getChats(),
|
this._quickChatService.getChats(),
|
||||||
this._shortcutsService.getAll()
|
this._shortcutsService.getAll(),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { Route } from '@angular/router';
|
import { Route } from '@angular/router';
|
||||||
|
import { InitialDataResolver } from 'app/app.resolvers';
|
||||||
import { AuthGuard } from 'app/core/auth/guards/auth.guard';
|
import { AuthGuard } from 'app/core/auth/guards/auth.guard';
|
||||||
import { NoAuthGuard } from 'app/core/auth/guards/noAuth.guard';
|
import { NoAuthGuard } from 'app/core/auth/guards/noAuth.guard';
|
||||||
import { LayoutComponent } from 'app/layout/layout.component';
|
import { LayoutComponent } from 'app/layout/layout.component';
|
||||||
import { InitialDataResolver } from 'app/app.resolvers';
|
|
||||||
|
|
||||||
// @formatter:off
|
// @formatter:off
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
|
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
|
||||||
import { catchError, Observable, throwError } from 'rxjs';
|
import { Injectable } from '@angular/core';
|
||||||
import { AuthService } from 'app/core/auth/auth.service';
|
import { AuthService } from 'app/core/auth/auth.service';
|
||||||
import { AuthUtils } from 'app/core/auth/auth.utils';
|
import { AuthUtils } from 'app/core/auth/auth.utils';
|
||||||
|
import { catchError, Observable, throwError } from 'rxjs';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class AuthInterceptor implements HttpInterceptor
|
export class AuthInterceptor implements HttpInterceptor
|
||||||
|
@ -36,13 +36,14 @@ export class AuthInterceptor implements HttpInterceptor
|
||||||
if ( this._authService.accessToken && !AuthUtils.isTokenExpired(this._authService.accessToken) )
|
if ( this._authService.accessToken && !AuthUtils.isTokenExpired(this._authService.accessToken) )
|
||||||
{
|
{
|
||||||
newReq = req.clone({
|
newReq = req.clone({
|
||||||
headers: req.headers.set('Authorization', 'Bearer ' + this._authService.accessToken)
|
headers: req.headers.set('Authorization', 'Bearer ' + this._authService.accessToken),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Response
|
// Response
|
||||||
return next.handle(newReq).pipe(
|
return next.handle(newReq).pipe(
|
||||||
catchError((error) => {
|
catchError((error) =>
|
||||||
|
{
|
||||||
|
|
||||||
// Catch "401 Unauthorized" responses
|
// Catch "401 Unauthorized" responses
|
||||||
if ( error instanceof HttpErrorResponse && error.status === 401 )
|
if ( error instanceof HttpErrorResponse && error.status === 401 )
|
||||||
|
@ -55,7 +56,7 @@ export class AuthInterceptor implements HttpInterceptor
|
||||||
}
|
}
|
||||||
|
|
||||||
return throwError(error);
|
return throwError(error);
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,20 +1,20 @@
|
||||||
import { NgModule } from '@angular/core';
|
|
||||||
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
|
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
|
||||||
import { AuthService } from 'app/core/auth/auth.service';
|
import { NgModule } from '@angular/core';
|
||||||
import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
|
import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
|
||||||
|
import { AuthService } from 'app/core/auth/auth.service';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports : [
|
imports : [
|
||||||
HttpClientModule
|
HttpClientModule,
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
AuthService,
|
AuthService,
|
||||||
{
|
{
|
||||||
provide : HTTP_INTERCEPTORS,
|
provide : HTTP_INTERCEPTORS,
|
||||||
useClass: AuthInterceptor,
|
useClass: AuthInterceptor,
|
||||||
multi : true
|
multi : true,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
export class AuthModule
|
export class AuthModule
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient } from '@angular/common/http';
|
||||||
import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
|
import { Injectable } from '@angular/core';
|
||||||
import { AuthUtils } from 'app/core/auth/auth.utils';
|
import { AuthUtils } from 'app/core/auth/auth.utils';
|
||||||
import { UserService } from 'app/core/user/user.service';
|
import { UserService } from 'app/core/user/user.service';
|
||||||
|
import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class AuthService
|
export class AuthService
|
||||||
|
@ -14,7 +14,7 @@ export class AuthService
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _httpClient: HttpClient,
|
private _httpClient: HttpClient,
|
||||||
private _userService: UserService
|
private _userService: UserService,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
|
@ -74,7 +74,8 @@ export class AuthService
|
||||||
}
|
}
|
||||||
|
|
||||||
return this._httpClient.post('api/auth/sign-in', credentials).pipe(
|
return this._httpClient.post('api/auth/sign-in', credentials).pipe(
|
||||||
switchMap((response: any) => {
|
switchMap((response: any) =>
|
||||||
|
{
|
||||||
|
|
||||||
// Store the access token in the local storage
|
// Store the access token in the local storage
|
||||||
this.accessToken = response.accessToken;
|
this.accessToken = response.accessToken;
|
||||||
|
@ -87,7 +88,7 @@ export class AuthService
|
||||||
|
|
||||||
// Return a new observable with the response
|
// Return a new observable with the response
|
||||||
return of(response);
|
return of(response);
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -98,14 +99,15 @@ export class AuthService
|
||||||
{
|
{
|
||||||
// Sign in using the token
|
// Sign in using the token
|
||||||
return this._httpClient.post('api/auth/sign-in-with-token', {
|
return this._httpClient.post('api/auth/sign-in-with-token', {
|
||||||
accessToken: this.accessToken
|
accessToken: this.accessToken,
|
||||||
}).pipe(
|
}).pipe(
|
||||||
catchError(() =>
|
catchError(() =>
|
||||||
|
|
||||||
// Return false
|
// Return false
|
||||||
of(false)
|
of(false),
|
||||||
),
|
),
|
||||||
switchMap((response: any) => {
|
switchMap((response: any) =>
|
||||||
|
{
|
||||||
|
|
||||||
// Replace the access token with the new one if it's available on
|
// Replace the access token with the new one if it's available on
|
||||||
// the response object.
|
// the response object.
|
||||||
|
@ -127,7 +129,7 @@ export class AuthService
|
||||||
|
|
||||||
// Return true
|
// Return true
|
||||||
return of(true);
|
return of(true);
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -67,7 +67,7 @@ export class AuthUtils
|
||||||
if ( str.length % 4 === 1 )
|
if ( str.length % 4 === 1 )
|
||||||
{
|
{
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'\'atob\' failed: The string to be decoded is not correctly encoded.'
|
'\'atob\' failed: The string to be decoded is not correctly encoded.',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -107,8 +107,8 @@ export class AuthUtils
|
||||||
{
|
{
|
||||||
return decodeURIComponent(
|
return decodeURIComponent(
|
||||||
Array.prototype.map
|
Array.prototype.map
|
||||||
.call(this._b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
|
.call(this._b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
|
||||||
.join('')
|
.join(''),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,16 @@
|
||||||
import { inject } from '@angular/core';
|
import { inject } from '@angular/core';
|
||||||
import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
|
import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
|
||||||
import { of, switchMap } from 'rxjs';
|
|
||||||
import { AuthService } from 'app/core/auth/auth.service';
|
import { AuthService } from 'app/core/auth/auth.service';
|
||||||
|
import { of, switchMap } from 'rxjs';
|
||||||
|
|
||||||
export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
|
export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
|
||||||
|
{
|
||||||
const router: Router = inject(Router);
|
const router: Router = inject(Router);
|
||||||
|
|
||||||
// Check the authentication status
|
// Check the authentication status
|
||||||
return inject(AuthService).check().pipe(
|
return inject(AuthService).check().pipe(
|
||||||
switchMap((authenticated) => {
|
switchMap((authenticated) =>
|
||||||
|
{
|
||||||
|
|
||||||
// If the user is not authenticated...
|
// If the user is not authenticated...
|
||||||
if ( !authenticated )
|
if ( !authenticated )
|
||||||
|
@ -22,6 +24,6 @@ export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
|
||||||
|
|
||||||
// Allow the access
|
// Allow the access
|
||||||
return of(true);
|
return of(true);
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,14 +1,16 @@
|
||||||
import { inject } from '@angular/core';
|
import { inject } from '@angular/core';
|
||||||
import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
|
import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
|
||||||
import { of, switchMap } from 'rxjs';
|
|
||||||
import { AuthService } from 'app/core/auth/auth.service';
|
import { AuthService } from 'app/core/auth/auth.service';
|
||||||
|
import { of, switchMap } from 'rxjs';
|
||||||
|
|
||||||
export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
|
export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
|
||||||
|
{
|
||||||
const router: Router = inject(Router);
|
const router: Router = inject(Router);
|
||||||
|
|
||||||
// Check the authentication status
|
// Check the authentication status
|
||||||
return inject(AuthService).check().pipe(
|
return inject(AuthService).check().pipe(
|
||||||
switchMap((authenticated) => {
|
switchMap((authenticated) =>
|
||||||
|
{
|
||||||
|
|
||||||
// If the user is authenticated...
|
// If the user is authenticated...
|
||||||
if ( authenticated )
|
if ( authenticated )
|
||||||
|
@ -18,6 +20,6 @@ export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
|
||||||
|
|
||||||
// Allow the access
|
// Allow the access
|
||||||
return of(true);
|
return of(true);
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -39,33 +39,33 @@ export const appConfig: AppConfig = {
|
||||||
sm: '600px',
|
sm: '600px',
|
||||||
md: '960px',
|
md: '960px',
|
||||||
lg: '1280px',
|
lg: '1280px',
|
||||||
xl: '1440px'
|
xl: '1440px',
|
||||||
},
|
},
|
||||||
theme : 'theme-default',
|
theme : 'theme-default',
|
||||||
themes : [
|
themes : [
|
||||||
{
|
{
|
||||||
id : 'theme-default',
|
id : 'theme-default',
|
||||||
name: 'Default'
|
name: 'Default',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id : 'theme-brand',
|
id : 'theme-brand',
|
||||||
name: 'Brand'
|
name: 'Brand',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id : 'theme-teal',
|
id : 'theme-teal',
|
||||||
name: 'Teal'
|
name: 'Teal',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id : 'theme-rose',
|
id : 'theme-rose',
|
||||||
name: 'Rose'
|
name: 'Rose',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id : 'theme-purple',
|
id : 'theme-purple',
|
||||||
name: 'Purple'
|
name: 'Purple',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id : 'theme-amber',
|
id : 'theme-amber',
|
||||||
name: 'Amber'
|
name: 'Amber',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
|
|
|
@ -7,8 +7,8 @@ import { TranslocoCoreModule } from 'app/core/transloco/transloco.module';
|
||||||
imports: [
|
imports: [
|
||||||
AuthModule,
|
AuthModule,
|
||||||
IconsModule,
|
IconsModule,
|
||||||
TranslocoCoreModule
|
TranslocoCoreModule,
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
export class CoreModule
|
export class CoreModule
|
||||||
{
|
{
|
||||||
|
@ -16,7 +16,7 @@ export class CoreModule
|
||||||
* Constructor
|
* Constructor
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
@Optional() @SkipSelf() parentModule?: CoreModule
|
@Optional() @SkipSelf() parentModule?: CoreModule,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
// Do not allow multiple injections
|
// Do not allow multiple injections
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { DomSanitizer } from '@angular/platform-browser';
|
|
||||||
import { MatIconRegistry } from '@angular/material/icon';
|
import { MatIconRegistry } from '@angular/material/icon';
|
||||||
|
import { DomSanitizer } from '@angular/platform-browser';
|
||||||
|
|
||||||
@NgModule()
|
@NgModule()
|
||||||
export class IconsModule
|
export class IconsModule
|
||||||
|
@ -10,7 +10,7 @@ export class IconsModule
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
private _domSanitizer: DomSanitizer,
|
private _domSanitizer: DomSanitizer,
|
||||||
private _matIconRegistry: MatIconRegistry
|
private _matIconRegistry: MatIconRegistry,
|
||||||
)
|
)
|
||||||
{
|
{
|
||||||
// Register icon sets
|
// Register icon sets
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient } from '@angular/common/http';
|
||||||
import { Observable, ReplaySubject, tap } from 'rxjs';
|
import { Injectable } from '@angular/core';
|
||||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||||
|
import { Observable, ReplaySubject, tap } from 'rxjs';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class NavigationService
|
export class NavigationService
|
||||||
{
|
{
|
||||||
|
@ -39,9 +39,10 @@ export class NavigationService
|
||||||
get(): Observable<Navigation>
|
get(): Observable<Navigation>
|
||||||
{
|
{
|
||||||
return this._httpClient.get<Navigation>('api/common/navigation').pipe(
|
return this._httpClient.get<Navigation>('api/common/navigation').pipe(
|
||||||
tap((navigation) => {
|
tap((navigation) =>
|
||||||
|
{
|
||||||
this._navigation.next(navigation);
|
this._navigation.next(navigation);
|
||||||
})
|
}),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient } from '@angular/common/http';
|
||||||
import { Observable } from 'rxjs';
|
import { Injectable } from '@angular/core';
|
||||||
import { Translation, TranslocoLoader } from '@ngneat/transloco';
|
import { Translation, TranslocoLoader } from '@ngneat/transloco';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class TranslocoHttpLoader implements TranslocoLoader
|
export class TranslocoHttpLoader implements TranslocoLoader
|
||||||
{
|
{
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user