(MultiLang) Added multi language support using @ngneat/transloco

(docs) Added docs about multi language
This commit is contained in:
sercan 2021-05-18 15:11:57 +03:00
parent 74c4dc2ad8
commit 59960af7a5
58 changed files with 729 additions and 505 deletions

View File

@ -2,6 +2,9 @@
// @ 3rd party credits
// -----------------------------------------------------------------------------------------------------
// Flags
https://github.com/Yummygum/flagpack-core
// Icons
Material - https://material.io/tools/icons
Feather - https://feathericons.com/

334
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "@fuse/demo",
"version": "12.3.0",
"version": "13.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -453,7 +453,6 @@
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
"integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
"dev": true,
"requires": {
"@babel/highlight": "^7.12.13"
}
@ -748,8 +747,7 @@
"@babel/helper-validator-identifier": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
"integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==",
"dev": true
"integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
},
"@babel/helper-validator-option": {
"version": "7.12.17",
@ -784,7 +782,6 @@
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
"integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.14.0",
"chalk": "^2.0.0",
@ -1758,6 +1755,118 @@
"schema-utils": "^2.7.0"
}
},
"@ngneat/transloco": {
"version": "2.20.1",
"resolved": "https://registry.npmjs.org/@ngneat/transloco/-/transloco-2.20.1.tgz",
"integrity": "sha512-V5NQvjrjAKWgYuQzC1FW+fisqM5gzci+WxkOQYYz7GaSIdo5Be8XvB6GM0QDFHPSGIBzBSg8UBAEzo0zeg7T/g==",
"requires": {
"@ngneat/transloco-utils": "^1.0.6",
"flat": "5.0.2",
"lodash.kebabcase": "^4.1.1",
"ora": "^3.4.0",
"replace-in-file": "^4.1.2",
"tslib": "^1.9.0"
},
"dependencies": {
"ansi-regex": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
},
"cli-cursor": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
"integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
"requires": {
"restore-cursor": "^2.0.0"
}
},
"log-symbols": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
"integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
"requires": {
"chalk": "^2.0.1"
}
},
"mimic-fn": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
"integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
},
"onetime": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
"integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
"requires": {
"mimic-fn": "^1.0.0"
}
},
"ora": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz",
"integrity": "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==",
"requires": {
"chalk": "^2.4.2",
"cli-cursor": "^2.1.0",
"cli-spinners": "^2.0.0",
"log-symbols": "^2.2.0",
"strip-ansi": "^5.2.0",
"wcwidth": "^1.0.1"
}
},
"restore-cursor": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
"integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
"requires": {
"onetime": "^2.0.0",
"signal-exit": "^3.0.2"
}
},
"strip-ansi": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"requires": {
"ansi-regex": "^4.1.0"
}
},
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"@ngneat/transloco-utils": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@ngneat/transloco-utils/-/transloco-utils-1.1.2.tgz",
"integrity": "sha512-yljMAoRNr+qr1z+DTUlY98SWm/ldbssCNmI3tE+A1183ppYKcnpdfSJQKrx1rg4rmwNfyKyexlmZ6EubosqZ8A==",
"requires": {
"cosmiconfig": "6.0.0",
"tslib": "^1.9.0"
},
"dependencies": {
"cosmiconfig": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
"integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
"requires": {
"@types/parse-json": "^4.0.0",
"import-fresh": "^3.1.0",
"parse-json": "^5.0.0",
"path-type": "^4.0.0",
"yaml": "^1.7.2"
}
},
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"@ngtools/webpack": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-12.0.0.tgz",
@ -2043,8 +2152,7 @@
"@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
"dev": true
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
},
"@types/q": {
"version": "0.0.32",
@ -2498,14 +2606,12 @@
"ansi-regex": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
"dev": true
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
},
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dev": true,
"requires": {
"color-convert": "^1.9.0"
}
@ -2848,8 +2954,7 @@
"balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
},
"base": {
"version": "0.11.2",
@ -3046,7 +3151,6 @@
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dev": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -3201,8 +3305,7 @@
"callsites": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
"dev": true
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
},
"camelcase": {
"version": "6.2.0",
@ -3250,7 +3353,6 @@
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
@ -3347,8 +3449,7 @@
"cli-spinners": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz",
"integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==",
"dev": true
"integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q=="
},
"cli-width": {
"version": "3.0.0",
@ -3464,7 +3565,6 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
@ -3472,8 +3572,7 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-string": {
"version": "1.5.5",
@ -3573,8 +3672,7 @@
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"dev": true
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
},
"connect": {
"version": "3.7.0",
@ -4357,8 +4455,7 @@
"decamelize": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
"dev": true
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
},
"decode-uri-component": {
"version": "0.2.0",
@ -4399,7 +4496,6 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
"integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
"dev": true,
"requires": {
"clone": "^1.0.2"
},
@ -4407,8 +4503,7 @@
"clone": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
"dev": true
"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
}
}
},
@ -4732,8 +4827,7 @@
"emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
},
"emoji-toolkit": {
"version": "6.5.1",
@ -4877,7 +4971,6 @@
"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"
}
@ -4953,8 +5046,7 @@
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
"dev": true
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
},
"eslint": {
"version": "7.26.0",
@ -5880,12 +5972,16 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
"dev": true,
"requires": {
"locate-path": "^5.0.0",
"path-exists": "^4.0.0"
}
},
"flat": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
"integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ=="
},
"flat-cache": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@ -5993,8 +6089,7 @@
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
},
"fsevents": {
"version": "2.3.2",
@ -6076,8 +6171,7 @@
"get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
"dev": true
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
},
"get-intrinsic": {
"version": "1.1.1",
@ -6117,7 +6211,6 @@
"version": "7.1.7",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
"integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
@ -6289,8 +6382,7 @@
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
},
"has-symbols": {
"version": "1.0.2",
@ -6712,7 +6804,6 @@
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
"dev": true,
"requires": {
"parent-module": "^1.0.0",
"resolve-from": "^4.0.0"
@ -6801,7 +6892,6 @@
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
"dev": true,
"requires": {
"once": "^1.3.0",
"wrappy": "1"
@ -6810,8 +6900,7 @@
"inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
"dev": true
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"ini": {
"version": "2.0.0",
@ -6956,8 +7045,7 @@
"is-arrayish": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
"integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
"dev": true
"integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
},
"is-bigint": {
"version": "1.0.2",
@ -7097,8 +7185,7 @@
"is-fullwidth-code-point": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
"dev": true
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
},
"is-glob": {
"version": "4.0.1",
@ -7431,8 +7518,7 @@
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"js-yaml": {
"version": "3.14.1",
@ -7471,8 +7557,7 @@
"json-parse-even-better-errors": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
"dev": true
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
},
"json-schema": {
"version": "0.2.3",
@ -7876,8 +7961,7 @@
"lines-and-columns": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
"integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
"dev": true
"integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
},
"load-json-file": {
"version": "4.0.0",
@ -7930,7 +8014,6 @@
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
"dev": true,
"requires": {
"p-locate": "^4.1.0"
}
@ -7970,6 +8053,11 @@
"integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
"dev": true
},
"lodash.kebabcase": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
"integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -8392,7 +8480,6 @@
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -9017,7 +9104,6 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"requires": {
"wrappy": "1"
}
@ -9172,7 +9258,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
"dev": true,
"requires": {
"p-try": "^2.0.0"
}
@ -9181,7 +9266,6 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
"dev": true,
"requires": {
"p-limit": "^2.2.0"
}
@ -9207,8 +9291,7 @@
"p-try": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
"dev": true
"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
},
"pacote": {
"version": "11.3.2",
@ -9252,7 +9335,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
"dev": true,
"requires": {
"callsites": "^3.0.0"
}
@ -9290,7 +9372,6 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.0.0",
"error-ex": "^1.3.1",
@ -9383,14 +9464,12 @@
"path-exists": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
"dev": true
"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
},
"path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
},
"path-is-inside": {
"version": "1.0.2",
@ -9439,8 +9518,7 @@
"path-type": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
"dev": true
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
},
"perfect-scrollbar": {
"version": "1.5.1",
@ -12076,6 +12154,91 @@
"integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
"dev": true
},
"replace-in-file": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-4.3.1.tgz",
"integrity": "sha512-FqVvfmpqGTD2JRGI1JjJ86b24P17x/WWwGdxExeyJxnh/2rVQz2+jXfD1507UnnhEQw092X0u0DPCBf1WC4ooQ==",
"requires": {
"chalk": "^2.4.2",
"glob": "^7.1.6",
"yargs": "^15.0.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"requires": {
"color-convert": "^2.0.1"
}
},
"camelcase": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
},
"cliui": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^6.2.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"wrap-ansi": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
"requires": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
}
},
"yargs": {
"version": "15.4.1",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
"requires": {
"cliui": "^6.0.0",
"decamelize": "^1.2.0",
"find-up": "^4.1.0",
"get-caller-file": "^2.0.1",
"require-directory": "^2.1.1",
"require-main-filename": "^2.0.0",
"set-blocking": "^2.0.0",
"string-width": "^4.2.0",
"which-module": "^2.0.0",
"y18n": "^4.0.0",
"yargs-parser": "^18.1.2"
}
},
"yargs-parser": {
"version": "18.1.3",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
"requires": {
"camelcase": "^5.0.0",
"decamelize": "^1.2.0"
}
}
}
},
"request": {
"version": "2.88.2",
"resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@ -12115,8 +12278,7 @@
"require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
"dev": true
"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
},
"require-from-string": {
"version": "2.0.2",
@ -12127,8 +12289,7 @@
"require-main-filename": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
"dev": true
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
},
"requires-port": {
"version": "1.0.0",
@ -12166,8 +12327,7 @@
"resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
},
"resolve-url": {
"version": "0.2.1",
@ -12621,8 +12781,7 @@
"set-blocking": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
"dev": true
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
},
"set-immediate-shim": {
"version": "1.0.1",
@ -12686,8 +12845,7 @@
"signal-exit": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
"dev": true
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
},
"simple-swizzle": {
"version": "0.2.2",
@ -13223,7 +13381,6 @@
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
"integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
"dev": true,
"requires": {
"emoji-regex": "^8.0.0",
"is-fullwidth-code-point": "^3.0.0",
@ -13271,7 +13428,6 @@
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
"integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
"dev": true,
"requires": {
"ansi-regex": "^5.0.0"
}
@ -13399,7 +13555,6 @@
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
@ -14265,7 +14420,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
"integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
"dev": true,
"requires": {
"defaults": "^1.0.3"
}
@ -14894,8 +15048,7 @@
"which-module": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
"dev": true
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
},
"wide-align": {
"version": "1.1.3",
@ -15005,8 +15158,7 @@
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
},
"ws": {
"version": "6.2.1",
@ -15042,8 +15194,7 @@
"y18n": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
"dev": true
"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
},
"yallist": {
"version": "4.0.0",
@ -15054,8 +15205,7 @@
"yaml": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
"dev": true
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
},
"yargs": {
"version": "13.3.2",

View File

@ -31,6 +31,7 @@
"@fullcalendar/moment": "4.4.2",
"@fullcalendar/rrule": "4.4.2",
"@fullcalendar/timegrid": "4.4.2",
"@ngneat/transloco": "2.20.1",
"apexcharts": "3.26.2",
"crypto-js": "3.3.0",
"highlight.js": "10.7.2",

View File

@ -1,11 +1,13 @@
import { NgModule, Optional, SkipSelf } from '@angular/core';
import { AuthModule } from 'app/core/auth/auth.module';
import { IconsModule } from 'app/core/icons/icons.module';
import { TranslocoCoreModule } from 'app/core/transloco/transloco.module';
@NgModule({
imports: [
AuthModule,
IconsModule
IconsModule,
TranslocoCoreModule
]
})
export class CoreModule

View File

@ -0,0 +1,32 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Translation, TranslocoLoader } from '@ngneat/transloco';
@Injectable({
providedIn: 'root'
})
export class TranslocoHttpLoader implements TranslocoLoader
{
/**
* Constructor
*/
constructor(
private _httpClient: HttpClient)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get translation
*
* @param lang
*/
getTranslation(lang: string): Observable<Translation>
{
return this._httpClient.get<Translation>(`/assets/i18n/${lang}.json`);
}
}

View File

@ -0,0 +1,50 @@
import { Translation, TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { environment } from 'environments/environment';
import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
@NgModule({
exports : [
TranslocoModule
],
providers: [
{
// Provide the default Transloco configuration
provide : TRANSLOCO_CONFIG,
useValue: translocoConfig({
availableLangs : [
{
id : 'en',
label: 'English'
},
{
id : 'tr',
label: 'Turkish'
}
],
defaultLang : 'en',
reRenderOnLangChange: true,
prodMode : environment.production
})
},
{
// Provide the default Transloco loader
provide : TRANSLOCO_LOADER,
useClass: TranslocoHttpLoader
},
{
// Preload the default language before the app starts to prevent empty/jumping content
provide : APP_INITIALIZER,
deps : [TranslocoService],
useFactory: (translocoService: TranslocoService): any => (): Promise<Translation> => {
const defaultLang = translocoService.getDefaultLang();
translocoService.setActiveLang(defaultLang);
return translocoService.load(defaultLang).toPromise();
},
multi : true
}
]
})
export class TranslocoCoreModule
{
}

View File

@ -0,0 +1,35 @@
<!-- Button -->
<button
mat-icon-button
[matMenuTriggerFor]="languages">
<ng-container *ngTemplateOutlet="flagImage; context: {$implicit: activeLang}"></ng-container>
</button>
<!-- Language menu -->
<mat-menu
[xPosition]="'before'"
#languages="matMenu">
<ng-container *ngFor="let lang of availableLangs">
<button
mat-menu-item
(click)="setActiveLang(lang.id)">
<span class="flex items-center">
<ng-container *ngTemplateOutlet="flagImage; context: {$implicit: lang.id}"></ng-container>
<span class="ml-3">{{lang.label}}</span>
</span>
</button>
</ng-container>
</mat-menu>
<!-- Flag image template -->
<ng-template
let-lang
#flagImage>
<span class="relative w-6 shadow rounded-sm overflow-hidden">
<span class="absolute inset-0 ring-1 ring-inset ring-black ring-opacity-10"></span>
<img
class="w-full"
[src]="'assets/images/flags/' + flagCodes[lang].toUpperCase() + '.svg'"
[alt]="'Flag image for ' + lang">
</span>
</ng-template>

View File

@ -0,0 +1,142 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { take } from 'rxjs/operators';
import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
@Component({
selector : 'language',
templateUrl : './language.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'language'
})
export class LanguageComponent implements OnInit, OnDestroy
{
availableLangs: AvailableLangs;
activeLang: string;
flagCodes: any;
/**
* Constructor
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService,
private _translocoService: TranslocoService
)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Get the available languages from transloco
this.availableLangs = this._translocoService.getAvailableLangs();
// Subscribe to language changes
this._translocoService.langChanges$.subscribe((activeLang) => {
// Get the active lang
this.activeLang = activeLang;
// Update the navigation
this._updateNavigation(activeLang);
});
// Set the country iso codes for languages for flags
this.flagCodes = {
'en': 'us',
'tr': 'tr'
};
}
/**
* On destroy
*/
ngOnDestroy(): void
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Set the active lang
*
* @param lang
*/
setActiveLang(lang: string): void
{
// Set the active lang
this._translocoService.setActiveLang(lang);
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Update the navigation
*
* @param lang
* @private
*/
private _updateNavigation(lang: string): void
{
// For the demonstration purposes, we will only update the Dashboard names
// from the navigation but you can do a full swap and change the entire
// navigation data.
//
// You can import the data from a file or request it from your backend,
// it's up to you.
// Get the component -> navigation data -> item
const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>('mainNavigation');
// Return if the navigation component does not exist
if ( !navComponent )
{
return null;
}
// Get the flat navigation data
const navigation = navComponent.navigation;
// Get the Project dashboard item and update its title
const projectDashboardItem = this._fuseNavigationService.getItem('dashboards.project', navigation);
if ( projectDashboardItem )
{
this._translocoService.selectTranslate('Project').pipe(take(1))
.subscribe((translation) => {
// Set the title
projectDashboardItem.title = translation;
// Refresh the navigation component
navComponent.refresh();
});
}
// Get the Analytics dashboard item and update its title
const analyticsDashboardItem = this._fuseNavigationService.getItem('dashboards.analytics', navigation);
if ( analyticsDashboardItem )
{
this._translocoService.selectTranslate('Analytics').pipe(take(1))
.subscribe((translation) => {
// Set the title
analyticsDashboardItem.title = translation;
// Refresh the navigation component
navComponent.refresh();
});
}
}
}

View File

@ -0,0 +1,24 @@
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { LanguageComponent } from 'app/layout/common/language/language.component';
import { SharedModule } from 'app/shared/shared.module';
@NgModule({
declarations: [
LanguageComponent
],
imports : [
MatButtonModule,
MatIconModule,
MatMenuModule,
SharedModule
],
exports : [
LanguageComponent
]
})
export class LanguageModule
{
}

View File

@ -63,6 +63,7 @@
</ng-container>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>

View File

@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
@ -28,6 +29,7 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
MessagesModule,
NotificationsModule,
SearchModule,

View File

@ -46,6 +46,7 @@
</ng-container>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>

View File

@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
@ -28,6 +29,7 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
MessagesModule,
NotificationsModule,
SearchModule,

View File

@ -52,6 +52,7 @@
</ng-container>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>

View File

@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
@ -28,6 +29,7 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
MessagesModule,
NotificationsModule,
SearchModule,

View File

@ -55,6 +55,7 @@
</ng-container>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>

View File

@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
@ -28,6 +29,7 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
MessagesModule,
NotificationsModule,
SearchModule,

View File

@ -36,6 +36,7 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>

View File

@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
@ -28,6 +29,7 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
MessagesModule,
NotificationsModule,
SearchModule,

View File

@ -66,6 +66,7 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>

View File

@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
@ -28,6 +29,7 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
MessagesModule,
NotificationsModule,
SearchModule,

View File

@ -31,6 +31,7 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>

View File

@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
@ -28,6 +29,7 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
MessagesModule,
NotificationsModule,
SearchModule,

View File

@ -40,6 +40,7 @@
</div>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>

View File

@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
@ -28,6 +29,7 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
MessagesModule,
NotificationsModule,
SearchModule,

View File

@ -45,6 +45,7 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>

View File

@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
@ -28,6 +29,7 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
MessagesModule,
NotificationsModule,
SearchModule,

View File

@ -32,6 +32,7 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>

View File

@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
@ -28,6 +29,7 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
MessagesModule,
NotificationsModule,
SearchModule,

View File

@ -12,7 +12,9 @@
src="assets/images/avatars/brian-hughes.jpg">
</div>
<div class="flex flex-col min-w-0 ml-4">
<div class="text-2xl md:text-5xl font-semibold tracking-tight leading-7 md:leading-10 truncate">Welcome back, Brian!</div>
<ng-container *transloco="let t">
<div class="text-2xl md:text-5xl font-semibold tracking-tight leading-7 md:leading-snug truncate">{{t('welcome-back')}}, Brian!</div>
</ng-container>
<div class="flex items-center">
<mat-icon
class="icon-size-5"

View File

@ -10,6 +10,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { TranslocoModule } from '@ngneat/transloco';
import { NgApexchartsModule } from 'ng-apexcharts';
import { SharedModule } from 'app/shared/shared.module';
import { ProjectComponent } from 'app/modules/admin/dashboards/project/project.component';
@ -32,6 +33,7 @@ import { projectRoutes } from 'app/modules/admin/dashboards/project/project.rout
MatTableModule,
MatTabsModule,
NgApexchartsModule,
TranslocoModule,
SharedModule
]
})

