mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2026-04-26 19:34:16 +00:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 sercan
|
f45a605b4e | ||
|
sercan
|
c150a8902c | ||
|
sercan
|
700d52d815 |
@@ -0,0 +1,17 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
|
||||
+15
-5
@@ -1,6 +1,16 @@
|
||||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset=utf-8
|
||||
end_of_line=lf
|
||||
insert_final_newline=false
|
||||
indent_style=space
|
||||
indent_size=4
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
@@ -4,10 +4,16 @@
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
# Only exists if Bazel was run
|
||||
/bazel-out
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# profiling files
|
||||
chrome-profiler-events*.json
|
||||
speed-measure-plugin*.json
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
@@ -23,6 +29,7 @@
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
|
||||
@@ -1,16 +1,69 @@
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Image/Vector/Icon Credits
|
||||
// @ 3rd party credits
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
Avatars - https://uifaces.co/
|
||||
Flag icons - http://www.famfamfam.com/lab/icons/flags/
|
||||
Frame vector created by Freepik - https://www.freepik.com/free-photos-vectors/frame
|
||||
A Walk Amongst Friends - Photo by Kristin Ellis on Unsplash - https://unsplash.com/photos/CbZOGbazDWQ
|
||||
Sunrise at Moraine Lake - Photo by Marlon Martinez on Unsplash - https://unsplash.com/photos/woNYcfrnp9M
|
||||
Braies Lake - Photo by Luca Nicoletti on Unsplash - https://unsplash.com/photos/dH-L5zPcv3E
|
||||
Lago di Sorapis - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/6uDg_zb20EM
|
||||
Lago di Braies - Photo by Salmen Bejaoui on Unsplash - https://unsplash.com/photos/uXTozY3CcQg
|
||||
Reaching - Photo by Justin Novello on Unsplash - https://unsplash.com/photos/Y14TNvIDllM
|
||||
Yosemite - Photo by Tim Mossholder on Unsplash - https://unsplash.com/photos/ZCrtRSSUpGI
|
||||
Never Stop Changing - Photo by John Westrock on Unsplash - https://unsplash.com/photos/_GY56uSG70U
|
||||
Fall glow - Photo by Casey Horner on Unsplash - https://unsplash.com/photos/gz19zOdgN7w
|
||||
First snow - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/LRrGf6dBjA4
|
||||
|
||||
// Icons
|
||||
Material - https://material.io/tools/icons
|
||||
Feather - https://feathericons.com/
|
||||
Heroicons - https://github.com/refactoringui/heroicons
|
||||
Iconsmind - https://iconsmind.com/
|
||||
|
||||
// Avatars
|
||||
https://uifaces.co
|
||||
|
||||
// 404, 500 & Maintenance
|
||||
https://undraw.co
|
||||
|
||||
// Mail app
|
||||
Photo by Riccardo Chiarini on Unsplash - https://unsplash.com/photos/2VDa8bnLM8c
|
||||
Photo by Johannes Plenio on Unsplash - https://unsplash.com/photos/RwHv7LgeC7s
|
||||
Photo by Jamie Davies on Unsplash - https://unsplash.com/photos/Hao52Fu9-F8
|
||||
Photo by Christian Joudrey on Unsplash - https://unsplash.com/photos/mWRR1xj95hg
|
||||
|
||||
// Profile page
|
||||
Photo by Alex Knight on Unsplash - https://unsplash.com/photos/DpPutJwgyW8
|
||||
|
||||
// Cards
|
||||
Photo by Kym Ellis on Unsplash - https://unsplash.com/photos/RPT3AjdXlZc
|
||||
Photo by Patrick Hendry on Unsplash - https://unsplash.com/photos/Qgxk3PQsMiI
|
||||
Photo by Hailey Kean on Unsplash - https://unsplash.com/photos/QxjsOlFNr_4
|
||||
Photo by Nathan Anderson on Unsplash - https://unsplash.com/photos/mG8ShlWrMDI
|
||||
Photo by Adrian Infernus on Unsplash - https://unsplash.com/photos/5apewqWk978
|
||||
Photo by freestocks.org on Unsplash - https://unsplash.com/photos/c73TZ2sIU38
|
||||
Photo by Tim Marshall on Unsplash - https://unsplash.com/photos/PKSCrmZdvwA
|
||||
Photo by Daniel Koponyas on Unsplash - https://unsplash.com/photos/rbiLY6ZwvXQ
|
||||
Photo by John Westrock on Unsplash - https://unsplash.com/photos/LCesauDseu8
|
||||
Photo by Gabriel Sollmann on Unsplash - https://unsplash.com/photos/kFWj9y-tJB4
|
||||
Photo by Kevin Wolf on Unsplash - https://unsplash.com/photos/BJyjgEdNTPs
|
||||
Photo by Luca Bravo on Unsplash - https://unsplash.com/photos/hFzIoD0F_i8
|
||||
Photo by Ian Baldwin on Unsplash - https://unsplash.com/photos/Dlj-SxxTlQ0
|
||||
Photo by Ben Kolde on Unsplash - https://unsplash.com/photos/KRTFIBOfcFw
|
||||
Photo by Chad Peltola on Unsplash - https://unsplash.com/photos/BTvQ2ET_iKc
|
||||
Photo by rocknwool on Unsplash - https://unsplash.com/photos/r56oO1V5oms
|
||||
Photo by Vita Vilcina on Unsplash - https://unsplash.com/photos/KtOid0FLjqU
|
||||
Photo by Jia Ye on Unsplash - https://unsplash.com/photos/y8ZnQqgohLk
|
||||
Photo by Parker Whitson on Unsplash - https://unsplash.com/photos/OlTYIqTjmVM
|
||||
Photo by Dorian Hurst on Unsplash - https://unsplash.com/photos/a9uWPQlIbYc
|
||||
Photo by Everaldo Coelho on Unsplash - https://unsplash.com/photos/KPaSCpklCZw
|
||||
Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/fh2JefbNlII
|
||||
Photo by Orlova Maria on Unsplash - https://unsplash.com/photos/p8y4dWEMGMU
|
||||
Photo by Jake Blucker on Unsplash - https://unsplash.com/photos/tMzCrBkM99Y
|
||||
Photo by Jerry Zhang on Unsplash - https://unsplash.com/photos/oIBcow6n36s
|
||||
Photo by John Cobb on Unsplash - https://unsplash.com/photos/IE_sifhay7o
|
||||
Photo by Dan Gold on Unsplash - https://unsplash.com/photos/mDlhOIfGxNI
|
||||
Photo by Ana Toma on Unsplash - https://unsplash.com/photos/XsGwe6gYg0c
|
||||
Photo by Andrea on Unsplash - https://unsplash.com/photos/1AWY0N960Sk
|
||||
Photo by Aswin on Unsplash - https://unsplash.com/photos/_roUcFWstas
|
||||
Photo by Justin Kauffman on Unsplash - https://unsplash.com/photos/aWG_dqyhI0A
|
||||
Photo by Barna Bartis on Unsplash - https://unsplash.com/photos/VVoBQqWrvkc
|
||||
Photo by Kyle Hinkson on Unsplash - https://unsplash.com/photos/3439EnvnAGo
|
||||
Photo by Spencer Watson on Unsplash - https://unsplash.com/photos/5TBf16GnHKg
|
||||
Photo by adrian on Unsplash - https://unsplash.com/photos/1wrzvwoK8A4
|
||||
Photo by Christopher Rusev on Unsplash - https://unsplash.com/photos/7gKWgCRixf0
|
||||
Photo by Stephen Leonardi on Unsplash - https://unsplash.com/photos/MDmwQVgDHHM
|
||||
Photo by Dwinanda Nurhanif Mujito on Unsplash - https://unsplash.com/photos/pKT5Mg16w_w
|
||||
Photo by Humphrey Muleba on Unsplash - https://unsplash.com/photos/Zuvf5mxT5fs
|
||||
Photo by adrian on Unsplash - https://unsplash.com/photos/PNRxLFPMyJY
|
||||
Photo by Dahee Son on Unsplash - https://unsplash.com/photos/tV06QVJXVxU
|
||||
Photo by Zachary Kyra-Derksen on Unsplash - https://unsplash.com/photos/vkqS7vLQUtg
|
||||
Photo by Rodrigo Soares on Unsplash - https://unsplash.com/photos/8BFWBUkSqQo
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
This project is protected by Envato's Regular License. For more information,
|
||||
check the official license page at https://themeforest.net/licenses/terms/regular
|
||||
@@ -0,0 +1,6 @@
|
||||
Envato Standard License
|
||||
|
||||
Copyright (c) Sercan Yemen <sercanyemen@gmail.com>
|
||||
|
||||
This project is protected by Envato's Standard License. For more information,
|
||||
check the official license page at [https://themeforest.net/licenses/standard](https://themeforest.net/licenses/standard)
|
||||
@@ -1,12 +1,4 @@
|
||||
# Fuse - Angular
|
||||
|
||||
Material Design Admin Template with Angular 7+ and Angular Material
|
||||
|
||||
## The Community
|
||||
|
||||
Share your ideas, discuss Fuse and help each other.
|
||||
|
||||
[Click here](http://fusetheme.com/community) to see our Community page.
|
||||
# Fuse - Admin template and Starter project for Angular
|
||||
|
||||
## Development server
|
||||
|
||||
@@ -31,4 +23,3 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||
|
||||
|
||||
+48
-65
@@ -4,34 +4,51 @@
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"fuse": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"styleext": "scss"
|
||||
"style": "scss"
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist",
|
||||
"outputPath": "dist/fuse",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"aot": true,
|
||||
"allowedCommonJsDependencies": [
|
||||
"apexcharts",
|
||||
"highlight.js",
|
||||
"crypto-js/enc-utf8",
|
||||
"crypto-js/hmac-sha256",
|
||||
"crypto-js/enc-base64"
|
||||
],
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets",
|
||||
"src/app/main/angular-material-elements"
|
||||
"src/favicon-16x16.png",
|
||||
"src/favicon-32x32.png",
|
||||
"src/assets"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"src/@fuse/styles"
|
||||
]
|
||||
},
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
"src/@fuse/styles/tailwind.scss",
|
||||
"src/@fuse/styles/themes.scss",
|
||||
"src/styles/vendors.scss",
|
||||
"src/@fuse/styles/main.scss",
|
||||
"src/styles/styles.scss",
|
||||
"src/styles/tailwind.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"showCircularDependencies": false
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
@@ -44,29 +61,20 @@
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "5mb"
|
||||
}
|
||||
]
|
||||
},
|
||||
"ec": {
|
||||
"sourceMap": true,
|
||||
"extractCss": true
|
||||
},
|
||||
"hmr": {
|
||||
"fileReplacements": [
|
||||
"maximumWarning": "5mb",
|
||||
"maximumError": "8mb"
|
||||
},
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.hmr.ts"
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "100kb",
|
||||
"maximumError": "150kb"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -80,13 +88,6 @@
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "fuse:build:production"
|
||||
},
|
||||
"hmr": {
|
||||
"hmr": true,
|
||||
"browserTarget": "fuse:build:hmr"
|
||||
},
|
||||
"ec": {
|
||||
"browserTarget": "fuse:build:ec"
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -101,39 +102,32 @@
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"karmaConfig": "src/karma.conf.js",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"assets": [
|
||||
"src/favicon-16x16.png",
|
||||
"src/favicon-32x32.png",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
]
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
"tsconfig.app.json",
|
||||
"tsconfig.spec.json",
|
||||
"e2e/tsconfig.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**",
|
||||
"**/src/app/fake-db/**/*",
|
||||
"**/src/assets/angular-material-examples/**/*"
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"fuse-e2e": {
|
||||
"root": "e2e/",
|
||||
"projectType": "application",
|
||||
"prefix": "",
|
||||
"architect": {
|
||||
},
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
@@ -145,17 +139,6 @@
|
||||
"devServerTarget": "fuse:serve:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": "e2e/tsconfig.e2e.json",
|
||||
"exclude": [
|
||||
"**/node_modules/**",
|
||||
"**/src/app/fake-db/**/*",
|
||||
"**/src/assets/angular-material-examples/**/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+21
-12
@@ -1,20 +1,25 @@
|
||||
// @ts-check
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const {SpecReporter} = require('jasmine-spec-reporter');
|
||||
const {SpecReporter, StacktraceOption} = require('jasmine-spec-reporter');
|
||||
|
||||
/**
|
||||
* @type { import("protractor").Config }
|
||||
*/
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs : [
|
||||
allScriptsTimeout : 11000,
|
||||
specs : [
|
||||
'./src/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities : {
|
||||
'browserName': 'chrome'
|
||||
capabilities : {
|
||||
browserName: 'chrome'
|
||||
},
|
||||
directConnect : true,
|
||||
baseUrl : 'http://localhost:4200/',
|
||||
framework : 'jasmine',
|
||||
jasmineNodeOpts : {
|
||||
directConnect : true,
|
||||
SELENIUM_PROMISE_MANAGER: false,
|
||||
baseUrl : 'http://localhost:4200/',
|
||||
framework : 'jasmine',
|
||||
jasmineNodeOpts : {
|
||||
showColors : true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print : function ()
|
||||
@@ -24,8 +29,12 @@ exports.config = {
|
||||
onPrepare()
|
||||
{
|
||||
require('ts-node').register({
|
||||
project: require('path').join(__dirname, './tsconfig.e2e.json')
|
||||
project: require('path').join(__dirname, './tsconfig.json')
|
||||
});
|
||||
jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
|
||||
jasmine.getEnv().addReporter(new SpecReporter({
|
||||
spec: {
|
||||
displayStacktrace: StacktraceOption.PRETTY
|
||||
}
|
||||
}));
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
+16
-7
@@ -1,14 +1,23 @@
|
||||
import { FusePage } from './app.po';
|
||||
import { AppPage } from './app.po';
|
||||
import { browser, logging } from 'protractor';
|
||||
|
||||
describe('Fuse App', () => {
|
||||
let page: FusePage;
|
||||
describe('workspace-project App', () => {
|
||||
let page: AppPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new FusePage();
|
||||
page = new AppPage();
|
||||
});
|
||||
|
||||
it('should display welcome message', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('Welcome to Fuse!');
|
||||
it('should display welcome message', async () => {
|
||||
await page.navigateTo();
|
||||
expect(await page.getTitleText()).toEqual('Welcome to Fuse!');
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
// Assert that there are no errors emitted from the browser
|
||||
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
|
||||
expect(logs).not.toContain(jasmine.objectContaining({
|
||||
level: logging.Level.SEVERE
|
||||
} as logging.Entry));
|
||||
});
|
||||
});
|
||||
|
||||
+8
-5
@@ -1,11 +1,14 @@
|
||||
import { browser, by, element } from 'protractor';
|
||||
|
||||
export class FusePage {
|
||||
navigateTo(): any {
|
||||
return browser.get('/');
|
||||
export class AppPage
|
||||
{
|
||||
async navigateTo(): Promise<unknown>
|
||||
{
|
||||
return browser.get(browser.baseUrl);
|
||||
}
|
||||
|
||||
getParagraphText(): any {
|
||||
return element(by.css('app #main')).getText();
|
||||
async getTitleText(): Promise<string>
|
||||
{
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"jasminewd2",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es2018",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config)
|
||||
{
|
||||
config.set({
|
||||
basePath : '',
|
||||
frameworks : ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins : [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client : {
|
||||
jasmine : {
|
||||
// you can add configuration options for Jasmine here
|
||||
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
||||
// for example, you can disable the random execution with `random: false`
|
||||
// or set a specific seed with `seed: 4321`
|
||||
},
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
jasmineHtmlReporter: {
|
||||
suppressAll: true // removes the duplicated traces
|
||||
},
|
||||
coverageReporter : {
|
||||
dir : require('path').join(__dirname, './coverage/angular11'),
|
||||
subdir : '.',
|
||||
reporters: [
|
||||
{type: 'html'},
|
||||
{type: 'text-summary'}
|
||||
]
|
||||
},
|
||||
reporters : ['progress', 'kjhtml'],
|
||||
port : 9876,
|
||||
colors : true,
|
||||
logLevel : config.LOG_INFO,
|
||||
autoWatch : true,
|
||||
browsers : ['Chrome'],
|
||||
singleRun : false,
|
||||
restartOnFileChange: true
|
||||
});
|
||||
};
|
||||
Generated
+15909
-11790
File diff suppressed because it is too large
Load Diff
+81
-89
@@ -1,91 +1,83 @@
|
||||
{
|
||||
"name": "fuse",
|
||||
"version": "7.1.0",
|
||||
"license": "https://themeforest.net/licenses/terms/regular",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --open",
|
||||
"start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
|
||||
"start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
|
||||
"build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
|
||||
"build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
|
||||
"build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
|
||||
"build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "1.0.0-beta.5",
|
||||
"@angular/animations": "7.2.1",
|
||||
"@angular/cdk": "7.2.1",
|
||||
"@angular/common": "7.2.1",
|
||||
"@angular/compiler": "7.2.1",
|
||||
"@angular/core": "7.2.1",
|
||||
"@angular/flex-layout": "7.0.0-beta.23",
|
||||
"@angular/forms": "7.2.1",
|
||||
"@angular/http": "7.2.1",
|
||||
"@angular/material": "7.2.1",
|
||||
"@angular/material-moment-adapter": "7.2.1",
|
||||
"@angular/platform-browser": "7.2.1",
|
||||
"@angular/platform-browser-dynamic": "7.2.1",
|
||||
"@angular/router": "7.2.1",
|
||||
"@ngrx/effects": "7.0.0",
|
||||
"@ngrx/router-store": "7.0.0",
|
||||
"@ngrx/store": "7.0.0",
|
||||
"@ngrx/store-devtools": "7.0.0",
|
||||
"@ngx-translate/core": "11.0.1",
|
||||
"@swimlane/dragula": "3.7.3",
|
||||
"@swimlane/ngx-charts": "10.0.0",
|
||||
"@swimlane/ngx-datatable": "14.0.0",
|
||||
"@swimlane/ngx-dnd": "6.0.0",
|
||||
"@types/prismjs": "1.9.0",
|
||||
"angular-calendar": "0.26.4",
|
||||
"angular-in-memory-web-api": "0.8.0",
|
||||
"chart.js": "2.7.3",
|
||||
"classlist.js": "1.1.20150312",
|
||||
"core-js": "2.6.2",
|
||||
"d3": "5.7.0",
|
||||
"date-fns": "1.30.1",
|
||||
"hammerjs": "2.0.8",
|
||||
"lodash": "4.17.11",
|
||||
"moment": "2.23.0",
|
||||
"ng2-charts": "1.6.0",
|
||||
"ngrx-store-freeze": "0.2.4",
|
||||
"ngx-color-picker": "7.3.0",
|
||||
"ngx-cookie-service": "2.1.0",
|
||||
"perfect-scrollbar": "1.4.0",
|
||||
"prismjs": "1.15.0",
|
||||
"rxjs": "6.3.3",
|
||||
"rxjs-compat": "6.3.3",
|
||||
"web-animations-js": "2.3.1",
|
||||
"zone.js": "0.8.28"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "7.2.2",
|
||||
"@angular/compiler-cli": "7.2.1",
|
||||
"@angular/language-service": "7.2.1",
|
||||
"@angular-devkit/build-angular": "0.12.2",
|
||||
"@angularclass/hmr": "2.1.3",
|
||||
"@types/jasmine": "2.8.14",
|
||||
"@types/jasminewd2": "2.0.6",
|
||||
"@types/lodash": "4.14.119",
|
||||
"@types/node": "8.9.5",
|
||||
"codelyzer": "4.5.0",
|
||||
"jasmine-core": "2.99.1",
|
||||
"jasmine-spec-reporter": "4.2.1",
|
||||
"karma": "3.1.4",
|
||||
"karma-chrome-launcher": "2.2.0",
|
||||
"karma-coverage-istanbul-reporter": "2.0.4",
|
||||
"karma-jasmine": "1.1.2",
|
||||
"karma-jasmine-html-reporter": "0.2.2",
|
||||
"protractor": "5.4.2",
|
||||
"ts-node": "7.0.1",
|
||||
"tslib": "1.9.3",
|
||||
"tslint": "5.11.0",
|
||||
"typescript": "3.2.2",
|
||||
"webpack-bundle-analyzer": "3.0.3"
|
||||
}
|
||||
"name": "@fuse/demo",
|
||||
"version": "12.0.0",
|
||||
"license": "https://themeforest.net/licenses/standard",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build --prod",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "11.2.10",
|
||||
"@angular/cdk": "11.2.9",
|
||||
"@angular/common": "11.2.10",
|
||||
"@angular/compiler": "11.2.10",
|
||||
"@angular/core": "11.2.10",
|
||||
"@angular/forms": "11.2.10",
|
||||
"@angular/material": "11.2.9",
|
||||
"@angular/material-moment-adapter": "11.2.9",
|
||||
"@angular/platform-browser": "11.2.10",
|
||||
"@angular/platform-browser-dynamic": "11.2.10",
|
||||
"@angular/router": "11.2.10",
|
||||
"@fullcalendar/angular": "4.4.5-beta",
|
||||
"@fullcalendar/core": "4.4.2",
|
||||
"@fullcalendar/daygrid": "4.4.2",
|
||||
"@fullcalendar/interaction": "4.4.2",
|
||||
"@fullcalendar/list": "4.4.2",
|
||||
"@fullcalendar/moment": "4.4.2",
|
||||
"@fullcalendar/rrule": "4.4.2",
|
||||
"@fullcalendar/timegrid": "4.4.2",
|
||||
"apexcharts": "3.26.0",
|
||||
"crypto-js": "3.3.0",
|
||||
"highlight.js": "10.7.2",
|
||||
"lodash-es": "4.17.21",
|
||||
"moment": "2.29.1",
|
||||
"ng-apexcharts": "1.5.9",
|
||||
"ngx-markdown": "11.1.2",
|
||||
"ngx-quill": "13.2.0",
|
||||
"perfect-scrollbar": "1.5.0",
|
||||
"quill": "1.3.7",
|
||||
"rrule": "2.6.8",
|
||||
"rxjs": "6.6.7",
|
||||
"tslib": "2.1.0",
|
||||
"web-animations-js": "2.3.2",
|
||||
"zone.js": "0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "0.1102.9",
|
||||
"@angular/cli": "11.2.9",
|
||||
"@angular/compiler-cli": "11.2.10",
|
||||
"@angular/language-service": "11.2.10",
|
||||
"@tailwindcss/aspect-ratio": "0.2.0",
|
||||
"@tailwindcss/line-clamp": "0.2.0",
|
||||
"@tailwindcss/typography": "0.4.0",
|
||||
"@types/chroma-js": "2.1.3",
|
||||
"@types/crypto-js": "3.1.47",
|
||||
"@types/highlight.js": "10.1.0",
|
||||
"@types/jasmine": "3.6.8",
|
||||
"@types/lodash": "4.14.168",
|
||||
"@types/lodash-es": "4.17.4",
|
||||
"@types/node": "12.20.6",
|
||||
"autoprefixer": "10.2.5",
|
||||
"chroma-js": "2.1.1",
|
||||
"codelyzer": "6.0.1",
|
||||
"jasmine-core": "3.6.0",
|
||||
"jasmine-spec-reporter": "5.0.2",
|
||||
"karma": "6.1.2",
|
||||
"karma-chrome-launcher": "3.1.0",
|
||||
"karma-coverage": "2.0.3",
|
||||
"karma-jasmine": "4.0.1",
|
||||
"karma-jasmine-html-reporter": "1.5.4",
|
||||
"lodash": "4.17.21",
|
||||
"postcss": "8.2.10",
|
||||
"protractor": "7.0.0",
|
||||
"tailwindcss": "2.1.1",
|
||||
"ts-node": "8.3.0",
|
||||
"tslint": "6.1.3",
|
||||
"typescript": "4.1.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
export class FuseAnimationCurves
|
||||
{
|
||||
static STANDARD_CURVE = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
|
||||
static DECELERATION_CURVE = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
|
||||
static ACCELERATION_CURVE = 'cubic-bezier(0.4, 0.0, 1, 1)';
|
||||
static SHARP_CURVE = 'cubic-bezier(0.4, 0.0, 0.6, 1)';
|
||||
}
|
||||
|
||||
export class FuseAnimationDurations
|
||||
{
|
||||
static COMPLEX = '375ms';
|
||||
static ENTERING = '225ms';
|
||||
static EXITING = '195ms';
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Expand / collapse
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const expandCollapse = trigger('expandCollapse',
|
||||
[
|
||||
state('void, collapsed',
|
||||
style({
|
||||
height: '0'
|
||||
})
|
||||
),
|
||||
|
||||
state('*, expanded',
|
||||
style('*')
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void <=> false, collapsed <=> false, expanded <=> false', []),
|
||||
|
||||
// Transition
|
||||
transition('void <=> *, collapsed <=> expanded',
|
||||
animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
export { expandCollapse };
|
||||
@@ -0,0 +1,330 @@
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade in
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeIn = trigger('fadeIn',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity: 0
|
||||
})
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity: 1
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade in top
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeInTop = trigger('fadeInTop',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, -100%, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade in bottom
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeInBottom = trigger('fadeInBottom',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, 100%, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade in left
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeInLeft = trigger('fadeInLeft',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(-100%, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade in right
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeInRight = trigger('fadeInRight',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(100%, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade out
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeOut = trigger('fadeOut',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity: 1
|
||||
})
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity: 0
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade out top
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeOutTop = trigger('fadeOutTop',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, -100%, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade out bottom
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeOutBottom = trigger('fadeOutBottom',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(0, 100%, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade out left
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeOutLeft = trigger('fadeOutLeft',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(-100%, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Fade out right
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const fadeOutRight = trigger('fadeOutRight',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'translate3d(100%, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };
|
||||
@@ -1,417 +1 @@
|
||||
import { sequence, trigger, animate, style, group, query, transition, animateChild, state, animation, useAnimation, stagger } from '@angular/animations';
|
||||
|
||||
const customAnimation = animation([
|
||||
style({
|
||||
opacity : '{{opacity}}',
|
||||
transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
|
||||
}),
|
||||
animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
|
||||
], {
|
||||
params: {
|
||||
duration: '200ms',
|
||||
delay : '0ms',
|
||||
opacity : '0',
|
||||
scale : '1',
|
||||
x : '0',
|
||||
y : '0',
|
||||
z : '0'
|
||||
}
|
||||
});
|
||||
|
||||
export const fuseAnimations = [
|
||||
|
||||
trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
|
||||
|
||||
trigger('animateStagger', [
|
||||
state('50', style('*')),
|
||||
state('100', style('*')),
|
||||
state('200', style('*')),
|
||||
|
||||
transition('void => 50',
|
||||
query('@*',
|
||||
[
|
||||
stagger('50ms', [
|
||||
animateChild()
|
||||
])
|
||||
], {optional: true})),
|
||||
transition('void => 100',
|
||||
query('@*',
|
||||
[
|
||||
stagger('100ms', [
|
||||
animateChild()
|
||||
])
|
||||
], {optional: true})),
|
||||
transition('void => 200',
|
||||
query('@*',
|
||||
[
|
||||
stagger('200ms', [
|
||||
animateChild()
|
||||
])
|
||||
], {optional: true}))
|
||||
]),
|
||||
|
||||
trigger('fadeInOut', [
|
||||
state('0', style({
|
||||
display: 'none',
|
||||
opacity: 0
|
||||
})),
|
||||
state('1', style({
|
||||
display: 'block',
|
||||
opacity: 1
|
||||
})),
|
||||
transition('1 => 0', animate('300ms ease-out')),
|
||||
transition('0 => 1', animate('300ms ease-in'))
|
||||
]),
|
||||
|
||||
trigger('slideInOut', [
|
||||
state('0', style({
|
||||
height : '0px',
|
||||
display: 'none'
|
||||
})),
|
||||
state('1', style({
|
||||
height : '*',
|
||||
display: 'block'
|
||||
})),
|
||||
transition('1 => 0', animate('300ms ease-out')),
|
||||
transition('0 => 1', animate('300ms ease-in'))
|
||||
]),
|
||||
|
||||
trigger('slideIn', [
|
||||
transition('void => left', [
|
||||
style({
|
||||
transform: 'translateX(100%)'
|
||||
}),
|
||||
animate('300ms ease-in',
|
||||
style({
|
||||
transform: 'translateX(0)'
|
||||
})
|
||||
)
|
||||
]
|
||||
),
|
||||
transition('left => void', [
|
||||
style({
|
||||
transform: 'translateX(0)'
|
||||
}),
|
||||
animate('300ms ease-in',
|
||||
style({
|
||||
transform: 'translateX(-100%)'
|
||||
})
|
||||
)
|
||||
]
|
||||
),
|
||||
transition('void => right', [
|
||||
style({
|
||||
transform: 'translateX(-100%)'
|
||||
}),
|
||||
animate('300ms ease-in',
|
||||
style({
|
||||
transform: 'translateX(0)'
|
||||
})
|
||||
)
|
||||
]
|
||||
),
|
||||
transition('right => void', [
|
||||
style({
|
||||
transform: 'translateX(0)'
|
||||
}),
|
||||
animate('300ms ease-in',
|
||||
style({
|
||||
transform: 'translateX(100%)'
|
||||
})
|
||||
)
|
||||
]
|
||||
),
|
||||
]),
|
||||
|
||||
trigger('slideInLeft', [
|
||||
state('void', style({
|
||||
transform: 'translateX(-100%)',
|
||||
display : 'none'
|
||||
})),
|
||||
state('*', style({
|
||||
transform: 'translateX(0)',
|
||||
display : 'flex'
|
||||
})),
|
||||
transition('void => *', animate('300ms')),
|
||||
transition('* => void', animate('300ms'))
|
||||
]),
|
||||
|
||||
trigger('slideInRight', [
|
||||
state('void', style({
|
||||
transform: 'translateX(100%)',
|
||||
display : 'none'
|
||||
})),
|
||||
state('*', style({
|
||||
transform: 'translateX(0)',
|
||||
display : 'flex'
|
||||
})),
|
||||
transition('void => *', animate('300ms')),
|
||||
transition('* => void', animate('300ms'))
|
||||
]),
|
||||
|
||||
trigger('slideInTop', [
|
||||
state('void', style({
|
||||
transform: 'translateY(-100%)',
|
||||
display : 'none'
|
||||
})),
|
||||
state('*', style({
|
||||
transform: 'translateY(0)',
|
||||
display : 'flex'
|
||||
})),
|
||||
transition('void => *', animate('300ms')),
|
||||
transition('* => void', animate('300ms'))
|
||||
]),
|
||||
|
||||
trigger('slideInBottom', [
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translateY(100%)',
|
||||
display : 'none'
|
||||
})),
|
||||
state('*', style({
|
||||
transform: 'translateY(0)',
|
||||
display : 'flex'
|
||||
})),
|
||||
transition('void => *', animate('300ms')),
|
||||
transition('* => void', animate('300ms'))
|
||||
]),
|
||||
|
||||
trigger('expandCollapse', [
|
||||
state('void', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('*', style({
|
||||
height: '*'
|
||||
})),
|
||||
transition('void => *', animate('300ms ease-out')),
|
||||
transition('* => void', animate('300ms ease-in'))
|
||||
]),
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Router animations
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
trigger('routerTransitionLeft', [
|
||||
|
||||
transition('* => *', [
|
||||
query('content > :enter, content > :leave', [
|
||||
style({
|
||||
position: 'absolute',
|
||||
top : 0,
|
||||
bottom : 0,
|
||||
left : 0,
|
||||
right : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
query('content > :enter', [
|
||||
style({
|
||||
transform: 'translateX(100%)',
|
||||
opacity : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
sequence([
|
||||
group([
|
||||
query('content > :leave', [
|
||||
style({
|
||||
transform: 'translateX(0)',
|
||||
opacity : 1
|
||||
}),
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateX(-100%)',
|
||||
opacity : 0
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('content > :enter', [
|
||||
style({transform: 'translateX(100%)'}),
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateX(0%)',
|
||||
opacity : 1
|
||||
}))
|
||||
], {optional: true})
|
||||
]),
|
||||
query('content > :leave', animateChild(), {optional: true}),
|
||||
query('content > :enter', animateChild(), {optional: true})
|
||||
])
|
||||
])
|
||||
]),
|
||||
|
||||
trigger('routerTransitionRight', [
|
||||
|
||||
transition('* => *', [
|
||||
query('content > :enter, content > :leave', [
|
||||
style({
|
||||
position: 'absolute',
|
||||
top : 0,
|
||||
bottom : 0,
|
||||
left : 0,
|
||||
right : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
query('content > :enter', [
|
||||
style({
|
||||
transform: 'translateX(-100%)',
|
||||
opacity : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
sequence([
|
||||
group([
|
||||
query('content > :leave', [
|
||||
style({
|
||||
transform: 'translateX(0)',
|
||||
opacity : 1
|
||||
}),
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateX(100%)',
|
||||
opacity : 0
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('content > :enter', [
|
||||
style({transform: 'translateX(-100%)'}),
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateX(0%)',
|
||||
opacity : 1
|
||||
}))
|
||||
], {optional: true})
|
||||
]),
|
||||
query('content > :leave', animateChild(), {optional: true}),
|
||||
query('content > :enter', animateChild(), {optional: true})
|
||||
])
|
||||
])
|
||||
]),
|
||||
|
||||
trigger('routerTransitionUp', [
|
||||
|
||||
transition('* => *', [
|
||||
query('content > :enter, content > :leave', [
|
||||
style({
|
||||
position: 'absolute',
|
||||
top : 0,
|
||||
bottom : 0,
|
||||
left : 0,
|
||||
right : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
query('content > :enter', [
|
||||
style({
|
||||
transform: 'translateY(100%)',
|
||||
opacity : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
group([
|
||||
query('content > :leave', [
|
||||
style({
|
||||
transform: 'translateY(0)',
|
||||
opacity : 1
|
||||
}),
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateY(-100%)',
|
||||
opacity : 0
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('content > :enter', [
|
||||
style({transform: 'translateY(100%)'}),
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateY(0%)',
|
||||
opacity : 1
|
||||
}))
|
||||
], {optional: true})
|
||||
]),
|
||||
query('content > :leave', animateChild(), {optional: true}),
|
||||
query('content > :enter', animateChild(), {optional: true})
|
||||
])
|
||||
]),
|
||||
|
||||
trigger('routerTransitionDown', [
|
||||
|
||||
transition('* => *', [
|
||||
query('content > :enter, content > :leave', [
|
||||
style({
|
||||
position: 'absolute',
|
||||
top : 0,
|
||||
bottom : 0,
|
||||
left : 0,
|
||||
right : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
query('content > :enter', [
|
||||
style({
|
||||
transform: 'translateY(-100%)',
|
||||
opacity : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
sequence([
|
||||
group([
|
||||
query('content > :leave', [
|
||||
style({
|
||||
transform: 'translateY(0)',
|
||||
opacity : 1
|
||||
}),
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateY(100%)',
|
||||
opacity : 0
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('content > :enter', [
|
||||
style({transform: 'translateY(-100%)'}),
|
||||
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
transform: 'translateY(0%)',
|
||||
opacity : 1
|
||||
}))
|
||||
], {optional: true})
|
||||
]),
|
||||
query('content > :leave', animateChild(), {optional: true}),
|
||||
query('content > :enter', animateChild(), {optional: true})
|
||||
])
|
||||
])
|
||||
]),
|
||||
|
||||
trigger('routerTransitionFade', [
|
||||
|
||||
transition('* => *', group([
|
||||
|
||||
query('content > :enter, content > :leave ', [
|
||||
style({
|
||||
position: 'absolute',
|
||||
top : 0,
|
||||
bottom : 0,
|
||||
left : 0,
|
||||
right : 0
|
||||
})
|
||||
], {optional: true}),
|
||||
|
||||
query('content > :enter', [
|
||||
style({
|
||||
opacity: 0
|
||||
})
|
||||
], {optional: true}),
|
||||
query('content > :leave', [
|
||||
style({
|
||||
opacity: 1
|
||||
}),
|
||||
animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
opacity: 0
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('content > :enter', [
|
||||
style({
|
||||
opacity: 0
|
||||
}),
|
||||
animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
|
||||
style({
|
||||
opacity: 1
|
||||
}))
|
||||
], {optional: true}),
|
||||
query('content > :enter', animateChild(), {optional: true}),
|
||||
query('content > :leave', animateChild(), {optional: true})
|
||||
]))
|
||||
])
|
||||
];
|
||||
export * from './public-api';
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { expandCollapse } from './expand-collapse';
|
||||
import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from './fade';
|
||||
import { shake } from './shake';
|
||||
import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from './slide';
|
||||
import { zoomIn, zoomOut } from './zoom';
|
||||
|
||||
export const FuseAnimations = [
|
||||
expandCollapse,
|
||||
fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight,
|
||||
fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight,
|
||||
shake,
|
||||
slideInTop, slideInBottom, slideInLeft, slideInRight,
|
||||
slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
|
||||
zoomIn, zoomOut
|
||||
];
|
||||
@@ -0,0 +1,73 @@
|
||||
import { animate, keyframes, style, transition, trigger } from '@angular/animations';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Shake
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const shake = trigger('shake',
|
||||
[
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *, * => true',
|
||||
[
|
||||
animate('{{timings}}',
|
||||
keyframes([
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
offset : 0
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.1
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.2
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.3
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.4
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.5
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.6
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.7
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(10px, 0, 0)',
|
||||
offset : 0.8
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(-10px, 0, 0)',
|
||||
offset : 0.9
|
||||
}),
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
offset : 1
|
||||
})
|
||||
])
|
||||
)
|
||||
],
|
||||
{
|
||||
params: {
|
||||
timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)'
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
export { shake };
|
||||
@@ -0,0 +1,252 @@
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide in top
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideInTop = trigger('slideInTop',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, -100%, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide in bottom
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideInBottom = trigger('slideInBottom',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, 100%, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide in left
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideInLeft = trigger('slideInLeft',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(-100%, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide in right
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideInRight = trigger('slideInRight',
|
||||
[
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(100%, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide out top
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideOutTop = trigger('slideOutTop',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, -100%, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide out bottom
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideOutBottom = trigger('slideOutBottom',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(0, 100%, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide out left
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideOutLeft = trigger('slideOutLeft',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(-100%, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Slide out right
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const slideOutRight = trigger('slideOutRight',
|
||||
[
|
||||
state('*',
|
||||
style({
|
||||
transform: 'translate3d(0, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
transform: 'translate3d(100%, 0, 0)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };
|
||||
@@ -0,0 +1,73 @@
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Zoom in
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const zoomIn = trigger('zoomIn',
|
||||
[
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'scale(0.5)'
|
||||
})
|
||||
),
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'scale(1)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('void => false', []),
|
||||
|
||||
// Transition
|
||||
transition('void => *', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Zoom out
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
const zoomOut = trigger('zoomOut',
|
||||
[
|
||||
|
||||
state('*',
|
||||
style({
|
||||
opacity : 1,
|
||||
transform: 'scale(1)'
|
||||
})
|
||||
),
|
||||
|
||||
state('void',
|
||||
style({
|
||||
opacity : 0,
|
||||
transform: 'scale(0.5)'
|
||||
})
|
||||
),
|
||||
|
||||
// Prevent the transition if the state is false
|
||||
transition('false => void', []),
|
||||
|
||||
// Transition
|
||||
transition('* => void', animate('{{timings}}'),
|
||||
{
|
||||
params: {
|
||||
timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
|
||||
}
|
||||
}
|
||||
)
|
||||
]
|
||||
);
|
||||
|
||||
export { zoomIn, zoomOut };
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
<div
|
||||
class="fuse-alert-container"
|
||||
*ngIf="!dismissible || dismissible && !dismissed"
|
||||
[@fadeIn]="!dismissed"
|
||||
[@fadeOut]="!dismissed">
|
||||
|
||||
<!-- Border -->
|
||||
<div
|
||||
class="fuse-alert-border"
|
||||
*ngIf="appearance === 'border'"></div>
|
||||
|
||||
<!-- Icon -->
|
||||
<div
|
||||
class="fuse-alert-icon"
|
||||
*ngIf="showIcon">
|
||||
|
||||
<!-- Custom icon -->
|
||||
<div class="fuse-alert-custom-icon">
|
||||
<ng-content select="[fuseAlertIcon]"></ng-content>
|
||||
</div>
|
||||
|
||||
<!-- Default icons -->
|
||||
<div class="fuse-alert-default-icon">
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'primary'"
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'accent'"
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'warn'"
|
||||
[svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'basic'"
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'info'"
|
||||
[svgIcon]="'heroicons_solid:information-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'success'"
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'warning'"
|
||||
[svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="type === 'error'"
|
||||
[svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="fuse-alert-content">
|
||||
|
||||
<div class="fuse-alert-title">
|
||||
<ng-content select="[fuseAlertTitle]"></ng-content>
|
||||
</div>
|
||||
|
||||
<div class="fuse-alert-message">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Dismiss button -->
|
||||
<button
|
||||
class="fuse-alert-dismiss-button"
|
||||
mat-icon-button
|
||||
(click)="dismiss()">
|
||||
<mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,211 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { FuseAnimations } from '@fuse/animations';
|
||||
import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
|
||||
import { FuseAlertService } from '@fuse/components/alert/alert.service';
|
||||
import { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-alert',
|
||||
templateUrl : './alert.component.html',
|
||||
styleUrls : ['./alert.component.scss'],
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
animations : FuseAnimations,
|
||||
exportAs : 'fuseAlert'
|
||||
})
|
||||
export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
static ngAcceptInputType_dismissible: BooleanInput;
|
||||
static ngAcceptInputType_dismissed: BooleanInput;
|
||||
static ngAcceptInputType_showIcon: BooleanInput;
|
||||
|
||||
@Input() appearance: FuseAlertAppearance = 'soft';
|
||||
@Input() dismissed: boolean = false;
|
||||
@Input() dismissible: boolean = false;
|
||||
@Input() name: string = this._fuseUtilsService.randomId();
|
||||
@Input() showIcon: boolean = true;
|
||||
@Input() type: FuseAlertType = 'primary';
|
||||
@Output() readonly dismissedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseAlertService: FuseAlertService,
|
||||
private _fuseUtilsService: FuseUtilsService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Host binding for component classes
|
||||
*/
|
||||
@HostBinding('class') get classList(): any
|
||||
{
|
||||
return {
|
||||
'fuse-alert-appearance-border' : this.appearance === 'border',
|
||||
'fuse-alert-appearance-fill' : this.appearance === 'fill',
|
||||
'fuse-alert-appearance-outline': this.appearance === 'outline',
|
||||
'fuse-alert-appearance-soft' : this.appearance === 'soft',
|
||||
'fuse-alert-dismissed' : this.dismissed,
|
||||
'fuse-alert-dismissible' : this.dismissible,
|
||||
'fuse-alert-show-icon' : this.showIcon,
|
||||
'fuse-alert-type-primary' : this.type === 'primary',
|
||||
'fuse-alert-type-accent' : this.type === 'accent',
|
||||
'fuse-alert-type-warn' : this.type === 'warn',
|
||||
'fuse-alert-type-basic' : this.type === 'basic',
|
||||
'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'
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On changes
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Dismissed
|
||||
if ( 'dismissed' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.dismissed = coerceBooleanProperty(changes.dismissed.currentValue);
|
||||
|
||||
// Dismiss/show the alert
|
||||
this._toggleDismiss(this.dismissed);
|
||||
}
|
||||
|
||||
// Dismissible
|
||||
if ( 'dismissible' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.dismissible = coerceBooleanProperty(changes.dismissible.currentValue);
|
||||
}
|
||||
|
||||
// Show icon
|
||||
if ( 'showIcon' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.showIcon = coerceBooleanProperty(changes.showIcon.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to the dismiss calls
|
||||
this._fuseAlertService.onDismiss
|
||||
.pipe(
|
||||
filter((name) => this.name === name),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
|
||||
// Dismiss the alert
|
||||
this.dismiss();
|
||||
});
|
||||
|
||||
// Subscribe to the show calls
|
||||
this._fuseAlertService.onShow
|
||||
.pipe(
|
||||
filter((name) => this.name === name),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
|
||||
// Show the alert
|
||||
this.show();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Dismiss the alert
|
||||
*/
|
||||
dismiss(): void
|
||||
{
|
||||
// Return if the alert is already dismissed
|
||||
if ( this.dismissed )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Dismiss the alert
|
||||
this._toggleDismiss(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the dismissed alert
|
||||
*/
|
||||
show(): void
|
||||
{
|
||||
// Return if the alert is already showing
|
||||
if ( !this.dismissed )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Show the alert
|
||||
this._toggleDismiss(false);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Dismiss/show the alert
|
||||
*
|
||||
* @param dismissed
|
||||
* @private
|
||||
*/
|
||||
private _toggleDismiss(dismissed: boolean): void
|
||||
{
|
||||
// Return if the alert is not dismissible
|
||||
if ( !this.dismissible )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the dismissed
|
||||
this.dismissed = dismissed;
|
||||
|
||||
// Execute the observable
|
||||
this.dismissedChanged.next(this.dismissed);
|
||||
|
||||
// Notify the change detector
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
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
|
||||
{
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseAlertService
|
||||
{
|
||||
private readonly _onDismiss: ReplaySubject<string> = new ReplaySubject<string>(1);
|
||||
private readonly _onShow: ReplaySubject<string> = new ReplaySubject<string>(1);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for onDismiss
|
||||
*/
|
||||
get onDismiss(): Observable<any>
|
||||
{
|
||||
return this._onDismiss.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for onShow
|
||||
*/
|
||||
get onShow(): Observable<any>
|
||||
{
|
||||
return this._onShow.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Dismiss the alert
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
dismiss(name: string): void
|
||||
{
|
||||
// Return if the name is not provided
|
||||
if ( !name )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Execute the observable
|
||||
this._onDismiss.next(name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the dismissed alert
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
show(name: string): void
|
||||
{
|
||||
// Return if the name is not provided
|
||||
if ( !name )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Execute the observable
|
||||
this._onShow.next(name);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
export type FuseAlertAppearance =
|
||||
| 'border'
|
||||
| 'fill'
|
||||
| 'outline'
|
||||
| 'soft';
|
||||
|
||||
export type FuseAlertType =
|
||||
| 'primary'
|
||||
| 'accent'
|
||||
| 'warn'
|
||||
| 'basic'
|
||||
| 'info'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error';
|
||||
@@ -0,0 +1 @@
|
||||
export * from '@fuse/components/alert/public-api';
|
||||
@@ -0,0 +1,4 @@
|
||||
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';
|
||||
@@ -0,0 +1,30 @@
|
||||
<!-- Flippable card -->
|
||||
<ng-container *ngIf="flippable">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-card-front">
|
||||
<ng-content select="[fuseCardFront]"></ng-content>
|
||||
</div>
|
||||
|
||||
<!-- Back -->
|
||||
<div class="fuse-card-back">
|
||||
<ng-content select="[fuseCardBack]"></ng-content>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- Normal card -->
|
||||
<ng-container *ngIf="!flippable">
|
||||
|
||||
<!-- Content -->
|
||||
<ng-content></ng-content>
|
||||
|
||||
<!-- Expansion -->
|
||||
<div
|
||||
class="fuse-card-expansion"
|
||||
*ngIf="expanded"
|
||||
[@expandCollapse]>
|
||||
<ng-content select="[fuseCardExpansion]"></ng-content>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
@@ -0,0 +1,63 @@
|
||||
fuse-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
@apply rounded-2xl shadow bg-card;
|
||||
|
||||
/* Flippable */
|
||||
&.fuse-card-flippable {
|
||||
border-radius: 0;
|
||||
overflow: visible;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 1s;
|
||||
perspective: 600px;
|
||||
background: transparent;
|
||||
@apply shadow-none;
|
||||
|
||||
&.fuse-card-face-back {
|
||||
|
||||
.fuse-card-front {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.fuse-card-back {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-card-front,
|
||||
.fuse-card-back {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
z-index: 10;
|
||||
transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
|
||||
backface-visibility: hidden;
|
||||
@apply rounded-2xl shadow bg-card;
|
||||
}
|
||||
|
||||
.fuse-card-front {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: rotateY(0deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fuse-card-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: rotateY(180deg);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { FuseAnimations } from '@fuse/animations';
|
||||
import { FuseCardFace } from '@fuse/components/card/card.types';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-card',
|
||||
templateUrl : './card.component.html',
|
||||
styleUrls : ['./card.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations : FuseAnimations,
|
||||
exportAs : 'fuseCard'
|
||||
})
|
||||
export class FuseCardComponent implements OnChanges
|
||||
{
|
||||
static ngAcceptInputType_expanded: BooleanInput;
|
||||
static ngAcceptInputType_flippable: BooleanInput;
|
||||
|
||||
@Input() expanded: boolean = false;
|
||||
@Input() face: FuseCardFace = 'front';
|
||||
@Input() flippable: boolean = false;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Host binding for component classes
|
||||
*/
|
||||
@HostBinding('class') get classList(): any
|
||||
{
|
||||
return {
|
||||
'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
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On changes
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Expanded
|
||||
if ( 'expanded' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.expanded = coerceBooleanProperty(changes.expanded.currentValue);
|
||||
}
|
||||
|
||||
// Flippable
|
||||
if ( 'flippable' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.flippable = coerceBooleanProperty(changes.flippable.currentValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
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
|
||||
{
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export type FuseCardFace =
|
||||
| 'front'
|
||||
| 'back';
|
||||
@@ -0,0 +1 @@
|
||||
export * from '@fuse/components/card/public-api';
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from '@fuse/components/card/card.component';
|
||||
export * from '@fuse/components/card/card.module';
|
||||
@@ -1,6 +0,0 @@
|
||||
<h1 matDialogTitle>Confirm</h1>
|
||||
<div mat-dialog-content>{{confirmMessage}}</div>
|
||||
<div mat-dialog-actions class="pt-24">
|
||||
<button mat-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
|
||||
<button mat-button (click)="dialogRef.close(false)">Cancel</button>
|
||||
</div>
|
||||
@@ -1,24 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatDialogRef } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-confirm-dialog',
|
||||
templateUrl: './confirm-dialog.component.html',
|
||||
styleUrls : ['./confirm-dialog.component.scss']
|
||||
})
|
||||
export class FuseConfirmDialogComponent
|
||||
{
|
||||
public confirmMessage: string;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {MatDialogRef<FuseConfirmDialogComponent>} dialogRef
|
||||
*/
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<FuseConfirmDialogComponent>
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatDialogModule } from '@angular/material';
|
||||
|
||||
import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseConfirmDialogComponent
|
||||
],
|
||||
imports: [
|
||||
MatDialogModule,
|
||||
MatButtonModule
|
||||
],
|
||||
entryComponents: [
|
||||
FuseConfirmDialogComponent
|
||||
],
|
||||
})
|
||||
export class FuseConfirmDialogModule
|
||||
{
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
<div class="fuse-countdown">
|
||||
|
||||
<div class="time days">
|
||||
<div class="value">
|
||||
{{countdown.days}}
|
||||
</div>
|
||||
<div class="title">
|
||||
days
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time hours">
|
||||
<div class="value">
|
||||
{{countdown.hours}}
|
||||
</div>
|
||||
<div class="title">
|
||||
hours
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time minutes">
|
||||
<div class="value">
|
||||
{{countdown.minutes}}
|
||||
</div>
|
||||
<div class="title">
|
||||
minutes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time seconds">
|
||||
<div class="value">
|
||||
{{countdown.seconds}}
|
||||
</div>
|
||||
<div class="title">
|
||||
seconds
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
fuse-countdown {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.fuse-countdown {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 12px;
|
||||
|
||||
.value {
|
||||
font-size: 34px;
|
||||
line-height: 34px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { interval, Subject } from 'rxjs';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import * as moment from 'moment';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-countdown',
|
||||
templateUrl: './countdown.component.html',
|
||||
styleUrls : ['./countdown.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FuseCountdownComponent implements OnInit, OnDestroy
|
||||
{
|
||||
// Event date
|
||||
@Input('eventDate')
|
||||
eventDate;
|
||||
|
||||
countdown: any;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
// Set the defaults
|
||||
this.countdown = {
|
||||
days : '',
|
||||
hours : '',
|
||||
minutes: '',
|
||||
seconds: ''
|
||||
};
|
||||
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
const currDate = moment();
|
||||
const eventDate = moment(this.eventDate);
|
||||
|
||||
// Get the difference in between the current date and event date in seconds
|
||||
let diff = eventDate.diff(currDate, 'seconds');
|
||||
|
||||
// Calculate the remaining time for the first time so there will be no
|
||||
// delay on the countdown
|
||||
this.countdown = this._secondsToRemaining(diff);
|
||||
|
||||
// Create a subscribable interval
|
||||
const countDown = interval(1000)
|
||||
.pipe(
|
||||
map(value => {
|
||||
return diff = diff - 1;
|
||||
}),
|
||||
map(value => {
|
||||
return this._secondsToRemaining(value);
|
||||
})
|
||||
);
|
||||
|
||||
// Subscribe to the countdown interval
|
||||
countDown
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(value => {
|
||||
this.countdown = value;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Converts given seconds to a remaining time
|
||||
*
|
||||
* @param seconds
|
||||
* @private
|
||||
*/
|
||||
private _secondsToRemaining(seconds): any
|
||||
{
|
||||
const timeLeft = moment.duration(seconds, 'seconds');
|
||||
|
||||
return {
|
||||
days : timeLeft.asDays().toFixed(0),
|
||||
hours : timeLeft.hours(),
|
||||
minutes: timeLeft.minutes(),
|
||||
seconds: timeLeft.seconds()
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { FuseCountdownComponent } from '@fuse/components/countdown/countdown.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseCountdownComponent
|
||||
],
|
||||
exports: [
|
||||
FuseCountdownComponent
|
||||
],
|
||||
})
|
||||
export class FuseCountdownModule
|
||||
{
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
@mixin fuse-countdown-theme($theme) {
|
||||
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
fuse-countdown {
|
||||
|
||||
.fuse-countdown {
|
||||
|
||||
.time {
|
||||
|
||||
.title {
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
<div
|
||||
class="range"
|
||||
(click)="openPickerPanel()"
|
||||
#pickerPanelOrigin>
|
||||
|
||||
<div class="start">
|
||||
<div class="date">{{range.startDate}}</div>
|
||||
<div
|
||||
class="time"
|
||||
*ngIf="range.startTime">{{range.startTime}}</div>
|
||||
</div>
|
||||
|
||||
<div class="separator">-</div>
|
||||
|
||||
<div class="end">
|
||||
<div class="date">{{range.endDate}}</div>
|
||||
<div
|
||||
class="time"
|
||||
*ngIf="range.endTime">{{range.endTime}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-template #pickerPanel>
|
||||
|
||||
<!-- Start -->
|
||||
<div class="start">
|
||||
|
||||
<div class="month">
|
||||
<div class="month-header">
|
||||
<button
|
||||
class="previous-button"
|
||||
mat-icon-button
|
||||
(click)="prev()"
|
||||
tabindex="1">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:chevron-left'"></mat-icon>
|
||||
</button>
|
||||
<div class="month-label">{{getMonthLabel(1)}}</div>
|
||||
</div>
|
||||
<mat-month-view
|
||||
[(activeDate)]="activeDates.month1"
|
||||
[dateFilter]="dateFilter()"
|
||||
[dateClass]="dateClass()"
|
||||
(click)="$event.stopImmediatePropagation()"
|
||||
(selectedChange)="onSelectedDateChange($event)"
|
||||
#matMonthView1>
|
||||
</mat-month-view>
|
||||
</div>
|
||||
|
||||
<mat-form-field
|
||||
class="fuse-mat-no-subscript time start-time"
|
||||
*ngIf="timeRange">
|
||||
<input
|
||||
matInput
|
||||
[autocomplete]="'off'"
|
||||
[formControl]="startTimeFormControl"
|
||||
(blur)="updateStartTime($event)"
|
||||
tabindex="3">
|
||||
<mat-label>Start time</mat-label>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- End -->
|
||||
<div class="end">
|
||||
|
||||
<div class="month">
|
||||
<div class="month-header">
|
||||
<div class="month-label">{{getMonthLabel(2)}}</div>
|
||||
<button
|
||||
class="next-button"
|
||||
mat-icon-button
|
||||
(click)="next()"
|
||||
tabindex="2">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:chevron-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-month-view
|
||||
[(activeDate)]="activeDates.month2"
|
||||
[dateFilter]="dateFilter()"
|
||||
[dateClass]="dateClass()"
|
||||
(click)="$event.stopImmediatePropagation()"
|
||||
(selectedChange)="onSelectedDateChange($event)"
|
||||
#matMonthView2>
|
||||
</mat-month-view>
|
||||
</div>
|
||||
|
||||
<mat-form-field
|
||||
class="fuse-mat-no-subscript time end-time"
|
||||
*ngIf="timeRange">
|
||||
<input
|
||||
matInput
|
||||
[formControl]="endTimeFormControl"
|
||||
(blur)="updateEndTime($event)"
|
||||
tabindex="4">
|
||||
<mat-label>End time</mat-label>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
@@ -0,0 +1,292 @@
|
||||
/* Variables */
|
||||
$body-cell-padding: 2px;
|
||||
|
||||
fuse-date-range {
|
||||
display: flex;
|
||||
|
||||
.range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
cursor: pointer;
|
||||
|
||||
.start,
|
||||
.end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
border-radius: 6px;
|
||||
border-width: 1px;
|
||||
line-height: 1;
|
||||
@apply shadow-sm border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500;
|
||||
|
||||
.date {
|
||||
white-space: nowrap;
|
||||
|
||||
+ .time {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 2px;
|
||||
|
||||
@screen sm {
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-date-range-panel {
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
@apply shadow-2xl bg-card;
|
||||
|
||||
.start,
|
||||
.end {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.month {
|
||||
max-width: 196px;
|
||||
min-width: 196px;
|
||||
width: 196px;
|
||||
|
||||
.month-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.previous-button,
|
||||
.next-button {
|
||||
position: absolute;
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
min-height: 24px !important;
|
||||
max-height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
|
||||
.mat-icon {
|
||||
@apply icon-size-5;
|
||||
}
|
||||
}
|
||||
|
||||
.previous-button {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.next-button {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.month-label {
|
||||
font-weight: 500;
|
||||
@apply text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
mat-month-view {
|
||||
display: flex;
|
||||
min-height: 188px;
|
||||
|
||||
.mat-calendar-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
tbody {
|
||||
|
||||
tr {
|
||||
|
||||
&[aria-hidden=true] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
td:first-child {
|
||||
|
||||
&[aria-hidden=true] {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
td:hover {
|
||||
|
||||
&.fuse-date-range {
|
||||
|
||||
&:before {
|
||||
@apply bg-primary-200;
|
||||
}
|
||||
|
||||
.mat-calendar-body-cell-content {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.fuse-date-range-start,
|
||||
&.fuse-date-range-end {
|
||||
|
||||
.mat-calendar-body-cell-content {
|
||||
@apply bg-primary text-on-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-calendar-body-today {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
td.mat-calendar-body-cell {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
padding: $body-cell-padding !important;
|
||||
|
||||
&.fuse-date-range {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: $body-cell-padding;
|
||||
right: 0;
|
||||
bottom: $body-cell-padding;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.fuse-date-range-start {
|
||||
|
||||
&:before {
|
||||
left: $body-cell-padding;
|
||||
border-radius: 999px 0 0 999px;
|
||||
}
|
||||
|
||||
&.fuse-date-range-end,
|
||||
&:last-child {
|
||||
|
||||
&:before {
|
||||
right: $body-cell-padding;
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fuse-date-range-end {
|
||||
|
||||
&:before {
|
||||
right: $body-cell-padding;
|
||||
border-radius: 0 999px 999px 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
&:before {
|
||||
left: $body-cell-padding;
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
&:before {
|
||||
border-radius: 999px 0 0 999px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
||||
&:before {
|
||||
border-radius: 0 999px 999px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-calendar-body-cell-content {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
td.mat-calendar-body-label {
|
||||
|
||||
+ td.mat-calendar-body-cell {
|
||||
|
||||
&.fuse-date-range {
|
||||
|
||||
&:before {
|
||||
border-radius: 999px 0 0 999px;
|
||||
}
|
||||
|
||||
&.fuse-date-range-start {
|
||||
|
||||
&.fuse-date-range-end {
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
|
||||
&.fuse-date-range-end {
|
||||
|
||||
&:before {
|
||||
left: $body-cell-padding;
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 100%;
|
||||
max-width: 196px;
|
||||
}
|
||||
}
|
||||
|
||||
.start {
|
||||
align-items: flex-start;
|
||||
margin-right: 20px;
|
||||
|
||||
.month {
|
||||
|
||||
.month-label {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.end {
|
||||
align-items: flex-end;
|
||||
margin-left: 20px;
|
||||
|
||||
.month {
|
||||
|
||||
.month-label {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,685 @@
|
||||
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, OnDestroy, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
|
||||
import { Overlay } from '@angular/cdk/overlay';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { MatCalendarCellCssClasses, MatMonthView } from '@angular/material/datepicker';
|
||||
import { Subject } from 'rxjs';
|
||||
import * as moment from 'moment';
|
||||
import { Moment } from 'moment';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-date-range',
|
||||
templateUrl : './date-range.component.html',
|
||||
styleUrls : ['./date-range.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
exportAs : 'fuseDateRange',
|
||||
providers : [
|
||||
{
|
||||
provide : NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => FuseDateRangeComponent),
|
||||
multi : true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnDestroy
|
||||
{
|
||||
@Output() readonly rangeChanged: EventEmitter<{ start: string, end: string }> = new EventEmitter<{ start: string; end: string }>();
|
||||
@ViewChild('matMonthView1') private _matMonthView1: MatMonthView<any>;
|
||||
@ViewChild('matMonthView2') private _matMonthView2: MatMonthView<any>;
|
||||
@ViewChild('pickerPanelOrigin', {read: ElementRef}) private _pickerPanelOrigin: ElementRef;
|
||||
@ViewChild('pickerPanel') private _pickerPanel: TemplateRef<any>;
|
||||
@HostBinding('class.fuse-date-range') private _defaultClassNames = true;
|
||||
|
||||
activeDates: { month1: Moment | null, month2: Moment | null } = {
|
||||
month1: null,
|
||||
month2: null
|
||||
};
|
||||
setWhichDate: 'start' | 'end' = 'start';
|
||||
startTimeFormControl: FormControl;
|
||||
endTimeFormControl: FormControl;
|
||||
private _dateFormat: string;
|
||||
private _onChange: (value: any) => void;
|
||||
private _onTouched: (value: any) => void;
|
||||
private _programmaticChange!: boolean;
|
||||
private _range: { start: Moment | null, end: Moment | null } = {
|
||||
start: null,
|
||||
end : null
|
||||
};
|
||||
private _timeFormat: string;
|
||||
private _timeRange: boolean;
|
||||
private readonly _timeRegExp: RegExp = new RegExp('^(0[0-9]|1[0-9]|2[0-4]|[0-9]):([0-5][0-9])(A|(?:AM)|P|(?:PM))?$', 'i');
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _elementRef: ElementRef,
|
||||
private _overlay: Overlay,
|
||||
private _renderer2: Renderer2,
|
||||
private _viewContainerRef: ViewContainerRef
|
||||
)
|
||||
{
|
||||
this._onChange = () => {
|
||||
};
|
||||
this._onTouched = () => {
|
||||
};
|
||||
this.dateFormat = 'DD/MM/YYYY';
|
||||
this.timeFormat = '12';
|
||||
|
||||
// Initialize the component
|
||||
this._init();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Setter & getter for dateFormat input
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
@Input()
|
||||
set dateFormat(value: string)
|
||||
{
|
||||
// Return if the values are the same
|
||||
if ( this._dateFormat === value )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Store the value
|
||||
this._dateFormat = value;
|
||||
}
|
||||
|
||||
get dateFormat(): string
|
||||
{
|
||||
return this._dateFormat;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter & getter for timeFormat input
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
@Input()
|
||||
set timeFormat(value: string)
|
||||
{
|
||||
// Return if the values are the same
|
||||
if ( this._timeFormat === value )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Set format based on the time format input
|
||||
this._timeFormat = value === '12' ? 'hh:mmA' : 'HH:mm';
|
||||
}
|
||||
|
||||
get timeFormat(): string
|
||||
{
|
||||
return this._timeFormat;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter & getter for timeRange input
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
@Input()
|
||||
set timeRange(value: boolean)
|
||||
{
|
||||
// Return if the values are the same
|
||||
if ( this._timeRange === value )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Store the value
|
||||
this._timeRange = value;
|
||||
|
||||
// If the time range turned off...
|
||||
if ( !value )
|
||||
{
|
||||
this.range = {
|
||||
start: this._range.start.clone().startOf('day'),
|
||||
end : this._range.end.clone().endOf('day')
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
get timeRange(): boolean
|
||||
{
|
||||
return this._timeRange;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setter & getter for range input
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
@Input()
|
||||
set range(value)
|
||||
{
|
||||
if ( !value )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if the value is an object and has 'start' and 'end' values
|
||||
if ( !value.start || !value.end )
|
||||
{
|
||||
console.error('Range input must have "start" and "end" properties!');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if we are setting an individual date or both of them
|
||||
const whichDate = value.whichDate || null;
|
||||
|
||||
// Get the start and end dates as moment
|
||||
const start = moment(value.start);
|
||||
const end = moment(value.end);
|
||||
|
||||
// If we are only setting the start date...
|
||||
if ( whichDate === 'start' )
|
||||
{
|
||||
// Set the start date
|
||||
this._range.start = start.clone();
|
||||
|
||||
// If the selected start date is after the end date...
|
||||
if ( this._range.start.isAfter(this._range.end) )
|
||||
{
|
||||
// Set the end date to the start date but keep the end date's time
|
||||
const endDate = start.clone().hours(this._range.end.hours()).minutes(this._range.end.minutes()).seconds(this._range.end.seconds());
|
||||
|
||||
// Test this new end date to see if it's ahead of the start date
|
||||
if ( this._range.start.isBefore(endDate) )
|
||||
{
|
||||
// If it's, set the new end date
|
||||
this._range.end = endDate;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Otherwise, set the end date same as the start date
|
||||
this._range.end = start.clone();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If we are only setting the end date...
|
||||
if ( whichDate === 'end' )
|
||||
{
|
||||
// Set the end date
|
||||
this._range.end = end.clone();
|
||||
|
||||
// If the selected end date is before the start date...
|
||||
if ( this._range.start.isAfter(this._range.end) )
|
||||
{
|
||||
// Set the start date to the end date but keep the start date's time
|
||||
const startDate = end.clone().hours(this._range.start.hours()).minutes(this._range.start.minutes()).seconds(this._range.start.seconds());
|
||||
|
||||
// Test this new end date to see if it's ahead of the start date
|
||||
if ( this._range.end.isAfter(startDate) )
|
||||
{
|
||||
// If it's, set the new start date
|
||||
this._range.start = startDate;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Otherwise, set the start date same as the end date
|
||||
this._range.start = end.clone();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If we are setting both dates...
|
||||
if ( !whichDate )
|
||||
{
|
||||
// Set the start date
|
||||
this._range.start = start.clone();
|
||||
|
||||
// If the start date is before the end date, set the end date as normal.
|
||||
// If the start date is after the end date, set the end date same as the start date.
|
||||
this._range.end = start.isBefore(end) ? end.clone() : start.clone();
|
||||
}
|
||||
|
||||
// Prepare another range object that holds the ISO formatted range dates
|
||||
const range = {
|
||||
start: this._range.start.clone().toISOString(),
|
||||
end : this._range.end.clone().toISOString()
|
||||
};
|
||||
|
||||
// Emit the range changed event with the range
|
||||
this.rangeChanged.emit(range);
|
||||
|
||||
// Update the model with the range if the change was not a programmatic change
|
||||
// Because programmatic changes trigger writeValue which triggers onChange and onTouched
|
||||
// internally causing them to trigger twice which breaks the form's pristine and touched
|
||||
// statuses.
|
||||
if ( !this._programmaticChange )
|
||||
{
|
||||
this._onTouched(range);
|
||||
this._onChange(range);
|
||||
}
|
||||
|
||||
// Set the active dates
|
||||
this.activeDates = {
|
||||
month1: this._range.start.clone(),
|
||||
month2: this._range.start.clone().add(1, 'month')
|
||||
};
|
||||
|
||||
// Set the time form controls
|
||||
this.startTimeFormControl.setValue(this._range.start.clone().format(this._timeFormat).toString());
|
||||
this.endTimeFormControl.setValue(this._range.end.clone().format(this._timeFormat).toString());
|
||||
|
||||
// Run ngAfterContentInit on month views to trigger
|
||||
// re-render on month views if they are available
|
||||
if ( this._matMonthView1 && this._matMonthView2 )
|
||||
{
|
||||
this._matMonthView1.ngAfterContentInit();
|
||||
this._matMonthView2.ngAfterContentInit();
|
||||
}
|
||||
|
||||
// Reset the programmatic change status
|
||||
this._programmaticChange = false;
|
||||
}
|
||||
|
||||
get range(): any
|
||||
{
|
||||
// Clone the range start and end
|
||||
const start = this._range.start.clone();
|
||||
const end = this._range.end.clone();
|
||||
|
||||
// Build and return the range object
|
||||
return {
|
||||
startDate: start.clone().format(this.dateFormat),
|
||||
startTime: this.timeRange ? start.clone().format(this.timeFormat) : null,
|
||||
endDate : end.clone().format(this.dateFormat),
|
||||
endTime : this.timeRange ? end.clone().format(this.timeFormat) : null
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Control Value Accessor
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Update the form model on change
|
||||
*
|
||||
* @param fn
|
||||
*/
|
||||
registerOnChange(fn: any): void
|
||||
{
|
||||
this._onChange = fn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the form model on blur
|
||||
*
|
||||
* @param fn
|
||||
*/
|
||||
registerOnTouched(fn: any): void
|
||||
{
|
||||
this._onTouched = fn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Write to view from model when the form model changes programmatically
|
||||
*
|
||||
* @param range
|
||||
*/
|
||||
writeValue(range: { start: string, end: string }): void
|
||||
{
|
||||
// Set this change as a programmatic one
|
||||
this._programmaticChange = true;
|
||||
|
||||
// Set the range
|
||||
this.range = range;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
// @ TODO: Workaround until "angular/issues/20007" resolved
|
||||
this.writeValue = () => {
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Open the picker panel
|
||||
*/
|
||||
openPickerPanel(): void
|
||||
{
|
||||
// Create the overlay
|
||||
const overlayRef = this._overlay.create({
|
||||
panelClass : 'fuse-date-range-panel',
|
||||
backdropClass : '',
|
||||
hasBackdrop : true,
|
||||
scrollStrategy : this._overlay.scrollStrategies.reposition(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._pickerPanelOrigin)
|
||||
.withPositions([
|
||||
{
|
||||
originX : 'start',
|
||||
originY : 'bottom',
|
||||
overlayX: 'start',
|
||||
overlayY: 'top',
|
||||
offsetY : 8
|
||||
},
|
||||
{
|
||||
originX : 'start',
|
||||
originY : 'top',
|
||||
overlayX: 'start',
|
||||
overlayY: 'bottom',
|
||||
offsetY : -8
|
||||
}
|
||||
])
|
||||
});
|
||||
|
||||
// Create a portal from the template
|
||||
const templatePortal = new TemplatePortal(this._pickerPanel, this._viewContainerRef);
|
||||
|
||||
// On backdrop click
|
||||
overlayRef.backdropClick().subscribe(() => {
|
||||
|
||||
// If template portal exists and attached...
|
||||
if ( templatePortal && templatePortal.isAttached )
|
||||
{
|
||||
// Detach it
|
||||
templatePortal.detach();
|
||||
}
|
||||
|
||||
// If overlay exists and attached...
|
||||
if ( overlayRef && overlayRef.hasAttached() )
|
||||
{
|
||||
// Detach it
|
||||
overlayRef.detach();
|
||||
overlayRef.dispose();
|
||||
}
|
||||
});
|
||||
|
||||
// Attach the portal to the overlay
|
||||
overlayRef.attach(templatePortal);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get month label
|
||||
*
|
||||
* @param month
|
||||
*/
|
||||
getMonthLabel(month: number): string
|
||||
{
|
||||
if ( month === 1 )
|
||||
{
|
||||
return this.activeDates.month1.clone().format('MMMM Y');
|
||||
}
|
||||
|
||||
return this.activeDates.month2.clone().format('MMMM Y');
|
||||
}
|
||||
|
||||
/**
|
||||
* Date class function to add/remove class names to calendar days
|
||||
*/
|
||||
dateClass(): any
|
||||
{
|
||||
return (date: Moment): MatCalendarCellCssClasses => {
|
||||
|
||||
// If the date is both start and end date...
|
||||
if ( date.isSame(this._range.start, 'day') && date.isSame(this._range.end, 'day') )
|
||||
{
|
||||
return ['fuse-date-range', 'fuse-date-range-start', 'fuse-date-range-end'];
|
||||
}
|
||||
|
||||
// If the date is the start date...
|
||||
if ( date.isSame(this._range.start, 'day') )
|
||||
{
|
||||
return ['fuse-date-range', 'fuse-date-range-start'];
|
||||
}
|
||||
|
||||
// If the date is the end date...
|
||||
if ( date.isSame(this._range.end, 'day') )
|
||||
{
|
||||
return ['fuse-date-range', 'fuse-date-range-end'];
|
||||
}
|
||||
|
||||
// If the date is in between start and end dates...
|
||||
if ( date.isBetween(this._range.start, this._range.end, 'day') )
|
||||
{
|
||||
return ['fuse-date-range', 'fuse-date-range-mid'];
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Date filter to enable/disable calendar days
|
||||
*/
|
||||
dateFilter(): any
|
||||
{
|
||||
return (date: Moment): boolean => {
|
||||
|
||||
// If we are selecting the end date, disable all the dates that comes before the start date
|
||||
return !(this.setWhichDate === 'end' && date.isBefore(this._range.start, 'day'));
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* On selected date change
|
||||
*
|
||||
* @param date
|
||||
*/
|
||||
onSelectedDateChange(date: Moment): void
|
||||
{
|
||||
// Create a new range object
|
||||
const newRange = {
|
||||
start : this._range.start.clone().toISOString(),
|
||||
end : this._range.end.clone().toISOString(),
|
||||
whichDate: null
|
||||
};
|
||||
|
||||
// Replace either the start or the end date with the new one
|
||||
// depending on which date we are setting
|
||||
if ( this.setWhichDate === 'start' )
|
||||
{
|
||||
newRange.start = moment(newRange.start).year(date.year()).month(date.month()).date(date.date()).toISOString();
|
||||
}
|
||||
else
|
||||
{
|
||||
newRange.end = moment(newRange.end).year(date.year()).month(date.month()).date(date.date()).toISOString();
|
||||
}
|
||||
|
||||
// Append the which date to the new range object
|
||||
newRange.whichDate = this.setWhichDate;
|
||||
|
||||
// Switch which date to set on the next run
|
||||
this.setWhichDate = this.setWhichDate === 'start' ? 'end' : 'start';
|
||||
|
||||
// Set the range
|
||||
this.range = newRange;
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to previous month on both views
|
||||
*/
|
||||
prev(): void
|
||||
{
|
||||
this.activeDates.month1 = moment(this.activeDates.month1).subtract(1, 'month');
|
||||
this.activeDates.month2 = moment(this.activeDates.month2).subtract(1, 'month');
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to next month on both views
|
||||
*/
|
||||
next(): void
|
||||
{
|
||||
this.activeDates.month1 = moment(this.activeDates.month1).add(1, 'month');
|
||||
this.activeDates.month2 = moment(this.activeDates.month2).add(1, 'month');
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the start time
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
updateStartTime(event): void
|
||||
{
|
||||
// Parse the time
|
||||
const parsedTime = this._parseTime(event.target.value);
|
||||
|
||||
// Go back to the previous value if the form control is not valid
|
||||
if ( this.startTimeFormControl.invalid )
|
||||
{
|
||||
// Override the time
|
||||
const time = this._range.start.clone().format(this._timeFormat);
|
||||
|
||||
// Set the time
|
||||
this.startTimeFormControl.setValue(time);
|
||||
|
||||
// Do not update the range
|
||||
return;
|
||||
}
|
||||
|
||||
// Append the new time to the start date
|
||||
const startDate = this._range.start.clone().hours(parsedTime.hours()).minutes(parsedTime.minutes());
|
||||
|
||||
// If the new start date is after the current end date,
|
||||
// use the end date's time and set the start date again
|
||||
if ( startDate.isAfter(this._range.end) )
|
||||
{
|
||||
const endDateHours = this._range.end.hours();
|
||||
const endDateMinutes = this._range.end.minutes();
|
||||
|
||||
// Set the start date
|
||||
startDate.hours(endDateHours).minutes(endDateMinutes);
|
||||
}
|
||||
|
||||
// If everything is okay, set the new date
|
||||
this.range = {
|
||||
start : startDate.toISOString(),
|
||||
end : this._range.end.clone().toISOString(),
|
||||
whichDate: 'start'
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the end time
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
updateEndTime(event): void
|
||||
{
|
||||
// Parse the time
|
||||
const parsedTime = this._parseTime(event.target.value);
|
||||
|
||||
// Go back to the previous value if the form control is not valid
|
||||
if ( this.endTimeFormControl.invalid )
|
||||
{
|
||||
// Override the time
|
||||
const time = this._range.end.clone().format(this._timeFormat);
|
||||
|
||||
// Set the time
|
||||
this.endTimeFormControl.setValue(time);
|
||||
|
||||
// Do not update the range
|
||||
return;
|
||||
}
|
||||
|
||||
// Append the new time to the end date
|
||||
const endDate = this._range.end.clone().hours(parsedTime.hours()).minutes(parsedTime.minutes());
|
||||
|
||||
// If the new end date is before the current start date,
|
||||
// use the start date's time and set the end date again
|
||||
if ( endDate.isBefore(this._range.start) )
|
||||
{
|
||||
const startDateHours = this._range.start.hours();
|
||||
const startDateMinutes = this._range.start.minutes();
|
||||
|
||||
// Set the end date
|
||||
endDate.hours(startDateHours).minutes(startDateMinutes);
|
||||
}
|
||||
|
||||
// If everything is okay, set the new date
|
||||
this.range = {
|
||||
start : this._range.start.clone().toISOString(),
|
||||
end : endDate.toISOString(),
|
||||
whichDate: 'end'
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _init(): void
|
||||
{
|
||||
// Start and end time form controls
|
||||
this.startTimeFormControl = new FormControl('', [Validators.pattern(this._timeRegExp)]);
|
||||
this.endTimeFormControl = new FormControl('', [Validators.pattern(this._timeRegExp)]);
|
||||
|
||||
// Set the default range
|
||||
this._programmaticChange = true;
|
||||
this.range = {
|
||||
start: moment().startOf('day').toISOString(),
|
||||
end : moment().add(1, 'day').endOf('day').toISOString()
|
||||
};
|
||||
|
||||
// Set the default time range
|
||||
this._programmaticChange = true;
|
||||
this.timeRange = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse the time from the inputs
|
||||
*
|
||||
* @param value
|
||||
* @private
|
||||
*/
|
||||
private _parseTime(value: string): Moment
|
||||
{
|
||||
// Parse the time using the time regexp
|
||||
const timeArr = value.split(this._timeRegExp).filter((part) => part !== '');
|
||||
|
||||
// Get the meridiem
|
||||
const meridiem = timeArr[2] || null;
|
||||
|
||||
// If meridiem exists...
|
||||
if ( meridiem )
|
||||
{
|
||||
// Create a moment using 12-hours format and return it
|
||||
return moment(value, 'hh:mmA').seconds(0);
|
||||
}
|
||||
|
||||
// If meridiem doesn't exist, create a moment using 24-hours format and return in
|
||||
return moment(value, 'HH:mm').seconds(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatMomentDateModule } from '@angular/material-moment-adapter';
|
||||
import { FuseDateRangeComponent } from '@fuse/components/date-range/date-range.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseDateRangeComponent
|
||||
],
|
||||
imports : [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
MatButtonModule,
|
||||
MatDatepickerModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatIconModule,
|
||||
MatMomentDateModule
|
||||
],
|
||||
exports : [
|
||||
FuseDateRangeComponent
|
||||
]
|
||||
})
|
||||
export class FuseDateRangeModule
|
||||
{
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from '@fuse/components/date-range/public-api';
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from '@fuse/components/date-range/date-range.component';
|
||||
export * from '@fuse/components/date-range/date-range.module';
|
||||
@@ -1,83 +0,0 @@
|
||||
<!-- DEMO CONTENT -->
|
||||
<div class="demo-content line-height-1.75">
|
||||
|
||||
<h1 class="m-0">Early Sunrise in Winter</h1>
|
||||
<h4 class="mt-0 secondary-text">Demo Content</h4>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec,
|
||||
auctor venenatis nisl. Suspendisse potenti. Nullam sagittis nulla in diam finibus, sed pharetra velit
|
||||
vestibulum. Suspendisse euismod in urna eu posuere.
|
||||
</p>
|
||||
|
||||
<blockquote class="my-24">
|
||||
<p>
|
||||
Nunc vel lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus
|
||||
et tortor id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante
|
||||
sollicitudin. Donec viverra augue dolor, a venenatis tellus consectetur sit amet.
|
||||
</p>
|
||||
<footer>
|
||||
John Doe
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur
|
||||
<b>adipiscing elit</b>. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi.
|
||||
Nam imperdiet est nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et
|
||||
gravida. In hac habitasse platea dictumst. In et placerat eros, eu tempor turpis. Curabitur ac felis finibus,
|
||||
elementum lectus vitae, venenatis est. Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel
|
||||
erat condimentum tristique vel vel mi. Nulla id euismod mi, et mollis tellus.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti
|
||||
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae sagittis odio.
|
||||
Suspendisse ullamcorper nunc non pellentesque laoreet. Curabitur eu tortor id quam pretium mattis. Proin ut quam
|
||||
velit.
|
||||
</p>
|
||||
|
||||
<img class="mt-24 w-100-p" src="assets/images/demo-content/morain-lake.jpg" style="max-width: 640px">
|
||||
|
||||
<p class="mt-8 mb-24 secondary-text">
|
||||
<em>Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor id.</em>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna,
|
||||
in gravida eros. Quisque id nibh iaculis, euismod urna sed, egestas nisi. Donec eros metus, congue a imperdiet
|
||||
feugiat, sagittis nec ipsum. Quisque dapibus mollis felis non tristique.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit
|
||||
ante urna, vitae placerat massa mollis in. Duis nec urna ac purus semper dictum ut eget justo. Aenean non
|
||||
sagittis augue. Sed venenatis rhoncus enim eget ornare. <a href="#">Donec viverra sed felis at venenatis.</a>
|
||||
Mauris aliquam fringilla nulla, sit amet congue felis dignissim at.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Orci varius</li>
|
||||
<li>Magnis dis</li>
|
||||
<li>Conubia nostra</li>
|
||||
<li>Semper urna</li>
|
||||
<li>Donec viverra</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Quisque accumsan augue tempor ante mollis, sed placerat diam porttitor. Vestibulum dignissim sem vel velit
|
||||
eleifend, non pellentesque quam convallis. Pellentesque est dolor, dignissim ac tortor tristique, hendrerit
|
||||
iaculis metus. Praesent pulvinar quam eu leo consectetur faucibus. Vestibulum purus diam, gravida sagittis
|
||||
feugiat sit amet, tincidunt in ligula. Sed semper vestibulum magna. Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec, auctor venenatis nisl. Suspendisse potenti.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Nullam sagittis nulla in diam finibus, sed pharetra velit vestibulum. Suspendisse euismod in urna eu posuere.
|
||||
Etiam blandit nunc arcu, et consectetur orci blandit a. Aliquam condimentum pharetra quam at ultricies. Nunc vel
|
||||
lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor
|
||||
id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante sollicitudin. Donec
|
||||
viverra augue dolor, a venenatis tellus consectetur sit amet.
|
||||
</p>
|
||||
</div>
|
||||
<!-- / DEMO CONTENT -->
|
||||
@@ -1,16 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-demo-content',
|
||||
templateUrl: './demo-content.component.html',
|
||||
styleUrls : ['./demo-content.component.scss']
|
||||
})
|
||||
export class FuseDemoContentComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
<div class="demo-sidebar">
|
||||
<mat-list>
|
||||
<h3 matSubheader>Sidebar Demo</h3>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 1</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 2</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 3</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 4</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 5</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 6</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 7</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 8</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 9</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 10</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 11</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 12</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 13</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 14</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 15</span>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-list-item>
|
||||
<span>Sidebar Item 16</span>
|
||||
</mat-list-item>
|
||||
|
||||
</mat-list>
|
||||
</div>
|
||||
@@ -1,16 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-demo-sidebar',
|
||||
templateUrl: './demo-sidebar.component.html',
|
||||
styleUrls : ['./demo-sidebar.component.scss']
|
||||
})
|
||||
export class FuseDemoSidebarComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { MatDividerModule, MatListModule } from '@angular/material';
|
||||
|
||||
import { FuseDemoContentComponent } from './demo-content/demo-content.component';
|
||||
import { FuseDemoSidebarComponent } from './demo-sidebar/demo-sidebar.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseDemoContentComponent,
|
||||
FuseDemoSidebarComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule,
|
||||
|
||||
MatDividerModule,
|
||||
MatListModule
|
||||
],
|
||||
exports : [
|
||||
FuseDemoContentComponent,
|
||||
FuseDemoSidebarComponent
|
||||
]
|
||||
})
|
||||
export class FuseDemoModule
|
||||
{
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="fuse-drawer-content">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
@@ -0,0 +1,131 @@
|
||||
/* Variables */
|
||||
$fuse-drawer-width: 320;
|
||||
|
||||
fuse-drawer {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: #{$fuse-drawer-width}px;
|
||||
min-width: #{$fuse-drawer-width}px;
|
||||
max-width: #{$fuse-drawer-width}px;
|
||||
z-index: 300;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35);
|
||||
@apply bg-card;
|
||||
|
||||
/* Animations */
|
||||
&.fuse-drawer-animations-enabled {
|
||||
transition-duration: 400ms;
|
||||
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transition-property: visibility, margin-left, margin-right, transform, width, max-width, min-width;
|
||||
|
||||
.fuse-drawer-content {
|
||||
transition-duration: 400ms;
|
||||
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transition-property: width, max-width, min-width;
|
||||
}
|
||||
}
|
||||
|
||||
/* Over mode */
|
||||
&.fuse-drawer-mode-over {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
/* Fixed mode */
|
||||
&.fuse-drawer-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
/* Left position */
|
||||
&.fuse-drawer-position-left {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-drawer-mode-side {
|
||||
margin-left: -#{$fuse-drawer-width}px;
|
||||
|
||||
&.fuse-drawer-opened {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Over mode */
|
||||
&.fuse-drawer-mode-over {
|
||||
left: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
|
||||
&.fuse-drawer-opened {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.fuse-drawer-content {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Right position */
|
||||
&.fuse-drawer-position-right {
|
||||
|
||||
/* Side mode */
|
||||
&.fuse-drawer-mode-side {
|
||||
margin-right: -#{$fuse-drawer-width}px;
|
||||
|
||||
&.fuse-drawer-opened {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Over mode */
|
||||
&.fuse-drawer-mode-over {
|
||||
right: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
|
||||
&.fuse-drawer-opened {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.fuse-drawer-content {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.fuse-drawer-content {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@apply bg-card;
|
||||
}
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
.fuse-drawer-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 299;
|
||||
opacity: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
|
||||
/* Fixed mode */
|
||||
&.fuse-drawer-overlay-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
/* Transparent overlay */
|
||||
&.fuse-drawer-overlay-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,412 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-drawer',
|
||||
templateUrl : './drawer.component.html',
|
||||
styleUrls : ['./drawer.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
exportAs : 'fuseDrawer'
|
||||
})
|
||||
export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
static ngAcceptInputType_fixed: BooleanInput;
|
||||
static ngAcceptInputType_opened: BooleanInput;
|
||||
static ngAcceptInputType_transparentOverlay: BooleanInput;
|
||||
|
||||
@Input() fixed: boolean = false;
|
||||
@Input() mode: FuseDrawerMode = 'side';
|
||||
@Input() name: string = this._fuseUtilsService.randomId();
|
||||
@Input() opened: boolean = false;
|
||||
@Input() position: FuseDrawerPosition = 'left';
|
||||
@Input() transparentOverlay: boolean = false;
|
||||
@Output() readonly fixedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
@Output() readonly modeChanged: EventEmitter<FuseDrawerMode> = new EventEmitter<FuseDrawerMode>();
|
||||
@Output() readonly openedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
|
||||
@Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> = new EventEmitter<FuseDrawerPosition>();
|
||||
|
||||
private _animationsEnabled: boolean = false;
|
||||
private _hovered: boolean = false;
|
||||
private _overlay: HTMLElement;
|
||||
private _player: AnimationPlayer;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _animationBuilder: AnimationBuilder,
|
||||
private _elementRef: ElementRef,
|
||||
private _renderer2: Renderer2,
|
||||
private _fuseDrawerService: FuseDrawerService,
|
||||
private _fuseUtilsService: FuseUtilsService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Host binding for component classes
|
||||
*/
|
||||
@HostBinding('class') get classList(): any
|
||||
{
|
||||
return {
|
||||
'fuse-drawer-animations-enabled' : this._animationsEnabled,
|
||||
'fuse-drawer-fixed' : this.fixed,
|
||||
'fuse-drawer-hover' : this._hovered,
|
||||
[`fuse-drawer-mode-${this.mode}`] : true,
|
||||
'fuse-drawer-opened' : this.opened,
|
||||
[`fuse-drawer-position-${this.position}`]: true
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Host binding for component inline styles
|
||||
*/
|
||||
@HostBinding('style') get styleList(): any
|
||||
{
|
||||
return {
|
||||
'visibility': this.opened ? 'visible' : 'hidden'
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On changes
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Fixed
|
||||
if ( 'fixed' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.fixed = coerceBooleanProperty(changes.fixed.currentValue);
|
||||
|
||||
// Execute the observable
|
||||
this.fixedChanged.next(this.fixed);
|
||||
}
|
||||
|
||||
// Mode
|
||||
if ( 'mode' in changes )
|
||||
{
|
||||
// Get the previous and current values
|
||||
const previousMode = changes.mode.previousValue;
|
||||
const currentMode = changes.mode.currentValue;
|
||||
|
||||
// Disable the animations
|
||||
this._disableAnimations();
|
||||
|
||||
// If the mode changes: 'over -> side'
|
||||
if ( previousMode === 'over' && currentMode === 'side' )
|
||||
{
|
||||
// Hide the overlay
|
||||
this._hideOverlay();
|
||||
}
|
||||
|
||||
// If the mode changes: 'side -> over'
|
||||
if ( previousMode === 'side' && currentMode === 'over' )
|
||||
{
|
||||
// If the drawer is opened
|
||||
if ( this.opened )
|
||||
{
|
||||
// Show the overlay
|
||||
this._showOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
// Execute the observable
|
||||
this.modeChanged.next(currentMode);
|
||||
|
||||
// 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(() => {
|
||||
this._enableAnimations();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Opened
|
||||
if ( 'opened' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
const open = coerceBooleanProperty(changes.opened.currentValue);
|
||||
|
||||
// Open/close the drawer
|
||||
this._toggleOpened(open);
|
||||
}
|
||||
|
||||
// Position
|
||||
if ( 'position' in changes )
|
||||
{
|
||||
// Execute the observable
|
||||
this.positionChanged.next(this.position);
|
||||
}
|
||||
|
||||
// Transparent overlay
|
||||
if ( 'transparentOverlay' in changes )
|
||||
{
|
||||
// Coerce the value to a boolean
|
||||
this.transparentOverlay = coerceBooleanProperty(changes.transparentOverlay.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Register the drawer
|
||||
this._fuseDrawerService.registerComponent(this.name, this);
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Deregister the drawer from the registry
|
||||
this._fuseDrawerService.deregisterComponent(this.name);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Open the drawer
|
||||
*/
|
||||
open(): void
|
||||
{
|
||||
// Return if the drawer has already opened
|
||||
if ( this.opened )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Open the drawer
|
||||
this._toggleOpened(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the drawer
|
||||
*/
|
||||
close(): void
|
||||
{
|
||||
// Return if the drawer has already closed
|
||||
if ( !this.opened )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Close the drawer
|
||||
this._toggleOpened(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggle(): void
|
||||
{
|
||||
if ( this.opened )
|
||||
{
|
||||
this.close();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Enable the animations
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _enableAnimations(): void
|
||||
{
|
||||
// Return if the animations are already enabled
|
||||
if ( this._animationsEnabled )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable the animations
|
||||
this._animationsEnabled = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable the animations
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _disableAnimations(): void
|
||||
{
|
||||
// Return if the animations are already disabled
|
||||
if ( !this._animationsEnabled )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Disable the animations
|
||||
this._animationsEnabled = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the backdrop
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _showOverlay(): void
|
||||
{
|
||||
// Create the backdrop element
|
||||
this._overlay = this._renderer2.createElement('div');
|
||||
|
||||
// Return if overlay couldn't be create for some reason
|
||||
if ( !this._overlay )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Add a class to the backdrop element
|
||||
this._overlay.classList.add('fuse-drawer-overlay');
|
||||
|
||||
// Add a class depending on the fixed option
|
||||
if ( this.fixed )
|
||||
{
|
||||
this._overlay.classList.add('fuse-drawer-overlay-fixed');
|
||||
}
|
||||
|
||||
// Add a class depending on the transparentOverlay option
|
||||
if ( this.transparentOverlay )
|
||||
{
|
||||
this._overlay.classList.add('fuse-drawer-overlay-transparent');
|
||||
}
|
||||
|
||||
// Append the backdrop to the parent of the drawer
|
||||
this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
|
||||
|
||||
// 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}))
|
||||
]).create(this._overlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Add an event listener to the overlay
|
||||
this._overlay.addEventListener('click', () => {
|
||||
this.close();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the backdrop
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _hideOverlay(): void
|
||||
{
|
||||
if ( !this._overlay )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// 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}))
|
||||
]).create(this._overlay);
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
|
||||
// If the backdrop still exists...
|
||||
if ( this._overlay )
|
||||
{
|
||||
// Remove the backdrop
|
||||
this._overlay.parentNode.removeChild(this._overlay);
|
||||
this._overlay = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On mouseenter
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
@HostListener('mouseenter')
|
||||
private _onMouseenter(): void
|
||||
{
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// Set the hovered
|
||||
this._hovered = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* On mouseleave
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
@HostListener('mouseleave')
|
||||
private _onMouseleave(): void
|
||||
{
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// Set the hovered
|
||||
this._hovered = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open/close the drawer
|
||||
*
|
||||
* @param open
|
||||
* @private
|
||||
*/
|
||||
private _toggleOpened(open: boolean): void
|
||||
{
|
||||
// Set the opened
|
||||
this.opened = open;
|
||||
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// If the mode is 'over'
|
||||
if ( this.mode === 'over' )
|
||||
{
|
||||
// If the drawer opens, show the overlay
|
||||
if ( open )
|
||||
{
|
||||
this._showOverlay();
|
||||
}
|
||||
// Otherwise, close the overlay
|
||||
else
|
||||
{
|
||||
this._hideOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
// Execute the observable
|
||||
this.openedChanged.next(open);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
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
|
||||
{
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseDrawerService
|
||||
{
|
||||
private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<string, FuseDrawerComponent>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Register drawer component
|
||||
*
|
||||
* @param name
|
||||
* @param component
|
||||
*/
|
||||
registerComponent(name: string, component: FuseDrawerComponent): void
|
||||
{
|
||||
this._componentRegistry.set(name, component);
|
||||
}
|
||||
|
||||
/**
|
||||
* Deregister drawer component
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
deregisterComponent(name: string): void
|
||||
{
|
||||
this._componentRegistry.delete(name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get drawer component from the registry
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
getComponent(name: string): FuseDrawerComponent | undefined
|
||||
{
|
||||
return this._componentRegistry.get(name);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export type FuseDrawerMode =
|
||||
| 'over'
|
||||
| 'side';
|
||||
|
||||
export type FuseDrawerPosition =
|
||||
| 'left'
|
||||
| 'right';
|
||||
@@ -0,0 +1 @@
|
||||
export * from '@fuse/components/drawer/public-api';
|
||||
@@ -0,0 +1,4 @@
|
||||
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';
|
||||
@@ -0,0 +1,9 @@
|
||||
<ng-content></ng-content>
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<ng-template let-highlightedCode="highlightedCode" let-lang="lang">
|
||||
<div class="fuse-highlight fuse-highlight-code-container">
|
||||
<pre [ngClass]="'language-' + lang"><code [ngClass]="'language-' + lang" [innerHTML]="highlightedCode"></code></pre>
|
||||
</div>
|
||||
</ng-template>
|
||||
<!-- @formatter:on -->
|
||||
@@ -1,9 +1,3 @@
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: #263238;
|
||||
cursor: text;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
textarea[fuse-highlight] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,45 +1,36 @@
|
||||
import { Component, ContentChild, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import * as Prism from 'prismjs/prism';
|
||||
import '@fuse/components/highlight/prism-languages';
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-highlight',
|
||||
template : '',
|
||||
styleUrls: ['./highlight.component.scss']
|
||||
selector : 'textarea[fuse-highlight]',
|
||||
templateUrl : './highlight.component.html',
|
||||
styleUrls : ['./highlight.component.scss'],
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'fuseHighlight'
|
||||
})
|
||||
export class FuseHighlightComponent implements OnInit, OnDestroy
|
||||
export class FuseHighlightComponent implements OnChanges, AfterViewInit
|
||||
{
|
||||
// Source
|
||||
@ContentChild('source')
|
||||
source: ElementRef;
|
||||
@Input() code: string;
|
||||
@Input() lang: string;
|
||||
@ViewChild(TemplateRef) templateRef: TemplateRef<any>;
|
||||
|
||||
// Lang
|
||||
@Input('lang')
|
||||
lang: string;
|
||||
|
||||
// Path
|
||||
@Input('path')
|
||||
path: string;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
highlightedCode: string;
|
||||
private _viewRef: EmbeddedViewRef<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {ElementRef} _elementRef
|
||||
* @param {HttpClient} _httpClient
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _domSanitizer: DomSanitizer,
|
||||
private _elementRef: ElementRef,
|
||||
private _httpClient: HttpClient
|
||||
private _renderer2: Renderer2,
|
||||
private _fuseHighlightService: FuseHighlightService,
|
||||
private _viewContainerRef: ViewContainerRef
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@@ -47,103 +38,95 @@ export class FuseHighlightComponent implements OnInit, OnDestroy
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
* On changes
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnInit(): void
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// If there is no language defined, return...
|
||||
// Code & Lang
|
||||
if ( 'code' in changes || 'lang' in changes )
|
||||
{
|
||||
// Return if the viewContainerRef is not available
|
||||
if ( !this._viewContainerRef.length )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Highlight and insert the code
|
||||
this._highlightAndInsert();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* After view init
|
||||
*/
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
// Return if there is no language set
|
||||
if ( !this.lang )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// If the path is defined...
|
||||
if ( this.path )
|
||||
// If there is no code input, get the code from
|
||||
// the textarea
|
||||
if ( !this.code )
|
||||
{
|
||||
// Get the source
|
||||
this._httpClient.get(this.path, {responseType: 'text'})
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((response) => {
|
||||
|
||||
// Highlight it
|
||||
this.highlight(response);
|
||||
});
|
||||
// Get the code
|
||||
this.code = this._elementRef.nativeElement.value;
|
||||
}
|
||||
|
||||
// If the path is not defined and the source element exists...
|
||||
if ( !this.path && this.source )
|
||||
{
|
||||
// Highlight it
|
||||
this.highlight(this.source.nativeElement.value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
// Highlight and insert
|
||||
this._highlightAndInsert();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Highlight the given source code
|
||||
* Highlight and insert the highlighted code
|
||||
*
|
||||
* @param sourceCode
|
||||
* @private
|
||||
*/
|
||||
highlight(sourceCode): void
|
||||
private _highlightAndInsert(): void
|
||||
{
|
||||
// Split the source into lines
|
||||
const sourceLines = sourceCode.split('\n');
|
||||
|
||||
// Remove the first and the last line of the source
|
||||
// code if they are blank lines. This way, the html
|
||||
// can be formatted properly while using fuse-highlight
|
||||
// component
|
||||
if ( !sourceLines[0].trim() )
|
||||
// Return if the template reference is not available
|
||||
if ( !this.templateRef )
|
||||
{
|
||||
sourceLines.shift();
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !sourceLines[sourceLines.length - 1].trim() )
|
||||
// Return if the code or language is not defined
|
||||
if ( !this.code || !this.lang )
|
||||
{
|
||||
sourceLines.pop();
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the first non-whitespace char index in
|
||||
// the first line of the source code
|
||||
const indexOfFirstChar = sourceLines[0].search(/\S|$/);
|
||||
// Destroy the component if there is already one
|
||||
if ( this._viewRef )
|
||||
{
|
||||
this._viewRef.destroy();
|
||||
this._viewRef = null;
|
||||
}
|
||||
|
||||
// Generate the trimmed source
|
||||
let source = '';
|
||||
// Highlight and sanitize the code just in case
|
||||
this.highlightedCode = this._domSanitizer.sanitize(SecurityContext.HTML, this._fuseHighlightService.highlight(this.code, this.lang));
|
||||
|
||||
// Iterate through all the lines
|
||||
sourceLines.forEach((line, index) => {
|
||||
// Return if the highlighted code is null
|
||||
if ( this.highlightedCode === null )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Trim the beginning white space depending on the index
|
||||
// and concat the source code
|
||||
source = source + line.substr(indexOfFirstChar, line.length);
|
||||
|
||||
// If it's not the last line...
|
||||
if ( index !== sourceLines.length - 1 )
|
||||
{
|
||||
// Add a line break at the end
|
||||
source = source + '\n';
|
||||
}
|
||||
// Render and insert the template
|
||||
this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
|
||||
highlightedCode: this.highlightedCode,
|
||||
lang : this.lang
|
||||
});
|
||||
|
||||
// Generate the highlighted code
|
||||
const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
|
||||
|
||||
// Replace the innerHTML of the component with the highlighted code
|
||||
this._elementRef.nativeElement.innerHTML =
|
||||
'<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
|
||||
// Detect the changes
|
||||
this._viewRef.detectChanges();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseHighlightComponent
|
||||
],
|
||||
exports: [
|
||||
FuseHighlightComponent
|
||||
imports : [
|
||||
CommonModule
|
||||
],
|
||||
exports : [
|
||||
FuseHighlightComponent
|
||||
]
|
||||
})
|
||||
export class FuseHighlightModule
|
||||
{
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import * as hljs from 'highlight.js';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseHighlightService
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Highlight
|
||||
*/
|
||||
highlight(code: string, language: string): string
|
||||
{
|
||||
// Format the code
|
||||
code = this._format(code);
|
||||
|
||||
// Highlight and return the code
|
||||
return hljs.highlight(code, {language}).value;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Remove the empty lines around the code block
|
||||
* and re-align the indentation based on the first
|
||||
* non-whitespace indented character
|
||||
*
|
||||
* @param code
|
||||
* @private
|
||||
*/
|
||||
private _format(code: string): string
|
||||
{
|
||||
let indentation = 0;
|
||||
|
||||
// Split the code into lines and store the lines
|
||||
const lines = code.split('\n');
|
||||
|
||||
// Trim the empty lines around the code block
|
||||
while ( lines.length && lines[0].trim() === '' )
|
||||
{
|
||||
lines.shift();
|
||||
}
|
||||
|
||||
while ( lines.length && lines[lines.length - 1].trim() === '' )
|
||||
{
|
||||
lines.pop();
|
||||
}
|
||||
|
||||
// Iterate through the lines
|
||||
lines.filter((line) => line.length)
|
||||
.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;
|
||||
}
|
||||
|
||||
// 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
|
||||
return lines.map((line) => line.substring(indentation)).join('\n');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from '@fuse/components/highlight/public-api';
|
||||
@@ -1,18 +0,0 @@
|
||||
import 'prismjs/prism';
|
||||
import 'prismjs/components/prism-bash';
|
||||
import 'prismjs/components/prism-c';
|
||||
import 'prismjs/components/prism-cpp';
|
||||
import 'prismjs/components/prism-csharp';
|
||||
import 'prismjs/components/prism-css';
|
||||
import 'prismjs/components/prism-diff';
|
||||
import 'prismjs/components/prism-markup';
|
||||
import 'prismjs/components/prism-markup-templating';
|
||||
import 'prismjs/components/prism-java';
|
||||
import 'prismjs/components/prism-javascript';
|
||||
import 'prismjs/components/prism-json';
|
||||
import 'prismjs/components/prism-perl';
|
||||
import 'prismjs/components/prism-php';
|
||||
import 'prismjs/components/prism-python';
|
||||
import 'prismjs/components/prism-sass';
|
||||
import 'prismjs/components/prism-scss';
|
||||
import 'prismjs/components/prism-typescript';
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from '@fuse/components/highlight/highlight.component';
|
||||
export * from '@fuse/components/highlight/highlight.module';
|
||||
export * from '@fuse/components/highlight/highlight.service';
|
||||
@@ -1,12 +0,0 @@
|
||||
export * from './confirm-dialog/confirm-dialog.module';
|
||||
export * from './countdown/countdown.module';
|
||||
export * from './demo/demo.module';
|
||||
export * from './highlight/highlight.module';
|
||||
export * from './material-color-picker/material-color-picker.module';
|
||||
export * from './navigation/navigation.module';
|
||||
export * from './progress-bar/progress-bar.module';
|
||||
export * from './search-bar/search-bar.module';
|
||||
export * from './shortcuts/shortcuts.module';
|
||||
export * from './sidebar/sidebar.module';
|
||||
export * from './theme-options/theme-options.module';
|
||||
export * from './widget/widget.module';
|
||||
@@ -1,65 +0,0 @@
|
||||
<button mat-icon-button
|
||||
class="mat-elevation-z1"
|
||||
[matMenuTriggerFor]="colorMenu"
|
||||
(menuOpened)="onMenuOpen()"
|
||||
[ngClass]="selectedPalette + '-' + selectedHue">
|
||||
<mat-icon>palette</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu mat-elevation-z8">
|
||||
|
||||
<header [ngClass]="selectedColor?.class || 'accent'" class="mat-elevation-z4"
|
||||
fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
||||
<button mat-icon-button
|
||||
class="secondary-text"
|
||||
[style.visibility]="view === 'hues' ? 'visible' : 'hidden'"
|
||||
(click)="goToPalettesView($event)" aria-label="Palette">
|
||||
<mat-icon class="s-20">arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
<span *ngIf="selectedColor?.palette">
|
||||
{{selectedColor.palette}} {{selectedColor.hue}}
|
||||
</span>
|
||||
|
||||
<span *ngIf="!selectedColor?.palette">
|
||||
Select a Color
|
||||
</span>
|
||||
|
||||
<button mat-icon-button
|
||||
class="remove-color-button secondary-text"
|
||||
(click)="removeColor($event)"
|
||||
aria-label="Remove color"
|
||||
matTooltip="Remove color">
|
||||
<mat-icon class="s-20">delete</mat-icon>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div [ngSwitch]="view" class="views">
|
||||
|
||||
<div class="view" *ngSwitchCase="'palettes'">
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
|
||||
<div class="color" fxLayout="row" fxLayoutAlign="center center"
|
||||
*ngFor="let color of (colors | keys)"
|
||||
[ngClass]="color.key"
|
||||
[class.selected]="selectedPalette === color.key"
|
||||
(click)="selectPalette($event, color.key)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view" *ngSwitchCase="'hues'">
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
|
||||
<div class="color" fxLayout="row" fxLayoutAlign="center center"
|
||||
*ngFor="let hue of hues"
|
||||
[fxHide]="selectedPalette === 'fuse-white' && hue !== '500' || selectedPalette === 'fuse-black' && hue !== '500'"
|
||||
[ngClass]="selectedPalette + '-' + hue"
|
||||
[class.selected]="selectedHue === hue"
|
||||
(click)="selectHue($event, hue)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</mat-menu>
|
||||
@@ -1,39 +0,0 @@
|
||||
.fuse-material-color-picker-menu {
|
||||
width: 245px;
|
||||
|
||||
.mat-menu-content {
|
||||
padding: 0;
|
||||
|
||||
.views {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 165px;
|
||||
|
||||
.view {
|
||||
overflow: hidden;
|
||||
|
||||
.colors {
|
||||
padding: 1px 0 0 0;
|
||||
margin-left: -1px;
|
||||
|
||||
.color {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 0 1px 1px;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
transition: border-radius .4s cubic-bezier(.25, .8, .25, 1);
|
||||
|
||||
&:hover {
|
||||
border-radius: 20%;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,261 +0,0 @@
|
||||
import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { MatColors } from '@fuse/mat-colors';
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
|
||||
export const FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR: any = {
|
||||
provide : NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => FuseMaterialColorPickerComponent),
|
||||
multi : true
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-material-color-picker',
|
||||
templateUrl : './material-color-picker.component.html',
|
||||
styleUrls : ['./material-color-picker.component.scss'],
|
||||
animations : fuseAnimations,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
providers : [FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR]
|
||||
})
|
||||
export class FuseMaterialColorPickerComponent implements ControlValueAccessor
|
||||
{
|
||||
colors: any;
|
||||
hues: string[];
|
||||
view: string;
|
||||
selectedColor: any;
|
||||
selectedPalette: string;
|
||||
selectedHue: string;
|
||||
|
||||
// Color changed
|
||||
@Output()
|
||||
colorChanged: EventEmitter<any>;
|
||||
|
||||
// Private
|
||||
private _color: string;
|
||||
private _modelChange: (value: any) => void;
|
||||
private _modelTouched: (value: any) => void;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
// Set the defaults
|
||||
this.colorChanged = new EventEmitter();
|
||||
this.colors = MatColors.all;
|
||||
this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
|
||||
this.selectedHue = '500';
|
||||
this.view = 'palettes';
|
||||
|
||||
// Set the private defaults
|
||||
this._color = '';
|
||||
this._modelChange = () => {
|
||||
};
|
||||
this._modelTouched = () => {
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Selected class
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
@Input()
|
||||
set color(value)
|
||||
{
|
||||
if ( !value || value === '' || this._color === value )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Split the color value (red-400, blue-500, fuse-navy-700 etc.)
|
||||
const colorParts = value.split('-');
|
||||
|
||||
// Take the very last part as the selected hue value
|
||||
this.selectedHue = colorParts[colorParts.length - 1];
|
||||
|
||||
// Remove the last part
|
||||
colorParts.pop();
|
||||
|
||||
// Rejoin the remaining parts as the selected palette name
|
||||
this.selectedPalette = colorParts.join('-');
|
||||
|
||||
// Store the color value
|
||||
this._color = value;
|
||||
}
|
||||
|
||||
get color(): string
|
||||
{
|
||||
return this._color;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Control Value Accessor implementation
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Register on change function
|
||||
*
|
||||
* @param fn
|
||||
*/
|
||||
registerOnChange(fn: any): void
|
||||
{
|
||||
this._modelChange = fn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register on touched function
|
||||
*
|
||||
* @param fn
|
||||
*/
|
||||
registerOnTouched(fn: any): void
|
||||
{
|
||||
this._modelTouched = fn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Write value to the view from model
|
||||
*
|
||||
* @param color
|
||||
*/
|
||||
writeValue(color: any): void
|
||||
{
|
||||
// Return if null
|
||||
if ( !color )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the color
|
||||
this.color = color;
|
||||
|
||||
// Update the selected color
|
||||
this.updateSelectedColor();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Select palette
|
||||
*
|
||||
* @param event
|
||||
* @param palette
|
||||
*/
|
||||
selectPalette(event, palette): void
|
||||
{
|
||||
// Stop propagation
|
||||
event.stopPropagation();
|
||||
|
||||
// Go to 'hues' view
|
||||
this.view = 'hues';
|
||||
|
||||
// Update the selected palette
|
||||
this.selectedPalette = palette;
|
||||
|
||||
// Update the selected color
|
||||
this.updateSelectedColor();
|
||||
}
|
||||
|
||||
/**
|
||||
* Select hue
|
||||
*
|
||||
* @param event
|
||||
* @param hue
|
||||
*/
|
||||
selectHue(event, hue): void
|
||||
{
|
||||
// Stop propagation
|
||||
event.stopPropagation();
|
||||
|
||||
// Update the selected huse
|
||||
this.selectedHue = hue;
|
||||
|
||||
// Update the selected color
|
||||
this.updateSelectedColor();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove color
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
removeColor(event): void
|
||||
{
|
||||
// Stop propagation
|
||||
event.stopPropagation();
|
||||
|
||||
// Return to the 'palettes' view
|
||||
this.view = 'palettes';
|
||||
|
||||
// Clear the selected palette and hue
|
||||
this.selectedPalette = '';
|
||||
this.selectedHue = '';
|
||||
|
||||
// Update the selected color
|
||||
this.updateSelectedColor();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update selected color
|
||||
*/
|
||||
updateSelectedColor(): void
|
||||
{
|
||||
if ( this.selectedColor && this.selectedColor.palette === this.selectedPalette && this.selectedColor.hue === this.selectedHue )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the selected color object
|
||||
this.selectedColor = {
|
||||
palette: this.selectedPalette,
|
||||
hue : this.selectedHue,
|
||||
class : this.selectedPalette + '-' + this.selectedHue,
|
||||
bg : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette)[this.selectedHue],
|
||||
fg : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]
|
||||
};
|
||||
|
||||
// Emit the color changed event
|
||||
this.colorChanged.emit(this.selectedColor);
|
||||
|
||||
// Mark the model as touched
|
||||
this._modelTouched(this.selectedColor.class);
|
||||
|
||||
// Update the model
|
||||
this._modelChange(this.selectedColor.class);
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to palettes view
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
goToPalettesView(event): void
|
||||
{
|
||||
// Stop propagation
|
||||
event.stopPropagation();
|
||||
|
||||
this.view = 'palettes';
|
||||
}
|
||||
|
||||
/**
|
||||
* On menu open
|
||||
*/
|
||||
onMenuOpen(): void
|
||||
{
|
||||
if ( this.selectedPalette === '' )
|
||||
{
|
||||
this.view = 'palettes';
|
||||
}
|
||||
else
|
||||
{
|
||||
this.view = 'hues';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import { MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule } from '@angular/material';
|
||||
|
||||
import { FusePipesModule } from '@fuse/pipes/pipes.module';
|
||||
|
||||
import { FuseMaterialColorPickerComponent } from '@fuse/components/material-color-picker/material-color-picker.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseMaterialColorPickerComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
FlexLayoutModule,
|
||||
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
MatTooltipModule,
|
||||
|
||||
FusePipesModule
|
||||
],
|
||||
exports: [
|
||||
FuseMaterialColorPickerComponent
|
||||
],
|
||||
})
|
||||
export class FuseMaterialColorPickerModule
|
||||
{
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
@mixin fuse-material-color-picker-theme($theme) {
|
||||
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.fuse-material-color-picker-menu {
|
||||
|
||||
.mat-menu-content {
|
||||
|
||||
.views {
|
||||
background: #303030;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
<ng-container *ngIf="!item.hidden">
|
||||
|
||||
<!-- normal collapse -->
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.url -->
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
|
||||
[target]="item.openInNewTab ? '_blank' : '_self'">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.externalUrl -->
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
|
||||
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.function -->
|
||||
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
|
||||
(click)="item.function()">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</span>
|
||||
|
||||
<!-- item.url && item.function -->
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
|
||||
(click)="item.function()"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.externalUrl && item.function -->
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
|
||||
(click)="item.function()"
|
||||
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<ng-template #itemContent>
|
||||
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
|
||||
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
|
||||
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
|
||||
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
|
||||
{{item.badge.title}}
|
||||
</span>
|
||||
<mat-icon class="collapsable-arrow">keyboard_arrow_right</mat-icon>
|
||||
</ng-template>
|
||||
|
||||
<div class="children" [ngClass]="{'open': isOpen}">
|
||||
|
||||
<div class="{{fuseConfig.layout.navbar.primaryBackground}}">
|
||||
|
||||
<ng-container *ngFor="let item of item.children">
|
||||
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
|
||||
<fuse-nav-horizontal-collapsable *ngIf="item.type=='collapsable'"
|
||||
[item]="item"></fuse-nav-horizontal-collapsable>
|
||||
<fuse-nav-horizontal-collapsable *ngIf="item.type=='group'"
|
||||
[item]="item"></fuse-nav-horizontal-collapsable>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseConfigService } from '@fuse/services/config.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-horizontal-collapsable',
|
||||
templateUrl: './collapsable.component.html',
|
||||
styleUrls : ['./collapsable.component.scss'],
|
||||
animations : fuseAnimations
|
||||
})
|
||||
export class FuseNavHorizontalCollapsableComponent implements OnInit, OnDestroy
|
||||
{
|
||||
fuseConfig: any;
|
||||
isOpen = false;
|
||||
|
||||
@HostBinding('class')
|
||||
classes = 'nav-collapsable nav-item';
|
||||
|
||||
@Input()
|
||||
item: any;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
constructor(
|
||||
private _fuseConfigService: FuseConfigService
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to config changes
|
||||
this._fuseConfigService.config
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(
|
||||
(config) => {
|
||||
this.fuseConfig = config;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Open
|
||||
*/
|
||||
@HostListener('mouseenter')
|
||||
open(): void
|
||||
{
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Close
|
||||
*/
|
||||
@HostListener('mouseleave')
|
||||
close(): void
|
||||
{
|
||||
this.isOpen = false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
<!-- Item wrapper -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-wrapper"
|
||||
[class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<!-- Item with an internal link -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && !item.externalLink && !item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Item with an external link -->
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && item.externalLink && !item.function && !item.disabled"
|
||||
[href]="item.link">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- Item with a function -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="!item.link && item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Item with an internal link and function -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && !item.externalLink && item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Item with an external link and function -->
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && item.externalLink && item.function && !item.disabled"
|
||||
[href]="item.link"
|
||||
(click)="item.function(item)"
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- Item with a no link and no function -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="!item.link && !item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Item is disabled -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"
|
||||
*ngIf="item.disabled">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Item template -->
|
||||
<ng-template #itemTemplate>
|
||||
|
||||
<!-- Icon -->
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-horizontal-navigation-item-title-wrapper">
|
||||
<div class="fuse-horizontal-navigation-item-title">
|
||||
<span [ngClass]="item.classes?.title">
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-subtitle text-hint"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
@@ -0,0 +1,63 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-horizontal-navigation-basic-item',
|
||||
templateUrl : './basic.component.html',
|
||||
styles : [],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
|
||||
private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the parent navigation component
|
||||
this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
|
||||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
<div
|
||||
*ngIf="!child"
|
||||
[ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
|
||||
'fuse-horizontal-navigation-menu-active-forced': item.active}"
|
||||
[matMenuTriggerFor]="matMenu"
|
||||
(onMenuOpen)="triggerChangeDetection()"
|
||||
(onMenuClose)="triggerChangeDetection()"
|
||||
#trigger="matMenuTrigger">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
</div>
|
||||
|
||||
<mat-menu
|
||||
class="fuse-horizontal-navigation-menu-panel"
|
||||
[overlapTrigger]="false"
|
||||
#matMenu="matMenu">
|
||||
|
||||
<ng-container *ngFor="let item of item.children">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'basic'"
|
||||
[disabled]="item.disabled"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
</div>
|
||||
|
||||
<!-- Branch: aside, collapsable, group -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"
|
||||
[disabled]="item.disabled"
|
||||
[matMenuTriggerFor]="branch.matMenu"
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
[child]="true"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
#branch></fuse-horizontal-navigation-branch-item>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'divider'"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-divider-item>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</mat-menu>
|
||||
|
||||
<!-- Item template -->
|
||||
<ng-template
|
||||
let-item
|
||||
#itemTemplate>
|
||||
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-wrapper"
|
||||
[class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
|
||||
'fuse-horizontal-navigation-item-active-forced': item.active}">
|
||||
|
||||
<!-- Icon -->
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-horizontal-navigation-item-title-wrapper">
|
||||
<div class="fuse-horizontal-navigation-item-title">
|
||||
<span [ngClass]="item.classes?.title">
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-subtitle text-hint"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
@@ -0,0 +1,82 @@
|
||||
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 } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-horizontal-navigation-branch-item',
|
||||
templateUrl : './branch.component.html',
|
||||
styles : [],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
static ngAcceptInputType_child: BooleanInput;
|
||||
|
||||
@Input() child: boolean = false;
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
@ViewChild('matMenu', {static: true}) matMenu: MatMenu;
|
||||
|
||||
private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the parent navigation component
|
||||
this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
|
||||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Trigger the change detection
|
||||
*/
|
||||
triggerChangeDetection(): void
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<!-- Divider -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-wrapper divider"
|
||||
[ngClass]="item.classes?.wrapper"></div>
|
||||
@@ -0,0 +1,63 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-horizontal-navigation-divider-item',
|
||||
templateUrl : './divider.component.html',
|
||||
styles : [],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
|
||||
private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the parent navigation component
|
||||
this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
|
||||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<!-- Spacer -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-wrapper"
|
||||
[ngClass]="item.classes?.wrapper"></div>
|
||||
@@ -0,0 +1,63 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject } 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';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-horizontal-navigation-spacer-item',
|
||||
templateUrl : './spacer.component.html',
|
||||
styles : [],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@Input() item: FuseNavigationItem;
|
||||
@Input() name: string;
|
||||
|
||||
private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the parent navigation component
|
||||
this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
|
||||
|
||||
// Subscribe to onRefreshed on the navigation component
|
||||
this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
|
||||
takeUntil(this._unsubscribeAll)
|
||||
).subscribe(() => {
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<div class="fuse-horizontal-navigation-wrapper">
|
||||
|
||||
<ng-container *ngFor="let item of navigation">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
|
||||
<!-- Branch: aside, collapsable, group -->
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-branch-item>
|
||||
|
||||
<!-- Spacer -->
|
||||
<fuse-horizontal-navigation-spacer-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-spacer-item>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,180 @@
|
||||
/* Root navigation specific */
|
||||
fuse-horizontal-navigation {
|
||||
|
||||
.fuse-horizontal-navigation-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
/* Basic, Branch */
|
||||
fuse-horizontal-navigation-basic-item,
|
||||
fuse-horizontal-navigation-branch-item {
|
||||
|
||||
@screen sm {
|
||||
|
||||
&:hover {
|
||||
|
||||
.fuse-horizontal-navigation-item-wrapper {
|
||||
@apply bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-horizontal-navigation-item-wrapper {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.fuse-horizontal-navigation-item {
|
||||
padding: 0 16px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
.fuse-horizontal-navigation-item-icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Basic - When item active (current link) */
|
||||
fuse-horizontal-navigation-basic-item {
|
||||
|
||||
.fuse-horizontal-navigation-item-active,
|
||||
.fuse-horizontal-navigation-item-active-forced {
|
||||
|
||||
.fuse-horizontal-navigation-item-title {
|
||||
@apply text-primary #{'!important'};
|
||||
}
|
||||
|
||||
.fuse-horizontal-navigation-item-subtitle {
|
||||
@apply text-primary-400 #{'!important'};
|
||||
|
||||
.dark & {
|
||||
@apply text-primary-600 #{'!important'};
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-horizontal-navigation-item-icon {
|
||||
@apply text-primary #{'!important'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Branch - When menu open */
|
||||
fuse-horizontal-navigation-branch-item {
|
||||
|
||||
.fuse-horizontal-navigation-menu-active,
|
||||
.fuse-horizontal-navigation-menu-active-forced {
|
||||
|
||||
.fuse-horizontal-navigation-item-wrapper {
|
||||
@apply bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Spacer */
|
||||
fuse-horizontal-navigation-spacer-item {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu panel specific */
|
||||
.fuse-horizontal-navigation-menu-panel {
|
||||
|
||||
.fuse-horizontal-navigation-menu-item {
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
line-height: normal;
|
||||
white-space: normal;
|
||||
|
||||
/* Basic, Branch */
|
||||
fuse-horizontal-navigation-basic-item,
|
||||
fuse-horizontal-navigation-branch-item,
|
||||
fuse-horizontal-navigation-divider-item {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
fuse-horizontal-navigation-divider-item {
|
||||
margin: 8px -16px;
|
||||
|
||||
.fuse-horizontal-navigation-item-wrapper {
|
||||
height: 1px;
|
||||
box-shadow: 0 1px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Navigation menu item common */
|
||||
.fuse-horizontal-navigation-menu-item {
|
||||
|
||||
/* Basic - When item active (current link) */
|
||||
fuse-horizontal-navigation-basic-item {
|
||||
|
||||
.fuse-horizontal-navigation-item-active,
|
||||
.fuse-horizontal-navigation-item-active-forced {
|
||||
|
||||
.fuse-horizontal-navigation-item-title {
|
||||
@apply text-primary #{'!important'};
|
||||
}
|
||||
|
||||
.fuse-horizontal-navigation-item-subtitle {
|
||||
@apply text-primary-400 #{'!important'};
|
||||
|
||||
.dark & {
|
||||
@apply text-primary-600 #{'!important'};
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-horizontal-navigation-item-icon {
|
||||
@apply text-primary #{'!important'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-horizontal-navigation-item-wrapper {
|
||||
width: 100%;
|
||||
|
||||
&.fuse-horizontal-navigation-item-has-subtitle {
|
||||
|
||||
.fuse-horizontal-navigation-item {
|
||||
min-height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-horizontal-navigation-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
min-height: 48px;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
|
||||
.fuse-horizontal-navigation-item-title-wrapper {
|
||||
|
||||
.fuse-horizontal-navigation-item-subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.fuse-horizontal-navigation-item-badge {
|
||||
margin-left: auto;
|
||||
|
||||
.fuse-horizontal-navigation-item-badge-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
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 { FuseUtilsService } from '@fuse/services/utils/utils.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-horizontal-navigation',
|
||||
templateUrl : './horizontal.component.html',
|
||||
styleUrls : ['./horizontal.component.scss'],
|
||||
animations : FuseAnimations,
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'fuseHorizontalNavigation'
|
||||
})
|
||||
export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
@Input() name: string = this._fuseUtilsService.randomId();
|
||||
@Input() navigation: FuseNavigationItem[];
|
||||
|
||||
onRefreshed: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseUtilsService: FuseUtilsService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On changes
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Navigation
|
||||
if ( 'navigation' in changes )
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Make sure the name input is not an empty string
|
||||
if ( this.name === '' )
|
||||
{
|
||||
this.name = this._fuseUtilsService.randomId();
|
||||
}
|
||||
|
||||
// Register the navigation component
|
||||
this._fuseNavigationService.registerComponent(this.name, this);
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Deregister the navigation component from the registry
|
||||
this._fuseNavigationService.deregisterComponent(this.name);
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Refresh the component to apply the changes
|
||||
*/
|
||||
refresh(): void
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
// Execute the observable
|
||||
this.onRefreshed.next(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
<ng-container *ngIf="!item.hidden">
|
||||
|
||||
<!-- item.url -->
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
|
||||
[target]="item.openInNewTab ? '_blank' : '_self'">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.externalUrl -->
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
|
||||
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.function -->
|
||||
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
|
||||
(click)="item.function()">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</span>
|
||||
|
||||
<!-- item.url && item.function -->
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
|
||||
(click)="item.function()"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
|
||||
[target]="item.openInNewTab ? '_blank' : '_self'">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.externalUrl && item.function -->
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
|
||||
(click)="item.function()"
|
||||
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<ng-template #itemContent>
|
||||
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
|
||||
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
|
||||
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
|
||||
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
|
||||
{{item.badge.title}}
|
||||
</span>
|
||||
</ng-template>
|
||||
|
||||
</ng-container>
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user