mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2024-10-30 01:08:47 +00:00
Standalone components, Angular v16 and more
This commit is contained in:
commit
4af04eab4d
9044
package-lock.json
generated
9044
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
73
package.json
73
package.json
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fuse-angular",
|
||||
"version": "17.2.0",
|
||||
"version": "18.0.0",
|
||||
"description": "Fuse - Angular Admin Template and Starter Project",
|
||||
"author": "https://themeforest.net/user/srcn",
|
||||
"license": "https://themeforest.net/licenses/standard",
|
||||
|
@ -13,55 +13,54 @@
|
|||
"test": "ng test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "15.1.1",
|
||||
"@angular/cdk": "15.1.1",
|
||||
"@angular/common": "15.1.1",
|
||||
"@angular/compiler": "15.1.1",
|
||||
"@angular/core": "15.1.1",
|
||||
"@angular/forms": "15.1.1",
|
||||
"@angular/material": "15.1.1",
|
||||
"@angular/material-luxon-adapter": "15.1.1",
|
||||
"@angular/platform-browser": "15.1.1",
|
||||
"@angular/platform-browser-dynamic": "15.1.1",
|
||||
"@angular/router": "15.1.1",
|
||||
"@ngneat/transloco": "4.2.2",
|
||||
"apexcharts": "3.36.3",
|
||||
"@angular/animations": "16.0.3",
|
||||
"@angular/cdk": "16.0.2",
|
||||
"@angular/common": "16.0.3",
|
||||
"@angular/compiler": "16.0.3",
|
||||
"@angular/core": "16.0.3",
|
||||
"@angular/forms": "16.0.3",
|
||||
"@angular/material": "16.0.2",
|
||||
"@angular/material-luxon-adapter": "16.0.2",
|
||||
"@angular/platform-browser": "16.0.3",
|
||||
"@angular/platform-browser-dynamic": "16.0.3",
|
||||
"@angular/router": "16.0.3",
|
||||
"@ngneat/transloco": "4.2.7",
|
||||
"apexcharts": "3.40.0",
|
||||
"crypto-js": "3.3.0",
|
||||
"highlight.js": "11.7.0",
|
||||
"highlight.js": "11.8.0",
|
||||
"lodash-es": "4.17.21",
|
||||
"luxon": "3.2.1",
|
||||
"ng-apexcharts": "1.7.4",
|
||||
"ngx-quill": "20.0.1",
|
||||
"luxon": "3.3.0",
|
||||
"ng-apexcharts": "1.7.6",
|
||||
"ngx-quill": "22.0.0",
|
||||
"perfect-scrollbar": "1.5.5",
|
||||
"quill": "1.3.7",
|
||||
"rxjs": "7.8.0",
|
||||
"tslib": "2.4.1",
|
||||
"zone.js": "0.12.0"
|
||||
"rxjs": "7.8.1",
|
||||
"tslib": "2.5.2",
|
||||
"zone.js": "0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "15.1.2",
|
||||
"@angular/cli": "15.1.2",
|
||||
"@angular/compiler-cli": "15.1.1",
|
||||
"@tailwindcss/line-clamp": "0.4.2",
|
||||
"@angular-devkit/build-angular": "16.0.3",
|
||||
"@angular/cli": "16.0.3",
|
||||
"@angular/compiler-cli": "16.0.3",
|
||||
"@tailwindcss/typography": "0.5.9",
|
||||
"@types/chroma-js": "2.1.4",
|
||||
"@types/chroma-js": "2.4.0",
|
||||
"@types/crypto-js": "3.1.47",
|
||||
"@types/highlight.js": "10.1.0",
|
||||
"@types/jasmine": "4.3.1",
|
||||
"@types/lodash": "4.14.191",
|
||||
"@types/lodash-es": "4.17.6",
|
||||
"@types/luxon": "3.2.0",
|
||||
"autoprefixer": "10.4.13",
|
||||
"@types/jasmine": "4.3.2",
|
||||
"@types/lodash": "4.14.195",
|
||||
"@types/lodash-es": "4.17.7",
|
||||
"@types/luxon": "3.3.0",
|
||||
"autoprefixer": "10.4.14",
|
||||
"chroma-js": "2.4.2",
|
||||
"jasmine-core": "4.5.0",
|
||||
"karma": "6.4.1",
|
||||
"karma-chrome-launcher": "3.1.1",
|
||||
"jasmine-core": "5.0.0",
|
||||
"karma": "6.4.2",
|
||||
"karma-chrome-launcher": "3.2.0",
|
||||
"karma-coverage": "2.2.0",
|
||||
"karma-jasmine": "5.1.0",
|
||||
"karma-jasmine-html-reporter": "2.0.0",
|
||||
"lodash": "4.17.21",
|
||||
"postcss": "8.4.21",
|
||||
"tailwindcss": "3.2.4",
|
||||
"typescript": "4.9.4"
|
||||
"postcss": "8.4.24",
|
||||
"tailwindcss": "3.3.2",
|
||||
"typescript": "5.0.4"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,12 +8,12 @@ const expandCollapse = trigger('expandCollapse',
|
|||
[
|
||||
state('void, collapsed',
|
||||
style({
|
||||
height: '0'
|
||||
})
|
||||
height: '0',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*, expanded',
|
||||
style('*')
|
||||
style('*'),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -24,11 +24,11 @@ const expandCollapse = trigger('expandCollapse',
|
|||
animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
export { expandCollapse };
|
||||
|
|
|
@ -8,14 +8,14 @@ const fadeIn = trigger('fadeIn',
|
|||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity: 0
|
||||
})
|
||||
opacity: 0,
|
||||
}),
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity: 1
|
||||
})
|
||||
opacity: 1,
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -25,11 +25,11 @@ const fadeIn = trigger('fadeIn',
|
|||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -40,15 +40,15 @@ const fadeInTop = trigger('fadeInTop',
|
|||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, -100%, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -58,11 +58,11 @@ const fadeInTop = trigger('fadeInTop',
|
|||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -73,15 +73,15 @@ const fadeInBottom = trigger('fadeInBottom',
|
|||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, 100%, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -91,11 +91,11 @@ const fadeInBottom = trigger('fadeInBottom',
|
|||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -106,15 +106,15 @@ const fadeInLeft = trigger('fadeInLeft',
|
|||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(-100%, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -124,11 +124,11 @@ const fadeInLeft = trigger('fadeInLeft',
|
|||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -139,15 +139,15 @@ const fadeInRight = trigger('fadeInRight',
|
|||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(100%, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -157,11 +157,11 @@ const fadeInRight = trigger('fadeInRight',
|
|||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -171,14 +171,14 @@ const fadeOut = trigger('fadeOut',
|
|||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity: 1
|
||||
})
|
||||
opacity: 1,
|
||||
}),
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity: 0
|
||||
})
|
||||
opacity: 0,
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -188,11 +188,11 @@ const fadeOut = trigger('fadeOut',
|
|||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -203,15 +203,15 @@ const fadeOutTop = trigger('fadeOutTop',
|
|||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, -100%, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -221,11 +221,11 @@ const fadeOutTop = trigger('fadeOutTop',
|
|||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -236,15 +236,15 @@ const fadeOutBottom = trigger('fadeOutBottom',
|
|||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, 100%, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -254,11 +254,11 @@ const fadeOutBottom = trigger('fadeOutBottom',
|
|||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -269,15 +269,15 @@ const fadeOutLeft = trigger('fadeOutLeft',
|
|||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(-100%, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -287,11 +287,11 @@ const fadeOutLeft = trigger('fadeOutLeft',
|
|||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -302,15 +302,15 @@ const fadeOutRight = trigger('fadeOutRight',
|
|||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(100%, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -320,11 +320,11 @@ const fadeOutRight = trigger('fadeOutRight',
|
|||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };
|
||||
|
|
|
@ -11,5 +11,5 @@ export const fuseAnimations = [
|
|||
shake,
|
||||
slideInTop, slideInBottom, slideInLeft, slideInRight,
|
||||
slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
|
||||
zoomIn, zoomOut
|
||||
zoomIn, zoomOut,
|
||||
];
|
||||
|
|
|
@ -16,58 +16,58 @@ const shake = trigger('shake',
|
|||
keyframes([
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
offset : 0
|
||||
offset : 0,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.1
|
||||
offset : 0.1,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.2
|
||||
offset : 0.2,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.3
|
||||
offset : 0.3,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.4
|
||||
offset : 0.4,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.5
|
||||
offset : 0.5,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.6
|
||||
offset : 0.6,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.7
|
||||
offset : 0.7,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.8
|
||||
offset : 0.8,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.9
|
||||
offset : 0.9,
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
offset : 1
|
||||
})
|
||||
])
|
||||
)
|
||||
offset : 1,
|
||||
}),
|
||||
]),
|
||||
),
|
||||
],
|
||||
{
|
||||
params: {
|
||||
timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)'
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
export { shake };
|
||||
|
|
|
@ -8,14 +8,14 @@ const slideInTop = trigger('slideInTop',
|
|||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, -100%, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -25,11 +25,11 @@ const slideInTop = trigger('slideInTop',
|
|||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -39,14 +39,14 @@ const slideInBottom = trigger('slideInBottom',
|
|||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, 100%, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -56,11 +56,11 @@ const slideInBottom = trigger('slideInBottom',
|
|||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -70,14 +70,14 @@ const slideInLeft = trigger('slideInLeft',
|
|||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(-100%, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -87,11 +87,11 @@ const slideInLeft = trigger('slideInLeft',
|
|||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -101,14 +101,14 @@ const slideInRight = trigger('slideInRight',
|
|||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(100%, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -118,11 +118,11 @@ const slideInRight = trigger('slideInRight',
|
|||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -132,14 +132,14 @@ const slideOutTop = trigger('slideOutTop',
|
|||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, -100%, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -149,11 +149,11 @@ const slideOutTop = trigger('slideOutTop',
|
|||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -163,14 +163,14 @@ const slideOutBottom = trigger('slideOutBottom',
|
|||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, 100%, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -180,11 +180,11 @@ const slideOutBottom = trigger('slideOutBottom',
|
|||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -194,14 +194,14 @@ const slideOutLeft = trigger('slideOutLeft',
|
|||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(-100%, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -211,11 +211,11 @@ const slideOutLeft = trigger('slideOutLeft',
|
|||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -225,14 +225,14 @@ const slideOutRight = trigger('slideOutRight',
|
|||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(100%, 0, 0)'
|
||||
})
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -242,11 +242,11 @@ const slideOutRight = trigger('slideOutRight',
|
|||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };
|
||||
|
|
|
@ -10,15 +10,15 @@ const zoomIn = trigger('zoomIn',
|
|||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'scale(0.5)'
|
||||
})
|
||||
transform: 'scale(0.5)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'scale(1)'
|
||||
})
|
||||
transform: 'scale(1)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -28,11 +28,11 @@ const zoomIn = trigger('zoomIn',
|
|||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
@ -44,15 +44,15 @@ const zoomOut = trigger('zoomOut',
|
|||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'scale(1)'
|
||||
})
|
||||
transform: 'scale(1)',
|
||||
}),
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'scale(0.5)'
|
||||
})
|
||||
transform: 'scale(0.5)',
|
||||
}),
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
|
@ -62,11 +62,11 @@ const zoomOut = trigger('zoomOut',
|
|||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
|
||||
},
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
export { zoomIn, zoomOut };
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
<mat-icon
|
||||
*ngIf="type === 'warning'"
|
||||
[svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
|
||||
[svgIcon]="'heroicons_solid:exclamation-triangle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'error'"
|
||||
|
@ -76,7 +76,7 @@
|
|||
class="fuse-alert-dismiss-button"
|
||||
mat-icon-button
|
||||
(click)="dismiss()">
|
||||
<mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon>
|
||||
<mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
|
||||
import { FuseAlertService } from '@fuse/components/alert/alert.service';
|
||||
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-alert',
|
||||
|
@ -13,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
|||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
animations : fuseAnimations,
|
||||
exportAs : 'fuseAlert'
|
||||
exportAs : 'fuseAlert',
|
||||
standalone : true,
|
||||
imports : [NgIf, MatIconModule, MatButtonModule],
|
||||
})
|
||||
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
|
@ -39,7 +44,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
|||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseAlertService: FuseAlertService,
|
||||
private _fuseUtilsService: FuseUtilsService
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -69,7 +74,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
|||
'fuse-alert-type-info' : this.type === 'info',
|
||||
'fuse-alert-type-success' : this.type === 'success',
|
||||
'fuse-alert-type-warning' : this.type === 'warning',
|
||||
'fuse-alert-type-error' : this.type === 'error'
|
||||
'fuse-alert-type-error' : this.type === 'error',
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
}
|
||||
|
@ -119,10 +124,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
|||
this._fuseAlertService.onDismiss
|
||||
.pipe(
|
||||
filter(name => this.name === name),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
takeUntil(this._unsubscribeAll),
|
||||
)
|
||||
.subscribe(() => {
|
||||
|
||||
.subscribe(() =>
|
||||
{
|
||||
// Dismiss the alert
|
||||
this.dismiss();
|
||||
});
|
||||
|
@ -131,10 +136,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
|||
this._fuseAlertService.onShow
|
||||
.pipe(
|
||||
filter(name => this.name === name),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
takeUntil(this._unsubscribeAll),
|
||||
)
|
||||
.subscribe(() => {
|
||||
|
||||
.subscribe(() =>
|
||||
{
|
||||
// Show the alert
|
||||
this.show();
|
||||
});
|
||||
|
|
|
@ -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
|
||||
{
|
||||
}
|
|
@ -1,9 +1,7 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseAlertService
|
||||
{
|
||||
private readonly _onDismiss: ReplaySubject<string> = new ReplaySubject<string>(1);
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
export * from '@fuse/components/alert/alert.component';
|
||||
export * from '@fuse/components/alert/alert.module';
|
||||
export * from '@fuse/components/alert/alert.service';
|
||||
export * from '@fuse/components/alert/alert.types';
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { NgIf } from '@angular/common';
|
||||
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseCardFace } from '@fuse/components/card/card.types';
|
||||
|
||||
|
@ -9,7 +10,9 @@ import { FuseCardFace } from '@fuse/components/card/card.types';
|
|||
styleUrls : ['./card.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations : fuseAnimations,
|
||||
exportAs : 'fuseCard'
|
||||
exportAs : 'fuseCard',
|
||||
standalone : true,
|
||||
imports : [NgIf],
|
||||
})
|
||||
export class FuseCardComponent implements OnChanges
|
||||
{
|
||||
|
@ -43,7 +46,7 @@ export class FuseCardComponent implements OnChanges
|
|||
'fuse-card-expanded' : this.expanded,
|
||||
'fuse-card-face-back' : this.flippable && this.face === 'back',
|
||||
'fuse-card-face-front': this.flippable && this.face === 'front',
|
||||
'fuse-card-flippable' : this.flippable
|
||||
'fuse-card-flippable' : this.flippable,
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
}
|
||||
|
|
|
@ -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.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 { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
|
||||
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
|
||||
import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-drawer',
|
||||
templateUrl : './drawer.component.html',
|
||||
styleUrls : ['./drawer.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
exportAs : 'fuseDrawer'
|
||||
exportAs : 'fuseDrawer',
|
||||
standalone : true,
|
||||
})
|
||||
export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
|
@ -45,10 +46,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
|||
private _elementRef: ElementRef,
|
||||
private _renderer2: Renderer2,
|
||||
private _fuseDrawerService: FuseDrawerService,
|
||||
private _fuseUtilsService: FuseUtilsService
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
this._handleOverlayClick = (): void => {
|
||||
this._handleOverlayClick = (): void =>
|
||||
{
|
||||
this.close();
|
||||
};
|
||||
}
|
||||
|
@ -69,7 +71,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
|||
'fuse-drawer-hover' : this._hovered,
|
||||
[`fuse-drawer-mode-${this.mode}`] : true,
|
||||
'fuse-drawer-opened' : this.opened,
|
||||
[`fuse-drawer-position-${this.position}`]: true
|
||||
[`fuse-drawer-position-${this.position}`]: true,
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
}
|
||||
|
@ -80,7 +82,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
|||
@HostBinding('style') get styleList(): any
|
||||
{
|
||||
return {
|
||||
'visibility': this.opened ? 'visible' : 'hidden'
|
||||
'visibility': this.opened ? 'visible' : 'hidden',
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -173,7 +175,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
|||
// Enable the animations after a delay
|
||||
// The delay must be bigger than the current transition-duration
|
||||
// to make sure nothing will be animated while the mode is changing
|
||||
setTimeout(() => {
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._enableAnimations();
|
||||
}, 500);
|
||||
}
|
||||
|
@ -345,7 +348,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
|||
// Create enter animation and attach it to the player
|
||||
this._player = this._animationBuilder.build([
|
||||
style({opacity: 0}),
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
|
||||
]).create(this._overlay);
|
||||
|
||||
// Play the animation
|
||||
|
@ -369,15 +372,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
|||
|
||||
// Create the leave animation and attach it to the player
|
||||
this._player = this._animationBuilder.build([
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
|
||||
]).create(this._overlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
|
||||
this._player.onDone(() =>
|
||||
{
|
||||
// If the overlay still exists...
|
||||
if ( this._overlay )
|
||||
{
|
||||
|
|
|
@ -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
|
||||
{
|
||||
}
|
|
@ -1,9 +1,7 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseDrawerService
|
||||
{
|
||||
private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<string, FuseDrawerComponent>();
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
export * from '@fuse/components/drawer/drawer.component';
|
||||
export * from '@fuse/components/drawer/drawer.module';
|
||||
export * from '@fuse/components/drawer/drawer.service';
|
||||
export * from '@fuse/components/drawer/drawer.types';
|
||||
|
|
|
@ -8,5 +8,5 @@
|
|||
|
||||
<!-- Default icon -->
|
||||
<ng-template #defaultIconTpl>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrows-pointing-out'"></mat-icon>
|
||||
</ng-template>
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
|
||||
|
||||
@Component({
|
||||
|
@ -7,7 +10,9 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
|
|||
templateUrl : './fullscreen.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'fuseFullscreen'
|
||||
exportAs : 'fuseFullscreen',
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
|
||||
})
|
||||
export class FuseFullscreenComponent implements OnInit
|
||||
{
|
||||
|
|
|
@ -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.module';
|
||||
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 { DomSanitizer } from '@angular/platform-browser';
|
||||
import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
|
||||
|
@ -8,7 +9,9 @@ import { FuseHighlightService } from '@fuse/components/highlight/highlight.servi
|
|||
styleUrls : ['./highlight.component.scss'],
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'fuseHighlight'
|
||||
exportAs : 'fuseHighlight',
|
||||
standalone : true,
|
||||
imports : [NgClass],
|
||||
})
|
||||
export class FuseHighlightComponent implements OnChanges, AfterViewInit
|
||||
{
|
||||
|
@ -28,7 +31,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
|
|||
private _elementRef: ElementRef,
|
||||
private _renderer2: Renderer2,
|
||||
private _fuseHighlightService: FuseHighlightService,
|
||||
private _viewContainerRef: ViewContainerRef
|
||||
private _viewContainerRef: ViewContainerRef,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -123,7 +126,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
|
|||
// Render and insert the template
|
||||
this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
|
||||
highlightedCode: this.highlightedCode,
|
||||
lang : this.lang
|
||||
lang : this.lang,
|
||||
});
|
||||
|
||||
// Detect the changes
|
||||
|
|
|
@ -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
|
||||
{
|
||||
}
|
|
@ -1,9 +1,7 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import hljs from 'highlight.js';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseHighlightService
|
||||
{
|
||||
/**
|
||||
|
@ -61,19 +59,19 @@ export class FuseHighlightService
|
|||
|
||||
// Iterate through the lines
|
||||
lines.filter(line => line.length)
|
||||
.forEach((line, index) => {
|
||||
.forEach((line, index) =>
|
||||
{
|
||||
// Always get the indentation of the first line so we can
|
||||
// have something to compare with
|
||||
if ( index === 0 )
|
||||
{
|
||||
indentation = line.search(/\S|$/);
|
||||
return;
|
||||
}
|
||||
|
||||
// Always get the indentation of the first line so we can
|
||||
// have something to compare with
|
||||
if ( index === 0 )
|
||||
{
|
||||
indentation = line.search(/\S|$/);
|
||||
return;
|
||||
}
|
||||
|
||||
// Look at all the remaining lines to figure out the smallest indentation.
|
||||
indentation = Math.min(line.search(/\S|$/), indentation);
|
||||
});
|
||||
// Look at all the remaining lines to figure out the smallest indentation.
|
||||
indentation = Math.min(line.search(/\S|$/), indentation);
|
||||
});
|
||||
|
||||
// Iterate through the lines one more time, remove the extra
|
||||
// indentation, join them together and return it
|
||||
|
|
|
@ -1,3 +1,2 @@
|
|||
export * from '@fuse/components/highlight/highlight.component';
|
||||
export * from '@fuse/components/highlight/highlight.module';
|
||||
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 { Subject, takeUntil } from 'rxjs';
|
||||
import { NgIf } from '@angular/common';
|
||||
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { FuseLoadingService } from '@fuse/services/loading';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-loading-bar',
|
||||
templateUrl : './loading-bar.component.html',
|
||||
styleUrls : ['./loading-bar.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
exportAs : 'fuseLoadingBar'
|
||||
exportAs : 'fuseLoadingBar',
|
||||
standalone : true,
|
||||
imports : [NgIf, MatProgressBarModule],
|
||||
})
|
||||
export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
|
@ -52,19 +56,22 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
|
|||
// Subscribe to the service
|
||||
this._fuseLoadingService.mode$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((value) => {
|
||||
.subscribe((value) =>
|
||||
{
|
||||
this.mode = value;
|
||||
});
|
||||
|
||||
this._fuseLoadingService.progress$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((value) => {
|
||||
.subscribe((value) =>
|
||||
{
|
||||
this.progress = value;
|
||||
});
|
||||
|
||||
this._fuseLoadingService.show$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((value) => {
|
||||
.subscribe((value) =>
|
||||
{
|
||||
this.show = value;
|
||||
});
|
||||
|
||||
|
|
|
@ -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.module';
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { NgTemplateOutlet } from '@angular/common';
|
||||
import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
|
@ -7,7 +8,9 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
|||
templateUrl : './masonry.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations : fuseAnimations,
|
||||
exportAs : 'fuseMasonry'
|
||||
exportAs : 'fuseMasonry',
|
||||
standalone : true,
|
||||
imports : [NgTemplateOutlet],
|
||||
})
|
||||
export class FuseMasonryComponent implements OnChanges, AfterViewInit
|
||||
{
|
||||
|
|
|
@ -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.module';
|
||||
|
|
|
@ -1,15 +1,21 @@
|
|||
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { IsActiveMatchOptions } from '@angular/router';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-horizontal-navigation-basic-item',
|
||||
templateUrl : './basic.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule],
|
||||
})
|
||||
export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
@ -26,7 +32,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
|
|||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseUtilsService: FuseUtilsService
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
// Set the equivalent of {exact: false} as default for active match options.
|
||||
|
@ -61,9 +67,9 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
|
|||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
|
|
@ -1,15 +1,22 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { MatMenu } from '@angular/material/menu';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenu, MatMenuModule } from '@angular/material/menu';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
|
||||
import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-horizontal-navigation-branch-item',
|
||||
templateUrl : './branch.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgIf, NgClass, MatMenuModule, NgTemplateOutlet, NgFor, FuseHorizontalNavigationBasicItemComponent, forwardRef(() => FuseHorizontalNavigationBranchItemComponent), FuseHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule],
|
||||
})
|
||||
export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
@ -30,7 +37,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
|
|||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -49,9 +56,9 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
|
|||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
|
|
@ -1,13 +1,16 @@
|
|||
import { NgClass } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-horizontal-navigation-divider-item',
|
||||
templateUrl : './divider.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgClass],
|
||||
})
|
||||
export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
@ -22,7 +25,7 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
|
|||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -41,9 +44,9 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
|
|||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
|
|
@ -1,13 +1,16 @@
|
|||
import { NgClass } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-horizontal-navigation-spacer-item',
|
||||
templateUrl : './spacer.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgClass],
|
||||
})
|
||||
export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
@ -22,7 +25,7 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
|
|||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -41,9 +44,9 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
|
|||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
|
|
@ -1,9 +1,13 @@
|
|||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { ReplaySubject, Subject } from 'rxjs';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
import { ReplaySubject, Subject } from 'rxjs';
|
||||
import { FuseHorizontalNavigationBasicItemComponent } from './components/basic/basic.component';
|
||||
import { FuseHorizontalNavigationBranchItemComponent } from './components/branch/branch.component';
|
||||
import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-horizontal-navigation',
|
||||
|
@ -12,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
|||
animations : fuseAnimations,
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'fuseHorizontalNavigation'
|
||||
exportAs : 'fuseHorizontalNavigation',
|
||||
standalone : true,
|
||||
imports : [NgFor, NgIf, FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationSpacerItemComponent],
|
||||
})
|
||||
export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
|
@ -28,7 +34,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
|
|||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseUtilsService: FuseUtilsService
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
|
|
@ -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
|
||||
{
|
||||
}
|
|
@ -1,9 +1,7 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseNavigationService
|
||||
{
|
||||
private _componentRegistry: Map<string, any> = new Map<string, any>();
|
||||
|
@ -160,7 +158,7 @@ export class FuseNavigationService
|
|||
getItemParent(
|
||||
id: string,
|
||||
navigation: FuseNavigationItem[],
|
||||
parent: FuseNavigationItem[] | FuseNavigationItem
|
||||
parent: FuseNavigationItem[] | FuseNavigationItem,
|
||||
): FuseNavigationItem[] | FuseNavigationItem | null
|
||||
{
|
||||
for ( const item of navigation )
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
export * from '@fuse/components/navigation/horizontal/horizontal.component';
|
||||
export * from '@fuse/components/navigation/vertical/vertical.component';
|
||||
export * from '@fuse/components/navigation/navigation.module';
|
||||
export * from '@fuse/components/navigation/navigation.service';
|
||||
export * from '@fuse/components/navigation/navigation.types';
|
||||
|
|
|
@ -1,15 +1,25 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
|
||||
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
|
||||
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
|
||||
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
|
||||
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-vertical-navigation-aside-item',
|
||||
templateUrl : './aside.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
|
||||
})
|
||||
export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
|
@ -34,7 +44,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
|
|||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _router: Router,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -70,10 +80,10 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
|
|||
this._router.events
|
||||
.pipe(
|
||||
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
takeUntil(this._unsubscribeAll),
|
||||
)
|
||||
.subscribe((event: NavigationEnd) => {
|
||||
|
||||
.subscribe((event: NavigationEnd) =>
|
||||
{
|
||||
// Mark if active
|
||||
this._markIfActive(event.urlAfterRedirects);
|
||||
});
|
||||
|
@ -83,9 +93,9 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
|
|||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
|
|
@ -1,15 +1,20 @@
|
|||
import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { IsActiveMatchOptions } from '@angular/router';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-vertical-navigation-basic-item',
|
||||
templateUrl : './basic.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule],
|
||||
})
|
||||
export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
@ -26,7 +31,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
|
|||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseUtilsService: FuseUtilsService
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
// Set the equivalent of {exact: false} as default for active match options.
|
||||
|
@ -61,9 +66,9 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
|
|||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
|
|
@ -1,17 +1,26 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
|
||||
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
|
||||
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
|
||||
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { filter, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-vertical-navigation-collapsable-item',
|
||||
templateUrl : './collapsable.component.html',
|
||||
animations : fuseAnimations,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, forwardRef(() => FuseVerticalNavigationCollapsableItemComponent), FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
|
||||
})
|
||||
export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
@ -34,7 +43,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
|||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _router: Router,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -51,7 +60,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
|||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
return {
|
||||
'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
|
||||
'fuse-vertical-navigation-item-expanded' : this.isExpanded
|
||||
'fuse-vertical-navigation-item-expanded' : this.isExpanded,
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
}
|
||||
|
@ -86,8 +95,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
|||
// Listen for the onCollapsableItemCollapsed from the service
|
||||
this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((collapsedItem) => {
|
||||
|
||||
.subscribe((collapsedItem) =>
|
||||
{
|
||||
// Check if the collapsed item is null
|
||||
if ( collapsedItem === null )
|
||||
{
|
||||
|
@ -106,8 +115,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
|||
{
|
||||
this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((expandedItem) => {
|
||||
|
||||
.subscribe((expandedItem) =>
|
||||
{
|
||||
// Check if the expanded item is null
|
||||
if ( expandedItem === null )
|
||||
{
|
||||
|
@ -141,10 +150,10 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
|||
this._router.events
|
||||
.pipe(
|
||||
filter((event): event is NavigationEnd => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
takeUntil(this._unsubscribeAll),
|
||||
)
|
||||
.subscribe((event: NavigationEnd) => {
|
||||
|
||||
.subscribe((event: NavigationEnd) =>
|
||||
{
|
||||
// If the item has a children that has a matching url with the current url, expand...
|
||||
if ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
|
||||
{
|
||||
|
@ -163,9 +172,9 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
|
|||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
|
|
@ -1,13 +1,16 @@
|
|||
import { NgClass } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-vertical-navigation-divider-item',
|
||||
templateUrl : './divider.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgClass],
|
||||
})
|
||||
export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
@ -22,7 +25,7 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
|
|||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -41,9 +44,9 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
|
|||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
|
|
@ -1,14 +1,22 @@
|
|||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
|
||||
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
|
||||
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
|
||||
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-vertical-navigation-group-item',
|
||||
templateUrl : './group.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgClass, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, forwardRef(() => FuseVerticalNavigationGroupItemComponent), FuseVerticalNavigationSpacerItemComponent],
|
||||
})
|
||||
export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
@ -28,7 +36,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
|
|||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -47,9 +55,9 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
|
|||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
|
|
@ -1,13 +1,16 @@
|
|||
import { NgClass } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-vertical-navigation-spacer-item',
|
||||
templateUrl : './spacer.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgClass],
|
||||
})
|
||||
export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
|
@ -22,7 +25,7 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
|
|||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -41,9 +44,9 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
|
|||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseVerticalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
|
|
@ -1,15 +1,21 @@
|
|||
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
|
||||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
|
||||
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
|
||||
import { DOCUMENT, NgFor, NgIf } from '@angular/common';
|
||||
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
|
||||
import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
|
||||
import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
|
||||
import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
|
||||
import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
|
||||
import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
|
||||
import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
|
||||
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-vertical-navigation',
|
||||
|
@ -18,7 +24,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
|||
animations : fuseAnimations,
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'fuseVerticalNavigation'
|
||||
exportAs : 'fuseVerticalNavigation',
|
||||
standalone : true,
|
||||
imports : [FuseScrollbarDirective, NgFor, NgIf, FuseVerticalNavigationAsideItemComponent, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
|
||||
})
|
||||
export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy
|
||||
{
|
||||
|
@ -72,13 +80,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
private _router: Router,
|
||||
private _scrollStrategyOptions: ScrollStrategyOptions,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseUtilsService: FuseUtilsService
|
||||
private _fuseUtilsService: FuseUtilsService,
|
||||
)
|
||||
{
|
||||
this._handleAsideOverlayClick = (): void => {
|
||||
this._handleAsideOverlayClick = (): void =>
|
||||
{
|
||||
this.closeAside();
|
||||
};
|
||||
this._handleOverlayClick = (): void => {
|
||||
this._handleOverlayClick = (): void =>
|
||||
{
|
||||
this.close();
|
||||
};
|
||||
}
|
||||
|
@ -102,7 +112,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
'fuse-vertical-navigation-mode-side' : this.mode === 'side',
|
||||
'fuse-vertical-navigation-opened' : this.opened,
|
||||
'fuse-vertical-navigation-position-left' : this.position === 'left',
|
||||
'fuse-vertical-navigation-position-right' : this.position === 'right'
|
||||
'fuse-vertical-navigation-position-right' : this.position === 'right',
|
||||
};
|
||||
/* eslint-enable @typescript-eslint/naming-convention */
|
||||
}
|
||||
|
@ -113,7 +123,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
@HostBinding('style') get styleList(): any
|
||||
{
|
||||
return {
|
||||
'visibility': this.opened ? 'visible' : 'hidden'
|
||||
'visibility': this.opened ? 'visible' : 'hidden',
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -142,16 +152,17 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
this._fuseScrollbarDirectivesSubscription =
|
||||
merge(
|
||||
this.onCollapsableItemCollapsed,
|
||||
this.onCollapsableItemExpanded
|
||||
this.onCollapsableItemExpanded,
|
||||
)
|
||||
.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
delay(250)
|
||||
delay(250),
|
||||
)
|
||||
.subscribe(() => {
|
||||
|
||||
.subscribe(() =>
|
||||
{
|
||||
// Loop through the scrollbars and update them
|
||||
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
|
||||
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
|
||||
{
|
||||
fuseScrollbarDirective.update();
|
||||
});
|
||||
});
|
||||
|
@ -253,7 +264,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
// Enable the animations after a delay
|
||||
// The delay must be bigger than the current transition-duration
|
||||
// to make sure nothing will be animated while the mode changing
|
||||
setTimeout(() => {
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._enableAnimations();
|
||||
}, 500);
|
||||
}
|
||||
|
@ -308,10 +320,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
this._router.events
|
||||
.pipe(
|
||||
filter(event => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
takeUntil(this._unsubscribeAll),
|
||||
)
|
||||
.subscribe(() => {
|
||||
|
||||
.subscribe(() =>
|
||||
{
|
||||
// If the mode is 'over' and the navigation is opened...
|
||||
if ( this.mode === 'over' && this.opened )
|
||||
{
|
||||
|
@ -339,8 +351,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
// adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
|
||||
// This fixes the problem by reading the 'top' value from the html element and adding it as a
|
||||
// 'marginTop' to the navigation itself.
|
||||
this._mutationObserver = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
this._mutationObserver = new MutationObserver((mutations) =>
|
||||
{
|
||||
mutations.forEach((mutation) =>
|
||||
{
|
||||
const mutationTarget = mutation.target as HTMLElement;
|
||||
if ( mutation.attributeName === 'class' )
|
||||
{
|
||||
|
@ -358,11 +372,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
});
|
||||
this._mutationObserver.observe(this._document.documentElement, {
|
||||
attributes : true,
|
||||
attributeFilter: ['class']
|
||||
attributeFilter: ['class'],
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
setTimeout(() =>
|
||||
{
|
||||
// Return if 'navigation content' element does not exist
|
||||
if ( !this._navigationContentEl )
|
||||
{
|
||||
|
@ -386,8 +400,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
else
|
||||
{
|
||||
// Go through all the scrollbar directives
|
||||
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
|
||||
|
||||
this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
|
||||
{
|
||||
// Skip if not enabled
|
||||
if ( !fuseScrollbarDirective.isEnabled() )
|
||||
{
|
||||
|
@ -624,7 +638,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
|
||||
// Create the enter animation and attach it to the player
|
||||
this._player = this._animationBuilder.build([
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
|
||||
]).create(this._overlay);
|
||||
|
||||
// Play the animation
|
||||
|
@ -648,15 +662,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
|
||||
// Create the leave animation and attach it to the player
|
||||
this._player = this._animationBuilder.build([
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
|
||||
]).create(this._overlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
|
||||
this._player.onDone(() =>
|
||||
{
|
||||
// If the overlay still exists...
|
||||
if ( this._overlay )
|
||||
{
|
||||
|
@ -699,7 +713,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
this._player =
|
||||
this._animationBuilder
|
||||
.build([
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
|
||||
]).create(this._asideOverlay);
|
||||
|
||||
// Play the animation
|
||||
|
@ -725,15 +739,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
|||
this._player =
|
||||
this._animationBuilder
|
||||
.build([
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
|
||||
]).create(this._asideOverlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
|
||||
this._player.onDone(() =>
|
||||
{
|
||||
// If the aside overlay still exists...
|
||||
if ( this._asideOverlay )
|
||||
{
|
||||
|
|
|
@ -1,2 +1 @@
|
|||
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';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseScrollReset]',
|
||||
exportAs: 'fuseScrollReset'
|
||||
selector : '[fuseScrollReset]',
|
||||
exportAs : 'fuseScrollReset',
|
||||
standalone: true,
|
||||
})
|
||||
export class FuseScrollResetDirective implements OnInit, OnDestroy
|
||||
{
|
||||
|
@ -15,7 +16,7 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
|
|||
*/
|
||||
constructor(
|
||||
private _elementRef: ElementRef,
|
||||
private _router: Router
|
||||
private _router: Router,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -32,9 +33,9 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
|
|||
// Subscribe to NavigationEnd event
|
||||
this._router.events.pipe(
|
||||
filter(event => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
takeUntil(this._unsubscribeAll),
|
||||
).subscribe(() =>
|
||||
{
|
||||
// Reset the element's scroll position to the top
|
||||
this._elementRef.nativeElement.scrollTop = 0;
|
||||
});
|
||||
|
|
|
@ -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.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 { Platform } from '@angular/cdk/platform';
|
||||
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import { merge } from 'lodash-es';
|
||||
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
|
||||
import { merge } from 'lodash-es';
|
||||
import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
/**
|
||||
* Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[fuseScrollbar]',
|
||||
exportAs: 'fuseScrollbar'
|
||||
selector : '[fuseScrollbar]',
|
||||
exportAs : 'fuseScrollbar',
|
||||
standalone: true,
|
||||
})
|
||||
export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
|
@ -34,7 +35,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
|||
constructor(
|
||||
private _elementRef: ElementRef,
|
||||
private _platform: Platform,
|
||||
private _router: Router
|
||||
private _router: Router,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -101,11 +102,13 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
|||
}
|
||||
|
||||
// Destroy and re-init the PerfectScrollbar to update its options
|
||||
setTimeout(() => {
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._destroy();
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._init();
|
||||
});
|
||||
}
|
||||
|
@ -120,10 +123,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
|||
fromEvent(window, 'resize')
|
||||
.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
debounceTime(150)
|
||||
debounceTime(150),
|
||||
)
|
||||
.subscribe(() => {
|
||||
|
||||
.subscribe(() =>
|
||||
{
|
||||
// Update the PerfectScrollbar
|
||||
this.update();
|
||||
});
|
||||
|
@ -203,14 +206,14 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
|||
{
|
||||
scrollbarPosition = new ScrollbarPosition(
|
||||
this._ps.reach.x || 0,
|
||||
this._ps.reach.y || 0
|
||||
this._ps.reach.y || 0,
|
||||
);
|
||||
}
|
||||
else
|
||||
{
|
||||
scrollbarPosition = new ScrollbarPosition(
|
||||
this._elementRef.nativeElement.scrollLeft,
|
||||
this._elementRef.nativeElement.scrollTop
|
||||
this._elementRef.nativeElement.scrollTop,
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -388,7 +391,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
|
|||
|
||||
const cosParameter = (oldValue - value) / 2;
|
||||
|
||||
const step = (newTimestamp: number): void => {
|
||||
const step = (newTimestamp: number): void =>
|
||||
{
|
||||
scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
|
||||
newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
|
||||
|
||||
|
|
|
@ -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
|
||||
{
|
||||
}
|
|
@ -1,51 +0,0 @@
|
|||
import { NgModule, Optional, SkipSelf } from '@angular/core';
|
||||
import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
|
||||
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||
import { FuseConfirmationModule } from '@fuse/services/confirmation';
|
||||
import { FuseLoadingModule } from '@fuse/services/loading';
|
||||
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
|
||||
import { FusePlatformModule } from '@fuse/services/platform/platform.module';
|
||||
import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
|
||||
import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
FuseConfirmationModule,
|
||||
FuseLoadingModule,
|
||||
FuseMediaWatcherModule,
|
||||
FusePlatformModule,
|
||||
FuseSplashScreenModule,
|
||||
FuseUtilsModule
|
||||
],
|
||||
providers: [
|
||||
{
|
||||
// Disable 'theme' sanity check
|
||||
provide : MATERIAL_SANITY_CHECKS,
|
||||
useValue: {
|
||||
doctype: true,
|
||||
theme : false,
|
||||
version: true
|
||||
}
|
||||
},
|
||||
{
|
||||
// Use the 'fill' appearance on Angular Material form fields by default
|
||||
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
||||
useValue: {
|
||||
appearance: 'fill'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
export class FuseModule
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(@Optional() @SkipSelf() parentModule?: FuseModule)
|
||||
{
|
||||
if ( parentModule )
|
||||
{
|
||||
throw new Error('FuseModule has already been loaded. Import this module in the AppModule only!');
|
||||
}
|
||||
}
|
||||
}
|
108
src/@fuse/fuse.provider.ts
Normal file
108
src/@fuse/fuse.provider.ts
Normal file
|
@ -0,0 +1,108 @@
|
|||
import { provideHttpClient, withInterceptors } from '@angular/common/http';
|
||||
import { APP_INITIALIZER, ENVIRONMENT_INITIALIZER, EnvironmentProviders, importProvidersFrom, inject, Provider } from '@angular/core';
|
||||
import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||
import { FUSE_MOCK_API_DEFAULT_DELAY, mockApiInterceptor } from '@fuse/lib/mock-api';
|
||||
import { FuseConfig } from '@fuse/services/config';
|
||||
import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
|
||||
import { FuseConfirmationService } from '@fuse/services/confirmation';
|
||||
import { fuseLoadingInterceptor, FuseLoadingService } from '@fuse/services/loading';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FusePlatformService } from '@fuse/services/platform';
|
||||
import { FuseSplashScreenService } from '@fuse/services/splash-screen';
|
||||
import { FuseUtilsService } from '@fuse/services/utils';
|
||||
|
||||
export type FuseProviderConfig = {
|
||||
mockApi?: {
|
||||
delay?: number;
|
||||
services?: any[];
|
||||
},
|
||||
fuse?: FuseConfig
|
||||
}
|
||||
|
||||
/**
|
||||
* Fuse provider
|
||||
*/
|
||||
export const provideFuse = (config: FuseProviderConfig): Array<Provider | EnvironmentProviders> =>
|
||||
{
|
||||
// Base providers
|
||||
const providers: Array<Provider | EnvironmentProviders> = [
|
||||
{
|
||||
// Disable 'theme' sanity check
|
||||
provide : MATERIAL_SANITY_CHECKS,
|
||||
useValue: {
|
||||
doctype: true,
|
||||
theme : false,
|
||||
version: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// Use the 'fill' appearance on Angular Material form fields by default
|
||||
provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
|
||||
useValue: {
|
||||
appearance: 'fill',
|
||||
},
|
||||
},
|
||||
{
|
||||
provide : FUSE_MOCK_API_DEFAULT_DELAY,
|
||||
useValue: config?.mockApi?.delay ?? 0,
|
||||
},
|
||||
{
|
||||
provide : FUSE_CONFIG,
|
||||
useValue: config?.fuse ?? {},
|
||||
},
|
||||
|
||||
importProvidersFrom(MatDialogModule),
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FuseConfirmationService),
|
||||
multi : true,
|
||||
},
|
||||
|
||||
provideHttpClient(withInterceptors([fuseLoadingInterceptor])),
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FuseLoadingService),
|
||||
multi : true,
|
||||
},
|
||||
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FuseMediaWatcherService),
|
||||
multi : true,
|
||||
},
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FusePlatformService),
|
||||
multi : true,
|
||||
},
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FuseSplashScreenService),
|
||||
multi : true,
|
||||
},
|
||||
{
|
||||
provide : ENVIRONMENT_INITIALIZER,
|
||||
useValue: () => inject(FuseUtilsService),
|
||||
multi : true,
|
||||
},
|
||||
];
|
||||
|
||||
// Mock Api services
|
||||
if ( config?.mockApi?.services )
|
||||
{
|
||||
providers.push(
|
||||
provideHttpClient(withInterceptors([mockApiInterceptor])),
|
||||
{
|
||||
provide : APP_INITIALIZER,
|
||||
deps : [...config.mockApi.services],
|
||||
useFactory: () => (): any => null,
|
||||
multi : true,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// Return the providers
|
||||
return providers;
|
||||
};
|
|
@ -1 +1 @@
|
|||
export * from './fuse.module';
|
||||
export * from './fuse.provider';
|
||||
|
|
|
@ -1,96 +1,77 @@
|
|||
import { Inject, Injectable } from '@angular/core';
|
||||
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
|
||||
import { delay, Observable, of, switchMap, throwError } from 'rxjs';
|
||||
import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest, HttpResponse } from '@angular/common/http';
|
||||
import { inject } from '@angular/core';
|
||||
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
|
||||
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
|
||||
import { delay, Observable, of, switchMap, throwError } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseMockApiInterceptor implements HttpInterceptor
|
||||
export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
@Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number,
|
||||
private _fuseMockApiService: FuseMockApiService
|
||||
)
|
||||
const defaultDelay = inject(FUSE_MOCK_API_DEFAULT_DELAY);
|
||||
const fuseMockApiService = inject(FuseMockApiService);
|
||||
|
||||
// Try to get the request handler
|
||||
const {
|
||||
handler,
|
||||
urlParams,
|
||||
} = fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
|
||||
|
||||
// Pass through if the request handler does not exist
|
||||
if ( !handler )
|
||||
{
|
||||
return next(request);
|
||||
}
|
||||
|
||||
/**
|
||||
* Intercept
|
||||
*
|
||||
* @param request
|
||||
* @param next
|
||||
*/
|
||||
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
|
||||
{
|
||||
// Try to get the request handler
|
||||
const {
|
||||
handler,
|
||||
urlParams
|
||||
} = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
|
||||
// Set the intercepted request on the handler
|
||||
handler.request = request;
|
||||
|
||||
// Pass through if the request handler does not exist
|
||||
if ( !handler )
|
||||
// Set the url params on the handler
|
||||
handler.urlParams = urlParams;
|
||||
|
||||
// Subscribe to the response function observable
|
||||
return handler.response.pipe(
|
||||
delay(handler.delay ?? defaultDelay ?? 0),
|
||||
switchMap((response) =>
|
||||
{
|
||||
return next.handle(request);
|
||||
}
|
||||
|
||||
// Set the intercepted request on the handler
|
||||
handler.request = request;
|
||||
|
||||
// Set the url params on the handler
|
||||
handler.urlParams = urlParams;
|
||||
|
||||
// Subscribe to the response function observable
|
||||
return handler.response.pipe(
|
||||
delay(handler.delay ?? this._defaultDelay ?? 0),
|
||||
switchMap((response) => {
|
||||
|
||||
// If there is no response data,
|
||||
// throw an error response
|
||||
if ( !response )
|
||||
{
|
||||
response = new HttpErrorResponse({
|
||||
error : 'NOT FOUND',
|
||||
status : 404,
|
||||
statusText: 'NOT FOUND'
|
||||
});
|
||||
|
||||
return throwError(response);
|
||||
}
|
||||
|
||||
// Parse the response data
|
||||
const data = {
|
||||
status: response[0],
|
||||
body : response[1]
|
||||
};
|
||||
|
||||
// If the status code is in between 200 and 300,
|
||||
// return a success response
|
||||
if ( data.status >= 200 && data.status < 300 )
|
||||
{
|
||||
response = new HttpResponse({
|
||||
body : data.body,
|
||||
status : data.status,
|
||||
statusText: 'OK'
|
||||
});
|
||||
|
||||
return of(response);
|
||||
}
|
||||
|
||||
// For other status codes,
|
||||
// throw an error response
|
||||
// If there is no response data,
|
||||
// throw an error response
|
||||
if ( !response )
|
||||
{
|
||||
response = new HttpErrorResponse({
|
||||
error : data.body.error,
|
||||
status : data.status,
|
||||
statusText: 'ERROR'
|
||||
error : 'NOT FOUND',
|
||||
status : 404,
|
||||
statusText: 'NOT FOUND',
|
||||
});
|
||||
|
||||
return throwError(response);
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Parse the response data
|
||||
const data = {
|
||||
status: response[0],
|
||||
body : response[1],
|
||||
};
|
||||
|
||||
// If the status code is in between 200 and 300,
|
||||
// return a success response
|
||||
if ( data.status >= 200 && data.status < 300 )
|
||||
{
|
||||
response = new HttpResponse({
|
||||
body : data.body,
|
||||
status : data.status,
|
||||
statusText: 'OK',
|
||||
});
|
||||
|
||||
return of(response);
|
||||
}
|
||||
|
||||
// For other status codes,
|
||||
// throw an error response
|
||||
response = new HttpErrorResponse({
|
||||
error : data.body.error,
|
||||
status : data.status,
|
||||
statusText: 'ERROR',
|
||||
});
|
||||
|
||||
return throwError(response);
|
||||
}));
|
||||
};
|
||||
|
|
|
@ -1,42 +0,0 @@
|
|||
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
|
||||
import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor';
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
{
|
||||
provide : HTTP_INTERCEPTORS,
|
||||
useClass: FuseMockApiInterceptor,
|
||||
multi : true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class FuseMockApiModule
|
||||
{
|
||||
/**
|
||||
* FuseMockApi module default configuration.
|
||||
*
|
||||
* @param mockApiServices - Array of services that register mock API handlers
|
||||
* @param config - Configuration options
|
||||
* @param config.delay - Default delay value in milliseconds to apply all responses
|
||||
*/
|
||||
static forRoot(mockApiServices: any[], config?: { delay?: number }): ModuleWithProviders<FuseMockApiModule>
|
||||
{
|
||||
return {
|
||||
ngModule : FuseMockApiModule,
|
||||
providers: [
|
||||
{
|
||||
provide : APP_INITIALIZER,
|
||||
deps : [...mockApiServices],
|
||||
useFactory: () => (): any => null,
|
||||
multi : true
|
||||
},
|
||||
{
|
||||
provide : FUSE_MOCK_API_DEFAULT_DELAY,
|
||||
useValue: config?.delay ?? 0
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
|
@ -1,6 +1,6 @@
|
|||
import { HttpRequest } from '@angular/common/http';
|
||||
import { Observable, of, take, throwError } from 'rxjs';
|
||||
import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
|
||||
import { Observable, of, take, throwError } from 'rxjs';
|
||||
|
||||
export class FuseMockApiHandler
|
||||
{
|
||||
|
@ -17,7 +17,7 @@ export class FuseMockApiHandler
|
|||
*/
|
||||
constructor(
|
||||
public url: string,
|
||||
public delay?: number
|
||||
public delay?: number,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
@ -55,7 +55,7 @@ export class FuseMockApiHandler
|
|||
// Execute the reply callback
|
||||
const replyResult = this._reply({
|
||||
request : this.request,
|
||||
urlParams: this.urlParams
|
||||
urlParams: this.urlParams,
|
||||
});
|
||||
|
||||
// If the result of the reply callback is an observable...
|
||||
|
|
|
@ -1,11 +1,9 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { compact, fromPairs } from 'lodash-es';
|
||||
import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler';
|
||||
import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
|
||||
import { compact, fromPairs } from 'lodash-es';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseMockApiService
|
||||
{
|
||||
private _handlers: { [key: string]: Map<string, FuseMockApiHandler> } = {
|
||||
|
@ -16,7 +14,7 @@ export class FuseMockApiService
|
|||
'put' : new Map<string, FuseMockApiHandler>(),
|
||||
'head' : new Map<string, FuseMockApiHandler>(),
|
||||
'jsonp' : new Map<string, FuseMockApiHandler>(),
|
||||
'options': new Map<string, FuseMockApiHandler>()
|
||||
'options': new Map<string, FuseMockApiHandler>(),
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -42,7 +40,7 @@ export class FuseMockApiService
|
|||
// Prepare the return object
|
||||
const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
|
||||
handler : undefined,
|
||||
urlParams: {}
|
||||
urlParams: {},
|
||||
};
|
||||
|
||||
// Split the url
|
||||
|
@ -52,8 +50,8 @@ export class FuseMockApiService
|
|||
const handlers = this._handlers[method.toLowerCase()];
|
||||
|
||||
// Iterate through the handlers
|
||||
handlers.forEach((handler, handlerUrl) => {
|
||||
|
||||
handlers.forEach((handler, handlerUrl) =>
|
||||
{
|
||||
// Skip if there is already a matching handler
|
||||
if ( matchingHandler.handler )
|
||||
{
|
||||
|
@ -80,7 +78,7 @@ export class FuseMockApiService
|
|||
|
||||
// Extract and assign the parameters
|
||||
matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) =>
|
||||
handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined
|
||||
handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined,
|
||||
)));
|
||||
}
|
||||
});
|
||||
|
|
|
@ -26,7 +26,8 @@ export class FuseMockApiUtils
|
|||
d += performance.now();
|
||||
}
|
||||
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) =>
|
||||
{
|
||||
const r = (d + Math.random() * 16) % 16 | 0;
|
||||
d = Math.floor(d / 16);
|
||||
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export * from '@fuse/lib/mock-api/mock-api.constants';
|
||||
export * from '@fuse/lib/mock-api/mock-api.module';
|
||||
export * from '@fuse/lib/mock-api/mock-api.interceptor';
|
||||
export * from '@fuse/lib/mock-api/mock-api.service';
|
||||
export * from '@fuse/lib/mock-api/mock-api.types';
|
||||
export * from '@fuse/lib/mock-api/mock-api.utils';
|
||||
|
|
|
@ -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
|
||||
*/
|
||||
@Pipe({
|
||||
name: 'fuseFindByKey',
|
||||
pure: false
|
||||
name : 'fuseFindByKey',
|
||||
pure : false,
|
||||
standalone: true,
|
||||
})
|
||||
export class FuseFindByKeyPipe implements PipeTransform
|
||||
{
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
import { InjectionToken } from '@angular/core';
|
||||
|
||||
export const FUSE_APP_CONFIG = new InjectionToken<any>('FUSE_APP_CONFIG');
|
||||
export const FUSE_CONFIG = new InjectionToken<any>('FUSE_APP_CONFIG');
|
||||
|
|
|
@ -1,32 +0,0 @@
|
|||
import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import { FuseConfigService } from '@fuse/services/config/config.service';
|
||||
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
|
||||
|
||||
@NgModule()
|
||||
export class FuseConfigModule
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseConfigService: FuseConfigService)
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* forRoot method for setting user configuration
|
||||
*
|
||||
* @param config
|
||||
*/
|
||||
static forRoot(config: any): ModuleWithProviders<FuseConfigModule>
|
||||
{
|
||||
return {
|
||||
ngModule : FuseConfigModule,
|
||||
providers: [
|
||||
{
|
||||
provide : FUSE_APP_CONFIG,
|
||||
useValue: config
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
|
@ -1,11 +1,9 @@
|
|||
import { Inject, Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
|
||||
import { merge } from 'lodash-es';
|
||||
import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseConfigService
|
||||
{
|
||||
private _config: BehaviorSubject<any>;
|
||||
|
@ -13,7 +11,7 @@ export class FuseConfigService
|
|||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(@Inject(FUSE_APP_CONFIG) config: any)
|
||||
constructor(@Inject(FUSE_CONFIG) config: any)
|
||||
{
|
||||
// Private
|
||||
this._config = new BehaviorSubject(config);
|
||||
|
|
18
src/@fuse/services/config/config.types.ts
Normal file
18
src/@fuse/services/config/config.types.ts
Normal file
|
@ -0,0 +1,18 @@
|
|||
// Types
|
||||
export type Scheme = 'auto' | 'dark' | 'light';
|
||||
export type Screens = { [key: string]: string };
|
||||
export type Theme = 'theme-default' | string;
|
||||
export type Themes = { id: string; name: string }[];
|
||||
|
||||
/**
|
||||
* AppConfig interface. Update this interface to strictly type your config
|
||||
* object.
|
||||
*/
|
||||
export interface FuseConfig
|
||||
{
|
||||
layout: string;
|
||||
scheme: Scheme;
|
||||
screens: Screens;
|
||||
theme: Theme;
|
||||
themes: Themes;
|
||||
}
|
|
@ -1,2 +1,2 @@
|
|||
export * from '@fuse/services/config/config.module';
|
||||
export * from '@fuse/services/config/config.service';
|
||||
export * from '@fuse/services/config/config.types';
|
||||
|
|
|
@ -1,31 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service';
|
||||
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseConfirmationDialogComponent
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatDialogModule,
|
||||
MatIconModule,
|
||||
CommonModule
|
||||
],
|
||||
providers : [
|
||||
FuseConfirmationService
|
||||
]
|
||||
})
|
||||
export class FuseConfirmationModule
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseConfirmationService: FuseConfirmationService)
|
||||
{
|
||||
}
|
||||
}
|
|
@ -1,40 +1,39 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||
import { merge } from 'lodash-es';
|
||||
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
|
||||
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
|
||||
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
|
||||
import { merge } from 'lodash-es';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseConfirmationService
|
||||
{
|
||||
private _matDialog: MatDialog = inject(MatDialog);
|
||||
private _defaultConfig: FuseConfirmationConfig = {
|
||||
title : 'Confirm action',
|
||||
message : 'Are you sure you want to confirm this action?',
|
||||
icon : {
|
||||
show : true,
|
||||
name : 'heroicons_outline:exclamation',
|
||||
color: 'warn'
|
||||
name : 'heroicons_outline:exclamation-triangle',
|
||||
color: 'warn',
|
||||
},
|
||||
actions : {
|
||||
confirm: {
|
||||
show : true,
|
||||
label: 'Confirm',
|
||||
color: 'warn'
|
||||
color: 'warn',
|
||||
},
|
||||
cancel : {
|
||||
show : true,
|
||||
label: 'Cancel'
|
||||
}
|
||||
label: 'Cancel',
|
||||
},
|
||||
},
|
||||
dismissible: false
|
||||
dismissible: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _matDialog: MatDialog
|
||||
)
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
|
@ -52,7 +51,7 @@ export class FuseConfirmationService
|
|||
autoFocus : false,
|
||||
disableClose: !userConfig.dismissible,
|
||||
data : userConfig,
|
||||
panelClass : 'fuse-confirmation-dialog-panel'
|
||||
panelClass : 'fuse-confirmation-dialog-panel',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
[matDialogClose]="undefined">
|
||||
<mat-icon
|
||||
class="text-secondary"
|
||||
[svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
[svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
import { NgClass, NgIf } from '@angular/common';
|
||||
import { Component, Inject, ViewEncapsulation } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
|
||||
|
||||
@Component({
|
||||
|
@ -20,9 +23,11 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
|
|||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
`,
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
|
||||
})
|
||||
export class FuseConfirmationDialogComponent
|
||||
{
|
||||
|
|
|
@ -1,3 +1,2 @@
|
|||
export * from '@fuse/services/confirmation/confirmation.module';
|
||||
export * from '@fuse/services/confirmation/confirmation.service';
|
||||
export * from '@fuse/services/confirmation/confirmation.types';
|
||||
|
|
|
@ -1,48 +1,33 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
|
||||
import { finalize, Observable } from 'rxjs';
|
||||
import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
|
||||
import { inject } from '@angular/core';
|
||||
import { FuseLoadingService } from '@fuse/services/loading/loading.service';
|
||||
import { finalize, Observable, take } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
export class FuseLoadingInterceptor implements HttpInterceptor
|
||||
export const fuseLoadingInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
|
||||
{
|
||||
handleRequestsAutomatically: boolean;
|
||||
const fuseLoadingService = inject(FuseLoadingService);
|
||||
let handleRequestsAutomatically = false;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _fuseLoadingService: FuseLoadingService
|
||||
)
|
||||
{
|
||||
// Subscribe to the auto
|
||||
this._fuseLoadingService.auto$
|
||||
.subscribe((value) => {
|
||||
this.handleRequestsAutomatically = value;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Intercept
|
||||
*
|
||||
* @param req
|
||||
* @param next
|
||||
*/
|
||||
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
|
||||
{
|
||||
// If the Auto mode is turned off, do nothing
|
||||
if ( !this.handleRequestsAutomatically )
|
||||
fuseLoadingService.auto$
|
||||
.pipe(take(1))
|
||||
.subscribe((value) =>
|
||||
{
|
||||
return next.handle(req);
|
||||
}
|
||||
handleRequestsAutomatically = value;
|
||||
});
|
||||
|
||||
// Set the loading status to true
|
||||
this._fuseLoadingService._setLoadingStatus(true, req.url);
|
||||
|
||||
return next.handle(req).pipe(
|
||||
finalize(() => {
|
||||
// Set the status to false if there are any errors or the request is completed
|
||||
this._fuseLoadingService._setLoadingStatus(false, req.url);
|
||||
}));
|
||||
// If the Auto mode is turned off, do nothing
|
||||
if ( !handleRequestsAutomatically )
|
||||
{
|
||||
return next(req);
|
||||
}
|
||||
}
|
||||
|
||||
// Set the loading status to true
|
||||
fuseLoadingService._setLoadingStatus(true, req.url);
|
||||
|
||||
return next(req).pipe(
|
||||
finalize(() =>
|
||||
{
|
||||
// Set the status to false if there are any errors or the request is completed
|
||||
fuseLoadingService._setLoadingStatus(false, req.url);
|
||||
}));
|
||||
};
|
||||
|
|
|
@ -1,16 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor';
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
{
|
||||
provide : HTTP_INTERCEPTORS,
|
||||
useClass: FuseLoadingInterceptor,
|
||||
multi : true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class FuseLoadingModule
|
||||
{
|
||||
}
|
|
@ -1,10 +1,8 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseLoadingService
|
||||
{
|
||||
private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
export * from '@fuse/services/loading/loading.service';
|
||||
export * from '@fuse/services/loading/loading.module';
|
||||
export * from '@fuse/services/loading/loading.interceptor';
|
||||
|
|
|
@ -1,17 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher/media-watcher.service';
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
FuseMediaWatcherService
|
||||
]
|
||||
})
|
||||
export class FuseMediaWatcherModule
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
|
||||
{
|
||||
}
|
||||
}
|
|
@ -1,10 +1,10 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
|
||||
import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
|
||||
import { fromPairs } from 'lodash-es';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FuseConfigService } from '@fuse/services/config';
|
||||
import { fromPairs } from 'lodash-es';
|
||||
import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseMediaWatcherService
|
||||
{
|
||||
private _onMediaChange: ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(1);
|
||||
|
@ -14,14 +14,14 @@ export class FuseMediaWatcherService
|
|||
*/
|
||||
constructor(
|
||||
private _breakpointObserver: BreakpointObserver,
|
||||
private _fuseConfigService: FuseConfigService
|
||||
private _fuseConfigService: FuseConfigService,
|
||||
)
|
||||
{
|
||||
this._fuseConfigService.config$.pipe(
|
||||
map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
|
||||
switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
|
||||
map((state) => {
|
||||
|
||||
map((state) =>
|
||||
{
|
||||
// Prepare the observable values and set their defaults
|
||||
const matchingAliases: string[] = [];
|
||||
const matchingQueries: any = {};
|
||||
|
@ -44,10 +44,10 @@ export class FuseMediaWatcherService
|
|||
// Execute the observable
|
||||
this._onMediaChange.next({
|
||||
matchingAliases,
|
||||
matchingQueries
|
||||
matchingQueries,
|
||||
});
|
||||
})
|
||||
))
|
||||
}),
|
||||
)),
|
||||
).subscribe();
|
||||
}
|
||||
|
||||
|
|
|
@ -1,2 +1 @@
|
|||
export * from '@fuse/services/media-watcher/media-watcher.module';
|
||||
export * from '@fuse/services/media-watcher/media-watcher.service';
|
||||
|
|
|
@ -1,17 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { FusePlatformService } from '@fuse/services/platform/platform.service';
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
FusePlatformService
|
||||
]
|
||||
})
|
||||
export class FusePlatformModule
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fusePlatformService: FusePlatformService)
|
||||
{
|
||||
}
|
||||
}
|
|
@ -1,9 +1,7 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FusePlatformService
|
||||
{
|
||||
osName = 'os-unknown';
|
||||
|
|
|
@ -1,2 +1 @@
|
|||
export * from '@fuse/services/splash-screen/splash-screen.module';
|
||||
export * from '@fuse/services/splash-screen/splash-screen.service';
|
||||
|
|
|
@ -1,17 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { FuseSplashScreenService } from '@fuse/services/splash-screen/splash-screen.service';
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
FuseSplashScreenService
|
||||
]
|
||||
})
|
||||
export class FuseSplashScreenModule
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseSplashScreenService: FuseSplashScreenService)
|
||||
{
|
||||
}
|
||||
}
|
|
@ -1,9 +1,9 @@
|
|||
import { Inject, Injectable } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { Inject, Injectable } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { filter, take } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseSplashScreenService
|
||||
{
|
||||
/**
|
||||
|
@ -11,16 +11,17 @@ export class FuseSplashScreenService
|
|||
*/
|
||||
constructor(
|
||||
@Inject(DOCUMENT) private _document: any,
|
||||
private _router: Router
|
||||
private _router: Router,
|
||||
)
|
||||
{
|
||||
// Hide it on the first NavigationEnd event
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter(event => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
take(1),
|
||||
)
|
||||
.subscribe(() => {
|
||||
.subscribe(() =>
|
||||
{
|
||||
this.hide();
|
||||
});
|
||||
}
|
||||
|
|
|
@ -1,2 +1 @@
|
|||
export * from '@fuse/services/utils/utils.module';
|
||||
export * from '@fuse/services/utils/utils.service';
|
||||
|
|
|
@ -1,17 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
FuseUtilsService
|
||||
]
|
||||
})
|
||||
export class FuseUtilsModule
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseUtilsService: FuseUtilsService)
|
||||
{
|
||||
}
|
||||
}
|
|
@ -1,9 +1,7 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { IsActiveMatchOptions } from '@angular/router';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FuseUtilsService
|
||||
{
|
||||
/**
|
||||
|
@ -26,7 +24,7 @@ export class FuseUtilsService
|
|||
paths : 'exact',
|
||||
fragment : 'ignored',
|
||||
matrixParams: 'ignored',
|
||||
queryParams : 'exact'
|
||||
queryParams : 'exact',
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -39,7 +37,7 @@ export class FuseUtilsService
|
|||
paths : 'subset',
|
||||
fragment : 'ignored',
|
||||
matrixParams: 'ignored',
|
||||
queryParams : 'subset'
|
||||
queryParams : 'subset',
|
||||
};
|
||||
}
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3,7 +3,7 @@ const plugin = require('tailwindcss/plugin');
|
|||
module.exports = plugin(
|
||||
({
|
||||
matchUtilities,
|
||||
theme
|
||||
theme,
|
||||
}) =>
|
||||
{
|
||||
matchUtilities(
|
||||
|
@ -17,12 +17,12 @@ module.exports = plugin(
|
|||
lineHeight: value,
|
||||
[`svg`] : {
|
||||
width : value,
|
||||
height: value
|
||||
}
|
||||
})
|
||||
height: value,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
values: theme('iconSize')
|
||||
values: theme('iconSize'),
|
||||
});
|
||||
},
|
||||
{
|
||||
|
@ -43,8 +43,8 @@ module.exports = plugin(
|
|||
18 : '4.5rem',
|
||||
20 : '5rem',
|
||||
22 : '5.5rem',
|
||||
24 : '6rem'
|
||||
}
|
||||
}
|
||||
}
|
||||
24 : '6rem',
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
|
|
@ -26,9 +26,9 @@ const normalizeTheme = (theme) =>
|
|||
paletteName,
|
||||
{
|
||||
...palette,
|
||||
DEFAULT: palette['DEFAULT'] || palette[500]
|
||||
}
|
||||
]
|
||||
DEFAULT: palette['DEFAULT'] || palette[500],
|
||||
},
|
||||
],
|
||||
));
|
||||
};
|
||||
|
||||
|
@ -38,7 +38,7 @@ const normalizeTheme = (theme) =>
|
|||
const theming = plugin.withOptions((options) => ({
|
||||
addComponents,
|
||||
e,
|
||||
theme
|
||||
theme,
|
||||
}) =>
|
||||
{
|
||||
/**
|
||||
|
@ -48,7 +48,7 @@ const theming = plugin.withOptions((options) => ({
|
|||
*/
|
||||
const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
|
||||
themeName,
|
||||
_.defaults({}, theme, options.themes['default'])
|
||||
_.defaults({}, theme, options.themes['default']),
|
||||
]));
|
||||
|
||||
/**
|
||||
|
@ -57,7 +57,7 @@ const theming = plugin.withOptions((options) => ({
|
|||
*/
|
||||
let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
|
||||
themeName,
|
||||
normalizeTheme(theme)
|
||||
normalizeTheme(theme),
|
||||
]));
|
||||
|
||||
/**
|
||||
|
@ -73,12 +73,12 @@ const theming = plugin.withOptions((options) => ({
|
|||
...palette,
|
||||
contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
|
||||
hue,
|
||||
_.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
|
||||
]))
|
||||
}
|
||||
_.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color,
|
||||
])),
|
||||
},
|
||||
])),
|
||||
['primary', 'accent', 'warn']
|
||||
)
|
||||
['primary', 'accent', 'warn'],
|
||||
),
|
||||
]));
|
||||
|
||||
/**
|
||||
|
@ -89,8 +89,8 @@ const theming = plugin.withOptions((options) => ({
|
|||
themeName,
|
||||
{
|
||||
selector: `".theme-${themeName}"`,
|
||||
...theme
|
||||
}
|
||||
...theme,
|
||||
},
|
||||
]));
|
||||
|
||||
/* Generate the SASS map using the themes object */
|
||||
|
@ -134,15 +134,15 @@ const theming = plugin.withOptions((options) => ({
|
|||
_.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
|
||||
[
|
||||
e(paletteName),
|
||||
palette
|
||||
palette,
|
||||
],
|
||||
[
|
||||
`on-${e(paletteName)}`,
|
||||
_.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
|
||||
]
|
||||
])
|
||||
))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
|
||||
]))
|
||||
_.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color])),
|
||||
],
|
||||
]),
|
||||
))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
|
||||
])),
|
||||
);
|
||||
|
||||
/**
|
||||
|
@ -185,8 +185,8 @@ const theming = plugin.withOptions((options) => ({
|
|||
|
||||
/* Generate custom properties from customProps */
|
||||
..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
|
||||
..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
|
||||
}
|
||||
..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
|
@ -211,8 +211,8 @@ const theming = plugin.withOptions((options) => ({
|
|||
*/
|
||||
colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
|
||||
[name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
|
||||
[`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`]
|
||||
])))
|
||||
[`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`],
|
||||
]))),
|
||||
},
|
||||
fuse : {
|
||||
customProps: {
|
||||
|
@ -223,7 +223,7 @@ const theming = plugin.withOptions((options) => ({
|
|||
'bg-default' : colors.slate[100],
|
||||
'bg-dialog' : '#FFFFFF',
|
||||
'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(),
|
||||
'bg-status-bar': colors.slate[300]
|
||||
'bg-status-bar': colors.slate[300],
|
||||
},
|
||||
dark : {
|
||||
'bg-app-bar' : colors.slate[900],
|
||||
|
@ -231,8 +231,8 @@ const theming = plugin.withOptions((options) => ({
|
|||
'bg-default' : colors.slate[900],
|
||||
'bg-dialog' : colors.slate[800],
|
||||
'bg-hover' : 'rgba(255, 255, 255, 0.05)',
|
||||
'bg-status-bar': colors.slate[900]
|
||||
}
|
||||
'bg-status-bar': colors.slate[900],
|
||||
},
|
||||
},
|
||||
foreground: {
|
||||
light: {
|
||||
|
@ -243,7 +243,7 @@ const theming = plugin.withOptions((options) => ({
|
|||
'border' : colors.slate[200],
|
||||
'divider' : colors.slate[200],
|
||||
'icon' : colors.slate[500],
|
||||
'mat-icon' : colors.slate[500]
|
||||
'mat-icon' : colors.slate[500],
|
||||
},
|
||||
dark : {
|
||||
'text-default' : '#FFFFFF',
|
||||
|
@ -253,14 +253,14 @@ const theming = plugin.withOptions((options) => ({
|
|||
'border' : chroma(colors.slate[100]).alpha(0.12).css(),
|
||||
'divider' : chroma(colors.slate[100]).alpha(0.12).css(),
|
||||
'icon' : colors.slate[400],
|
||||
'mat-icon' : colors.slate[400]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
'mat-icon' : colors.slate[400],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
module.exports = theming;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
const plugin = require('tailwindcss/plugin');
|
||||
|
||||
module.exports = plugin(({
|
||||
addComponents
|
||||
addComponents,
|
||||
}) =>
|
||||
{
|
||||
/*
|
||||
|
@ -13,55 +13,55 @@ module.exports = plugin(({
|
|||
{
|
||||
'.mat-icon' : {
|
||||
'--tw-text-opacity': '1',
|
||||
color : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))'
|
||||
color : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))',
|
||||
},
|
||||
'.text-default' : {
|
||||
'--tw-text-opacity': '1 !important',
|
||||
color : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important'
|
||||
color : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important',
|
||||
},
|
||||
'.text-secondary' : {
|
||||
'--tw-text-opacity': '1 !important',
|
||||
color : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important'
|
||||
color : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important',
|
||||
},
|
||||
'.text-hint' : {
|
||||
'--tw-text-opacity': '1 !important',
|
||||
color : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important'
|
||||
color : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important',
|
||||
},
|
||||
'.text-disabled' : {
|
||||
'--tw-text-opacity': '1 !important',
|
||||
color : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important'
|
||||
color : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important',
|
||||
},
|
||||
'.divider' : {
|
||||
color: 'var(--fuse-divider) !important'
|
||||
color: 'var(--fuse-divider) !important',
|
||||
},
|
||||
'.bg-card' : {
|
||||
'--tw-bg-opacity': '1 !important',
|
||||
backgroundColor : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important'
|
||||
backgroundColor : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important',
|
||||
},
|
||||
'.bg-default' : {
|
||||
'--tw-bg-opacity': '1 !important',
|
||||
backgroundColor : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important'
|
||||
backgroundColor : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important',
|
||||
},
|
||||
'.bg-dialog' : {
|
||||
'--tw-bg-opacity': '1 !important',
|
||||
backgroundColor : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important'
|
||||
backgroundColor : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important',
|
||||
},
|
||||
'.ring-bg-default': {
|
||||
'--tw-ring-opacity': '1 !important',
|
||||
'--tw-ring-color' : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important'
|
||||
'--tw-ring-color' : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important',
|
||||
},
|
||||
'.ring-bg-card' : {
|
||||
'--tw-ring-opacity': '1 !important',
|
||||
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important'
|
||||
}
|
||||
}
|
||||
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
addComponents(
|
||||
{
|
||||
'.bg-hover': {
|
||||
backgroundColor: 'var(--fuse-bg-hover) !important'
|
||||
}
|
||||
}
|
||||
backgroundColor: 'var(--fuse-bg-hover) !important',
|
||||
},
|
||||
},
|
||||
);
|
||||
});
|
||||
|
|
|
@ -23,7 +23,7 @@ const generateContrasts = (palette) =>
|
|||
// Generate the contrasting colors
|
||||
return _.fromPairs(_.map(palette, ((color, hue) => [
|
||||
hue,
|
||||
chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor
|
||||
chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor,
|
||||
]
|
||||
)));
|
||||
};
|
||||
|
|
|
@ -22,7 +22,7 @@ const generatePalette = (config) =>
|
|||
600: null,
|
||||
700: null,
|
||||
800: null,
|
||||
900: null
|
||||
900: null,
|
||||
};
|
||||
|
||||
// If a single color is provided,
|
||||
|
@ -58,14 +58,14 @@ const generatePalette = (config) =>
|
|||
colors.unshift(
|
||||
chroma.scale(['white', palette[500]])
|
||||
.domain([0, 1])
|
||||
.mode("lrgb")
|
||||
.colors(50)[1]
|
||||
.mode('lrgb')
|
||||
.colors(50)[1],
|
||||
);
|
||||
colors.push(
|
||||
chroma.scale(['black', palette[500]])
|
||||
.domain([0, 1])
|
||||
.mode("lrgb")
|
||||
.colors(10)[1]
|
||||
.mode('lrgb')
|
||||
.colors(10)[1],
|
||||
);
|
||||
|
||||
// Prepare the domains array
|
||||
|
@ -74,7 +74,7 @@ const generatePalette = (config) =>
|
|||
...Object.entries(palette)
|
||||
.filter(([key, value]) => value)
|
||||
.map(([key]) => parseInt(key) / 1000),
|
||||
1
|
||||
1,
|
||||
];
|
||||
|
||||
// Generate the color scale
|
||||
|
@ -93,7 +93,7 @@ const generatePalette = (config) =>
|
|||
600: scale(0.6).hex(),
|
||||
700: scale(0.7).hex(),
|
||||
800: scale(0.8).hex(),
|
||||
900: scale(0.9).hex()
|
||||
900: scale(0.9).hex(),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -13,13 +13,13 @@ module.exports = (data) =>
|
|||
{
|
||||
let scss = '';
|
||||
|
||||
if ( typeof chunk === "object" && !Array.isArray(chunk) )
|
||||
if ( typeof chunk === 'object' && !Array.isArray(chunk) )
|
||||
{
|
||||
_.mapKeys(chunk, (value, key) =>
|
||||
{
|
||||
scss += key + ': ';
|
||||
|
||||
if ( typeof value === "object" )
|
||||
if ( typeof value === 'object' )
|
||||
{
|
||||
if ( Array.isArray(value) )
|
||||
{
|
||||
|
|
|
@ -20,8 +20,8 @@ export class FuseValidators
|
|||
*/
|
||||
static mustMatch(controlPath: string, matchingControlPath: string): ValidatorFn
|
||||
{
|
||||
return (formGroup: AbstractControl): ValidationErrors | null => {
|
||||
|
||||
return (formGroup: AbstractControl): ValidationErrors | null =>
|
||||
{
|
||||
// Get the control and matching control
|
||||
const control = formGroup.get(controlPath);
|
||||
const matchingControl = formGroup.get(matchingControlPath);
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
import { Version } from '@fuse/version/version';
|
||||
|
||||
export const FUSE_VERSION = new Version('17.2.0').full;
|
||||
export const FUSE_VERSION = new Version('18.0.0').full;
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user