View File

@ -109,23 +109,6 @@
in Javascript.
</p>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg"
[routerLink]="['../../customization/splash-screen']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Splash Screen</div>
</div>
</a>
</div>
</div>
</div>

View File

@ -156,33 +156,6 @@
</textarea>
<!-- @formatter:on -->
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../theming']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Theming</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../splash-screen']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Splash Screen</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -0,0 +1,76 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- Header -->
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
<div class="flex-1 min-w-0">
<!-- Breadcrumbs -->
<div class="flex flex-wrap items-center font-medium">
<div>
<a class="whitespace-nowrap text-primary-500">Documentation</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<a class="ml-1 text-primary-500">Guides</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<span class="ml-1 text-secondary">Customization</span>
</div>
</div>
<!-- Title -->
<div class="mt-2">
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
Multi Language
</h2>
</div>
</div>
<button
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
mat-icon-button
(click)="toggleDrawer()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button>
</div>
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
<p>
Fuse uses <strong>Transloco</strong> library for the multi language support.
</p>
<h2>Official documentation</h2>
<p>
You can access the official documentation of <strong>Transloco</strong> over here: https://ngneat.github.io/transloco/docs/installation
</p>
<p>
Other than the initial setup, Fuse doesn't introduce anything to <strong>Transloco</strong> or change any of its functionality. You can follow the official
documentation to get started.
</p>
<h2>Translating the navigation</h2>
<p>
Since <code>FuseNavigation</code> supports runtime data swapping, you can replace the navigation data either partially or completely when the language changes.
The <strong>LanguageComponent</strong> is a suitable place to do this and it's located at <code>src/app/layout/common/language</code>.
</p>
<h2>Removing Transloco</h2>
<p>
If you don't need multi language support in your project, you may remove the <strong>Transloco</strong> support. Here's a step by step guide to remove
the <strong>Transloco</strong> from Fuse:
</p>
<ol>
<li>Navigate to <code>src/app/core/core.module.ts</code> file and remove imports of <code>TranslocoCoreModule</code></li>
<li>Remove the <code>src/app/core/transloco</code> directory</li>
<li>Do a project wide search for <code>&lt;language&gt;&lt;/language&gt;</code> and remove all instances</li>
<li>Do a project wide search for <code>LanguageModule</code> and remove all imports</li>
<li>Remove the <code>src/app/layout/common/language</code> directory</li>
<li>Finally navigate to the <code>package.json</code> file, remove the <strong>"@ngneat/transloco"</strong> from dependencies list and run <code>npm install</code> command</li>
</ol>
</div>
</div>

