mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-24 17:27:08 +00:00
Compare commits
90 Commits
v6.1.1-ske
...
v6.2.3-ske
| Author | SHA1 | Date | |
|---|---|---|---|
|
d25ce3601a | ||
|
|
ffbd000fe2 | ||
|
|
b6ebd2b839 | ||
|
|
4d4d52ba05 | ||
|
|
251732f221 | ||
|
|
4642b730cb | ||
|
|
0982d5369b | ||
|
|
1c34a65034 | ||
|
|
b8803a055f | ||
|
|
6b8cd41d5e | ||
|
|
fe7fdf0a00 | ||
|
|
2c7ef4de00 | ||
|
|
adc93d5d40 | ||
|
|
77f6062a55 | ||
|
|
fdb572fadd | ||
|
|
cef9e8a9c0 | ||
|
|
2f0d1e406f | ||
|
|
528c3f95e7 | ||
|
|
f395046945 | ||
|
|
b099022f5a | ||
|
|
25a6ca2684 | ||
|
|
0cd5d613e0 | ||
|
|
f45ad11861 | ||
|
|
b7ab5ea273 | ||
|
|
d7e65460bf | ||
|
|
3cbe302b54 | ||
|
|
e1c906f08b | ||
|
|
585709cf93 | ||
|
|
ac70ecc616 | ||
|
|
d5b64f3258 | ||
|
|
59d838ef51 | ||
|
|
8b14366763 | ||
|
|
23b86a7e3d | ||
|
|
2f497f1c7b | ||
|
|
18009c9275 | ||
|
|
20d5a68bf3 | ||
|
|
59d53ba0b9 | ||
|
|
a6c91dd744 | ||
|
|
5045482ef5 | ||
|
|
c7d9a7808a | ||
|
|
e4c0340cd7 | ||
|
|
67cb05be6b | ||
|
|
634ff42f1a | ||
|
|
0149beb33c | ||
|
|
42d9748b10 | ||
|
|
8355e8a17c | ||
|
|
dbb925334a | ||
|
|
49c8e32dce | ||
|
|
595b16275b | ||
|
|
fb003bc96f | ||
|
|
d781e59928 | ||
|
|
89f71735a8 | ||
|
|
51d7c6fd6f | ||
|
|
e182f19644 | ||
|
|
d4d57480a1 | ||
|
|
a1aed2998d | ||
|
|
0d6d08aa85 | ||
|
|
7ff1d2aed0 | ||
|
|
09d1b1034e | ||
|
|
4e98ab1682 | ||
|
|
984004d07a | ||
|
|
64e0451dc6 | ||
|
|
224bbf479a | ||
|
|
1aa79c257b | ||
|
|
8e5fdb1d31 | ||
|
|
4d93b6acef | ||
|
|
2eb952e9bc | ||
|
|
ae29f1f03d | ||
|
|
f35c1add1c | ||
|
|
b418049d94 | ||
|
|
388b724e90 | ||
|
|
34d77c1d1a | ||
|
|
023bfea4df | ||
|
|
fd4da1e060 | ||
|
|
85226e6094 | ||
|
|
723c289a47 | ||
|
|
26a7cc41de | ||
|
|
23f8547be5 | ||
|
|
3deba51322 | ||
|
|
b54bbc8abe | ||
|
|
1835c060d6 | ||
|
|
f75d458abe | ||
|
|
6320e98938 | ||
|
|
94d20f8d8d | ||
|
|
ba2f50bf62 | ||
|
|
13746c2a73 | ||
|
|
faef6ec6f8 | ||
|
|
b46b253c1c | ||
|
|
3abd764715 | ||
|
|
1acfe2dfb3 |
22
angular.json
22
angular.json
@@ -48,6 +48,18 @@
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true
|
||||
},
|
||||
"ec": {
|
||||
"sourceMap": true,
|
||||
"extractCss": true
|
||||
},
|
||||
"hmr": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.hmr.ts"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -62,12 +74,10 @@
|
||||
},
|
||||
"hmr": {
|
||||
"hmr": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.hmr.ts"
|
||||
}
|
||||
]
|
||||
"browserTarget": "fuse:build:hmr"
|
||||
},
|
||||
"ec": {
|
||||
"browserTarget": "fuse:build:ec"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
484
package-lock.json
generated
484
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "fuse",
|
||||
"version": "6.1.1",
|
||||
"version": "6.2.3",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -91,9 +91,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"typescript": {
|
||||
"version": "2.9.1",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.1.tgz",
|
||||
"integrity": "sha512-h6pM2f/GDchCFlldnriOhs1QHuwbnmj6/v7499eMHqPeW4V2G0elua2eIc2nu8v2NdHV0Gm+tzX83Hr6nUFjQA==",
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
|
||||
"integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
@@ -121,17 +121,17 @@
|
||||
}
|
||||
},
|
||||
"@angular/animations": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.5.tgz",
|
||||
"integrity": "sha512-zW/qX3CvsuRDOcTNFFSf7uXktvq1jRrfKR8LdGQ/DER1GU3o8pR3z3H8gHy8lAFc3PESfETtzXinKUNzvTDfpA==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.7.tgz",
|
||||
"integrity": "sha512-yOig45sxzpEmlXy+eFgh2v2yxoE/Hh9rn7BX82uj71yobSpCYoe58AEOay1cu0FCcLi/P5qltHepDrRRxNxPMw==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/cdk": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.2.1.tgz",
|
||||
"integrity": "sha512-uwW4eIGJKqOkR+ew6YcEAh1J4SP98jdyDpsZ4IEMkV9+jXcKfcwcxGFpZvs9wJsAvAr8EgNmZ8h+iuZLwJsvmA==",
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.3.3.tgz",
|
||||
"integrity": "sha512-cfUwvnGGByZy/poA75/vsELBq68eDUYJe3qi0WvSbtFzbQlsxeqaBiaxVYqmHJkPlSF5nsUhg5KvDowED3a4sA==",
|
||||
"requires": {
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
@@ -174,25 +174,25 @@
|
||||
}
|
||||
},
|
||||
"@angular/common": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.5.tgz",
|
||||
"integrity": "sha512-xL4Aq+uGQcmHYs90WSKsS9vBC1XO042hM5lSVz+zyYtYzYHdt/Qg1CIuR3zkP+8DG+mf1QZqbg5YtQx5XykmgA==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.7.tgz",
|
||||
"integrity": "sha512-MUCCs3FLwqyp5wuvkUTHVGMTd3bNGDxD5IJNvaLgVliGe4r0IlETRXYqyRPs7gdVFPbiJ97P1DUONArj9xL9XA==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/compiler": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.5.tgz",
|
||||
"integrity": "sha512-Oe0VRCyKfHLatalRuXjCdgaY6hhiMXEL/ueknMJFC0+xA73mEchmLYXj64/1ed753cjnLOM2qbVVwqhc26tmEg==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.7.tgz",
|
||||
"integrity": "sha512-J9I2U4NiWIBXl0ZOJkBW5G7xXhphggSirTwFLD4yKCTeJXgyldZytJZRkDUx1uouZtI2/PycvaOZoRr85N67AA==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/compiler-cli": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.5.tgz",
|
||||
"integrity": "sha512-onRlVLWo1mTdyxLMRtW4iPntTUglJl9T0hacRlscKKlAUT8jaSfqIyknCF3jEXJrTnfKdypen053U7g2ajifrA==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.7.tgz",
|
||||
"integrity": "sha512-nDIo4TtE3oXgZiQ5vJEcr5fi3FuXRDJQSOeOQinpCrtEt3s4pU5WAX5DLFGPSD2C/EXRDvHZgF9OTJeu5U4ErQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": "^1.4.2",
|
||||
@@ -335,9 +335,9 @@
|
||||
}
|
||||
},
|
||||
"@angular/core": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.5.tgz",
|
||||
"integrity": "sha512-yG4Qz5wHWgFYOCtX62F8MmJ1wZwZA1ALbyQC+WAZfi7Y8Asx8TShJ+3QKUDYwO1jj530pqNbfauDTCmPzzPvaQ==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.7.tgz",
|
||||
"integrity": "sha512-aZ0NvbYsMGqg0zUu7+9vuDxnGzwe++RsBBhlwHZHz1ZZwJmU6VJhUhaI+MuKC7rHyFFr9vUxvJ7ilhGaK2+J7A==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
@@ -351,63 +351,72 @@
|
||||
}
|
||||
},
|
||||
"@angular/forms": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.5.tgz",
|
||||
"integrity": "sha512-d1SdhAQ/W1n3vtm1lp5y16EaUylcZ2wftLUj6MSne3bH/2MJ6JsxJKwX+MfPcQCo+DCfG5bF0UMCa1KAwUQthQ==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.7.tgz",
|
||||
"integrity": "sha512-bFRdWxLmTiG7z0yZaq22oBHTgVSpJwUJEbZ5ieu21JqTgIDYne+YR/xCJrPj+P2S5NDlEK84g/4y4GoNt/thhQ==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/http": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.5.tgz",
|
||||
"integrity": "sha512-N9lx1s1h4wki1ob4qne3FdyAWG3TcCAGnUAjDmZ1+c/hhxtcv0iEJ22nBrGkPIsUxIPXg0JgsD1hKhu5DGEbWg==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.7.tgz",
|
||||
"integrity": "sha512-zk/kjsfEXjEQIRpmsjuJO5wgFNxj7JGY6Bq0nianZuyCuj/mlm0zflww2NLX4O22IMnvVSun2Kx+kDY44n4hfw==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/language-service": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.5.tgz",
|
||||
"integrity": "sha512-PH06chMTcWTLfVxZqpXksIx9969N/azEghYx0U+MzlGomeaaBXr7RuZWHRVn/lD5XljrqdWAQSMc+abbn1oKgg==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.7.tgz",
|
||||
"integrity": "sha512-R96kTy9Hpy5QPHirJz+5JjnzjJZdwbGwZ6rpq79Fe15RYaYfMjFTAAhmmOgWrnTFBug0QWBWyKV7950JcJIr3Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@angular/material": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-6.2.1.tgz",
|
||||
"integrity": "sha512-SBoUXxHknkgwzp5pNDHW0jyrTM0d0Tk4lVyDbtEX8VEPtXqG5nL3BSgyjpJbTvqlmy2kOooUu3qgAmt87VH9lw==",
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-6.3.3.tgz",
|
||||
"integrity": "sha512-3qTZ8+pjc8P1D+TLr9ETGfFyMYO+BAQlFiVs3oV8rw5y0Wzkz6G1JHfKQ2oOd8/npXP6rJQldssUM4IBbSOxIQ==",
|
||||
"requires": {
|
||||
"parse5": "^5.0.0",
|
||||
"tslib": "^1.7.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"parse5": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.0.0.tgz",
|
||||
"integrity": "sha512-0ywuiUOnpWWeil5grH2rxjyTJoeQVwyBuO2si6QIU9dWtj2npjuyK1HaY1RbLnVfDhEbhyAPNUBKRK0Xj2xE0w==",
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@angular/material-moment-adapter": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.2.1.tgz",
|
||||
"integrity": "sha512-mZA/gUDI/B6lnKBx0Qov3920MdNhOvVk0oQq/wrxgt2I25AVbpKZO2d8PSCBATQzWjqUwN3GKtcQFx0bPtvNCQ==",
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.3.3.tgz",
|
||||
"integrity": "sha512-YFi1iED8gcHhCwkWGMkyJtHX/tWAsQWnRNrh1AwbWl4JW1739vPAM/OimdIijeGAZ5dVVZX4A4EscCBb74b4dA==",
|
||||
"requires": {
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.5.tgz",
|
||||
"integrity": "sha512-FSsA9C3cJa7S4SPUAhypKlTQf4uA4hiqx/h65v7frDiyRVHv22oWKX7aKmyyb9oP5FHN/TDeQiRn4m8XNqG6AQ==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.7.tgz",
|
||||
"integrity": "sha512-CASH1CDr2DD+aBrWN9qpDDFTI3H6p/oqH23h28bEV+LZl7F57r4sj8KXKgaE+mcrOFRQqXTAlPoq3hRCLmhtVA==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser-dynamic": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.5.tgz",
|
||||
"integrity": "sha512-TTSLOMVrgRXI29xmBWsnSp8187vbWnbj0YEehuyup2FmltUl+H5Vms7poWV9/6fI3RnW3Yg9Ziv3T5iKqsiADQ==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.7.tgz",
|
||||
"integrity": "sha512-8G45A9w8UJvX3vPEHqeJHt/sd0zu6w1M+rsnOCo78r35SjsLbrmDNhc4VkLZFJ+iNjgPWtNtdpeXQqtTHE46yw==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"@angular/router": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.5.tgz",
|
||||
"integrity": "sha512-M3cb5CDX+WvkM2xmFeP64zPwLJ6by6cyzl5OCfEQjoTGKOFY7N2B4kHAOw5KJN3nIEd0PersSBgf11Y9g7GPwA==",
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.7.tgz",
|
||||
"integrity": "sha512-KuQBeIgfiwV3bLafepMhYVJQIAF8cTckCudFh5Z0OqckJgGsWSgtvEdtBctPi+lzt7OQBi7Ym2rOv3X0dOvu0Q==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
@@ -537,9 +546,9 @@
|
||||
}
|
||||
},
|
||||
"@types/lodash": {
|
||||
"version": "4.14.109",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.109.tgz",
|
||||
"integrity": "sha512-hop8SdPUEzbcJm6aTsmuwjIYQo1tqLseKCM+s2bBqTU2gErwI4fE+aqUVOlscPSQbKHKgtMMPoC+h4AIGOJYvw==",
|
||||
"version": "4.14.110",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.110.tgz",
|
||||
"integrity": "sha512-iXYLa6olt4tnsCA+ZXeP6eEW3tk1SulWeYyP/yooWfAtXjozqXgtX4+XUtMuOCfYjKGz3F34++qUc3Q+TJuIIw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/node": {
|
||||
@@ -795,9 +804,9 @@
|
||||
}
|
||||
},
|
||||
"acorn": {
|
||||
"version": "5.5.3",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz",
|
||||
"integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==",
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.1.tgz",
|
||||
"integrity": "sha512-d+nbxBUGKg7Arpsvbnlq61mc12ek3EY8EQldM3GPAhWJ1UVxC6TDGbIvUMNU6obBX3i1+ptCIzV4vq0gFPEGVQ==",
|
||||
"dev": true
|
||||
},
|
||||
"acorn-dynamic-import": {
|
||||
@@ -890,9 +899,9 @@
|
||||
}
|
||||
},
|
||||
"angular-draggable-droppable": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-3.0.0.tgz",
|
||||
"integrity": "sha512-plPrP1voXfV0w13LSvKadMIl4UMsP+eVAqZM73VowB/c6YZyIRb50+MXML2UOX2Or1dFGBIJA4pWpcT623Xktw==",
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-3.0.1.tgz",
|
||||
"integrity": "sha512-+GYYq4U5rPcoNwaCdoY3sNBBKd80JT7+R8n4QINJKvtToisyGpsXmX68SkKfHsNtXyTzoxX/h/37XJgE0y8KLw==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
@@ -903,9 +912,9 @@
|
||||
"integrity": "sha512-+i2bH9T/S4gTQdJLt264H4JMKXNpik33pMatSOvPSqFQ0vImnTBVbvijfmy75OgwKPJ8OZw0R76CrLjp2EYX2A=="
|
||||
},
|
||||
"angular-resizable-element": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.0.0.tgz",
|
||||
"integrity": "sha512-5fpklah0P48S0W89k839WwB7sj7Slik39+EcfKlAgrXgXuwEwPjeXX6mduDYtFDFNkVb081SjEfPbNW/nborJA==",
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.1.0.tgz",
|
||||
"integrity": "sha512-moVRSGnCgwCKofswHlNGSQWMz9OCC2JRxz4duJ6wC3g3WBMen2NpFSnoueEIMWoo/DJZjCuF3k/kFoTC4Ett3A==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
@@ -932,13 +941,19 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"color-convert": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
|
||||
"integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz",
|
||||
"integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "^1.1.1"
|
||||
"color-name": "1.1.1"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz",
|
||||
"integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -1176,13 +1191,13 @@
|
||||
"dev": true
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "8.6.2",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.2.tgz",
|
||||
"integrity": "sha512-cv9v1mYYBcAnZq4MHseJ9AIdjQmNahnpCpPO46oTkQJS2GggsBp2azHjNpAuQ95Epvsg+AIsyjYhfI9YwFxGSA==",
|
||||
"version": "8.6.3",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.3.tgz",
|
||||
"integrity": "sha512-KkQyCHBxma7R2eoEkjja/RHUBw+Fc1nY46LdV62fzJI5D7i8mLLCtAZ/AVR3UbXhDZ8mUz4C/PF4lZrbiHa1ZQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "^3.2.8",
|
||||
"caniuse-lite": "^1.0.30000851",
|
||||
"caniuse-lite": "^1.0.30000856",
|
||||
"normalize-range": "^0.1.2",
|
||||
"num2fraction": "^1.2.2",
|
||||
"postcss": "^6.0.22",
|
||||
@@ -1553,12 +1568,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"boom": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz",
|
||||
"integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=",
|
||||
"version": "2.10.1",
|
||||
"resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
|
||||
"integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hoek": "4.x.x"
|
||||
"hoek": "2.x.x"
|
||||
}
|
||||
},
|
||||
"brace-expansion": {
|
||||
@@ -1698,9 +1713,9 @@
|
||||
}
|
||||
},
|
||||
"buffer-from": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.0.0.tgz",
|
||||
"integrity": "sha512-83apNb8KK0Se60UE1+4Ukbe3HbfELJ6UlI4ldtOGs7So4KD26orJM8hIY9lxdzP+UpItH1Yh/Y8GUvNFWFFRxA==",
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.0.tgz",
|
||||
"integrity": "sha512-c5mRlguI/Pe2dSZmpER62rSCu0ryKmWddzRYsuXc50U2/g8jMOulc31VZMa4mYx31U5xsmSOpDCgH88Vl9cDGQ==",
|
||||
"dev": true
|
||||
},
|
||||
"buffer-indexof": {
|
||||
@@ -1836,9 +1851,9 @@
|
||||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30000851",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000851.tgz",
|
||||
"integrity": "sha512-Y1ecA1cL9wg0vni8t33nBw/poX8ypm+2c3fbwAESj8cm4ufK9CBFQ1+nUK8Dp5dtFo5Fc3JzkI5DKmQbuIo6hQ==",
|
||||
"version": "1.0.30000856",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000856.tgz",
|
||||
"integrity": "sha512-x3mYcApHMQemyaHuH/RyqtKCGIYTgEA63fdi+VBvDz8xUSmRiVWTLeyKcoGQCGG6UPR9/+4qG4OKrTa6aSQRKg==",
|
||||
"dev": true
|
||||
},
|
||||
"caseless": {
|
||||
@@ -1913,29 +1928,30 @@
|
||||
}
|
||||
},
|
||||
"check-types": {
|
||||
"version": "7.3.0",
|
||||
"resolved": "https://registry.npmjs.org/check-types/-/check-types-7.3.0.tgz",
|
||||
"integrity": "sha1-Ro9XGkQ1wkJI9f0MsOjYfDw0Hn0=",
|
||||
"version": "7.4.0",
|
||||
"resolved": "https://registry.npmjs.org/check-types/-/check-types-7.4.0.tgz",
|
||||
"integrity": "sha512-YbulWHdfP99UfZ73NcUDlNJhEIDgm9Doq9GhpyXbF+7Aegi3CVV7qqMCKTTqJxlvEvnQBp9IA+dxsGN6xK/nSg==",
|
||||
"dev": true
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.3.tgz",
|
||||
"integrity": "sha512-zW8iXYZtXMx4kux/nuZVXjkLP+CyIK5Al5FHnj1OgTKGZfp4Oy6/ymtMSKFv3GD8DviEmUPmJg9eFdJ/JzudMg==",
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
|
||||
"integrity": "sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"anymatch": "^2.0.0",
|
||||
"async-each": "^1.0.0",
|
||||
"braces": "^2.3.0",
|
||||
"fsevents": "^1.1.2",
|
||||
"fsevents": "^1.2.2",
|
||||
"glob-parent": "^3.1.0",
|
||||
"inherits": "^2.0.1",
|
||||
"is-binary-path": "^1.0.0",
|
||||
"is-glob": "^4.0.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"normalize-path": "^2.1.1",
|
||||
"path-is-absolute": "^1.0.0",
|
||||
"readdirp": "^2.0.0",
|
||||
"upath": "^1.0.0"
|
||||
"upath": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"chownr": {
|
||||
@@ -2444,23 +2460,12 @@
|
||||
}
|
||||
},
|
||||
"cryptiles": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz",
|
||||
"integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=",
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
|
||||
"integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"boom": "5.x.x"
|
||||
},
|
||||
"dependencies": {
|
||||
"boom": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz",
|
||||
"integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hoek": "4.x.x"
|
||||
}
|
||||
}
|
||||
"boom": "2.x.x"
|
||||
}
|
||||
},
|
||||
"crypto-browserify": {
|
||||
@@ -2568,9 +2573,9 @@
|
||||
}
|
||||
},
|
||||
"d3": {
|
||||
"version": "5.4.0",
|
||||
"resolved": "https://registry.npmjs.org/d3/-/d3-5.4.0.tgz",
|
||||
"integrity": "sha1-CQGZqFadHeI9BKP/B/4TYJX+p04=",
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/d3/-/d3-5.5.0.tgz",
|
||||
"integrity": "sha512-HRDSYvT3n7kMvJH7Avp7iR0Xsz97bkCFka9aOg04EdyXyiAP8yQzUpLH3712y9R7ffVo1g94t1OYFHBB0yI9vQ==",
|
||||
"requires": {
|
||||
"d3-array": "1",
|
||||
"d3-axis": "1",
|
||||
@@ -2606,9 +2611,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"d3-scale": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.0.0.tgz",
|
||||
"integrity": "sha512-Sa2Ny6CoJT7x6dozxPnvUQT61epGWsgppFvnNl8eJEzfJBG0iDBBTJAtz2JKem7Mb+NevnaZiDiIDHsuWkv6vg==",
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.1.0.tgz",
|
||||
"integrity": "sha512-Bb2N3ZgzPdKVEoWGkt8lPV6R7YdpSBWI70Xf26NQHOVjs77a6gLUmBOOPt9d9nB8JiQhwXY1RHCa+eSyWCJZIQ==",
|
||||
"requires": {
|
||||
"d3-array": "^1.2.0",
|
||||
"d3-collection": "1",
|
||||
@@ -2718,9 +2723,9 @@
|
||||
}
|
||||
},
|
||||
"d3-format": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz",
|
||||
"integrity": "sha512-zH9CfF/3C8zUI47nsiKfD0+AGDEuM8LwBIP7pBVpyR4l/sKkZqITmMtxRp04rwBrlshIZ17XeFAaovN3++wzkw=="
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.3.0.tgz",
|
||||
"integrity": "sha512-ycfLEIzHVZC3rOvuBOKVyQXSiUyCDjeAPIj9n/wugrr+s5AcTQC2Bz6aKkubG7rQaQF0SGW/OV4UEJB9nfioFg=="
|
||||
},
|
||||
"d3-geo": {
|
||||
"version": "1.10.0",
|
||||
@@ -3416,9 +3421,9 @@
|
||||
}
|
||||
},
|
||||
"error-ex": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
|
||||
"integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=",
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
|
||||
"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-arrayish": "^0.2.1"
|
||||
@@ -4082,9 +4087,9 @@
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
|
||||
"integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.0.tgz",
|
||||
"integrity": "sha512-fdrt472/9qQ6Kgjvb935ig6vJCuofpBUD14f9Vb+SLlm7xIe4Qva5gey8EKtv8lp7ahE1wilg3xL1znpVGtZIA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"debug": "^3.1.0"
|
||||
@@ -4198,14 +4203,14 @@
|
||||
"dev": true
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.3.tgz",
|
||||
"integrity": "sha512-X+57O5YkDTiEQGiw8i7wYc2nQgweIekqkepI8Q3y4wVlurgBt2SuwxTeYUYMZIGpLZH3r/TsMjczCMXE5ZOt7Q==",
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz",
|
||||
"integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"nan": "^2.9.2",
|
||||
"node-pre-gyp": "^0.9.0"
|
||||
"node-pre-gyp": "^0.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"abbrev": {
|
||||
@@ -4286,7 +4291,7 @@
|
||||
}
|
||||
},
|
||||
"deep-extend": {
|
||||
"version": "0.4.2",
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
@@ -4464,7 +4469,7 @@
|
||||
}
|
||||
},
|
||||
"node-pre-gyp": {
|
||||
"version": "0.9.1",
|
||||
"version": "0.10.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
@@ -4573,12 +4578,12 @@
|
||||
"optional": true
|
||||
},
|
||||
"rc": {
|
||||
"version": "1.2.6",
|
||||
"version": "1.2.7",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"deep-extend": "~0.4.0",
|
||||
"deep-extend": "^0.5.1",
|
||||
"ini": "~1.3.0",
|
||||
"minimist": "^1.2.0",
|
||||
"strip-json-comments": "~2.0.1"
|
||||
@@ -5135,9 +5140,9 @@
|
||||
}
|
||||
},
|
||||
"hash.js": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.3.tgz",
|
||||
"integrity": "sha512-/UETyP0W22QILqS+6HowevwhEFJ3MBJnwTf75Qob9Wz9t0DPuisL8kW8YZMK62dHAKE1c1p+gY1TtOLY+USEHA==",
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.4.tgz",
|
||||
"integrity": "sha512-A6RlQvvZEtFS5fLU43IDu0QUmBy+fDO9VMdTXvufKwIkt/rFfvICAViCax5fbDO4zdNzaC3/27ZhKUok5bAJyw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"inherits": "^2.0.3",
|
||||
@@ -5145,15 +5150,15 @@
|
||||
}
|
||||
},
|
||||
"hawk": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz",
|
||||
"integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==",
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
|
||||
"integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"boom": "4.x.x",
|
||||
"cryptiles": "3.x.x",
|
||||
"hoek": "4.x.x",
|
||||
"sntp": "2.x.x"
|
||||
"boom": "2.x.x",
|
||||
"cryptiles": "2.x.x",
|
||||
"hoek": "2.x.x",
|
||||
"sntp": "1.x.x"
|
||||
}
|
||||
},
|
||||
"he": {
|
||||
@@ -5174,9 +5179,9 @@
|
||||
}
|
||||
},
|
||||
"hoek": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
|
||||
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
|
||||
"version": "2.16.3",
|
||||
"resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
|
||||
"integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
|
||||
"dev": true
|
||||
},
|
||||
"hosted-git-info": {
|
||||
@@ -5479,9 +5484,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"install": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/install/-/install-0.11.0.tgz",
|
||||
"integrity": "sha512-30UqvWKr/59SStU2/bRye4wT1S3mzjwa0oV+BxusB0neGqhxUrwLlnXDbt6QtIfBxCNWFqg+ARnGNjFj8XuV5A=="
|
||||
"version": "0.11.2",
|
||||
"resolved": "https://registry.npmjs.org/install/-/install-0.11.2.tgz",
|
||||
"integrity": "sha512-vm3WeuqkmCK/jD56s7pWLKl4QoHMdcIwLlsMAFYV3XAbrz+RdyOJvtIQn/A1LiaNz2djUdwec01/90KLSIaUGg=="
|
||||
},
|
||||
"internal-ip": {
|
||||
"version": "1.2.0",
|
||||
@@ -6135,9 +6140,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "3.11.0",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.11.0.tgz",
|
||||
"integrity": "sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==",
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz",
|
||||
"integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"argparse": "^1.0.7",
|
||||
@@ -6660,6 +6665,12 @@
|
||||
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.mergewith": {
|
||||
"version": "4.6.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
|
||||
@@ -7166,9 +7177,9 @@
|
||||
}
|
||||
},
|
||||
"ngx-color-picker": {
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.3.3.tgz",
|
||||
"integrity": "sha512-0uoxt+3BtanTTbQj9elpsZe/6a/BWAl8jdl0m6OyrCXlCiO3q4zGZjWee4905RF0NXGxQvDWT27coqmDeXGsvw=="
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.4.0.tgz",
|
||||
"integrity": "sha512-u4UeeSdZoaGmHJCSlFQGe0xhOLB63rms35IjI7HhHz9MS4VeCQa4UiFMK9Dgjg1FuGt2nEyj/4Fs6tpQfgXEXQ=="
|
||||
},
|
||||
"ngx-cookie-service": {
|
||||
"version": "1.0.10",
|
||||
@@ -7236,25 +7247,6 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"boom": {
|
||||
"version": "2.10.1",
|
||||
"resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
|
||||
"integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hoek": "2.x.x"
|
||||
}
|
||||
},
|
||||
"cryptiles": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
|
||||
"integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"boom": "2.x.x"
|
||||
}
|
||||
},
|
||||
"form-data": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
|
||||
@@ -7285,25 +7277,6 @@
|
||||
"har-schema": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"hawk": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
|
||||
"integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"boom": "2.x.x",
|
||||
"cryptiles": "2.x.x",
|
||||
"hoek": "2.x.x",
|
||||
"sntp": "1.x.x"
|
||||
}
|
||||
},
|
||||
"hoek": {
|
||||
"version": "2.16.3",
|
||||
"resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
|
||||
"integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
|
||||
"dev": true
|
||||
},
|
||||
"http-signature": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
|
||||
@@ -7367,16 +7340,6 @@
|
||||
"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"sntp": {
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
|
||||
"integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"hoek": "2.x.x"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -7467,15 +7430,6 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"boom": {
|
||||
"version": "2.10.1",
|
||||
"resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
|
||||
"integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hoek": "2.x.x"
|
||||
}
|
||||
},
|
||||
"caseless": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
|
||||
@@ -7496,16 +7450,6 @@
|
||||
"supports-color": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"cryptiles": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
|
||||
"integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"boom": "2.x.x"
|
||||
}
|
||||
},
|
||||
"form-data": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
|
||||
@@ -7531,25 +7475,6 @@
|
||||
"pinkie-promise": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"hawk": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
|
||||
"integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"boom": "2.x.x",
|
||||
"cryptiles": "2.x.x",
|
||||
"hoek": "2.x.x",
|
||||
"sntp": "1.x.x"
|
||||
}
|
||||
},
|
||||
"hoek": {
|
||||
"version": "2.16.3",
|
||||
"resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
|
||||
"integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
|
||||
"dev": true
|
||||
},
|
||||
"http-signature": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
|
||||
@@ -7598,16 +7523,6 @@
|
||||
"uuid": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"sntp": {
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
|
||||
"integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"hoek": "2.x.x"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
|
||||
@@ -11946,9 +11861,9 @@
|
||||
}
|
||||
},
|
||||
"object-keys": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.11.tgz",
|
||||
"integrity": "sha1-xUYBd4rVYPEULODgG8yotW0TQm0=",
|
||||
"version": "1.0.12",
|
||||
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
|
||||
"integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==",
|
||||
"dev": true
|
||||
},
|
||||
"object-visit": {
|
||||
@@ -12561,9 +12476,9 @@
|
||||
}
|
||||
},
|
||||
"prismjs": {
|
||||
"version": "1.14.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz",
|
||||
"integrity": "sha512-sa2s4m60bXs+kU3jcuUwx3ZCrUH7o0kuqnOOINbODqlRrDB7KY8SRx+xR/D7nHLlgfDdG7zXbRO8wJ+su5Ls0A==",
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz",
|
||||
"integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==",
|
||||
"requires": {
|
||||
"clipboard": "^2.0.0"
|
||||
}
|
||||
@@ -12620,9 +12535,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/node": {
|
||||
"version": "6.0.110",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.110.tgz",
|
||||
"integrity": "sha512-LiaH3mF+OAqR+9Wo1OTJDbZDtCewAVjTbMhF1ZgUJ3fc8xqOJq6VqbpBh9dJVCVzByGmYIg2fREbuXNX0TKiJA==",
|
||||
"version": "6.0.113",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.113.tgz",
|
||||
"integrity": "sha512-f9XXUWFqryzjkZA1EqFvJHSFyqyasV17fq8zCDIzbRV4ctL7RrJGKvG+lcex86Rjbzd1GrER9h9VmF5sSjV0BQ==",
|
||||
"dev": true
|
||||
},
|
||||
"adm-zip": {
|
||||
@@ -13041,9 +12956,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz",
|
||||
"integrity": "sha512-jVpo1GadrDAK59t/0jRx5VxYWQEDkkEKi6+HjE3joFVLfDOh9Xrdh0dF1eSq+BI/SwvTQ44gSscJ8N5zYL61sg==",
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
|
||||
"integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==",
|
||||
"dev": true
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
@@ -13160,9 +13075,9 @@
|
||||
}
|
||||
},
|
||||
"request": {
|
||||
"version": "2.85.0",
|
||||
"resolved": "https://registry.npmjs.org/request/-/request-2.85.0.tgz",
|
||||
"integrity": "sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==",
|
||||
"version": "2.87.0",
|
||||
"resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz",
|
||||
"integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"aws-sign2": "~0.7.0",
|
||||
@@ -13173,7 +13088,6 @@
|
||||
"forever-agent": "~0.6.1",
|
||||
"form-data": "~2.3.1",
|
||||
"har-validator": "~5.0.3",
|
||||
"hawk": "~6.0.2",
|
||||
"http-signature": "~1.2.0",
|
||||
"is-typedarray": "~1.0.0",
|
||||
"isstream": "~0.1.2",
|
||||
@@ -13183,7 +13097,6 @@
|
||||
"performance-now": "^2.1.0",
|
||||
"qs": "~6.5.1",
|
||||
"safe-buffer": "^5.1.1",
|
||||
"stringstream": "~0.0.5",
|
||||
"tough-cookie": "~2.3.3",
|
||||
"tunnel-agent": "^0.6.0",
|
||||
"uuid": "^3.1.0"
|
||||
@@ -13214,9 +13127,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz",
|
||||
"integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==",
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
|
||||
"integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"path-parse": "^1.0.5"
|
||||
@@ -13811,12 +13724,12 @@
|
||||
}
|
||||
},
|
||||
"sntp": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz",
|
||||
"integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==",
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
|
||||
"integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hoek": "4.x.x"
|
||||
"hoek": "2.x.x"
|
||||
}
|
||||
},
|
||||
"socket.io": {
|
||||
@@ -14022,9 +13935,9 @@
|
||||
}
|
||||
},
|
||||
"source-map-support": {
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.5.tgz",
|
||||
"integrity": "sha512-mR7/Nd5l1z6g99010shcXJiNEaf3fEtmLhRB/sBcQVJGodcHCULPp2y4Sfa43Kv2zq7T+Izmfp/WHCR6dYkQCA==",
|
||||
"version": "0.5.6",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.6.tgz",
|
||||
"integrity": "sha512-N4KXEz7jcKqPf2b2vZF11lQIz9W5ZMuUcIOGj243lduidkf2fjkVKJS9vNxVWn3u/uxX38AcE8U9nnH9FPcq+g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"buffer-from": "^1.0.0",
|
||||
@@ -14122,9 +14035,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"sshpk": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.1.tgz",
|
||||
"integrity": "sha1-Ew9Zde3a2WPx1W+SuaxsUfqfg+s=",
|
||||
"version": "1.14.2",
|
||||
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz",
|
||||
"integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"asn1": "~0.2.3",
|
||||
@@ -14134,6 +14047,7 @@
|
||||
"ecc-jsbn": "~0.1.1",
|
||||
"getpass": "^0.1.1",
|
||||
"jsbn": "~0.1.0",
|
||||
"safer-buffer": "^2.0.2",
|
||||
"tweetnacl": "~0.14.0"
|
||||
}
|
||||
},
|
||||
@@ -14252,9 +14166,9 @@
|
||||
}
|
||||
},
|
||||
"stringstream": {
|
||||
"version": "0.0.5",
|
||||
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
|
||||
"integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz",
|
||||
"integrity": "sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA==",
|
||||
"dev": true
|
||||
},
|
||||
"strip-ansi": {
|
||||
@@ -14629,9 +14543,9 @@
|
||||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
|
||||
"integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
|
||||
"integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
|
||||
},
|
||||
"tslint": {
|
||||
"version": "5.9.1",
|
||||
@@ -14667,9 +14581,9 @@
|
||||
}
|
||||
},
|
||||
"tsutils": {
|
||||
"version": "2.26.2",
|
||||
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.26.2.tgz",
|
||||
"integrity": "sha512-uzwnhmrSbyinPCiwfzGsOY3IulBTwoky7r83HmZdz9QNCjhSCzavkh47KLWuU0zF2F2WbpmmzoJUIEiYyd+jEQ==",
|
||||
"version": "2.27.1",
|
||||
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.27.1.tgz",
|
||||
"integrity": "sha512-AE/7uzp32MmaHvNNFES85hhUDHFdFZp6OAiZcd6y4ZKKIg6orJTm8keYWBhIhrJQH3a4LzNKat7ZPXZt5aTf6w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^1.8.1"
|
||||
@@ -15472,9 +15386,9 @@
|
||||
}
|
||||
},
|
||||
"webpack-merge": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.1.2.tgz",
|
||||
"integrity": "sha512-/0QYwW/H1N/CdXYA2PNPVbsxO3u2Fpz34vs72xm03SRfg6bMNGfMJIQEpQjKRvkG2JvT6oRJFpDtSrwbX8Jzvw==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.1.3.tgz",
|
||||
"integrity": "sha512-zxwAIGK7nKdu5CIZL0BjTQoq3elV0t0MfB7rUC1zj668geid52abs6hN/ACwZdK6LeMS8dC9B6WmtF978zH5mg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "^4.17.5"
|
||||
@@ -15530,9 +15444,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"which": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
|
||||
"integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
|
||||
"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"isexe": "^2.0.0"
|
||||
|
||||
42
package.json
42
package.json
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "fuse",
|
||||
"version": "6.1.1",
|
||||
"version": "6.2.3",
|
||||
"license": "https://themeforest.net/licenses/terms/regular",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve --open",
|
||||
"start-hmr": "ng serve --configuration hmr -sm=false",
|
||||
"start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
|
||||
"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",
|
||||
@@ -19,19 +19,19 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "1.0.0-beta.3",
|
||||
"@angular/animations": "6.0.5",
|
||||
"@angular/cdk": "6.2.1",
|
||||
"@angular/common": "6.0.5",
|
||||
"@angular/compiler": "6.0.5",
|
||||
"@angular/core": "6.0.5",
|
||||
"@angular/animations": "6.0.7",
|
||||
"@angular/cdk": "6.3.3",
|
||||
"@angular/common": "6.0.7",
|
||||
"@angular/compiler": "6.0.7",
|
||||
"@angular/core": "6.0.7",
|
||||
"@angular/flex-layout": "6.0.0-beta.16",
|
||||
"@angular/forms": "6.0.5",
|
||||
"@angular/http": "6.0.5",
|
||||
"@angular/material": "6.2.1",
|
||||
"@angular/material-moment-adapter": "6.2.1",
|
||||
"@angular/platform-browser": "6.0.5",
|
||||
"@angular/platform-browser-dynamic": "6.0.5",
|
||||
"@angular/router": "6.0.5",
|
||||
"@angular/forms": "6.0.7",
|
||||
"@angular/http": "6.0.7",
|
||||
"@angular/material": "6.3.3",
|
||||
"@angular/material-moment-adapter": "6.3.3",
|
||||
"@angular/platform-browser": "6.0.7",
|
||||
"@angular/platform-browser-dynamic": "6.0.7",
|
||||
"@angular/router": "6.0.7",
|
||||
"@ngrx/effects": "6.0.1",
|
||||
"@ngrx/router-store": "6.0.1",
|
||||
"@ngrx/store": "6.0.1",
|
||||
@@ -46,16 +46,16 @@
|
||||
"chart.js": "2.7.2",
|
||||
"classlist.js": "1.1.20150312",
|
||||
"core-js": "2.5.7",
|
||||
"d3": "5.4.0",
|
||||
"d3": "5.5.0",
|
||||
"hammerjs": "2.0.8",
|
||||
"lodash": "4.17.10",
|
||||
"moment": "2.22.2",
|
||||
"ng2-charts": "1.6.0",
|
||||
"ngrx-store-freeze": "0.2.4",
|
||||
"ngx-color-picker": "6.3.3",
|
||||
"ngx-color-picker": "6.4.0",
|
||||
"ngx-cookie-service": "1.0.10",
|
||||
"perfect-scrollbar": "1.4.0",
|
||||
"prismjs": "1.14.0",
|
||||
"prismjs": "1.15.0",
|
||||
"rxjs": "6.2.1",
|
||||
"rxjs-compat": "6.2.1",
|
||||
"web-animations-js": "2.3.1",
|
||||
@@ -63,13 +63,13 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "6.0.8",
|
||||
"@angular/compiler-cli": "6.0.5",
|
||||
"@angular/language-service": "6.0.5",
|
||||
"@angular/compiler-cli": "6.0.7",
|
||||
"@angular/language-service": "6.0.7",
|
||||
"@angular-devkit/build-angular": "0.6.8",
|
||||
"@angularclass/hmr": "2.1.3",
|
||||
"@types/jasmine": "2.8.8",
|
||||
"@types/jasminewd2": "2.0.3",
|
||||
"@types/lodash": "4.14.109",
|
||||
"@types/lodash": "4.14.110",
|
||||
"@types/node": "8.9.5",
|
||||
"codelyzer": "4.2.1",
|
||||
"jasmine-core": "2.99.1",
|
||||
|
||||
@@ -1,29 +1,45 @@
|
||||
<ng-container *ngIf="!item.hidden">
|
||||
|
||||
<!-- normal collapse -->
|
||||
<a class="nav-link" *ngIf="!item.url && !item.function" matRipple>
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.url -->
|
||||
<a class="nav-link" *ngIf="item.url && !item.function"
|
||||
[routerLink]="[item.url]" routerLinkActive="active"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
|
||||
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
|
||||
<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'" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.function -->
|
||||
<span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
|
||||
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
|
||||
(click)="item.function()" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</span>
|
||||
|
||||
<!-- item.url && item.function -->
|
||||
<a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
|
||||
[routerLink]="[item.url]" routerLinkActive="active"
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
|
||||
(click)="item.function()"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
|
||||
<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'" matRipple>
|
||||
<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>
|
||||
|
||||
@@ -1,20 +1,38 @@
|
||||
<ng-container *ngIf="!item.hidden">
|
||||
|
||||
<!-- item.url -->
|
||||
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
|
||||
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
|
||||
<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'" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.function -->
|
||||
<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
|
||||
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
|
||||
(click)="item.function()" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</span>
|
||||
|
||||
<!-- item.url && item.function -->
|
||||
<a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
|
||||
[routerLink]="[item.url]" routerLinkActive="active"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
|
||||
(click)="item.function()"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
|
||||
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
|
||||
<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'" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
@@ -27,4 +45,4 @@
|
||||
</span>
|
||||
</ng-template>
|
||||
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
@@ -1,5 +1,4 @@
|
||||
<div id="main-navigation" class="nav"
|
||||
[ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
|
||||
<div class="nav" [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
|
||||
|
||||
<!-- Vertical Navigation Layout -->
|
||||
<ng-container *ngIf="layout === 'vertical'">
|
||||
@@ -21,7 +20,8 @@
|
||||
<ng-container *ngFor="let item of navigation">
|
||||
|
||||
<fuse-nav-horizontal-collapsable *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapsable>
|
||||
<fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapsable>
|
||||
<fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'"
|
||||
[item]="item"></fuse-nav-horizontal-collapsable>
|
||||
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@@ -4,7 +4,7 @@ fuse-navigation {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
|
||||
#main-navigation {
|
||||
> .nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable, Subject } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
import { FuseNavigationItem } from '@fuse/types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseNavigationService
|
||||
{
|
||||
flatNavigation: any[] = [];
|
||||
|
||||
onItemCollapsed: Subject<any>;
|
||||
onItemCollapseToggled: Subject<any>;
|
||||
|
||||
@@ -138,39 +140,30 @@ export class FuseNavigationService
|
||||
* Get flattened navigation array
|
||||
*
|
||||
* @param navigation
|
||||
* @param flatNavigation
|
||||
* @returns {any[]}
|
||||
*/
|
||||
getFlatNavigation(navigation): any
|
||||
getFlatNavigation(navigation, flatNavigation: FuseNavigationItem[] = []): any
|
||||
{
|
||||
for ( const navItem of navigation )
|
||||
for ( const item of navigation )
|
||||
{
|
||||
if ( navItem.type === 'item' )
|
||||
if ( item.type === 'item' )
|
||||
{
|
||||
this.flatNavigation.push({
|
||||
id : navItem.id || null,
|
||||
title : navItem.title || null,
|
||||
translate : navItem.translate || null,
|
||||
type : navItem.type,
|
||||
icon : navItem.icon || null,
|
||||
url : navItem.url || null,
|
||||
function : navItem.function || null,
|
||||
exactMatch: navItem.exactMatch || false,
|
||||
badge : navItem.badge || null
|
||||
});
|
||||
flatNavigation.push(item);
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( navItem.type === 'collapse' || navItem.type === 'group' )
|
||||
if ( item.type === 'collapsable' || item.type === 'group' )
|
||||
{
|
||||
if ( navItem.children )
|
||||
if ( item.children )
|
||||
{
|
||||
this.getFlatNavigation(navItem.children);
|
||||
this.getFlatNavigation(item.children, flatNavigation);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return this.flatNavigation;
|
||||
return flatNavigation;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
<ng-container *ngIf="!item.hidden">
|
||||
|
||||
<!-- normal collapse -->
|
||||
<a class="nav-link" *ngIf="!item.url && !item.function" (click)="toggleOpen($event)" matRipple>
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
|
||||
(click)="toggleOpen($event)" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.url -->
|
||||
<a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function" (click)="toggleOpen($event)"
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
|
||||
(click)="toggleOpen($event)"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
|
||||
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
|
||||
@@ -14,19 +16,20 @@
|
||||
</a>
|
||||
|
||||
<!-- item.externalUrl -->
|
||||
<a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function" (click)="toggleOpen($event)"
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
|
||||
(click)="toggleOpen($event)"
|
||||
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.function -->
|
||||
<span class="nav-link" *ngIf="!item.url && item.function"
|
||||
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
|
||||
(click)="toggleOpen($event);item.function()" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</span>
|
||||
|
||||
<!-- item.url && item.function -->
|
||||
<a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function"
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
|
||||
(click)="toggleOpen($event);item.function()"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
|
||||
@@ -34,7 +37,7 @@
|
||||
</a>
|
||||
|
||||
<!-- item.externalUrl && item.function -->
|
||||
<a class="nav-link" *ngIf="item.url && item.externalUrl && item.function"
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
|
||||
(click)="toggleOpen($event);item.function()"
|
||||
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<ng-container *ngIf="!item.hidden">
|
||||
|
||||
<div class="group-title">
|
||||
<div class="group-title" [ngClass]="item.classes">
|
||||
<span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<ng-container *ngIf="!item.hidden">
|
||||
|
||||
<!-- item.url -->
|
||||
<a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function"
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
|
||||
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
|
||||
@@ -9,19 +9,20 @@
|
||||
</a>
|
||||
|
||||
<!-- item.externalUrl -->
|
||||
<a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function"
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
|
||||
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- item.function -->
|
||||
<span class="nav-link" *ngIf="!item.url && item.function"
|
||||
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
|
||||
(click)="item.function()" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</span>
|
||||
|
||||
<!-- item.url && item.function -->
|
||||
<a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function" (click)="item.function()"
|
||||
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
|
||||
(click)="item.function()"
|
||||
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
|
||||
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
|
||||
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
|
||||
@@ -29,7 +30,8 @@
|
||||
</a>
|
||||
|
||||
<!-- item.externalUrl && item.function -->
|
||||
<a class="nav-link" *ngIf="item.url && item.externalUrl && item.function" (click)="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'" matRipple>
|
||||
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
|
||||
</a>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
height: 64px;
|
||||
font-size: 13px;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
@include media-breakpoint-down('xs') {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
height: 64px !important;
|
||||
line-height: 64px !important;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
@include media-breakpoint-down('xs') {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
@@ -39,7 +39,7 @@
|
||||
height: 64px !important;
|
||||
line-height: 64px !important;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
@include media-breakpoint-down('xs') {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
fuse-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -14,6 +16,12 @@ fuse-sidebar {
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
|
||||
background: white;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
min-width: 0 !important;
|
||||
max-width: 80vw !important;
|
||||
width: 80vw !important;
|
||||
}
|
||||
|
||||
&.left-positioned {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
@@ -37,12 +45,6 @@ fuse-sidebar {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&:not(.unfolded) {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
max-width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
&.animations-enabled {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
|
||||
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
|
||||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||
import { ObservableMedia } from '@angular/flex-layout';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/internal/operators';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseSidebarService } from './sidebar.service';
|
||||
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
|
||||
@@ -40,6 +40,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
@HostBinding('class.locked-open')
|
||||
isLockedOpen: boolean;
|
||||
|
||||
// Folded width
|
||||
@Input()
|
||||
foldedWidth: number;
|
||||
|
||||
// Folded auto trigger on hover
|
||||
@Input()
|
||||
foldedAutoTriggerOnHover: boolean;
|
||||
|
||||
// Folded unfolded
|
||||
@HostBinding('class.unfolded')
|
||||
unfolded: boolean;
|
||||
@@ -48,6 +56,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
@Input()
|
||||
invisibleOverlay: boolean;
|
||||
|
||||
// Folded changed
|
||||
@Output()
|
||||
foldedChanged: EventEmitter<boolean>;
|
||||
|
||||
// Opened changed
|
||||
@Output()
|
||||
openedChanged: EventEmitter<boolean>;
|
||||
|
||||
// Private
|
||||
private _folded: boolean;
|
||||
private _fuseConfig: any;
|
||||
@@ -84,8 +100,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
)
|
||||
{
|
||||
// Set the defaults
|
||||
this.foldedAutoTriggerOnHover = true;
|
||||
this.foldedWidth = 64;
|
||||
this.foldedChanged = new EventEmitter();
|
||||
this.openedChanged = new EventEmitter();
|
||||
this.opened = false;
|
||||
// this.folded = false;
|
||||
this.position = 'left';
|
||||
this.invisibleOverlay = false;
|
||||
|
||||
@@ -99,7 +118,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Folded
|
||||
/**
|
||||
* Folded
|
||||
*
|
||||
* @param {boolean} value
|
||||
*/
|
||||
@Input()
|
||||
set folded(value: boolean)
|
||||
{
|
||||
@@ -112,23 +135,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
return;
|
||||
}
|
||||
|
||||
// Programmatically add/remove margin to the element
|
||||
// Programmatically add/remove padding to the element
|
||||
// that comes after or before based on the position
|
||||
let sibling,
|
||||
styleRule;
|
||||
|
||||
const styleValue = '64px';
|
||||
const styleValue = this.foldedWidth + 'px';
|
||||
|
||||
// Get the sibling and set the style rule
|
||||
if ( this.position === 'left' )
|
||||
{
|
||||
sibling = this._elementRef.nativeElement.nextElementSibling;
|
||||
styleRule = 'margin-left';
|
||||
styleRule = 'padding-left';
|
||||
}
|
||||
else
|
||||
{
|
||||
sibling = this._elementRef.nativeElement.previousElementSibling;
|
||||
styleRule = 'margin-right';
|
||||
styleRule = 'padding-right';
|
||||
}
|
||||
|
||||
// If there is no sibling, return...
|
||||
@@ -143,6 +166,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
// Fold the sidebar
|
||||
this.fold();
|
||||
|
||||
// Set the folded width
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
|
||||
|
||||
// Set the style and class
|
||||
this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
|
||||
this._renderer.addClass(this._elementRef.nativeElement, 'folded');
|
||||
@@ -153,10 +181,18 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
// Unfold the sidebar
|
||||
this.unfold();
|
||||
|
||||
// Remove the folded width
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
|
||||
|
||||
// Remove the style and class
|
||||
this._renderer.removeStyle(sibling, styleRule);
|
||||
this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
|
||||
}
|
||||
|
||||
// Emit the 'foldedChanged' event
|
||||
this.foldedChanged.emit(this.folded);
|
||||
}
|
||||
|
||||
get folded(): boolean
|
||||
@@ -301,6 +337,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
// Force the the opened status to true
|
||||
this.opened = true;
|
||||
|
||||
// Emit the 'openedChanged' event
|
||||
this.openedChanged.emit(this.opened);
|
||||
|
||||
// If the sidebar was folded, forcefully fold it again
|
||||
if ( this._wasFolded )
|
||||
{
|
||||
@@ -329,6 +368,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
// Force the the opened status to close
|
||||
this.opened = false;
|
||||
|
||||
// Emit the 'openedChanged' event
|
||||
this.openedChanged.emit(this.opened);
|
||||
|
||||
// Hide the sidebar
|
||||
this._hideSidebar();
|
||||
}
|
||||
@@ -357,23 +399,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
return;
|
||||
}
|
||||
|
||||
// Programmatically add/remove margin to the element
|
||||
// Programmatically add/remove padding to the element
|
||||
// that comes after or before based on the position
|
||||
let sibling,
|
||||
styleRule;
|
||||
|
||||
const styleValue = '64px';
|
||||
const styleValue = this.foldedWidth + 'px';
|
||||
|
||||
// Get the sibling and set the style rule
|
||||
if ( this.position === 'left' )
|
||||
{
|
||||
sibling = this._elementRef.nativeElement.nextElementSibling;
|
||||
styleRule = 'margin-left';
|
||||
styleRule = 'padding-left';
|
||||
}
|
||||
else
|
||||
{
|
||||
sibling = this._elementRef.nativeElement.previousElementSibling;
|
||||
styleRule = 'margin-right';
|
||||
styleRule = 'padding-right';
|
||||
}
|
||||
|
||||
// If there is no sibling, return...
|
||||
@@ -385,6 +427,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
// Fold the sidebar
|
||||
this.fold();
|
||||
|
||||
// Set the folded width
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
|
||||
|
||||
// Set the style and class
|
||||
this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
|
||||
this._renderer.addClass(this._elementRef.nativeElement, 'folded');
|
||||
@@ -558,6 +605,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
// Set the opened status
|
||||
this.opened = true;
|
||||
|
||||
// Emit the 'openedChanged' event
|
||||
this.openedChanged.emit(this.opened);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
@@ -581,6 +631,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
// Set the opened status
|
||||
this.opened = false;
|
||||
|
||||
// Emit the 'openedChanged' event
|
||||
this.openedChanged.emit(this.opened);
|
||||
|
||||
// Hide the sidebar
|
||||
this._hideSidebar();
|
||||
|
||||
@@ -609,20 +662,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
@HostListener('mouseenter')
|
||||
onMouseEnter(): void
|
||||
{
|
||||
// Only work if the sidebar is folded
|
||||
if ( !this.folded )
|
||||
// Only work if the auto trigger is enabled
|
||||
if ( !this.foldedAutoTriggerOnHover )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// Unfold the sidebar temporarily
|
||||
this.unfolded = true;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
this.unfoldTemporarily();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -631,20 +677,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
@HostListener('mouseleave')
|
||||
onMouseLeave(): void
|
||||
{
|
||||
// Only work if the sidebar is folded
|
||||
if ( !this.folded )
|
||||
// Only work if the auto trigger is enabled
|
||||
if ( !this.foldedAutoTriggerOnHover )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// Fold the sidebar back
|
||||
this.unfolded = false;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
this.foldTemporarily();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -703,4 +742,58 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
||||
this.fold();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fold the temporarily unfolded sidebar back
|
||||
*/
|
||||
foldTemporarily(): void
|
||||
{
|
||||
// Only work if the sidebar is folded
|
||||
if ( !this.folded )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// Fold the sidebar back
|
||||
this.unfolded = false;
|
||||
|
||||
// Set the folded width
|
||||
const styleValue = this.foldedWidth + 'px';
|
||||
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Unfold the sidebar temporarily
|
||||
*/
|
||||
unfoldTemporarily(): void
|
||||
{
|
||||
// Only work if the sidebar is folded
|
||||
if ( !this.folded )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// Unfold the sidebar temporarily
|
||||
this.unfolded = true;
|
||||
|
||||
// Remove the folded width
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,9 @@ import { Injectable } from '@angular/core';
|
||||
|
||||
import { FuseSidebarComponent } from './sidebar.component';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseSidebarService
|
||||
{
|
||||
// Private
|
||||
|
||||
@@ -73,6 +73,17 @@
|
||||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
@@ -91,6 +102,11 @@
|
||||
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
@@ -109,6 +125,28 @@
|
||||
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="group" formGroupName="sidepanel">
|
||||
|
||||
<h2>Side Panel</h2>
|
||||
|
||||
<mat-slide-toggle formControlName="hidden">
|
||||
Hide
|
||||
</mat-slide-toggle>
|
||||
|
||||
<h3 class="mt-24">Position:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
|
||||
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
@@ -146,6 +184,17 @@
|
||||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
@@ -164,6 +213,11 @@
|
||||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
@@ -182,6 +236,28 @@
|
||||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="group" formGroupName="sidepanel">
|
||||
|
||||
<h2>Side Panel</h2>
|
||||
|
||||
<mat-slide-toggle formControlName="hidden">
|
||||
Hide
|
||||
</mat-slide-toggle>
|
||||
|
||||
<h3 class="mt-24">Position:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
|
||||
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
@@ -219,6 +295,17 @@
|
||||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
@@ -236,6 +323,11 @@
|
||||
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
@@ -253,6 +345,28 @@
|
||||
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="group" formGroupName="sidepanel">
|
||||
|
||||
<h2>Side Panel</h2>
|
||||
|
||||
<mat-slide-toggle formControlName="hidden">
|
||||
Hide
|
||||
</mat-slide-toggle>
|
||||
|
||||
<h3 class="mt-24">Position:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
|
||||
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
@@ -285,6 +399,17 @@
|
||||
<mat-radio-button class="mb-16" value="top">Top</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant (Vertical):</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
@@ -302,6 +427,11 @@
|
||||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
@@ -319,6 +449,28 @@
|
||||
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="group" formGroupName="sidepanel">
|
||||
|
||||
<h2>Side Panel</h2>
|
||||
|
||||
<mat-slide-toggle formControlName="hidden">
|
||||
Hide
|
||||
</mat-slide-toggle>
|
||||
|
||||
<h3 class="mt-24">Position:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
|
||||
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
@@ -338,35 +490,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- COLORS -->
|
||||
<div class="group">
|
||||
|
||||
<h2>Colors</h2>
|
||||
|
||||
<div class="colors">
|
||||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Toolbar Color</h4>
|
||||
<fuse-material-color-picker
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background"></fuse-material-color-picker>
|
||||
</div>
|
||||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Navbar Color</h4>
|
||||
<fuse-material-color-picker
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background"></fuse-material-color-picker>
|
||||
</div>
|
||||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Footer Color</h4>
|
||||
<fuse-material-color-picker
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background"></fuse-material-color-picker>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -73,11 +73,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colors {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,23 +62,28 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||
// noinspection TypeScriptValidateTypes
|
||||
this.form = this._formBuilder.group({
|
||||
layout : this._formBuilder.group({
|
||||
style : new FormControl(),
|
||||
width : new FormControl(),
|
||||
navbar : this._formBuilder.group({
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl(),
|
||||
style : new FormControl(),
|
||||
width : new FormControl(),
|
||||
navbar : this._formBuilder.group({
|
||||
background: new FormControl(),
|
||||
folded : new FormControl(),
|
||||
background: new FormControl()
|
||||
}),
|
||||
toolbar: this._formBuilder.group({
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl(),
|
||||
background: new FormControl()
|
||||
variant : new FormControl()
|
||||
}),
|
||||
footer : this._formBuilder.group({
|
||||
toolbar : this._formBuilder.group({
|
||||
background: new FormControl(),
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl(),
|
||||
background: new FormControl()
|
||||
position : new FormControl()
|
||||
}),
|
||||
footer : this._formBuilder.group({
|
||||
background: new FormControl(),
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl()
|
||||
}),
|
||||
sidepanel: this._formBuilder.group({
|
||||
hidden: new FormControl(),
|
||||
position : new FormControl()
|
||||
})
|
||||
}),
|
||||
customScrollbars: new FormControl()
|
||||
@@ -174,20 +179,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'below-static'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'below-static'
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -202,20 +208,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'below',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'below'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'below',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'below'
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -230,20 +237,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
layout : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'above-static',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'above-static'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'above-static',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'above-static'
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -258,20 +266,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'top',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'above',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'above'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'above-fixed',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'above-fixed'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { MatSidenav } from '@angular/material';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseMatSidenavHelperService
|
||||
{
|
||||
sidenavInstances: MatSidenav[];
|
||||
|
||||
@@ -1,27 +1,8 @@
|
||||
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
|
||||
|
||||
import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
|
||||
import { FuseCopierService } from '@fuse/services/copier.service';
|
||||
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
|
||||
import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
|
||||
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
|
||||
import { FUSE_CONFIG } from '@fuse/services/config.service';
|
||||
|
||||
@NgModule({
|
||||
entryComponents: [],
|
||||
providers : [
|
||||
FuseConfigService,
|
||||
FuseCopierService,
|
||||
FuseMatchMediaService,
|
||||
FuseMatSidenavHelperService,
|
||||
FuseNavigationService,
|
||||
FuseSidebarService,
|
||||
FuseSplashScreenService,
|
||||
FuseTranslationLoaderService
|
||||
]
|
||||
})
|
||||
@NgModule()
|
||||
export class FuseModule
|
||||
{
|
||||
constructor(@Optional() @SkipSelf() parentModule: FuseModule)
|
||||
|
||||
@@ -14,7 +14,7 @@ i {
|
||||
}
|
||||
|
||||
// Material colors map
|
||||
$matColorsMap: (
|
||||
$matPalettes: (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn,
|
||||
@@ -43,75 +43,91 @@ $matColorsMap: (
|
||||
);
|
||||
|
||||
// Material color hues list
|
||||
$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
|
||||
$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
|
||||
|
||||
// Text color levels generator mixin
|
||||
@mixin generateTextColorLevels($baseTextColor) {
|
||||
@mixin generateTextColorLevels($classes, $contrast) {
|
||||
|
||||
// If the base text color is black...
|
||||
@if (rgba(black, 1) == rgba($baseTextColor, 1)) {
|
||||
// If the contrast is dark...
|
||||
@if ($contrast == 'dark') {
|
||||
|
||||
i,
|
||||
.icon {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
// Put down the color classes
|
||||
#{$classes} {
|
||||
|
||||
&.secondary-text,
|
||||
.secondary-text {
|
||||
color: rgba(0, 0, 0, 0.54) !important;
|
||||
}
|
||||
i,
|
||||
.icon {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
&.hint-text,
|
||||
.hint-text,
|
||||
&.disabled-text,
|
||||
.disabled-text {
|
||||
color: rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
&.secondary-text,
|
||||
.secondary-text {
|
||||
color: rgba(0, 0, 0, 0.54) !important;
|
||||
}
|
||||
|
||||
&.divider,
|
||||
.divider {
|
||||
color: rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
&.hint-text,
|
||||
.hint-text,
|
||||
&.disabled-text,
|
||||
.disabled-text {
|
||||
color: rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
&.divider,
|
||||
.divider {
|
||||
color: rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.adaptive-border-color {
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// If the base text color is white...
|
||||
@else {
|
||||
|
||||
i,
|
||||
.icon {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
// Put down the color classes
|
||||
#{$classes} {
|
||||
|
||||
&.secondary-text,
|
||||
.secondary-text {
|
||||
color: rgba(255, 255, 255, 0.70) !important;
|
||||
}
|
||||
i,
|
||||
.icon {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
&.hint-text,
|
||||
.hint-text,
|
||||
&.disabled-text,
|
||||
.disabled-text {
|
||||
color: rgba(255, 255, 255, 0.50) !important;
|
||||
}
|
||||
&.secondary-text,
|
||||
.secondary-text {
|
||||
color: rgba(255, 255, 255, 0.70) !important;
|
||||
}
|
||||
|
||||
&.divider,
|
||||
.divider {
|
||||
color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
&.hint-text,
|
||||
.hint-text,
|
||||
&.disabled-text,
|
||||
.disabled-text {
|
||||
color: rgba(255, 255, 255, 0.50) !important;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
&.divider,
|
||||
.divider {
|
||||
color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.adaptive-border-color {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin generateMaterialElementColors($contrastColor) {
|
||||
@mixin generateMaterialElementColors($classes, $contrast) {
|
||||
|
||||
// If the contrast color is white...
|
||||
// If the contrast color is light...
|
||||
$fuseForeground: (
|
||||
base: white,
|
||||
text: white,
|
||||
@@ -119,8 +135,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
||||
divider: rgba(white, 0.12),
|
||||
);
|
||||
|
||||
// If the contrast color is black...
|
||||
@if (rgba(black, 1) == rgba($contrastColor, 1)) {
|
||||
// If the contrast color is dark...
|
||||
@if ($contrast == 'dark') {
|
||||
|
||||
$fuseForeground: (
|
||||
base: black,
|
||||
@@ -129,43 +145,47 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
||||
);
|
||||
}
|
||||
|
||||
// Native Input
|
||||
input[type="text"] {
|
||||
color: map_get($fuseForeground, base);
|
||||
}
|
||||
// Put down the color classes
|
||||
#{$classes} {
|
||||
|
||||
// Input
|
||||
.mat-form-field-label {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
// Native Input
|
||||
input[type="text"] {
|
||||
color: map_get($fuseForeground, base);
|
||||
}
|
||||
|
||||
.mat-form-field-underline {
|
||||
background-color: map_get($fuseForeground, divider);
|
||||
}
|
||||
// Input
|
||||
.mat-form-field-label {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
|
||||
// Select
|
||||
.mat-select-trigger,
|
||||
.mat-select-arrow {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
background-color: map_get($fuseForeground, divider);
|
||||
}
|
||||
|
||||
.mat-select-underline {
|
||||
background-color: map_get($fuseForeground, divider);
|
||||
}
|
||||
// Select
|
||||
.mat-select-trigger,
|
||||
.mat-select-arrow {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
|
||||
.mat-select-disabled .mat-select-value,
|
||||
.mat-select-arrow,
|
||||
.mat-select-trigger {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
.mat-select-underline {
|
||||
background-color: map_get($fuseForeground, divider);
|
||||
}
|
||||
|
||||
.mat-select-content,
|
||||
.mat-select-panel-done-animating {
|
||||
background: map_get($background, card);
|
||||
}
|
||||
.mat-select-disabled .mat-select-value,
|
||||
.mat-select-arrow,
|
||||
.mat-select-trigger {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
|
||||
.mat-select-value {
|
||||
color: map_get($fuseForeground, text);
|
||||
.mat-select-content,
|
||||
.mat-select-panel-done-animating {
|
||||
background: map_get($background, card);
|
||||
}
|
||||
|
||||
.mat-select-value {
|
||||
color: map_get($fuseForeground, text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -180,14 +200,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
||||
background-color: $color !important;
|
||||
color: $contrastColor !important;
|
||||
|
||||
// Generate text color levels
|
||||
// based on current contrast color
|
||||
@include generateTextColorLevels($contrastColor);
|
||||
|
||||
// Generate material element colors
|
||||
// based on current contrast color
|
||||
@include generateMaterialElementColors($contrastColor);
|
||||
|
||||
&[disabled] {
|
||||
background-color: rgba($color, .12) !important;
|
||||
color: rgba($contrastColor, .26) !important;
|
||||
@@ -196,14 +208,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
||||
|
||||
.#{$colorName}#{$hue}-fg {
|
||||
color: $color !important;
|
||||
|
||||
// Generate text color levels
|
||||
// based on current contrast color
|
||||
@include generateTextColorLevels($color);
|
||||
|
||||
// Generate material element colors
|
||||
// based on current contrast color
|
||||
@include generateMaterialElementColors($color);
|
||||
}
|
||||
|
||||
.#{$colorName}#{$hue}-border {
|
||||
@@ -229,49 +233,126 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
||||
|
||||
@mixin generateFuseColorClasses($primary, $accent, $warn) {
|
||||
|
||||
$colorMap: (
|
||||
$palettes: (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn
|
||||
);
|
||||
|
||||
// Define contrast lists
|
||||
$light-contrasting-classes: ();
|
||||
$dark-contrasting-classes: ();
|
||||
|
||||
// Generate the color classes...
|
||||
@each $name, $map in $colorMap {
|
||||
@each $paletteName, $palette in $palettes {
|
||||
|
||||
@each $hue in $matColorHues {
|
||||
// Get the contrasts map
|
||||
$contrasts: map-get($palette, 'contrast');
|
||||
|
||||
$color: map-get($map, $hue);
|
||||
$contrastColor: map-get(map-get($map, 'contrast'), $hue);
|
||||
@each $hue in $matHues {
|
||||
|
||||
@if ($color != null and $contrastColor != null) {
|
||||
// Get the color and the contrasting color
|
||||
$color: map-get($palette, $hue);
|
||||
$contrast: map-get($contrasts, $hue);
|
||||
|
||||
@include generateColorClasses($name, $color, $contrastColor, '-#{$hue}');
|
||||
@if ($color != null and $contrast != null) {
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
|
||||
// Run the generator one more time for default values (500)
|
||||
@if ($hue == 500) {
|
||||
@include generateColorClasses($name, $color, $contrastColor, '');
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '');
|
||||
|
||||
// Add color to the correct list depending on the contrasting color
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate contrasting colors
|
||||
@include generateTextColorLevels($dark-contrasting-classes, 'dark');
|
||||
@include generateTextColorLevels($light-contrasting-classes, 'light');
|
||||
@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
|
||||
@include generateMaterialElementColors($light-contrasting-classes, 'light');
|
||||
}
|
||||
|
||||
// Generate the color classes...
|
||||
|
||||
// Define contrast lists
|
||||
$light-contrasting-classes: ();
|
||||
$dark-contrasting-classes: ();
|
||||
|
||||
@each $paletteName, $palette in $matPalettes {
|
||||
|
||||
// Get the contrasts map
|
||||
$contrasts: map-get($palette, 'contrast');
|
||||
|
||||
@each $hue in $matHues {
|
||||
|
||||
// Get the color and the contrasting color
|
||||
$color: map-get($palette, $hue);
|
||||
$contrast: map-get($contrasts, $hue);
|
||||
|
||||
@if ($color != null and $contrast != null) {
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
|
||||
|
||||
// Add color to the correct list depending on the contrasting color
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
|
||||
// Run the generator one more time for default values (500)
|
||||
@if ($hue == 500) {
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '');
|
||||
|
||||
// Add color to the correct list depending on the contrasting color
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the color classes...
|
||||
@each $colorName, $colorMap in $matColorsMap {
|
||||
|
||||
@each $hue in $matColorHues {
|
||||
|
||||
$color: map-get($colorMap, $hue);
|
||||
$contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
|
||||
|
||||
@if ($color != null and $contrastColor != null) {
|
||||
|
||||
@include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
|
||||
|
||||
// Run the generator one more time for default values (500)
|
||||
@if ($hue == 500) {
|
||||
@include generateColorClasses($colorName, $color, $contrastColor, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Generate contrasting colors
|
||||
@include generateTextColorLevels($dark-contrasting-classes, 'dark');
|
||||
@include generateTextColorLevels($light-contrasting-classes, 'light');
|
||||
@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
|
||||
@include generateMaterialElementColors($light-contrasting-classes, 'light');
|
||||
|
||||
@@ -219,4 +219,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Material style
|
||||
&.material {
|
||||
|
||||
.nav-subheader {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
.nav-link {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
margin: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,11 +36,11 @@
|
||||
/* General styles */
|
||||
app {
|
||||
|
||||
fuse-navbar-vertical,
|
||||
fuse-navbar-horizontal,
|
||||
fuse-toolbar,
|
||||
fuse-footer,
|
||||
fuse-quick-panel,
|
||||
fuse-sidebar,
|
||||
navbar,
|
||||
toolbar,
|
||||
footer,
|
||||
.theme-options-button,
|
||||
fuse-theme-options,
|
||||
.ps > .ps__rail-x,
|
||||
.ps > .ps__rail-y {
|
||||
|
||||
@@ -8,7 +8,9 @@ import * as _ from 'lodash';
|
||||
// Create the injection token for the custom settings
|
||||
export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseConfigService
|
||||
{
|
||||
// Private
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
/**
|
||||
* This class is based on the code in the following projects:
|
||||
*
|
||||
* - https://github.com/zenorocha/select
|
||||
* - https://github.com/zenorocha/clipboard.js/
|
||||
* https://github.com/zenorocha/select
|
||||
* https://github.com/zenorocha/clipboard.js/
|
||||
*
|
||||
* Both released under MIT license - © Zeno Rocha
|
||||
*/
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseCopierService
|
||||
{
|
||||
private textarea: HTMLTextAreaElement;
|
||||
|
||||
91
src/@fuse/services/loading-bar.service.ts
Normal file
91
src/@fuse/services/loading-bar.service.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { filter } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseLoadingBarService
|
||||
{
|
||||
// Private
|
||||
private _visible: BehaviorSubject<boolean>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
// Initialize the service
|
||||
this._init();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
get visible(): Observable<any>
|
||||
{
|
||||
// Return the _visible as observable
|
||||
return this._visible.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _init(): void
|
||||
{
|
||||
// Initialize the behavior subject
|
||||
this._visible = new BehaviorSubject(false);
|
||||
|
||||
// Subscribe to the router events to show/hide the loading bar
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationStart)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.showLoadingBar();
|
||||
});
|
||||
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.hideLoadingBar();
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Show the loading bar
|
||||
*/
|
||||
showLoadingBar(): void
|
||||
{
|
||||
// Show
|
||||
this._visible.next(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the loading bar
|
||||
*/
|
||||
hideLoadingBar(): void
|
||||
{
|
||||
// Hide
|
||||
this._visible.next(false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,9 @@ import { MediaChange, ObservableMedia } from '@angular/flex-layout';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseMatchMediaService
|
||||
{
|
||||
activeMediaQuery: string;
|
||||
|
||||
@@ -3,7 +3,9 @@ import { DOCUMENT } from '@angular/common';
|
||||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseSplashScreenService
|
||||
{
|
||||
splashScreenEl: any;
|
||||
|
||||
@@ -7,7 +7,9 @@ export interface Locale
|
||||
data: Object;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseTranslationLoaderService
|
||||
{
|
||||
/**
|
||||
|
||||
@@ -4,20 +4,25 @@ export interface FuseConfig
|
||||
style: string,
|
||||
width: 'fullwidth' | 'boxed',
|
||||
navbar: {
|
||||
background: string,
|
||||
hidden: boolean,
|
||||
folded: boolean,
|
||||
position: 'left' | 'right' | 'top',
|
||||
background: string
|
||||
variant: string
|
||||
},
|
||||
toolbar: {
|
||||
background: string,
|
||||
hidden: boolean,
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
|
||||
background: string
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
|
||||
}
|
||||
footer: {
|
||||
background: string,
|
||||
hidden: boolean,
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
|
||||
background: string
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: boolean,
|
||||
position: 'left' | 'right'
|
||||
}
|
||||
};
|
||||
customScrollbars: boolean;
|
||||
|
||||
@@ -7,6 +7,7 @@ export interface FuseNavigationItem
|
||||
icon?: string;
|
||||
hidden?: boolean;
|
||||
url?: string;
|
||||
classes?: string;
|
||||
exactMatch?: boolean;
|
||||
externalUrl?: boolean;
|
||||
openInNewTab?: boolean;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -18,7 +20,7 @@
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
pointer-events: auto;
|
||||
opacity: .75;
|
||||
opacity: .90;
|
||||
z-index: 998;
|
||||
|
||||
mat-icon {
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { Platform } from '@angular/cdk/platform';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
@@ -29,20 +31,24 @@ export class AppComponent implements OnInit, OnDestroy
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {DOCUMENT} document
|
||||
* @param {FuseConfigService} _fuseConfigService
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {FuseSplashScreenService} _fuseSplashScreenService
|
||||
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
|
||||
* @param {Platform} _platform
|
||||
* @param {TranslateService} _translateService
|
||||
*/
|
||||
constructor(
|
||||
@Inject(DOCUMENT) private document: any,
|
||||
private _fuseConfigService: FuseConfigService,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _fuseSplashScreenService: FuseSplashScreenService,
|
||||
private _fuseTranslationLoaderService: FuseTranslationLoaderService,
|
||||
private _translateService: TranslateService
|
||||
private _translateService: TranslateService,
|
||||
private _platform: Platform
|
||||
)
|
||||
{
|
||||
// Get default navigation
|
||||
@@ -66,6 +72,12 @@ export class AppComponent implements OnInit, OnDestroy
|
||||
// Use a language
|
||||
this._translateService.use('en');
|
||||
|
||||
// Add is-mobile class to the body if the platform is mobile
|
||||
if ( this._platform.ANDROID || this._platform.IOS )
|
||||
{
|
||||
this.document.body.className += ' is-mobile';
|
||||
}
|
||||
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
@@ -10,23 +10,28 @@ import { FuseConfig } from '@fuse/types';
|
||||
|
||||
export const fuseConfig: FuseConfig = {
|
||||
layout : {
|
||||
style : 'vertical-layout-1',
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
style : 'vertical-layout-1',
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar : {
|
||||
toolbar : {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'below-static'
|
||||
},
|
||||
footer : {
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'below-fixed'
|
||||
},
|
||||
sidepanel: {
|
||||
hidden : false,
|
||||
position: 'right'
|
||||
}
|
||||
},
|
||||
customScrollbars: true
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
|
||||
|
||||
<a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
|
||||
<a href="https://1.envato.market/c/1257954/275988/4415?u=https%3A%2F%2Fthemeforest.net%2Fitem%2Ffuse-angularjs-material-design-admin-template%2F12931855"
|
||||
target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
<mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
|
||||
@@ -16,7 +16,6 @@
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</mat-toolbar>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<fuse-navigation layout="horizontal"></fuse-navigation>
|
||||
@@ -0,0 +1,3 @@
|
||||
navbar-horizontal-style-1 {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar-horizontal-style-1',
|
||||
templateUrl : './style-1.component.html',
|
||||
styleUrls : ['./style-1.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
|
||||
{
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(
|
||||
filter(value => value !== null),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarHorizontalStyle1Component } from 'app/layout/components/navbar/horizontal/style-1/style-1.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarHorizontalStyle1Component
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
],
|
||||
exports : [
|
||||
NavbarHorizontalStyle1Component
|
||||
]
|
||||
})
|
||||
export class NavbarHorizontalStyle1Module
|
||||
{
|
||||
}
|
||||
@@ -1,39 +1,11 @@
|
||||
<ng-container *ngIf="layout == 'vertical'">
|
||||
|
||||
<div class="navbar-vertical">
|
||||
|
||||
<div class="navbar-header">
|
||||
|
||||
<div class="logo">
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
<span class="logo-text">FUSE</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded"
|
||||
(click)="toggleSidebarFolded()" fxHide.lt-lg>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-opened"
|
||||
(click)="toggleSidebarOpened()" fxHide.gt-md>
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-content" fusePerfectScrollbar
|
||||
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="variant === 'horizontal-style-1'">
|
||||
<navbar-horizontal-style-1></navbar-horizontal-style-1>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="layout == 'horizontal'">
|
||||
<ng-container *ngIf="variant === 'vertical-style-1'">
|
||||
<navbar-vertical-style-1></navbar-vertical-style-1>
|
||||
</ng-container>
|
||||
|
||||
<div class="navbar-horizontal">
|
||||
<fuse-navigation layout="horizontal"></fuse-navigation>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
<ng-container *ngIf="variant === 'vertical-style-2'">
|
||||
<navbar-vertical-style-2></navbar-vertical-style-2>
|
||||
</ng-container>
|
||||
|
||||
@@ -1,81 +1,7 @@
|
||||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
fuse-sidebar {
|
||||
|
||||
&.folded:not(.unfolded) {
|
||||
|
||||
.navbar-vertical {
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 13px;
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-text {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar {
|
||||
|
||||
&:not(.top-navbar) {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.navbar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
min-height: 64px;
|
||||
padding: 0 16px 0 24px;
|
||||
transition: padding 200ms ease;
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
@include mat-elevation(1);
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,4 @@
|
||||
import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar',
|
||||
@@ -13,125 +6,18 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
styleUrls : ['./navbar.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarComponent implements OnInit, OnDestroy
|
||||
export class NavbarComponent
|
||||
{
|
||||
// Layout
|
||||
// Variant
|
||||
@Input()
|
||||
layout;
|
||||
|
||||
fusePerfectScrollbarUpdateTimeout: any;
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
variant;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router
|
||||
)
|
||||
constructor()
|
||||
{
|
||||
// Set the defaults
|
||||
this.layout = 'vertical';
|
||||
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Directive
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
set directive(theDirective: FusePerfectScrollbarDirective)
|
||||
{
|
||||
if ( !theDirective )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._fusePerfectScrollbar = theDirective;
|
||||
|
||||
this._fuseNavigationService.onItemCollapseToggled
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
|
||||
this._fusePerfectScrollbar.update();
|
||||
}, 310);
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
if ( this._fuseSidebarService.getSidebar('navbar') )
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').close();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(filter(value => value !== null))
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
if ( this.fusePerfectScrollbarUpdateTimeout )
|
||||
{
|
||||
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
|
||||
}
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpened(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleFold();
|
||||
this.variant = 'vertical-style-1';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,22 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarComponent } from 'app/layout/components/navbar/navbar.component';
|
||||
import { NavbarHorizontalStyle1Module } from 'app/layout/components/navbar/horizontal/style-1/style-1.module';
|
||||
import { NavbarVerticalStyle1Module } from 'app/layout/components/navbar/vertical/style-1/style-1.module';
|
||||
import { NavbarVerticalStyle2Module } from 'app/layout/components/navbar/vertical/style-2/style-2.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarComponent
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
|
||||
NavbarHorizontalStyle1Module,
|
||||
NavbarVerticalStyle1Module,
|
||||
NavbarVerticalStyle2Module
|
||||
],
|
||||
exports : [
|
||||
NavbarComponent
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<div class="navbar-top mat-indigo-700-bg">
|
||||
|
||||
<div class="logo">
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
<span class="logo-text secondary-text">FUSE</span>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded"
|
||||
(click)="toggleSidebarFolded()" fxHide.lt-lg>
|
||||
<mat-icon class="secondary-text">menu</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-opened"
|
||||
(click)="toggleSidebarOpened()" fxHide.gt-md>
|
||||
<mat-icon class="secondary-text">arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
|
||||
<div class="user mat-indigo-700-bg" fxLayout="column">
|
||||
|
||||
<div class="h3 username">Charlie Adams</div>
|
||||
<div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
|
||||
<div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.background">
|
||||
<img class="avatar" src="assets/images/avatars/Velazquez.jpg">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-content">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,168 @@
|
||||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
fuse-sidebar {
|
||||
|
||||
&.navbar-fuse-sidebar {
|
||||
overflow: hidden;
|
||||
|
||||
&.folded:not(.unfolded) {
|
||||
|
||||
navbar {
|
||||
|
||||
navbar-vertical-style-1 {
|
||||
|
||||
.navbar-top {
|
||||
padding: 12px 0;
|
||||
justify-content: center;
|
||||
|
||||
.buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-scroll-container {
|
||||
|
||||
.user {
|
||||
padding: 12px 0;
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
top: auto;
|
||||
padding: 0;
|
||||
transform: translateX(0);
|
||||
left: auto;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.username,
|
||||
.email {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar {
|
||||
|
||||
navbar-vertical-style-1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.navbar-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 64px;
|
||||
max-height: 64px;
|
||||
height: 64px;
|
||||
padding: 12px 12px 12px 20px;
|
||||
|
||||
@include media-breakpoint('xs') {
|
||||
min-height: 56px;
|
||||
max-height: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.4px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-scroll-container {
|
||||
overflow-y: auto;
|
||||
|
||||
background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%),
|
||||
linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 40px, 100% 10px;
|
||||
background-attachment: local, scroll;
|
||||
|
||||
.user {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 24px 0 64px 0;
|
||||
|
||||
.avatar-container {
|
||||
position: absolute;
|
||||
top: 92px;
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
|
||||
.avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
flex: 1 1 auto;
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, take, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseConfigService } from '@fuse/services/config.service';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar-vertical-style-1',
|
||||
templateUrl : './style-1.component.html',
|
||||
styleUrls : ['./style-1.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
|
||||
{
|
||||
fuseConfig: any;
|
||||
fusePerfectScrollbarUpdateTimeout: any;
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseConfigService} _fuseConfigService
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _fuseConfigService: FuseConfigService,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Directive
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
set directive(theDirective: FusePerfectScrollbarDirective)
|
||||
{
|
||||
if ( !theDirective )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._fusePerfectScrollbar = theDirective;
|
||||
|
||||
// Update the scrollbar on collapsable item toggle
|
||||
this._fuseNavigationService.onItemCollapseToggled
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
|
||||
this._fusePerfectScrollbar.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
// Scroll to the active item position
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(() => {
|
||||
setTimeout(() => {
|
||||
const activeNavItem: any = document.querySelector('navbar .nav-link.active');
|
||||
|
||||
if ( activeNavItem )
|
||||
{
|
||||
const activeItemOffsetTop = activeNavItem.offsetTop,
|
||||
activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
|
||||
scrollDistance = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3) - 168;
|
||||
|
||||
this._fusePerfectScrollbar.scrollToTop(scrollDistance);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
if ( this._fuseSidebarService.getSidebar('navbar') )
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').close();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Subscribe to the config changes
|
||||
this._fuseConfigService.config
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((config) => {
|
||||
this.fuseConfig = config;
|
||||
});
|
||||
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(
|
||||
filter(value => value !== null),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
if ( this.fusePerfectScrollbarUpdateTimeout )
|
||||
{
|
||||
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
|
||||
}
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpened(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleFold();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarVerticalStyle1Component } from 'app/layout/components/navbar/vertical/style-1/style-1.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarVerticalStyle1Component
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
],
|
||||
exports : [
|
||||
NavbarVerticalStyle1Component
|
||||
]
|
||||
})
|
||||
export class NavbarVerticalStyle1Module
|
||||
{
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<div class="navbar-header">
|
||||
|
||||
<div class="logo">
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
<span class="logo-text">FUSE</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded"
|
||||
(click)="toggleSidebarFolded()" fxHide.lt-lg>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-opened"
|
||||
(click)="toggleSidebarOpened()" fxHide.gt-md>
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-content" fusePerfectScrollbar
|
||||
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
@@ -0,0 +1,84 @@
|
||||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
fuse-sidebar {
|
||||
|
||||
&.navbar-fuse-sidebar {
|
||||
overflow: hidden;
|
||||
|
||||
&.folded:not(.unfolded) {
|
||||
|
||||
navbar {
|
||||
|
||||
navbar-vertical-style-2 {
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 13px;
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-text {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar {
|
||||
|
||||
navbar-vertical-style-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.navbar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
min-height: 64px;
|
||||
padding: 0 16px 0 24px;
|
||||
transition: padding 200ms ease;
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
@include mat-elevation(1);
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, take, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar-vertical-style-2',
|
||||
templateUrl : './style-2.component.html',
|
||||
styleUrls : ['./style-2.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
|
||||
{
|
||||
fusePerfectScrollbarUpdateTimeout: any;
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Directive
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
set directive(theDirective: FusePerfectScrollbarDirective)
|
||||
{
|
||||
if ( !theDirective )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._fusePerfectScrollbar = theDirective;
|
||||
|
||||
// Update the scrollbar on collapsable item toggle
|
||||
this._fuseNavigationService.onItemCollapseToggled
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
|
||||
this._fusePerfectScrollbar.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
// Scroll to the active item position
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(() => {
|
||||
setTimeout(() => {
|
||||
const activeNavItem: any = document.querySelector('navbar .nav-link.active');
|
||||
|
||||
if ( activeNavItem )
|
||||
{
|
||||
const activeItemOffsetTop = activeNavItem.offsetTop,
|
||||
activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
|
||||
scrollDistance = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
|
||||
|
||||
this._fusePerfectScrollbar.scrollToTop(scrollDistance);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
if ( this._fuseSidebarService.getSidebar('navbar') )
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').close();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(
|
||||
filter(value => value !== null),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
if ( this.fusePerfectScrollbarUpdateTimeout )
|
||||
{
|
||||
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
|
||||
}
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpened(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleFold();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarVerticalStyle2Component } from 'app/layout/components/navbar/vertical/style-2/style-2.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarVerticalStyle2Component
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
],
|
||||
exports : [
|
||||
NavbarVerticalStyle2Component
|
||||
]
|
||||
})
|
||||
export class NavbarVerticalStyle2Module
|
||||
{
|
||||
}
|
||||
@@ -30,8 +30,8 @@
|
||||
<button mat-button [matMenuTriggerFor]="userMenu"
|
||||
class="user-button">
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<img class="avatar" src="assets/images/avatars/profile.jpg">
|
||||
<span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
|
||||
<img class="avatar mr-0 mr-sm-16" src="assets/images/avatars/Velazquez.jpg">
|
||||
<span class="username mr-12" fxHide fxShow.gt-sm>Charlie Adams</span>
|
||||
<mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
|
||||
</div>
|
||||
</button>
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
<mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
|
||||
|
||||
<button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang.id)">
|
||||
<button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
|
||||
<span fxLayout="row" fxLayoutAlign="start center">
|
||||
<img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
|
||||
<span class="iso">{{lang.title}}</span>
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
.user-button,
|
||||
fuse-search-bar,
|
||||
.language-button,
|
||||
.chat-panel-toggle-button,
|
||||
.quick-panel-toggle-button {
|
||||
min-width: 64px;
|
||||
height: 64px;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
@@ -9,6 +8,7 @@ import { FuseConfigService } from '@fuse/services/config.service';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
|
||||
import { navigation } from 'app/navigation/navigation';
|
||||
import { FuseLoadingBarService } from '@fuse/services/loading-bar.service';
|
||||
|
||||
@Component({
|
||||
selector : 'toolbar',
|
||||
@@ -34,14 +34,14 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseConfigService} _fuseConfigService
|
||||
* @param {FuseLoadingBarService} _fuseLoadingBarService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
* @param {TranslateService} _translateService
|
||||
*/
|
||||
constructor(
|
||||
private _fuseConfigService: FuseConfigService,
|
||||
private _fuseLoadingBarService: FuseLoadingBarService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router,
|
||||
private _translateService: TranslateService
|
||||
)
|
||||
{
|
||||
@@ -102,22 +102,11 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to the router events to show/hide the loading bar
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationStart),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe((event) => {
|
||||
this.showLoadingBar = true;
|
||||
});
|
||||
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd)
|
||||
)
|
||||
.subscribe((event) => {
|
||||
this.showLoadingBar = false;
|
||||
// Subscribe to the Fuse loading bar service
|
||||
this._fuseLoadingBarService.visible
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((visible) => {
|
||||
this.showLoadingBar = visible;
|
||||
});
|
||||
|
||||
// Subscribe to the config changes
|
||||
@@ -171,14 +160,14 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
||||
/**
|
||||
* Set the language
|
||||
*
|
||||
* @param langId
|
||||
* @param lang
|
||||
*/
|
||||
setLanguage(langId): void
|
||||
setLanguage(lang): void
|
||||
{
|
||||
// Set the selected language for toolbar
|
||||
this.selectedLanguage = _.find(this.languages, {'id': langId});
|
||||
// Set the selected language for the toolbar
|
||||
this.selectedLanguage = lang;
|
||||
|
||||
// Use the selected language for translations
|
||||
this._translateService.use(langId);
|
||||
this._translateService.use(lang.id);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
|
||||
|
||||
<!-- PANEL CONTENT -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
|
||||
<!-- TOOLBAR: Above -->
|
||||
@@ -55,6 +63,14 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
|
||||
|
||||
<!-- PANEL CONTENT -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
@@ -81,7 +97,7 @@
|
||||
|
||||
<!-- TOP NAVBAR -->
|
||||
<ng-template #topNavbar>
|
||||
<navbar layout="horizontal"
|
||||
<navbar variant="horizontal-style-1"
|
||||
class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
|
||||
fxHide fxShow.gt-md
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
@@ -91,10 +107,11 @@
|
||||
|
||||
<!-- LEFT NAVBAR -->
|
||||
<ng-template #leftNavbar>
|
||||
<fuse-sidebar name="navbar"
|
||||
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
|
||||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
||||
@@ -14,6 +14,7 @@ horizontal-layout-1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
|
||||
|
||||
<!-- PANEL CONTENT -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
|
||||
<!-- TOOLBAR: Above -->
|
||||
@@ -67,6 +75,14 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
|
||||
|
||||
<!-- PANEL CONTENT -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
@@ -93,22 +109,24 @@
|
||||
|
||||
<!-- LEFT NAVBAR -->
|
||||
<ng-template #leftNavbar>
|
||||
<fuse-sidebar name="navbar"
|
||||
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
|
||||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
||||
<!-- RIGHT NAVBAR -->
|
||||
<ng-template #rightNavbar>
|
||||
<fuse-sidebar name="navbar" position="right"
|
||||
<fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
|
||||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / RIGHT NAVBAR -->
|
||||
@@ -14,6 +14,7 @@ vertical-layout-1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
|
||||
|
||||
<!-- PANEL CONTENT -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
|
||||
<!-- TOOLBAR: Above fixed -->
|
||||
@@ -67,6 +75,14 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
|
||||
|
||||
<!-- PANEL CONTENT -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
@@ -93,22 +109,24 @@
|
||||
|
||||
<!-- LEFT NAVBAR -->
|
||||
<ng-template #leftNavbar>
|
||||
<fuse-sidebar name="navbar"
|
||||
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
|
||||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
||||
<!-- RIGHT NAVBAR -->
|
||||
<ng-template #rightNavbar>
|
||||
<fuse-sidebar name="navbar" position="right"
|
||||
<fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
|
||||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / RIGHT NAVBAR -->
|
||||
@@ -14,6 +14,7 @@ vertical-layout-2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
|
||||
|
||||
<!-- PANEL CONTENT -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
|
||||
<!-- TOOLBAR: Above fixed -->
|
||||
@@ -53,6 +61,14 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
|
||||
|
||||
<!-- PANEL CONTENT -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
@@ -79,22 +95,24 @@
|
||||
|
||||
<!-- LEFT NAVBAR -->
|
||||
<ng-template #leftNavbar>
|
||||
<fuse-sidebar name="navbar"
|
||||
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
|
||||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
||||
<!-- RIGHT NAVBAR -->
|
||||
<ng-template #rightNavbar>
|
||||
<fuse-sidebar name="navbar" position="right"
|
||||
<fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
|
||||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / RIGHT NAVBAR -->
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../@fuse/scss/fuse";
|
||||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
vertical-layout-3 {
|
||||
display: flex;
|
||||
@@ -14,6 +14,7 @@ vertical-layout-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
|
||||
@@ -26,5 +26,5 @@ if ( environment.hmr )
|
||||
}
|
||||
else
|
||||
{
|
||||
bootstrap();
|
||||
bootstrap().catch(err => console.log(err));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user