View File

@ -0,0 +1,30 @@
import { Component } from '@angular/core';
import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component';
@Component({
selector : 'multi-language',
templateUrl: './multi-language.html',
styles : ['']
})
export class MultiLanguageCustomizationComponent
{
/**
* Constructor
*/
constructor(private _guidesComponent: GuidesComponent)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle the drawer
*/
toggleDrawer(): void
{
// Toggle the drawer
this._guidesComponent.matDrawer.toggle();
}
}

View File

@ -50,33 +50,6 @@
All page layouts can be found within the Demo app, you can try them over there and choose one that fits your needs.
</p>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../theme-layouts']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Theme Layouts</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../tailwindcss']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">TailwindCSS</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -109,33 +109,6 @@
</textarea>
<!-- @formatter:on -->
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../component-theming']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Component Theming</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../../authentication/jwt']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">JWT</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -85,33 +85,6 @@
</a>
</p>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../page-layouts']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Page Layouts</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../theming']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Theming</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -106,33 +106,6 @@
removing the <code>LayoutComponent</code> and using the individual layouts by themselves is not possible.
</p>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../../development/updating']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Updating</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../page-layouts']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Page Layouts</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -352,33 +352,6 @@
schemes depending on the user's operating system's setting.
</p>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../tailwindcss']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">TailwindCSS</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../component-theming']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Component Theming</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -148,33 +148,6 @@
layouts include common components like <strong>Navigation</strong>, <strong>Header</strong> and <strong>Footer</strong>.
</p>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../directory-structure']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Directory Structure</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../starter-kit']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Starter Kit</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -69,33 +69,6 @@
you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again.
</fuse-alert>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../starter-kit']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Starter Kit</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../updating']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Updating</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -304,33 +304,6 @@
</li>
</ul>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../../getting-started/serving']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Serving</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../component-structure']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Component Structure</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -48,33 +48,6 @@
lot more than usual.
</p>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../component-structure']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Component Structure</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../deployment']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Deployment</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -63,33 +63,6 @@
setup or merge (and resolve conflicts) through Github. Every release is tagged and available under the <strong>Releases</strong> tab of Fuse's Github repo.
</p>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../deployment']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Deployment</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../../customization/theme-layouts']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Theme Layouts</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -121,33 +121,6 @@
</div>
</fuse-alert>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../prerequisites']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Prerequisites</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../serving']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Serving</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -84,22 +84,6 @@
</li>
</ul>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg"
[routerLink]="['../prerequisites']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Prerequisites</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -79,33 +79,6 @@
npm install -g @angular/cli
</textarea>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../introduction']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Introduction</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../installation']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Installation</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -71,33 +71,6 @@
you may have an older Node.js version, try updating your Node.js to the latest LTS version and then try again.
</fuse-alert>
<!-- Nav -->
<div class="flex items-center xs:flex-col xs:items-stretch w-full mt-16">
<!-- Prev -->
<a
class="bg-card flex items-center justify-between flex-1 mr-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:mr-0 xs:mt-4 xs:order-2"
[routerLink]="['../installation']">
<mat-icon [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
<div>
<div class="text-md text-secondary text-right">Previous</div>
<div class="mt-1 text-lg font-medium">Installation</div>
</div>
</a>
<!-- Next -->
<a
class="bg-card flex items-center justify-between flex-1 ml-4 px-6 py-4 rounded no-underline transition-shadow ease-in-out duration-150 shadow gt-xs:hover:shadow-lg xs:ml-0 xs:order-1"
[routerLink]="['../../development/directory-structure']">
<div>
<div class="text-md text-secondary">Next</div>
<div class="mt-1 text-lg font-medium">Directory Structure</div>
</div>
<mat-icon [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
</a>
</div>
</div>
</div>

View File

@ -137,6 +137,12 @@ export class GuidesComponent implements OnInit, OnDestroy
title: 'Splash screen',
type : 'basic',
link : '/docs/guides/customization/splash-screen'
},
{
id : 'customization.multi-language',
title: 'Multi language',
type : 'basic',
link : '/docs/guides/customization/multi-language'
}
]
},

View File

@ -25,6 +25,7 @@ import { TailwindCSSComponent } from 'app/modules/admin/docs/guides/customizatio
import { ThemingComponent } from 'app/modules/admin/docs/guides/customization/theming/theming';
import { ComponentThemingComponent } from 'app/modules/admin/docs/guides/customization/component-theming/component-theming';
import { SplashScreenCustomizationComponent } from 'app/modules/admin/docs/guides/customization/splash-screen/splash-screen';
import { MultiLanguageCustomizationComponent } from 'app/modules/admin/docs/guides/customization/multi-language/multi-language';
import { JwtComponent } from 'app/modules/admin/docs/guides/authentication/jwt/jwt';
import { guidesRoutes } from 'app/modules/admin/docs/guides/guides.routing';
@ -46,6 +47,7 @@ import { guidesRoutes } from 'app/modules/admin/docs/guides/guides.routing';
ThemingComponent,
ComponentThemingComponent,
SplashScreenCustomizationComponent,
MultiLanguageCustomizationComponent,
JwtComponent
],
imports : [

View File

@ -15,6 +15,7 @@ import { TailwindCSSComponent } from 'app/modules/admin/docs/guides/customizatio
import { ThemingComponent } from 'app/modules/admin/docs/guides/customization/theming/theming';
import { ComponentThemingComponent } from 'app/modules/admin/docs/guides/customization/component-theming/component-theming';
import { SplashScreenCustomizationComponent } from 'app/modules/admin/docs/guides/customization/splash-screen/splash-screen';
import { MultiLanguageCustomizationComponent } from 'app/modules/admin/docs/guides/customization/multi-language/multi-language';
import { JwtComponent } from 'app/modules/admin/docs/guides/authentication/jwt/jwt';
export const guidesRoutes: Route[] = [
@ -114,6 +115,10 @@ export const guidesRoutes: Route[] = [
{
path : 'splash-screen',
component: SplashScreenCustomizationComponent
},
{
path : 'multi-language',
component: MultiLanguageCustomizationComponent
}
]
},

5
src/assets/i18n/en.json Normal file
View File

@ -0,0 +1,5 @@
{
"welcome-back": "Welcome back",
"Project": "Project",
"Analytics": "Analytics"
}

5
src/assets/i18n/tr.json Normal file
View File

@ -0,0 +1,5 @@
{
"welcome-back": "Hoşgeldin",
"Project": "Proje",
"Analytics": "Analitik"
}

View File

@ -0,0 +1,14 @@
<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="15">
<rect width="20" height="15" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V15H20V0H0Z" fill="#E31D1C"/>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="15">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V15H20V0H0Z" fill="white"/>
</mask>
<g mask="url(#mask1)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0159 10.0709C8.67757 9.7412 7.62937 8.621 7.64153 6.97891C7.65292 5.44178 8.58358 4.1425 10.0548 3.79077C11.526 3.43904 12.8213 4.18567 12.8213 4.18567C12.4147 3.22579 11.0021 2.55145 9.84394 2.55339C7.68818 2.557 5.39013 4.30527 5.37032 6.97891C5.34978 9.75078 7.83119 11.3294 10.0136 11.3257C11.7631 11.3228 12.593 10.1258 12.7649 9.61663C12.7649 9.61663 11.3542 10.4006 10.0159 10.0709ZM13.0646 6.45407L11.7312 6.94386L13.2357 7.47461L13.21 9.06047L14.2014 7.87072L15.8389 7.98971L14.5412 6.87424L15.3932 5.68436L14.006 6.15122L13.0145 5.04898L13.0646 6.45407Z" fill="#F7FCFF"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,11 @@
<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="15">
<rect width="20" height="15" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H20V15H0V0Z" fill="#E31D1C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.25V2.5H20V1.25H0ZM0 3.75V5H20V3.75H0ZM0 7.5V6.25H20V7.5H0ZM0 8.75V10H20V8.75H0ZM0 12.5V11.25H20V12.5H0ZM0 15V13.75H20V15H0Z" fill="#F7FCFF"/>
<rect width="11.25" height="8.75" fill="#2E42A5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.3 2.71718L1.9624 2.25577L2.47623 2.62569H2.1853L2.77364 3.14606L2.57492 3.87569H2.26369L1.96148 3.20557L1.70375 3.87569H0.935303L1.52364 4.39606L1.3 5.21719L1.9624 4.75577L2.47623 5.12569H2.1853L2.77364 5.64606L2.57492 6.37569H2.26369L1.96148 5.70557L1.70375 6.37569H0.935303L1.52364 6.89606L1.3 7.71719L1.9624 7.25577L2.60332 7.71719L2.40406 6.89606L2.91877 6.37569H2.68136L3.2124 6.00577L3.72623 6.37569H3.4353L4.02364 6.89606L3.8 7.71719L4.4624 7.25577L5.10332 7.71719L4.90406 6.89606L5.41877 6.37569H5.18136L5.7124 6.00577L6.22623 6.37569H5.9353L6.52364 6.89606L6.3 7.71719L6.9624 7.25577L7.60332 7.71719L7.40406 6.89606L7.91877 6.37569H7.68136L8.2124 6.00577L8.72623 6.37569H8.4353L9.02364 6.89606L8.8 7.71719L9.4624 7.25577L10.1033 7.71719L9.90406 6.89606L10.4188 6.37569H9.76369L9.46148 5.70557L9.20375 6.37569H8.83112L8.65406 5.64606L9.16877 5.12569H8.93136L9.4624 4.75577L10.1033 5.21719L9.90406 4.39606L10.4188 3.87569H9.76369L9.46148 3.20557L9.20375 3.87569H8.83112L8.65406 3.14606L9.16877 2.62569H8.93136L9.4624 2.25577L10.1033 2.71718L9.90406 1.89606L10.4188 1.37569H9.76369L9.46148 0.705566L9.20375 1.37569H8.4353L9.02364 1.89606L8.82492 2.62569H8.51369L8.21148 1.95557L7.95375 2.62569H7.58112L7.40406 1.89606L7.91877 1.37569H7.26369L6.96148 0.705566L6.70375 1.37569H5.9353L6.52364 1.89606L6.32492 2.62569H6.01369L5.71148 1.95557L5.45375 2.62569H5.08112L4.90406 1.89606L5.41877 1.37569H4.76369L4.46148 0.705566L4.20375 1.37569H3.4353L4.02364 1.89606L3.82492 2.62569H3.51369L3.21148 1.95557L2.95375 2.62569H2.58112L2.40406 1.89606L2.91877 1.37569H2.26369L1.96148 0.705566L1.70375 1.37569H0.935303L1.52364 1.89606L1.3 2.71718ZM8.82492 5.12569L9.02364 4.39606L8.4353 3.87569H8.72623L8.2124 3.50577L7.68136 3.87569H7.91877L7.40406 4.39606L7.58112 5.12569H7.95375L8.21148 4.45557L8.51369 5.12569H8.82492ZM7.47623 5.12569L6.9624 4.75577L6.43136 5.12569H6.66877L6.15406 5.64606L6.33112 6.37569H6.70375L6.96148 5.70557L7.26369 6.37569H7.57492L7.77364 5.64606L7.1853 5.12569H7.47623ZM5.27364 5.64606L5.07492 6.37569H4.76369L4.46148 5.70557L4.20375 6.37569H3.83112L3.65406 5.64606L4.16877 5.12569H3.93136L4.4624 4.75577L4.97623 5.12569H4.6853L5.27364 5.64606ZM5.45375 5.12569H5.08112L4.90406 4.39606L5.41877 3.87569H5.18136L5.7124 3.50577L6.22623 3.87569H5.9353L6.52364 4.39606L6.32492 5.12569H6.01369L5.71148 4.45557L5.45375 5.12569ZM3.82492 5.12569L4.02364 4.39606L3.4353 3.87569H3.72623L3.2124 3.50577L2.68136 3.87569H2.91877L2.40406 4.39606L2.58112 5.12569H2.95375L3.21148 4.45557L3.51369 5.12569H3.82492ZM7.77364 3.14606L7.57492 3.87569H7.26369L6.96148 3.20557L6.70375 3.87569H6.33112L6.15406 3.14606L6.66877 2.62569H6.43136L6.9624 2.25577L7.47623 2.62569H7.1853L7.77364 3.14606ZM4.97623 2.62569L4.4624 2.25577L3.93136 2.62569H4.16877L3.65406 3.14606L3.83112 3.87569H4.20375L4.46148 3.20557L4.76369 3.87569H5.07492L5.27364 3.14606L4.6853 2.62569H4.97623Z" fill="#F7FCFF"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1,5 @@
### Main repository of the flags ###
https://github.com/Yummygum/flagpack-core
### We used the medium (m) detailed SVGs which are located here ###
https://github.com/Yummygum/flagpack-core/tree/main/svg/m

3
transloco.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
rootTranslationsPath: 'src/assets/i18n/'
};