├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── README.md ├── angular.json ├── docs ├── 3rdpartylicenses.txt ├── assets │ ├── images │ │ ├── airdrop.png │ │ ├── app-store.png │ │ ├── apple-logo.png │ │ ├── applications.png │ │ ├── bluetooth.png │ │ ├── books.png │ │ ├── buy-me-a-coffee.png │ │ ├── calculator.png │ │ ├── chrome.png │ │ ├── contacts.png │ │ ├── desktop-background.jpg │ │ ├── desktop.png │ │ ├── dictionary.png │ │ ├── documents.png │ │ ├── downloads.png │ │ ├── facetime.png │ │ ├── find-my.png │ │ ├── finder.png │ │ ├── folder.png │ │ ├── garage-band.png │ │ ├── golf-ball.png │ │ ├── home.png │ │ ├── i-movies.png │ │ ├── icloud.png │ │ ├── keynote.png │ │ ├── launchpad.png │ │ ├── library.png │ │ ├── mail.png │ │ ├── messages.png │ │ ├── mission-control.png │ │ ├── music.png │ │ ├── network.png │ │ ├── notes.png │ │ ├── numbers.png │ │ ├── pages.png │ │ ├── photos.png │ │ ├── podcasts.png │ │ ├── preview.png │ │ ├── recents.png │ │ ├── reminders.png │ │ ├── safari.png │ │ ├── share-centre.png │ │ ├── siri.png │ │ ├── stock.png │ │ ├── system-preferences.png │ │ ├── terminal.png │ │ ├── trash-full.png │ │ ├── trash.png │ │ ├── tv.png │ │ └── voice-memos.png │ └── styles │ │ ├── _base.scss │ │ ├── _helpers.scss │ │ ├── _prime-ng-overrides.scss │ │ ├── _prime-ng.scss │ │ ├── _variables.scss │ │ └── styles.scss ├── color.dae87a04d07ca92b.png ├── favicon.ico └── hue.8b1818380241e6ac.png ├── karma.conf.js ├── package-lock.json ├── package.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.ts │ ├── app.module.ts │ ├── applications │ │ ├── applications-routing.module.ts │ │ ├── applications.module.ts │ │ ├── components │ │ │ ├── dialog-controls │ │ │ │ ├── dialog-controls.component.html │ │ │ │ ├── dialog-controls.component.scss │ │ │ │ └── dialog-controls.component.ts │ │ │ ├── dock │ │ │ │ ├── dock.component.html │ │ │ │ ├── dock.component.scss │ │ │ │ └── dock.component.ts │ │ │ ├── finder-sidebar │ │ │ │ ├── finder-sidebar.component.html │ │ │ │ ├── finder-sidebar.component.scss │ │ │ │ └── finder-sidebar.component.ts │ │ │ ├── folder-icon │ │ │ │ ├── folder-icon.component.html │ │ │ │ ├── folder-icon.component.scss │ │ │ │ └── folder-icon.component.ts │ │ │ ├── index.ts │ │ │ ├── menu │ │ │ │ ├── menu.component.html │ │ │ │ ├── menu.component.scss │ │ │ │ └── menu.component.ts │ │ │ ├── settings │ │ │ │ ├── airdrop-control │ │ │ │ │ ├── airdrop-control.component.html │ │ │ │ │ ├── airdrop-control.component.scss │ │ │ │ │ └── airdrop-control.component.ts │ │ │ │ ├── bluetooth-control │ │ │ │ │ ├── bluetooth-control.component.html │ │ │ │ │ ├── bluetooth-control.component.scss │ │ │ │ │ └── bluetooth-control.component.ts │ │ │ │ ├── focus-control │ │ │ │ │ ├── focus-control.component.html │ │ │ │ │ ├── focus-control.component.scss │ │ │ │ │ └── focus-control.component.ts │ │ │ │ ├── index.ts │ │ │ │ ├── keyboard-brightness-control │ │ │ │ │ ├── keyboard-brightness-control.component.html │ │ │ │ │ ├── keyboard-brightness-control.component.scss │ │ │ │ │ └── keyboard-brightness-control.component.ts │ │ │ │ ├── music-control │ │ │ │ │ ├── music-control.component.html │ │ │ │ │ ├── music-control.component.scss │ │ │ │ │ └── music-control.component.ts │ │ │ │ ├── screen-mirroring-control │ │ │ │ │ ├── screen-mirroring-control.component.html │ │ │ │ │ ├── screen-mirroring-control.component.scss │ │ │ │ │ └── screen-mirroring-control.component.ts │ │ │ │ ├── settings.component.html │ │ │ │ ├── settings.component.scss │ │ │ │ ├── settings.component.ts │ │ │ │ ├── settings.module.ts │ │ │ │ └── wifi-control │ │ │ │ │ ├── wifi-control.component.html │ │ │ │ │ ├── wifi-control.component.scss │ │ │ │ │ └── wifi-control.component.ts │ │ │ ├── sidebar-group │ │ │ │ ├── sidebar-group.component.html │ │ │ │ ├── sidebar-group.component.scss │ │ │ │ └── sidebar-group.component.ts │ │ │ └── sidebar-item │ │ │ │ ├── sidebar-item.component.html │ │ │ │ ├── sidebar-item.component.scss │ │ │ │ └── sidebar-item.component.ts │ │ └── containers │ │ │ ├── desktop │ │ │ ├── desktop.component.html │ │ │ ├── desktop.component.scss │ │ │ └── desktop.component.ts │ │ │ ├── finder │ │ │ ├── finder.component.html │ │ │ ├── finder.component.scss │ │ │ └── finder.component.ts │ │ │ ├── folders │ │ │ ├── folders.component.html │ │ │ ├── folders.component.scss │ │ │ └── folders.component.ts │ │ │ ├── index.ts │ │ │ ├── launchpad │ │ │ ├── launchpad.component.html │ │ │ ├── launchpad.component.scss │ │ │ └── launchpad.component.ts │ │ │ ├── spotlight │ │ │ ├── spotlight.component.html │ │ │ ├── spotlight.component.scss │ │ │ └── spotlight.component.ts │ │ │ ├── terminal │ │ │ ├── terminal.component.html │ │ │ ├── terminal.component.scss │ │ │ └── terminal.component.ts │ │ │ └── trash │ │ │ ├── trash.component.html │ │ │ ├── trash.component.scss │ │ │ └── trash.component.ts │ ├── core │ │ ├── boot │ │ │ ├── boot.component.html │ │ │ ├── boot.component.scss │ │ │ └── boot.component.ts │ │ ├── core.module.ts │ │ ├── login │ │ │ ├── login.component.html │ │ │ ├── login.component.scss │ │ │ ├── login.component.spec.ts │ │ │ └── login.component.ts │ │ └── machine-controls │ │ │ ├── machine-controls.component.html │ │ │ ├── machine-controls.component.scss │ │ │ └── machine-controls.component.ts │ ├── shared-ui │ │ └── shared-ui.module.ts │ └── shared │ │ ├── components │ │ ├── clock │ │ │ ├── clock.component.html │ │ │ ├── clock.component.scss │ │ │ └── clock.component.ts │ │ └── context-menu │ │ │ ├── context-menu.component.html │ │ │ ├── context-menu.component.scss │ │ │ └── context-menu.component.ts │ │ ├── config │ │ ├── applications.ts │ │ ├── dock-items.ts │ │ └── terminal-command.ts │ │ ├── models │ │ ├── folder-selection.ts │ │ ├── folder-type.ts │ │ ├── folder.ts │ │ ├── sidebar-group.ts │ │ └── sidebar-item.ts │ │ ├── services │ │ └── window.service.ts │ │ ├── shared.module.ts │ │ └── store │ │ ├── my-store.ts │ │ └── state.ts ├── assets │ ├── .gitkeep │ ├── images │ │ ├── airdrop.png │ │ ├── app-store.png │ │ ├── apple-logo.png │ │ ├── applications.png │ │ ├── bluetooth.png │ │ ├── books.png │ │ ├── buy-me-a-coffee.png │ │ ├── calculator.png │ │ ├── chrome.png │ │ ├── contacts.png │ │ ├── desktop-background.jpg │ │ ├── desktop.png │ │ ├── dictionary.png │ │ ├── documents.png │ │ ├── downloads.png │ │ ├── facetime.png │ │ ├── find-my.png │ │ ├── finder.png │ │ ├── folder.png │ │ ├── garage-band.png │ │ ├── golf-ball.png │ │ ├── home.png │ │ ├── i-movies.png │ │ ├── icloud.png │ │ ├── keynote.png │ │ ├── launchpad.png │ │ ├── library.png │ │ ├── mail.png │ │ ├── messages.png │ │ ├── mission-control.png │ │ ├── music.png │ │ ├── network.png │ │ ├── notes.png │ │ ├── numbers.png │ │ ├── pages.png │ │ ├── photos.png │ │ ├── podcasts.png │ │ ├── preview.png │ │ ├── recents.png │ │ ├── reminders.png │ │ ├── safari.png │ │ ├── share-centre.png │ │ ├── siri.png │ │ ├── stock.png │ │ ├── system-preferences.png │ │ ├── terminal.png │ │ ├── trash-full.png │ │ ├── trash.png │ │ ├── tv.png │ │ └── voice-memos.png │ └── styles │ │ ├── _base.scss │ │ ├── _helpers.scss │ │ ├── _prime-ng-overrides.scss │ │ ├── _prime-ng.scss │ │ ├── _variables.scss │ │ └── styles.scss ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts └── test.ts ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /.gitignore: -------------------------------------------------------------------------------- 1 | /.DS_Store 2 | /.angular 3 | /node_modules 4 | dist 5 | docs 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "singleQuote": true, 5 | "semi": true, 6 | "bracketSpacing": true, 7 | "arrowParens": "avoid", 8 | "trailingComma": "es5", 9 | "bracketSameLine": true, 10 | "printWidth": 80 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "[html]": { 3 | "editor.defaultFormatter": "esbenp.prettier-vscode" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Building a mac OS clone with Angular and PrimeNg 2 | 3 | Deployed application: https://mac-os-clone.web.app 4 | 5 | Full youtube tutorials available here: 6 | https://www.youtube.com/watch?v=ha9LY12yVrk&list=PLy1_OqPhc1wnCOjZHR8E6bEHshGPdlpQM 7 | 8 | Cloned apps: Menu, Finder, Trash, Terminal, Spotlight, Launchpad, Settings Menu, Login Screen, Boot Screen 9 | 10 | PrimeNg components used in this course: 11 | Menubar, Dock, Dialog, DynamicDialog, Terminal, 12 | ContextMenu, AutoComplete, ProgressBar, InputText 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "mac-os-clone": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss", 11 | "skipTests": true 12 | }, 13 | "@schematics/angular:class": { 14 | "skipTests": true 15 | }, 16 | "@schematics/angular:directive": { 17 | "skipTests": true 18 | }, 19 | "@schematics/angular:guard": { 20 | "skipTests": true 21 | }, 22 | "@schematics/angular:interceptor": { 23 | "skipTests": true 24 | }, 25 | "@schematics/angular:pipe": { 26 | "skipTests": true 27 | }, 28 | "@schematics/angular:resolver": { 29 | "skipTests": true 30 | }, 31 | "@schematics/angular:service": { 32 | "skipTests": true 33 | }, 34 | "@schematics/angular:application": { 35 | "strict": true 36 | } 37 | }, 38 | "root": "", 39 | "sourceRoot": "src", 40 | "prefix": "app", 41 | "architect": { 42 | "build": { 43 | "builder": "@angular-devkit/build-angular:application", 44 | "options": { 45 | "outputPath": { 46 | "base": "docs" 47 | }, 48 | "index": "src/index.html", 49 | "polyfills": [ 50 | "src/polyfills.ts" 51 | ], 52 | "tsConfig": "tsconfig.app.json", 53 | "inlineStyleLanguage": "scss", 54 | "stylePreprocessorOptions": { 55 | "includePaths": [ 56 | "src/assets/styles" 57 | ] 58 | }, 59 | "assets": [ 60 | "src/favicon.ico", 61 | "src/assets" 62 | ], 63 | "styles": [ 64 | "src/assets/styles/styles.scss" 65 | ], 66 | "scripts": [], 67 | "browser": "src/main.ts" 68 | }, 69 | "configurations": { 70 | "production": { 71 | "budgets": [ 72 | { 73 | "type": "initial", 74 | "maximumWarning": "500kb", 75 | "maximumError": "1.5mb" 76 | }, 77 | { 78 | "type": "anyComponentStyle", 79 | "maximumWarning": "2kb", 80 | "maximumError": "4kb" 81 | } 82 | ], 83 | "fileReplacements": [ 84 | { 85 | "replace": "src/environments/environment.ts", 86 | "with": "src/environments/environment.prod.ts" 87 | } 88 | ], 89 | "outputHashing": "all" 90 | }, 91 | "development": { 92 | "optimization": false, 93 | "extractLicenses": false, 94 | "sourceMap": true, 95 | "namedChunks": true 96 | } 97 | }, 98 | "defaultConfiguration": "production" 99 | }, 100 | "serve": { 101 | "builder": "@angular-devkit/build-angular:dev-server", 102 | "configurations": { 103 | "production": { 104 | "buildTarget": "mac-os-clone:build:production" 105 | }, 106 | "development": { 107 | "buildTarget": "mac-os-clone:build:development" 108 | } 109 | }, 110 | "defaultConfiguration": "development" 111 | }, 112 | "extract-i18n": { 113 | "builder": "@angular-devkit/build-angular:extract-i18n", 114 | "options": { 115 | "buildTarget": "mac-os-clone:build" 116 | } 117 | }, 118 | "test": { 119 | "builder": "@angular-devkit/build-angular:karma", 120 | "options": { 121 | "main": "src/test.ts", 122 | "polyfills": "src/polyfills.ts", 123 | "tsConfig": "tsconfig.spec.json", 124 | "karmaConfig": "karma.conf.js", 125 | "inlineStyleLanguage": "scss", 126 | "assets": [ 127 | "src/favicon.ico", 128 | "src/assets" 129 | ], 130 | "styles": [ 131 | "src/styles.scss" 132 | ], 133 | "scripts": [] 134 | } 135 | } 136 | } 137 | } 138 | }, 139 | "cli": { 140 | "analytics": false 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /docs/3rdpartylicenses.txt: -------------------------------------------------------------------------------- 1 | @angular/animations 2 | MIT 3 | 4 | @angular/common 5 | MIT 6 | 7 | @angular/core 8 | MIT 9 | 10 | @angular/forms 11 | MIT 12 | 13 | @angular/platform-browser 14 | MIT 15 | 16 | @angular/router 17 | MIT 18 | 19 | primeflex 20 | MIT 21 | The MIT License (MIT) 22 | 23 | Copyright (c) 2016-2023 PrimeTek 24 | 25 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 26 | 27 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 28 | 29 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 30 | 31 | primeicons 32 | MIT 33 | MIT License 34 | 35 | Copyright (c) 2018-2021 PrimeTek 36 | 37 | Permission is hereby granted, free of charge, to any person obtaining a copy 38 | of this software and associated documentation files (the "Software"), to deal 39 | in the Software without restriction, including without limitation the rights 40 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 41 | copies of the Software, and to permit persons to whom the Software is 42 | furnished to do so, subject to the following conditions: 43 | 44 | The above copyright notice and this permission notice shall be included in all 45 | copies or substantial portions of the Software. 46 | 47 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 48 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 49 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 50 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 51 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 52 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 53 | SOFTWARE. 54 | 55 | 56 | primeng 57 | MIT 58 | 59 | rxjs 60 | Apache-2.0 61 | Apache License 62 | Version 2.0, January 2004 63 | http://www.apache.org/licenses/ 64 | 65 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 66 | 67 | 1. Definitions. 68 | 69 | "License" shall mean the terms and conditions for use, reproduction, 70 | and distribution as defined by Sections 1 through 9 of this document. 71 | 72 | "Licensor" shall mean the copyright owner or entity authorized by 73 | the copyright owner that is granting the License. 74 | 75 | "Legal Entity" shall mean the union of the acting entity and all 76 | other entities that control, are controlled by, or are under common 77 | control with that entity. For the purposes of this definition, 78 | "control" means (i) the power, direct or indirect, to cause the 79 | direction or management of such entity, whether by contract or 80 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 81 | outstanding shares, or (iii) beneficial ownership of such entity. 82 | 83 | "You" (or "Your") shall mean an individual or Legal Entity 84 | exercising permissions granted by this License. 85 | 86 | "Source" form shall mean the preferred form for making modifications, 87 | including but not limited to software source code, documentation 88 | source, and configuration files. 89 | 90 | "Object" form shall mean any form resulting from mechanical 91 | transformation or translation of a Source form, including but 92 | not limited to compiled object code, generated documentation, 93 | and conversions to other media types. 94 | 95 | "Work" shall mean the work of authorship, whether in Source or 96 | Object form, made available under the License, as indicated by a 97 | copyright notice that is included in or attached to the work 98 | (an example is provided in the Appendix below). 99 | 100 | "Derivative Works" shall mean any work, whether in Source or Object 101 | form, that is based on (or derived from) the Work and for which the 102 | editorial revisions, annotations, elaborations, or other modifications 103 | represent, as a whole, an original work of authorship. For the purposes 104 | of this License, Derivative Works shall not include works that remain 105 | separable from, or merely link (or bind by name) to the interfaces of, 106 | the Work and Derivative Works thereof. 107 | 108 | "Contribution" shall mean any work of authorship, including 109 | the original version of the Work and any modifications or additions 110 | to that Work or Derivative Works thereof, that is intentionally 111 | submitted to Licensor for inclusion in the Work by the copyright owner 112 | or by an individual or Legal Entity authorized to submit on behalf of 113 | the copyright owner. For the purposes of this definition, "submitted" 114 | means any form of electronic, verbal, or written communication sent 115 | to the Licensor or its representatives, including but not limited to 116 | communication on electronic mailing lists, source code control systems, 117 | and issue tracking systems that are managed by, or on behalf of, the 118 | Licensor for the purpose of discussing and improving the Work, but 119 | excluding communication that is conspicuously marked or otherwise 120 | designated in writing by the copyright owner as "Not a Contribution." 121 | 122 | "Contributor" shall mean Licensor and any individual or Legal Entity 123 | on behalf of whom a Contribution has been received by Licensor and 124 | subsequently incorporated within the Work. 125 | 126 | 2. Grant of Copyright License. Subject to the terms and conditions of 127 | this License, each Contributor hereby grants to You a perpetual, 128 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 129 | copyright license to reproduce, prepare Derivative Works of, 130 | publicly display, publicly perform, sublicense, and distribute the 131 | Work and such Derivative Works in Source or Object form. 132 | 133 | 3. Grant of Patent License. Subject to the terms and conditions of 134 | this License, each Contributor hereby grants to You a perpetual, 135 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 136 | (except as stated in this section) patent license to make, have made, 137 | use, offer to sell, sell, import, and otherwise transfer the Work, 138 | where such license applies only to those patent claims licensable 139 | by such Contributor that are necessarily infringed by their 140 | Contribution(s) alone or by combination of their Contribution(s) 141 | with the Work to which such Contribution(s) was submitted. If You 142 | institute patent litigation against any entity (including a 143 | cross-claim or counterclaim in a lawsuit) alleging that the Work 144 | or a Contribution incorporated within the Work constitutes direct 145 | or contributory patent infringement, then any patent licenses 146 | granted to You under this License for that Work shall terminate 147 | as of the date such litigation is filed. 148 | 149 | 4. Redistribution. You may reproduce and distribute copies of the 150 | Work or Derivative Works thereof in any medium, with or without 151 | modifications, and in Source or Object form, provided that You 152 | meet the following conditions: 153 | 154 | (a) You must give any other recipients of the Work or 155 | Derivative Works a copy of this License; and 156 | 157 | (b) You must cause any modified files to carry prominent notices 158 | stating that You changed the files; and 159 | 160 | (c) You must retain, in the Source form of any Derivative Works 161 | that You distribute, all copyright, patent, trademark, and 162 | attribution notices from the Source form of the Work, 163 | excluding those notices that do not pertain to any part of 164 | the Derivative Works; and 165 | 166 | (d) If the Work includes a "NOTICE" text file as part of its 167 | distribution, then any Derivative Works that You distribute must 168 | include a readable copy of the attribution notices contained 169 | within such NOTICE file, excluding those notices that do not 170 | pertain to any part of the Derivative Works, in at least one 171 | of the following places: within a NOTICE text file distributed 172 | as part of the Derivative Works; within the Source form or 173 | documentation, if provided along with the Derivative Works; or, 174 | within a display generated by the Derivative Works, if and 175 | wherever such third-party notices normally appear. The contents 176 | of the NOTICE file are for informational purposes only and 177 | do not modify the License. You may add Your own attribution 178 | notices within Derivative Works that You distribute, alongside 179 | or as an addendum to the NOTICE text from the Work, provided 180 | that such additional attribution notices cannot be construed 181 | as modifying the License. 182 | 183 | You may add Your own copyright statement to Your modifications and 184 | may provide additional or different license terms and conditions 185 | for use, reproduction, or distribution of Your modifications, or 186 | for any such Derivative Works as a whole, provided Your use, 187 | reproduction, and distribution of the Work otherwise complies with 188 | the conditions stated in this License. 189 | 190 | 5. Submission of Contributions. Unless You explicitly state otherwise, 191 | any Contribution intentionally submitted for inclusion in the Work 192 | by You to the Licensor shall be under the terms and conditions of 193 | this License, without any additional terms or conditions. 194 | Notwithstanding the above, nothing herein shall supersede or modify 195 | the terms of any separate license agreement you may have executed 196 | with Licensor regarding such Contributions. 197 | 198 | 6. Trademarks. This License does not grant permission to use the trade 199 | names, trademarks, service marks, or product names of the Licensor, 200 | except as required for reasonable and customary use in describing the 201 | origin of the Work and reproducing the content of the NOTICE file. 202 | 203 | 7. Disclaimer of Warranty. Unless required by applicable law or 204 | agreed to in writing, Licensor provides the Work (and each 205 | Contributor provides its Contributions) on an "AS IS" BASIS, 206 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 207 | implied, including, without limitation, any warranties or conditions 208 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 209 | PARTICULAR PURPOSE. You are solely responsible for determining the 210 | appropriateness of using or redistributing the Work and assume any 211 | risks associated with Your exercise of permissions under this License. 212 | 213 | 8. Limitation of Liability. In no event and under no legal theory, 214 | whether in tort (including negligence), contract, or otherwise, 215 | unless required by applicable law (such as deliberate and grossly 216 | negligent acts) or agreed to in writing, shall any Contributor be 217 | liable to You for damages, including any direct, indirect, special, 218 | incidental, or consequential damages of any character arising as a 219 | result of this License or out of the use or inability to use the 220 | Work (including but not limited to damages for loss of goodwill, 221 | work stoppage, computer failure or malfunction, or any and all 222 | other commercial damages or losses), even if such Contributor 223 | has been advised of the possibility of such damages. 224 | 225 | 9. Accepting Warranty or Additional Liability. While redistributing 226 | the Work or Derivative Works thereof, You may choose to offer, 227 | and charge a fee for, acceptance of support, warranty, indemnity, 228 | or other liability obligations and/or rights consistent with this 229 | License. However, in accepting such obligations, You may act only 230 | on Your own behalf and on Your sole responsibility, not on behalf 231 | of any other Contributor, and only if You agree to indemnify, 232 | defend, and hold each Contributor harmless for any liability 233 | incurred by, or claims asserted against, such Contributor by reason 234 | of your accepting any such warranty or additional liability. 235 | 236 | END OF TERMS AND CONDITIONS 237 | 238 | APPENDIX: How to apply the Apache License to your work. 239 | 240 | To apply the Apache License to your work, attach the following 241 | boilerplate notice, with the fields enclosed by brackets "[]" 242 | replaced with your own identifying information. (Don't include 243 | the brackets!) The text should be enclosed in the appropriate 244 | comment syntax for the file format. We also recommend that a 245 | file or class name and description of purpose be included on the 246 | same "printed page" as the copyright notice for easier 247 | identification within third-party archives. 248 | 249 | Copyright (c) 2015-2018 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors 250 | 251 | Licensed under the Apache License, Version 2.0 (the "License"); 252 | you may not use this file except in compliance with the License. 253 | You may obtain a copy of the License at 254 | 255 | http://www.apache.org/licenses/LICENSE-2.0 256 | 257 | Unless required by applicable law or agreed to in writing, software 258 | distributed under the License is distributed on an "AS IS" BASIS, 259 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 260 | See the License for the specific language governing permissions and 261 | limitations under the License. 262 | 263 | 264 | 265 | tslib 266 | 0BSD 267 | Copyright (c) Microsoft Corporation. 268 | 269 | Permission to use, copy, modify, and/or distribute this software for any 270 | purpose with or without fee is hereby granted. 271 | 272 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 273 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 274 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 275 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 276 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 277 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 278 | PERFORMANCE OF THIS SOFTWARE. 279 | 280 | zone.js 281 | MIT 282 | The MIT License 283 | 284 | Copyright (c) 2010-2023 Google LLC. https://angular.io/license 285 | 286 | Permission is hereby granted, free of charge, to any person obtaining a copy 287 | of this software and associated documentation files (the "Software"), to deal 288 | in the Software without restriction, including without limitation the rights 289 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 290 | copies of the Software, and to permit persons to whom the Software is 291 | furnished to do so, subject to the following conditions: 292 | 293 | The above copyright notice and this permission notice shall be included in 294 | all copies or substantial portions of the Software. 295 | 296 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 297 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 298 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 299 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 300 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 301 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 302 | THE SOFTWARE. 303 | -------------------------------------------------------------------------------- /docs/assets/images/airdrop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/airdrop.png -------------------------------------------------------------------------------- /docs/assets/images/app-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/app-store.png -------------------------------------------------------------------------------- /docs/assets/images/apple-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/apple-logo.png -------------------------------------------------------------------------------- /docs/assets/images/applications.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/applications.png -------------------------------------------------------------------------------- /docs/assets/images/bluetooth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/bluetooth.png -------------------------------------------------------------------------------- /docs/assets/images/books.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/books.png -------------------------------------------------------------------------------- /docs/assets/images/buy-me-a-coffee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/buy-me-a-coffee.png -------------------------------------------------------------------------------- /docs/assets/images/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/calculator.png -------------------------------------------------------------------------------- /docs/assets/images/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/chrome.png -------------------------------------------------------------------------------- /docs/assets/images/contacts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/contacts.png -------------------------------------------------------------------------------- /docs/assets/images/desktop-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/desktop-background.jpg -------------------------------------------------------------------------------- /docs/assets/images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/desktop.png -------------------------------------------------------------------------------- /docs/assets/images/dictionary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/dictionary.png -------------------------------------------------------------------------------- /docs/assets/images/documents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/documents.png -------------------------------------------------------------------------------- /docs/assets/images/downloads.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/downloads.png -------------------------------------------------------------------------------- /docs/assets/images/facetime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/facetime.png -------------------------------------------------------------------------------- /docs/assets/images/find-my.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/find-my.png -------------------------------------------------------------------------------- /docs/assets/images/finder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/finder.png -------------------------------------------------------------------------------- /docs/assets/images/folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/folder.png -------------------------------------------------------------------------------- /docs/assets/images/garage-band.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/garage-band.png -------------------------------------------------------------------------------- /docs/assets/images/golf-ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/golf-ball.png -------------------------------------------------------------------------------- /docs/assets/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/home.png -------------------------------------------------------------------------------- /docs/assets/images/i-movies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/i-movies.png -------------------------------------------------------------------------------- /docs/assets/images/icloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/icloud.png -------------------------------------------------------------------------------- /docs/assets/images/keynote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/keynote.png -------------------------------------------------------------------------------- /docs/assets/images/launchpad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/launchpad.png -------------------------------------------------------------------------------- /docs/assets/images/library.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/library.png -------------------------------------------------------------------------------- /docs/assets/images/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/mail.png -------------------------------------------------------------------------------- /docs/assets/images/messages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/messages.png -------------------------------------------------------------------------------- /docs/assets/images/mission-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/mission-control.png -------------------------------------------------------------------------------- /docs/assets/images/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/music.png -------------------------------------------------------------------------------- /docs/assets/images/network.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/network.png -------------------------------------------------------------------------------- /docs/assets/images/notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/notes.png -------------------------------------------------------------------------------- /docs/assets/images/numbers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/numbers.png -------------------------------------------------------------------------------- /docs/assets/images/pages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/pages.png -------------------------------------------------------------------------------- /docs/assets/images/photos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/photos.png -------------------------------------------------------------------------------- /docs/assets/images/podcasts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/podcasts.png -------------------------------------------------------------------------------- /docs/assets/images/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/preview.png -------------------------------------------------------------------------------- /docs/assets/images/recents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/recents.png -------------------------------------------------------------------------------- /docs/assets/images/reminders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/reminders.png -------------------------------------------------------------------------------- /docs/assets/images/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/safari.png -------------------------------------------------------------------------------- /docs/assets/images/share-centre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/share-centre.png -------------------------------------------------------------------------------- /docs/assets/images/siri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/siri.png -------------------------------------------------------------------------------- /docs/assets/images/stock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/stock.png -------------------------------------------------------------------------------- /docs/assets/images/system-preferences.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/system-preferences.png -------------------------------------------------------------------------------- /docs/assets/images/terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/terminal.png -------------------------------------------------------------------------------- /docs/assets/images/trash-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/trash-full.png -------------------------------------------------------------------------------- /docs/assets/images/trash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/trash.png -------------------------------------------------------------------------------- /docs/assets/images/tv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/tv.png -------------------------------------------------------------------------------- /docs/assets/images/voice-memos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/assets/images/voice-memos.png -------------------------------------------------------------------------------- /docs/assets/styles/_base.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;400&display=swap'); 2 | 3 | * { 4 | //margin: 0; 5 | box-sizing: border-box; 6 | user-select: none; 7 | -webkit-user-select: none; 8 | } 9 | 10 | body { 11 | font-family: 'Yantramanav'; 12 | margin: 0; 13 | } 14 | 15 | .text-red { 16 | color: var(--mac-red); 17 | } 18 | 19 | .text-gold { 20 | color: var(--mac-gold); 21 | } 22 | 23 | .text-green { 24 | color: var(--mac-green); 25 | } 26 | -------------------------------------------------------------------------------- /docs/assets/styles/_helpers.scss: -------------------------------------------------------------------------------- 1 | @mixin flex($dir: row, $ai: stretch, $jc: stretch, $wrap: nowrap) { 2 | display: flex; 3 | flex-direction: $dir; 4 | align-items: $ai; 5 | justify-content: $jc; 6 | flex-wrap: $wrap; 7 | } 8 | 9 | @mixin font($size: inherit, $weight: inherit, $color: inherit) { 10 | font-family: 'Yantramanav', sans-serif; 11 | font-size: $size; 12 | font-weight: $weight; 13 | color: $color; 14 | } 15 | 16 | @mixin bg-image($uri, $size, $position) { 17 | background-image: url($uri); 18 | background-size: $size; 19 | background-position: $position; 20 | } -------------------------------------------------------------------------------- /docs/assets/styles/_prime-ng-overrides.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers'; 2 | 3 | .p-terminal { 4 | border: 0; 5 | } 6 | 7 | .p-dialog { 8 | border-radius: 0.5rem; 9 | 10 | .p-dialog-content { 11 | border: 0; 12 | border-radius: 0.5rem; 13 | padding: 0; 14 | } 15 | 16 | &.spotlight { 17 | box-shadow: none; 18 | 19 | .p-dialog-content { 20 | background-color: transparent; 21 | } 22 | } 23 | } 24 | 25 | .context-menu { 26 | @include font($size: 0.8rem, $weight: 500); 27 | } -------------------------------------------------------------------------------- /docs/assets/styles/_prime-ng.scss: -------------------------------------------------------------------------------- 1 | @import '~primeng/resources/primeng.min.css'; 2 | @import '~primeng/resources/themes/saga-blue/theme.css'; 3 | @import '~primeicons/primeicons.css'; 4 | @import '~primeflex/primeflex.css'; 5 | -------------------------------------------------------------------------------- /docs/assets/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --mac-sky-blue: #71c5e8; 3 | --mac-green: #00ca4e; 4 | --mac-red: #ff605c; 5 | --mac-gold: #ffbd44; 6 | --mac-plum: #8a1b61; 7 | --mac-blue: #009cdf; 8 | --mac-grey: rgb(219, 219, 219); 9 | --light-0: #fff; 10 | --light-1: rgb(223, 225, 235); 11 | --dark-0: #000; 12 | --dark-1: rgb(32, 32, 32); 13 | --purple-0: rgb(238, 201, 236); 14 | --purple-1: #5a0a56; 15 | --purple-2: rgb(95 1 109 / 50%); 16 | --grey-0: #e5e1ed; 17 | --grey-1: #a5a5a5; 18 | --grey-2: rgb(229, 226, 239); 19 | --grey-3: rgb(223, 225, 235); 20 | --grey-4: #cdcccc; 21 | --grey-5: #ddd; 22 | } -------------------------------------------------------------------------------- /docs/assets/styles/styles.scss: -------------------------------------------------------------------------------- 1 | @import '_base'; 2 | @import '_prime-ng'; 3 | @import '_prime-ng-overrides'; 4 | @import '_variables'; 5 | -------------------------------------------------------------------------------- /docs/color.dae87a04d07ca92b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/color.dae87a04d07ca92b.png -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/favicon.ico -------------------------------------------------------------------------------- /docs/hue.8b1818380241e6ac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/docs/hue.8b1818380241e6ac.png -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, './coverage/mac-os-clone'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mac-os-clone", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "^19.1.5", 14 | "@angular/cdk": "^19.1.3", 15 | "@angular/common": "^19.1.5", 16 | "@angular/compiler": "^19.1.5", 17 | "@angular/core": "^19.1.5", 18 | "@angular/forms": "^19.1.5", 19 | "@angular/platform-browser": "^19.1.5", 20 | "@angular/platform-browser-dynamic": "^19.1.5", 21 | "@angular/router": "^19.1.5", 22 | "@ngrx/signals": "^19.0.1", 23 | "primeflex": "^3.3.1", 24 | "primeicons": "^7.0.0", 25 | "primeng": "^19.0.6", 26 | "rxjs": "^7.8.1", 27 | "tslib": "^2.8.1", 28 | "zone.js": "^0.15.0" 29 | }, 30 | "devDependencies": { 31 | "@angular-devkit/build-angular": "^19.1.6", 32 | "@angular/cli": "^19.1.6", 33 | "@angular/compiler-cli": "^19.1.5", 34 | "@types/jasmine": "~5.1.5", 35 | "@types/node": "^22.13.1", 36 | "jasmine-core": "~5.6.0", 37 | "karma": "~6.4.4", 38 | "karma-chrome-launcher": "~3.2.0", 39 | "karma-coverage": "~2.2.1", 40 | "karma-jasmine": "~5.1.0", 41 | "karma-jasmine-html-reporter": "~2.1.0", 42 | "prettier": "3.5", 43 | "typescript": "^5.7.3" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { BootComponent } from './core/boot/boot.component'; 4 | import { LoginComponent } from './core/login/login.component'; 5 | 6 | const routes: Routes = [ 7 | { path: 'boot', component: BootComponent }, 8 | { path: 'login', component: LoginComponent }, 9 | { 10 | path: 'desktop', 11 | loadChildren: () => import('./applications/applications.module').then(m => m.ApplicationsModule) 12 | }, 13 | { path: '', redirectTo: '/boot', pathMatch: 'full' }, 14 | { path: '**', redirectTo: '/boot' } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [RouterModule.forRoot(routes)], 19 | exports: [RouterModule] 20 | }) 21 | export class AppRoutingModule { } 22 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/app.component.scss -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'], 7 | standalone: false 8 | }) 9 | export class AppComponent { 10 | title = 'mac-os-clone'; 11 | } 12 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | 5 | import { AppRoutingModule } from './app-routing.module'; 6 | import { AppComponent } from './app.component'; 7 | import { CoreModule } from './core/core.module'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | ], 13 | imports: [ 14 | BrowserModule, 15 | BrowserAnimationsModule, 16 | AppRoutingModule, 17 | CoreModule 18 | ], 19 | providers: [], 20 | bootstrap: [AppComponent] 21 | }) 22 | export class AppModule { } 23 | -------------------------------------------------------------------------------- /src/app/applications/applications-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { DesktopComponent } from './containers'; 4 | 5 | const routes: Routes = []; 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forChild([ 9 | { 10 | path: '', 11 | component: DesktopComponent 12 | } 13 | ])], 14 | exports: [RouterModule] 15 | }) 16 | export class ApplicationsRoutingModule { } 17 | -------------------------------------------------------------------------------- /src/app/applications/applications.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { ApplicationsRoutingModule } from './applications-routing.module'; 5 | 6 | import { 7 | DesktopComponent, 8 | LaunchpadComponent, 9 | TerminalComponent, 10 | FoldersComponent, 11 | FinderComponent, 12 | TrashComponent, 13 | SpotlightComponent 14 | } from './containers'; 15 | 16 | import { 17 | DockComponent, 18 | MenuComponent, 19 | DialogControlsComponent, 20 | FolderIconComponent, 21 | FinderSidebarComponent, 22 | SidebarGroupComponent, 23 | SidebarItemComponent 24 | } from './components'; 25 | import { SharedModule } from '../shared/shared.module'; 26 | import { SettingsModule } from './components/settings/settings.module'; 27 | import { ClockComponent } from '../shared/components/clock/clock.component'; 28 | 29 | const components = [ 30 | DesktopComponent, 31 | LaunchpadComponent, 32 | DockComponent, 33 | MenuComponent, 34 | TerminalComponent, 35 | DialogControlsComponent, 36 | FoldersComponent, 37 | FolderIconComponent, 38 | FinderComponent, 39 | TrashComponent, 40 | FinderSidebarComponent, 41 | SidebarGroupComponent, 42 | SidebarItemComponent, 43 | SpotlightComponent 44 | ]; 45 | 46 | @NgModule({ 47 | declarations: [ 48 | ...components 49 | ], 50 | imports: [ 51 | CommonModule, 52 | ApplicationsRoutingModule, 53 | SharedModule, 54 | SettingsModule, 55 | ClockComponent 56 | ] 57 | }) 58 | export class ApplicationsModule { } 59 | -------------------------------------------------------------------------------- /src/app/applications/components/dialog-controls/dialog-controls.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
-------------------------------------------------------------------------------- /src/app/applications/components/dialog-controls/dialog-controls.component.scss: -------------------------------------------------------------------------------- 1 | .dialog-controls { 2 | i { 3 | font-size: 0.8rem; 4 | margin-right: 0.5rem; 5 | } 6 | } -------------------------------------------------------------------------------- /src/app/applications/components/dialog-controls/dialog-controls.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; 2 | import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; 3 | 4 | @Component({ 5 | selector: 'app-dialog-controls', 6 | templateUrl: './dialog-controls.component.html', 7 | styleUrls: ['./dialog-controls.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | export class DialogControlsComponent implements OnInit { 12 | 13 | maximized = false; 14 | initialWidth?: string; 15 | initialHeight?: string; 16 | 17 | constructor( 18 | private dialogRef: DynamicDialogRef, 19 | private dialogConfig: DynamicDialogConfig 20 | ) { } 21 | 22 | ngOnInit() { 23 | this.initialWidth = this.dialogConfig.width; 24 | this.initialHeight = this.dialogConfig.height; 25 | } 26 | 27 | close() { 28 | this.dialogRef.close(); 29 | } 30 | 31 | maximize() { 32 | this.maximized = !this.maximized; 33 | this.dialogConfig.width = this.maximized ? '100%' : this.initialWidth; 34 | this.dialogConfig.height = this.maximized ? '100%' : this.initialHeight; 35 | } 36 | 37 | } 38 | -------------------------------------------------------------------------------- /src/app/applications/components/dock/dock.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/app/applications/components/dock/dock.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/applications/components/dock/dock.component.scss -------------------------------------------------------------------------------- /src/app/applications/components/dock/dock.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ChangeDetectionStrategy, 3 | ChangeDetectorRef, 4 | Component, 5 | EventEmitter, 6 | OnInit, 7 | Output, 8 | effect, 9 | inject, 10 | } from '@angular/core'; 11 | import { MenuItem, TooltipOptions } from 'primeng/api'; 12 | 13 | import { Subject, takeUntil } from 'rxjs'; 14 | import { LAUNCHPAD } from 'src/app/shared/config/applications'; 15 | import { dockItems } from 'src/app/shared/config/dock-items'; 16 | import { MyStore } from 'src/app/shared/store/my-store'; 17 | 18 | @Component({ 19 | selector: 'app-dock', 20 | templateUrl: './dock.component.html', 21 | styleUrls: ['./dock.component.scss'], 22 | changeDetection: ChangeDetectionStrategy.OnPush, 23 | standalone: false 24 | }) 25 | export class DockComponent implements OnInit { 26 | @Output() launchpadOpened = new EventEmitter(); 27 | 28 | myStore = inject(MyStore); 29 | onDestroy$ = new Subject(); 30 | dockItems: MenuItem[] = []; 31 | defaultTooltipOptions: TooltipOptions = { 32 | tooltipPosition: 'top', 33 | positionTop: -15, 34 | positionLeft: 15, 35 | showDelay: 1000, 36 | }; 37 | 38 | constructor(private cd: ChangeDetectorRef) { 39 | effect(() => { 40 | if (this.dockItems.length) { 41 | this.updateTrashIcon(this.myStore.trashItemsCount()); 42 | } 43 | }); 44 | } 45 | 46 | ngOnInit() { 47 | this.dockItems = this.getDockItems(); 48 | } 49 | 50 | ngOnDestroy(): void { 51 | this.onDestroy$.next(true); 52 | this.onDestroy$.complete(); 53 | } 54 | 55 | getDockItems() { 56 | return dockItems.map(dockItem => { 57 | return { 58 | label: dockItem, 59 | icon: dockItem, 60 | tooltipOptions: { 61 | tooltipLabel: dockItem, 62 | ...this.defaultTooltipOptions, 63 | }, 64 | command: () => { 65 | if (dockItem === LAUNCHPAD) { 66 | return this.launchpadOpened.emit(); 67 | } 68 | 69 | this.myStore.setActiveApplication(dockItem); 70 | }, 71 | }; 72 | }); 73 | } 74 | 75 | updateTrashIcon(trashItemsCount: number) { 76 | this.dockItems = this.dockItems.map(dockItem => { 77 | const icon = 78 | trashItemsCount > 0 && dockItem.label === 'trash' 79 | ? 'trash-full' 80 | : dockItem.icon; 81 | 82 | return { 83 | ...dockItem, 84 | icon, 85 | }; 86 | }); 87 | this.cd.markForCheck(); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/app/applications/components/finder-sidebar/finder-sidebar.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 |
7 | 10 | 11 |
12 |
-------------------------------------------------------------------------------- /src/app/applications/components/finder-sidebar/finder-sidebar.component.scss: -------------------------------------------------------------------------------- 1 | .finder-sidebar { 2 | padding: 1rem; 3 | background-color: var(--purple-0); 4 | height: 100%; 5 | 6 | &__controls { 7 | margin-bottom: 1rem; 8 | } 9 | } -------------------------------------------------------------------------------- /src/app/applications/components/finder-sidebar/finder-sidebar.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | import { SidebarGroup } from 'src/app/shared/models/sidebar-group'; 4 | 5 | @Component({ 6 | selector: 'app-finder-sidebar', 7 | templateUrl: './finder-sidebar.component.html', 8 | styleUrls: ['./finder-sidebar.component.scss'], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | standalone: false 11 | }) 12 | export class FinderSidebarComponent { 13 | 14 | sidebarGroups: SidebarGroup[] = [ 15 | { 16 | category: 'Favourites', 17 | items: [ 18 | { 19 | label: 'Airdrop', 20 | image: 'airdrop.png' 21 | }, 22 | { 23 | label: 'Recents', 24 | image: 'recents.png' 25 | }, 26 | { 27 | label: 'Applications', 28 | image: 'applications.png' 29 | }, 30 | { 31 | label: 'Desktop', 32 | image: 'desktop.png' 33 | }, 34 | { 35 | label: 'Documents', 36 | image: 'documents.png', 37 | }, 38 | { 39 | label: 'Downloads', 40 | image: 'downloads.png' 41 | } 42 | ] 43 | }, 44 | { 45 | category: 'iCloud', 46 | items: [ 47 | { 48 | label: 'iCloud Drive', 49 | image: 'icloud.png' 50 | }, 51 | { 52 | label: 'Shared', 53 | image: 'network.png' 54 | } 55 | ] 56 | }, 57 | { 58 | category: 'Tags', 59 | items: [ 60 | { 61 | label: 'red', 62 | icon: 'pi pi-circle-fill' 63 | }, 64 | { 65 | label: 'orange', 66 | icon: 'pi pi-circle-fill' 67 | }, 68 | { 69 | label: 'yellow', 70 | icon: 'pi pi-circle-fill' 71 | }, 72 | { 73 | label: 'green', 74 | icon: 'pi pi-circle-fill' 75 | }, 76 | { 77 | label: 'blue', 78 | icon: 'pi pi-circle-fill' 79 | }, 80 | { 81 | label: 'purple', 82 | icon: 'pi pi-circle-fill' 83 | }, 84 | { 85 | label: 'grey', 86 | icon: 'pi pi-circle-fill' 87 | } 88 | ] 89 | } 90 | ]; 91 | 92 | } 93 | -------------------------------------------------------------------------------- /src/app/applications/components/folder-icon/folder-icon.component.html: -------------------------------------------------------------------------------- 1 |
2 |
6 |
7 | 8 |
12 | {{ folder.title }} 13 |
14 |
-------------------------------------------------------------------------------- /src/app/applications/components/folder-icon/folder-icon.component.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers'; 2 | 3 | .folder-icon { 4 | @include flex($dir: column, $ai: center); 5 | 6 | width: 100px; 7 | margin-bottom: 5px; 8 | 9 | &__image { 10 | width: 3rem; 11 | height: 3rem; 12 | margin-bottom: 2px; 13 | 14 | @include bg-image($uri: '/assets/images/folder.png', $size: cover, $position: center); 15 | 16 | &.selected { 17 | background-color: var(--purple-1); 18 | box-shadow: 0 0 1px 1px var(--mac-grey); 19 | border-radius: 2px; 20 | 21 | &.finder { 22 | background-color: var(--mac-grey); 23 | } 24 | } 25 | } 26 | 27 | &__title { 28 | @include font($size: 0.7rem, $weight: 400, $color: var(--light-0)); 29 | 30 | user-select: none; 31 | padding: 1px; 32 | 33 | &.finder { 34 | color: var(--dark-1); 35 | } 36 | 37 | &.selected { 38 | background-color: var(--blue-700); 39 | color: var(--light-0); 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /src/app/applications/components/folder-icon/folder-icon.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; 2 | import { Folder } from 'src/app/shared/models/folder'; 3 | 4 | @Component({ 5 | selector: 'app-folder-icon', 6 | templateUrl: './folder-icon.component.html', 7 | styleUrls: ['./folder-icon.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | export class FolderIconComponent { 12 | 13 | @Input() folder!: Folder; 14 | 15 | @Input() isFinderOpened = false; 16 | 17 | @Output() click = new EventEmitter(); 18 | 19 | onToggleSelection(event: MouseEvent) { 20 | event.stopPropagation(); 21 | this.click.emit({ 22 | id: this.folder.id, 23 | selected: !this.folder.selected, 24 | selectedMultiple: event.metaKey || event.ctrlKey 25 | }); 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /src/app/applications/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dock/dock.component'; 2 | export * from './menu/menu.component'; 3 | export * from './dialog-controls/dialog-controls.component'; 4 | export * from './folder-icon/folder-icon.component'; 5 | export * from './finder-sidebar/finder-sidebar.component'; 6 | export * from './sidebar-group/sidebar-group.component'; 7 | export * from './sidebar-item/sidebar-item.component'; -------------------------------------------------------------------------------- /src/app/applications/components/menu/menu.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/app/applications/components/menu/menu.component.scss: -------------------------------------------------------------------------------- 1 | @import '_helpers'; 2 | 3 | :host::ng-deep { 4 | .p-menubar { 5 | padding: 0 0.5rem; 6 | background-color: var(--purple-2); 7 | color: var(--light-0); 8 | border: none; 9 | font-size: 0.8rem; 10 | 11 | .p-menuitem { 12 | &:first-child { 13 | font-weight: bold; 14 | padding: 0 1rem; 15 | } 16 | 17 | .p-menuitem-link { 18 | padding: 0.5rem 0.75rem; 19 | 20 | .p-menuitem-text { 21 | color: var(--light-0); 22 | } 23 | } 24 | } 25 | 26 | .p-menubar-end { 27 | @include flex($ai: center); 28 | 29 | i { 30 | padding: 0 0.75rem; 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/app/applications/components/menu/menu.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-menu', 5 | templateUrl: './menu.component.html', 6 | styleUrls: ['./menu.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class MenuComponent { 11 | 12 | @Output() spotlightOpened = new EventEmitter(); 13 | 14 | isSettingsDialogDisplayed = false; 15 | 16 | menuItems = [ 17 | { 18 | label: 'Finder', 19 | }, 20 | { 21 | label: 'File' 22 | }, 23 | { 24 | label: 'Edit' 25 | }, 26 | { 27 | label: 'View' 28 | }, 29 | { 30 | label: 'Go' 31 | }, 32 | { 33 | label: 'Window' 34 | }, 35 | { 36 | label: 'Help' 37 | } 38 | ]; 39 | 40 | openSpotlight() { 41 | this.spotlightOpened.emit(); 42 | } 43 | 44 | toggleSettingsDialog() { 45 | this.isSettingsDialogDisplayed = !this.isSettingsDialogDisplayed; 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /src/app/applications/components/settings/airdrop-control/airdrop-control.component.html: -------------------------------------------------------------------------------- 1 |
2 | airdrop 3 |
4 |
Airdrop
5 | Off 6 |
7 |
-------------------------------------------------------------------------------- /src/app/applications/components/settings/airdrop-control/airdrop-control.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/applications/components/settings/airdrop-control/airdrop-control.component.scss -------------------------------------------------------------------------------- /src/app/applications/components/settings/airdrop-control/airdrop-control.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-airdrop-control', 5 | templateUrl: './airdrop-control.component.html', 6 | styleUrls: ['./airdrop-control.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class AirdropControlComponent { 11 | 12 | 13 | } 14 | -------------------------------------------------------------------------------- /src/app/applications/components/settings/bluetooth-control/bluetooth-control.component.html: -------------------------------------------------------------------------------- 1 |
2 | airdrop 3 |
4 |
Bluetooth
5 | On 6 |
7 |
-------------------------------------------------------------------------------- /src/app/applications/components/settings/bluetooth-control/bluetooth-control.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/applications/components/settings/bluetooth-control/bluetooth-control.component.scss -------------------------------------------------------------------------------- /src/app/applications/components/settings/bluetooth-control/bluetooth-control.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-bluetooth-control', 5 | templateUrl: './bluetooth-control.component.html', 6 | styleUrls: ['./bluetooth-control.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class BluetoothControlComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/applications/components/settings/focus-control/focus-control.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
Focus
4 |
-------------------------------------------------------------------------------- /src/app/applications/components/settings/focus-control/focus-control.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/applications/components/settings/focus-control/focus-control.component.scss -------------------------------------------------------------------------------- /src/app/applications/components/settings/focus-control/focus-control.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-focus-control', 5 | templateUrl: './focus-control.component.html', 6 | styleUrls: ['./focus-control.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class FocusControlComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/applications/components/settings/index.ts: -------------------------------------------------------------------------------- 1 | export * from './airdrop-control/airdrop-control.component'; 2 | export * from './bluetooth-control/bluetooth-control.component'; 3 | export * from './focus-control/focus-control.component'; 4 | export * from './keyboard-brightness-control/keyboard-brightness-control.component'; 5 | export * from './music-control/music-control.component'; 6 | export * from './screen-mirroring-control/screen-mirroring-control.component'; 7 | export * from './wifi-control/wifi-control.component'; 8 | export * from '../settings/settings.component'; -------------------------------------------------------------------------------- /src/app/applications/components/settings/keyboard-brightness-control/keyboard-brightness-control.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
Keyboard Brightness
4 |
-------------------------------------------------------------------------------- /src/app/applications/components/settings/keyboard-brightness-control/keyboard-brightness-control.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/applications/components/settings/keyboard-brightness-control/keyboard-brightness-control.component.scss -------------------------------------------------------------------------------- /src/app/applications/components/settings/keyboard-brightness-control/keyboard-brightness-control.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-keyboard-brightness-control', 5 | templateUrl: './keyboard-brightness-control.component.html', 6 | styleUrls: ['./keyboard-brightness-control.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class KeyboardBrightnessControlComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/applications/components/settings/music-control/music-control.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | airdrop 4 | Music 5 |
6 | 7 |
8 | 9 | 10 |
11 |
-------------------------------------------------------------------------------- /src/app/applications/components/settings/music-control/music-control.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/applications/components/settings/music-control/music-control.component.scss -------------------------------------------------------------------------------- /src/app/applications/components/settings/music-control/music-control.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-music-control', 5 | templateUrl: './music-control.component.html', 6 | styleUrls: ['./music-control.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class MusicControlComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/applications/components/settings/screen-mirroring-control/screen-mirroring-control.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
Screen Mirroring
4 |
-------------------------------------------------------------------------------- /src/app/applications/components/settings/screen-mirroring-control/screen-mirroring-control.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/applications/components/settings/screen-mirroring-control/screen-mirroring-control.component.scss -------------------------------------------------------------------------------- /src/app/applications/components/settings/screen-mirroring-control/screen-mirroring-control.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-screen-mirroring-control', 5 | templateUrl: './screen-mirroring-control.component.html', 6 | styleUrls: ['./screen-mirroring-control.component.scss'], 7 | standalone: false 8 | }) 9 | export class ScreenMirroringControlComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/applications/components/settings/settings.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 |
7 | 8 |
9 | 10 |
11 | 12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 | 22 |
23 |
-------------------------------------------------------------------------------- /src/app/applications/components/settings/settings.component.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers'; 2 | 3 | .settings { 4 | display: grid; 5 | grid-template-columns: repeat(4, 1fr); 6 | gap: 1rem; 7 | padding: 10px; 8 | width: 20rem; 9 | background-color: var(--grey-2); 10 | font-size: 0.7rem; 11 | border: 0; 12 | 13 | > div { 14 | background-color: var(--grey-3); 15 | padding: 5px; 16 | border-radius: 0.5rem; 17 | box-shadow: 0 0 1px 1px var(--grey-4); 18 | } 19 | 20 | &__wifi-bluetooth-airdrop-controls { 21 | @include flex($dir: column, $ai: flex-start, $jc: space-between); 22 | 23 | grid-column: 1 / 3; 24 | grid-row: 1 / 3; 25 | } 26 | 27 | &__focus-control { 28 | grid-column: 3 / 5; 29 | grid-row: 1 / 2; 30 | } 31 | 32 | &__keyboard-brightness-control { 33 | grid-column: 3 / 4; 34 | grid-row: 2 / 3; 35 | } 36 | 37 | &__screen-mirroring-control { 38 | grid-column: 4 / 5; 39 | grid-row: 2 / 3; 40 | } 41 | 42 | &__music-control { 43 | grid-column: 1 / 5; 44 | grid-row: 3 / 4; 45 | } 46 | } -------------------------------------------------------------------------------- /src/app/applications/components/settings/settings.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-settings', 5 | templateUrl: './settings.component.html', 6 | styleUrls: ['./settings.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class SettingsComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/app/applications/components/settings/settings.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { 5 | AirdropControlComponent, 6 | BluetoothControlComponent, 7 | FocusControlComponent, 8 | KeyboardBrightnessControlComponent, 9 | MusicControlComponent, 10 | ScreenMirroringControlComponent, 11 | WifiControlComponent, 12 | SettingsComponent 13 | } from '.'; 14 | 15 | const components = [ 16 | AirdropControlComponent, 17 | BluetoothControlComponent, 18 | FocusControlComponent, 19 | KeyboardBrightnessControlComponent, 20 | MusicControlComponent, 21 | ScreenMirroringControlComponent, 22 | WifiControlComponent, 23 | SettingsComponent 24 | ]; 25 | 26 | @NgModule({ 27 | imports: [ 28 | CommonModule 29 | ], 30 | declarations: [ 31 | ...components 32 | ], 33 | exports: [ 34 | ...components 35 | ] 36 | }) 37 | export class SettingsModule { } 38 | -------------------------------------------------------------------------------- /src/app/applications/components/settings/wifi-control/wifi-control.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
WI-FI
5 | Not connected 6 |
7 |
-------------------------------------------------------------------------------- /src/app/applications/components/settings/wifi-control/wifi-control.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/applications/components/settings/wifi-control/wifi-control.component.scss -------------------------------------------------------------------------------- /src/app/applications/components/settings/wifi-control/wifi-control.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-wifi-control', 5 | templateUrl: './wifi-control.component.html', 6 | styleUrls: ['./wifi-control.component.scss'], 7 | standalone: false 8 | }) 9 | export class WifiControlComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/applications/components/sidebar-group/sidebar-group.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{ sidebarGroup.category }} 4 |
5 | 6 | 9 | 10 |
-------------------------------------------------------------------------------- /src/app/applications/components/sidebar-group/sidebar-group.component.scss: -------------------------------------------------------------------------------- 1 | .sidebar-group { 2 | margin-bottom: 10px; 3 | 4 | &__title { 5 | font-size: 0.6rem; 6 | font-weight: 500; 7 | overflow-x: hidden; 8 | } 9 | } -------------------------------------------------------------------------------- /src/app/applications/components/sidebar-group/sidebar-group.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; 2 | import { SidebarGroup } from 'src/app/shared/models/sidebar-group'; 3 | 4 | @Component({ 5 | selector: 'app-sidebar-group', 6 | templateUrl: './sidebar-group.component.html', 7 | styleUrls: ['./sidebar-group.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | export class SidebarGroupComponent { 12 | 13 | @Input() sidebarGroup!: SidebarGroup; 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/applications/components/sidebar-item/sidebar-item.component.html: -------------------------------------------------------------------------------- 1 |
2 | 7 | 8 | 14 | 15 | 16 | {{ sidebarItem.label }} 17 | 18 |
-------------------------------------------------------------------------------- /src/app/applications/components/sidebar-item/sidebar-item.component.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers'; 2 | 3 | .sidebar-item { 4 | @include flex($ai: center); 5 | 6 | overflow-x: hidden; 7 | 8 | &__title { 9 | font-size: 0.7rem; 10 | cursor: default; 11 | user-select: none; 12 | } 13 | 14 | &__image { 15 | width: 0.9rem; 16 | margin: 0.3rem; 17 | margin-right: 0.5rem; 18 | filter: contrast(0.1); 19 | } 20 | 21 | &__icon { 22 | font-size: 0.9rem; 23 | margin: 0.3rem; 24 | margin-right: 0.5rem; 25 | } 26 | } -------------------------------------------------------------------------------- /src/app/applications/components/sidebar-item/sidebar-item.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; 2 | import { SidebarItem } from 'src/app/shared/models/sidebar-item'; 3 | 4 | @Component({ 5 | selector: 'app-sidebar-item', 6 | templateUrl: './sidebar-item.component.html', 7 | styleUrls: ['./sidebar-item.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | export class SidebarItemComponent { 12 | 13 | @Input() sidebarItem!: SidebarItem; 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/applications/containers/desktop/desktop.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 |
7 | 8 |
9 | 10 |
11 | 12 |
13 |
14 | 15 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/app/applications/containers/desktop/desktop.component.scss: -------------------------------------------------------------------------------- 1 | @import '_helpers'; 2 | 3 | .desktop-screen { 4 | @include bg-image($uri: '/assets/images/desktop-background.jpg', $size: cover, $position: center); 5 | 6 | height: 100vh; 7 | overflow: hidden; 8 | } 9 | 10 | ::ng-deep.p-sidebar { 11 | @include bg-image($uri: '/assets/images/desktop-background.jpg', $size: cover, $position: center); 12 | 13 | color: #495057; 14 | border: 0 none; 15 | box-shadow: none; 16 | } -------------------------------------------------------------------------------- /src/app/applications/containers/desktop/desktop.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | HostListener, 4 | OnDestroy, 5 | OnInit, 6 | effect, 7 | inject, 8 | } from '@angular/core'; 9 | import { filter, mergeMap, Subject, takeUntil, tap } from 'rxjs'; 10 | import { DESKTOP, SPOTLIGHT } from 'src/app/shared/config/applications'; 11 | import { WindowService } from 'src/app/shared/services/window.service'; 12 | import { MyStore } from 'src/app/shared/store/my-store'; 13 | 14 | @Component({ 15 | selector: 'app-desktop', 16 | templateUrl: './desktop.component.html', 17 | styleUrls: ['./desktop.component.scss'], 18 | standalone: false 19 | }) 20 | export class DesktopComponent { 21 | myStore = inject(MyStore); 22 | 23 | folders = this.myStore.desktopFolders; 24 | launchPadOpened = false; 25 | 26 | constructor(private windowService: WindowService) { 27 | effect(() => { 28 | const app = this.myStore.activeApplication(); 29 | if (app !== DESKTOP) { 30 | this.windowService 31 | .open(app) 32 | .subscribe(app => this.myStore.setActiveApplication(app)); 33 | } 34 | }); 35 | } 36 | 37 | @HostListener('document:keydown', ['$event']) 38 | onKeydown(event: KeyboardEvent) { 39 | if (event.ctrlKey && event.code === 'Space') { 40 | return this.openSpotlight(); 41 | } 42 | 43 | if (event.ctrlKey && event.code === 'Backspace') { 44 | this.myStore.deleteSelectedFolders(); 45 | } 46 | } 47 | 48 | openSpotlight() { 49 | return this.myStore.setActiveApplication(SPOTLIGHT); 50 | } 51 | 52 | unselectFolders() { 53 | this.myStore.unselectAllFolders(); 54 | } 55 | 56 | onAddNewFolder() { 57 | this.myStore.addNewFolder(); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/app/applications/containers/finder/finder.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
9 | -------------------------------------------------------------------------------- /src/app/applications/containers/finder/finder.component.scss: -------------------------------------------------------------------------------- 1 | .finder { 2 | display: flex; 3 | height: 100%; 4 | 5 | &__sidebar { 6 | width: 35%; 7 | max-width: 200px; 8 | } 9 | 10 | &__content { 11 | padding: 1rem; 12 | width: 65%; 13 | } 14 | 15 | @media screen and (min-width: 996px) { 16 | &__sidebar { 17 | width: 25%; 18 | } 19 | 20 | &__content { 21 | width: 75%; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/app/applications/containers/finder/finder.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; 2 | import { MyStore } from 'src/app/shared/store/my-store'; 3 | 4 | @Component({ 5 | selector: 'app-finder', 6 | templateUrl: './finder.component.html', 7 | styleUrls: ['./finder.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | export class FinderComponent { 12 | myStore = inject(MyStore); 13 | 14 | folders = this.myStore.tutorialFolders; 15 | } 16 | -------------------------------------------------------------------------------- /src/app/applications/containers/folders/folders.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 7 | 8 |
9 |
-------------------------------------------------------------------------------- /src/app/applications/containers/folders/folders.component.scss: -------------------------------------------------------------------------------- 1 | .folders { 2 | &__icon { 3 | margin-top: 10px; 4 | display: inline-block; 5 | } 6 | } -------------------------------------------------------------------------------- /src/app/applications/containers/folders/folders.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ChangeDetectionStrategy, 3 | Component, 4 | Input, 5 | inject, 6 | } from '@angular/core'; 7 | import { Folder } from 'src/app/shared/models/folder'; 8 | import { FolderSelection } from 'src/app/shared/models/folder-selection'; 9 | import { MyStore } from 'src/app/shared/store/my-store'; 10 | 11 | @Component({ 12 | selector: 'app-folders', 13 | templateUrl: './folders.component.html', 14 | styleUrls: ['./folders.component.scss'], 15 | changeDetection: ChangeDetectionStrategy.OnPush, 16 | standalone: false 17 | }) 18 | export class FoldersComponent { 19 | myStore = inject(MyStore); 20 | 21 | @Input() folders: Folder[] = []; 22 | 23 | @Input() isFinderOpened = false; 24 | 25 | constructor() {} 26 | 27 | onFolderSelected(folderSelection: FolderSelection) { 28 | this.myStore.toggleFolder(folderSelection); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/app/applications/containers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './desktop/desktop.component'; 2 | export * from './launchpad/launchpad.component'; 3 | export * from './terminal/terminal.component'; 4 | export * from './folders/folders.component'; 5 | export * from './finder/finder.component'; 6 | export * from './trash/trash.component'; 7 | export * from './spotlight/spotlight.component'; -------------------------------------------------------------------------------- /src/app/applications/containers/launchpad/launchpad.component.html: -------------------------------------------------------------------------------- 1 |
2 |
5 | 6 | 10 | 11 | {{ app }} 12 |
13 |
-------------------------------------------------------------------------------- /src/app/applications/containers/launchpad/launchpad.component.scss: -------------------------------------------------------------------------------- 1 | @import '_helpers'; 2 | 3 | .launchpad { 4 | @include flex($wrap: wrap, $jc: center); 5 | 6 | width: 80%; 7 | margin: 0 auto; 8 | 9 | &__item { 10 | @include flex($dir: column, $ai: center, $jc: center); 11 | @include font($size: 0.9rem, $weight: 300, $color: var(--light-0)); 12 | 13 | padding: 10px 40px; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/applications/containers/launchpad/launchpad.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-launchpad', 5 | templateUrl: './launchpad.component.html', 6 | styleUrls: ['./launchpad.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false 9 | }) 10 | export class LaunchpadComponent implements OnInit { 11 | 12 | apps = [ 13 | 'mission-control', 14 | 'siri', 15 | 'home', 16 | 'safari', 17 | 'calculator', 18 | 'dictionary', 19 | 'books', 20 | 'stock', 21 | 'pages', 22 | 'keynote', 23 | 'numbers', 24 | 'i-movies', 25 | 'garage-band', 26 | 'voice-memos', 27 | 'tv', 28 | 'podcasts', 29 | 'preview', 30 | 'photos', 31 | 'find-my', 32 | 'facetime', 33 | 'notes', 34 | 'reminders', 35 | 'contacts', 36 | 'mail', 37 | 'app-store', 38 | 'chrome', 39 | 'messages', 40 | 'music' 41 | ]; 42 | 43 | constructor() { } 44 | 45 | ngOnInit() { 46 | } 47 | 48 | } 49 | -------------------------------------------------------------------------------- /src/app/applications/containers/spotlight/spotlight.component.html: -------------------------------------------------------------------------------- 1 |
2 | 9 | 10 |
11 | 15 | {{ app }} 16 |
17 | 18 | 19 |
-------------------------------------------------------------------------------- /src/app/applications/containers/spotlight/spotlight.component.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers'; 2 | 3 | :host::ng-deep.p-autocomplete { 4 | width: 100%; 5 | 6 | .p-autocomplete-items { 7 | background-color: var(--mac-grey); 8 | padding: 10px; 9 | 10 | .p-autocomplete-item { 11 | padding: 0.5rem; 12 | 13 | &:hover { 14 | background-color: var(--blue-700); 15 | color: var(--light-0); 16 | } 17 | } 18 | } 19 | 20 | .p-inputtext { 21 | width: 100%; 22 | background-color: var(--mac-grey); 23 | border: none; 24 | 25 | &:enabled:focus { 26 | box-shadow: none; 27 | } 28 | } 29 | } 30 | 31 | .search-container { 32 | height: 200px; 33 | } 34 | 35 | .spotlight-result { 36 | @include flex($ai: center); 37 | 38 | &__title { 39 | font-size: 0.8rem; 40 | } 41 | 42 | &__icon { 43 | width: 1rem; 44 | margin-right: 0.5rem; 45 | user-select: none; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/app/applications/containers/spotlight/spotlight.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { AutoCompleteSelectEvent } from 'primeng/autocomplete'; 3 | import { DynamicDialogRef } from 'primeng/dynamicdialog'; 4 | import { dockItems } from 'src/app/shared/config/dock-items'; 5 | 6 | @Component({ 7 | selector: 'app-spotlight', 8 | templateUrl: './spotlight.component.html', 9 | styleUrls: ['./spotlight.component.scss'], 10 | standalone: false 11 | }) 12 | export class SpotlightComponent { 13 | 14 | results: string[] = []; 15 | 16 | constructor(private dialogRef: DynamicDialogRef) {} 17 | 18 | onSearch(search: any) { 19 | this.results = dockItems.filter( 20 | di => di.toLowerCase().startsWith(search.query.toLowerCase())); 21 | } 22 | 23 | onAppSelected(app: AutoCompleteSelectEvent) { 24 | this.dialogRef.close(app.value); 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /src/app/applications/containers/terminal/terminal.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 |
7 | library 13 | developer-thing --bash --120x24 14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /src/app/applications/containers/terminal/terminal.component.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers'; 2 | 3 | .dialog-header { 4 | @include flex($ai: center, $jc: space-between); 5 | 6 | background: var(--light-1); 7 | 8 | &__controls { 9 | padding: 0.5rem; 10 | } 11 | 12 | &__title { 13 | @include flex($ai: center, $jc: center); 14 | 15 | flex-grow: 1; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/applications/containers/terminal/terminal.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { TerminalService } from 'primeng/terminal'; 3 | import { TerminalCommand } from 'src/app/shared/config/terminal-command'; 4 | 5 | @Component({ 6 | selector: 'app-terminal', 7 | templateUrl: './terminal.component.html', 8 | styleUrls: ['./terminal.component.scss'], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | providers: [TerminalService], 11 | standalone: false 12 | }) 13 | export class TerminalComponent { 14 | 15 | constructor(private terminalService: TerminalService) { 16 | this.terminalService.commandHandler.subscribe(command => { 17 | const response = this.getCommandResponse(command); 18 | this.terminalService.sendResponse(response); 19 | }); 20 | } 21 | 22 | private getCommandResponse(command: string) { 23 | switch (command.toUpperCase()) { 24 | case TerminalCommand.Author: return 'Developer Thing'; 25 | case TerminalCommand.Ui: return 'PrimeNg'; 26 | case TerminalCommand.Framework: return 'Angular'; 27 | default: return 'Unknown command'; 28 | } 29 | } 30 | 31 | } 32 | -------------------------------------------------------------------------------- /src/app/applications/containers/trash/trash.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
9 | -------------------------------------------------------------------------------- /src/app/applications/containers/trash/trash.component.scss: -------------------------------------------------------------------------------- 1 | .finder { 2 | display: flex; 3 | height: 100%; 4 | 5 | &__sidebar { 6 | width: 35%; 7 | max-width: 200px; 8 | } 9 | 10 | &__content { 11 | padding: 1rem; 12 | width: 65%; 13 | } 14 | 15 | @media screen and (min-width: 996px) { 16 | &__sidebar { 17 | width: 25%; 18 | } 19 | 20 | &__content { 21 | width: 75%; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/app/applications/containers/trash/trash.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; 2 | import { MyStore } from 'src/app/shared/store/my-store'; 3 | 4 | @Component({ 5 | selector: 'app-trash', 6 | templateUrl: './trash.component.html', 7 | styleUrls: ['./trash.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false 10 | }) 11 | export class TrashComponent { 12 | myStore = inject(MyStore); 13 | 14 | folders = this.myStore.trashFolders; 15 | 16 | constructor() {} 17 | } 18 | -------------------------------------------------------------------------------- /src/app/core/boot/boot.component.html: -------------------------------------------------------------------------------- 1 |
2 | 6 | 7 |
8 | 13 |
14 |
-------------------------------------------------------------------------------- /src/app/core/boot/boot.component.scss: -------------------------------------------------------------------------------- 1 | ::ng-deep.boot-screen { 2 | background-color: var(--dark-0); 3 | height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | 9 | &__logo { 10 | width: 60px; 11 | margin-bottom: 80px; 12 | } 13 | 14 | &__progress-bar { 15 | .p-progressbar { 16 | background-color: var(--mac-grey); 17 | 18 | .p-progressbar-value { 19 | background-color: var(--light-0); 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/app/core/boot/boot.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-boot', 6 | templateUrl: './boot.component.html', 7 | styleUrls: ['./boot.component.scss'], 8 | standalone: false 9 | }) 10 | export class BootComponent implements OnInit { 11 | 12 | progressBarValue = 0; 13 | 14 | constructor(private router: Router) { } 15 | 16 | ngOnInit() { 17 | let interval = setInterval(() => { 18 | this.progressBarValue = this.progressBarValue + Math.floor(Math.random() * 10) + 40; 19 | if (this.progressBarValue >= 100) { 20 | this.progressBarValue = 100; 21 | clearInterval(interval); 22 | this.router.navigate(['/login']); 23 | } 24 | }, 1500); 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /src/app/core/core.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { BootComponent } from './boot/boot.component'; 4 | import { SharedModule } from '../shared/shared.module'; 5 | import { LoginComponent } from './login/login.component'; 6 | import { MachineControlsComponent } from './machine-controls/machine-controls.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | BootComponent, 11 | LoginComponent, 12 | MachineControlsComponent 13 | ], 14 | imports: [ 15 | CommonModule, 16 | SharedModule 17 | ] 18 | }) 19 | export class CoreModule { } 20 | -------------------------------------------------------------------------------- /src/app/core/login/login.component.html: -------------------------------------------------------------------------------- 1 |
2 | 5 | 6 |

Developer Thing

7 | 8 |
9 |
10 | 11 | 20 |
21 |
22 | 23 |
24 | Touch ID or enter password 25 |
26 | 27 |
28 | 29 |
30 |
-------------------------------------------------------------------------------- /src/app/core/login/login.component.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers'; 2 | 3 | ::ng-deep.login-screen { 4 | @include bg-image($uri: '/assets/images/desktop-background.jpg', $size: cover, $position: center); 5 | @include flex($dir: column, $ai: center, $jc: center); 6 | 7 | height: 100vh; 8 | color: var(--light-0); 9 | position: relative; 10 | 11 | &__logo { 12 | width: 120px; 13 | margin-bottom: 1rem; 14 | } 15 | 16 | &__username { 17 | color: var(--mac-grey); 18 | text-shadow: 1px 1px var(--dark-0); 19 | margin-bottom: 1rem; 20 | } 21 | 22 | &__input { 23 | margin-bottom: 1rem; 24 | 25 | .p-inputtext { 26 | background-color: rgba($color: #000000, $alpha: 0.1); 27 | outline: none; 28 | border: none; 29 | border-radius: 25px; 30 | color: var(--light-0); 31 | padding-left: 20px; 32 | 33 | &::placeholder { 34 | color: var(--mac-grey); 35 | } 36 | 37 | &:hover, 38 | &:enabled:focus { 39 | box-shadow: none; 40 | border: none; 41 | } 42 | } 43 | } 44 | 45 | &__password-hint { 46 | font-size: 0.8rem; 47 | text-align: center; 48 | text-shadow: 1px 1px var(--dark-0); 49 | } 50 | 51 | &__machine-controls { 52 | position: absolute; 53 | bottom: 40px; 54 | } 55 | } -------------------------------------------------------------------------------- /src/app/core/login/login.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 3 | import { By } from '@angular/platform-browser'; 4 | import { DebugElement } from '@angular/core'; 5 | 6 | import { LoginComponent } from './login.component'; 7 | 8 | describe('LoginComponent', () => { 9 | let component: LoginComponent; 10 | let fixture: ComponentFixture; 11 | 12 | beforeEach(async(() => { 13 | TestBed.configureTestingModule({ 14 | declarations: [ LoginComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(LoginComponent); 21 | component = fixture.componentInstance; 22 | fixture.detectChanges(); 23 | }); 24 | 25 | it('should create', () => { 26 | expect(component).toBeTruthy(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/app/core/login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-login', 6 | templateUrl: './login.component.html', 7 | styleUrls: ['./login.component.scss'], 8 | standalone: false 9 | }) 10 | export class LoginComponent { 11 | 12 | constructor(private router: Router) { } 13 | 14 | openDesktop() { 15 | this.router.navigate(['desktop']); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/core/machine-controls/machine-controls.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | Shut Down 5 |
6 | 7 |
8 | 9 | Restart 10 |
11 | 12 |
13 | 14 | Sleep 15 |
16 |
-------------------------------------------------------------------------------- /src/app/core/machine-controls/machine-controls.component.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers'; 2 | 3 | .machine-controls { 4 | @include flex($ai: center, $jc: space-between); 5 | 6 | width: 200px; 7 | 8 | &__item { 9 | @include flex($dir: column, $ai: center); 10 | 11 | i { 12 | color: var(--mac-grey); 13 | font-size: 1.5rem; 14 | margin-bottom: 0.5rem; 15 | padding: 0.5rem; 16 | border: 1px solid var(--mac-grey); 17 | background-color: var(--purple-3); 18 | border-radius: 50%; 19 | } 20 | 21 | span { 22 | font-size: 0.6rem; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/app/core/machine-controls/machine-controls.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-machine-controls', 5 | templateUrl: './machine-controls.component.html', 6 | styleUrls: ['./machine-controls.component.scss'], 7 | standalone: false 8 | }) 9 | export class MachineControlsComponent implements OnInit { 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/shared-ui/shared-ui.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { ProgressBarModule } from 'primeng/progressbar'; 5 | import { InputTextModule } from 'primeng/inputtext'; 6 | import { DockModule } from 'primeng/dock'; 7 | import { MenubarModule } from 'primeng/menubar'; 8 | import { SidebarModule } from 'primeng/sidebar'; 9 | import { TerminalModule } from 'primeng/terminal'; 10 | import { ContextMenuModule } from 'primeng/contextmenu'; 11 | import { AutoCompleteModule } from 'primeng/autocomplete'; 12 | import { DialogModule } from 'primeng/dialog'; 13 | 14 | @NgModule({ 15 | declarations: [], 16 | imports: [ 17 | CommonModule 18 | ], 19 | exports: [ 20 | ProgressBarModule, 21 | InputTextModule, 22 | DockModule, 23 | MenubarModule, 24 | SidebarModule, 25 | TerminalModule, 26 | ContextMenuModule, 27 | AutoCompleteModule, 28 | DialogModule 29 | ] 30 | }) 31 | export class SharedUiModule { } 32 | -------------------------------------------------------------------------------- /src/app/shared/components/clock/clock.component.html: -------------------------------------------------------------------------------- 1 | 2 | {{ $time | async | date:'ccc dd. LLL HH:mm'}} 3 | -------------------------------------------------------------------------------- /src/app/shared/components/clock/clock.component.scss: -------------------------------------------------------------------------------- 1 | .clock { 2 | padding: 0 0.75rem; 3 | user-select: none; 4 | } -------------------------------------------------------------------------------- /src/app/shared/components/clock/clock.component.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; 3 | import { map, Observable, timer } from 'rxjs'; 4 | 5 | @Component({ 6 | selector: 'app-clock', 7 | imports: [CommonModule], 8 | templateUrl: './clock.component.html', 9 | styleUrls: ['./clock.component.scss'], 10 | changeDetection: ChangeDetectionStrategy.OnPush 11 | }) 12 | export class ClockComponent { 13 | 14 | public $time: Observable = timer(0, 1000) 15 | .pipe(map(() => new Date())); 16 | 17 | } 18 | -------------------------------------------------------------------------------- /src/app/shared/components/context-menu/context-menu.component.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/app/shared/components/context-menu/context-menu.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/shared/components/context-menu/context-menu.component.scss -------------------------------------------------------------------------------- /src/app/shared/components/context-menu/context-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ChangeDetectionStrategy, 3 | Component, 4 | EventEmitter, 5 | Input, 6 | Output, 7 | } from '@angular/core'; 8 | import { MenuItem } from 'primeng/api'; 9 | 10 | @Component({ 11 | selector: 'app-context-menu', 12 | templateUrl: './context-menu.component.html', 13 | styleUrls: ['./context-menu.component.scss'], 14 | changeDetection: ChangeDetectionStrategy.OnPush, 15 | standalone: false 16 | }) 17 | export class ContextMenuComponent { 18 | @Input() target: any; 19 | 20 | @Output() addNewFolder = new EventEmitter(); 21 | 22 | items: MenuItem[] = [ 23 | { 24 | label: 'New Folder', 25 | command: () => this.addNewFolder.emit(), 26 | }, 27 | { 28 | label: 'Get Info', 29 | }, 30 | { 31 | label: 'Change Desktop Background...', 32 | }, 33 | { 34 | label: 'Use Stacks', 35 | }, 36 | { 37 | label: 'Show View Options', 38 | }, 39 | ]; 40 | 41 | constructor() {} 42 | } 43 | -------------------------------------------------------------------------------- /src/app/shared/config/applications.ts: -------------------------------------------------------------------------------- 1 | export const DESKTOP = 'desktop'; 2 | export const TERMINAL = 'terminal'; 3 | export const FINDER = 'finder'; 4 | export const SYSTEM_PREFERENCES = 'system-preferences'; 5 | export const TRASH = 'trash'; 6 | export const SPOTLIGHT = 'spotlight'; 7 | export const TEXT_EDIT = 'text-edit'; 8 | export const SAFARI = 'safari'; 9 | export const MUSIC = 'music'; 10 | export const LAUNCHPAD = 'launchpad'; 11 | -------------------------------------------------------------------------------- /src/app/shared/config/dock-items.ts: -------------------------------------------------------------------------------- 1 | import * as Applications from './applications'; 2 | 3 | export const dockItems = [ 4 | Applications.FINDER, 5 | Applications.TERMINAL, 6 | Applications.LAUNCHPAD, 7 | Applications.SAFARI, 8 | Applications.MUSIC, 9 | Applications.SYSTEM_PREFERENCES, 10 | Applications.TRASH 11 | ]; 12 | -------------------------------------------------------------------------------- /src/app/shared/config/terminal-command.ts: -------------------------------------------------------------------------------- 1 | export enum TerminalCommand { 2 | Ui = 'UI', 3 | Author = 'AUTHOR', 4 | Framework = 'FRAMEWORK' 5 | } 6 | -------------------------------------------------------------------------------- /src/app/shared/models/folder-selection.ts: -------------------------------------------------------------------------------- 1 | export interface FolderSelection { 2 | id: number; 3 | selected: boolean; 4 | selectedMultiple: boolean; 5 | } -------------------------------------------------------------------------------- /src/app/shared/models/folder-type.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/app/shared/models/folder-type.ts -------------------------------------------------------------------------------- /src/app/shared/models/folder.ts: -------------------------------------------------------------------------------- 1 | export interface Folder { 2 | id: number; 3 | title: string; 4 | selected?: boolean; 5 | deleted?: boolean; 6 | parentFolderId?: number; 7 | } 8 | -------------------------------------------------------------------------------- /src/app/shared/models/sidebar-group.ts: -------------------------------------------------------------------------------- 1 | import { SidebarItem } from "./sidebar-item"; 2 | 3 | export interface SidebarGroup { 4 | category: string; 5 | items: SidebarItem[]; 6 | } -------------------------------------------------------------------------------- /src/app/shared/models/sidebar-item.ts: -------------------------------------------------------------------------------- 1 | export interface SidebarItem { 2 | label: string; 3 | image?: string; 4 | icon?: string; 5 | } -------------------------------------------------------------------------------- /src/app/shared/services/window.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { DialogService, DynamicDialogConfig } from "primeng/dynamicdialog"; 3 | import { Observable, throwError } from "rxjs"; 4 | import * as apps from './../config/applications'; 5 | import * as appComponents from './../../applications/containers'; 6 | 7 | @Injectable({ providedIn: 'root' }) 8 | export class WindowService { 9 | 10 | constructor(private dialogService: DialogService) {} 11 | 12 | open(activeApplication: string): Observable { 13 | const component = this.findComponentByApplicationId(activeApplication); 14 | 15 | if (component) { 16 | const dialogConfig: DynamicDialogConfig = { 17 | showHeader: false, 18 | width: '50%', 19 | styleClass: activeApplication 20 | }; 21 | 22 | return this.dialogService.open(component, dialogConfig).onClose; 23 | } 24 | 25 | return throwError(() => 'Could not find component to display'); 26 | } 27 | 28 | private findComponentByApplicationId(applicationId: string) { 29 | switch (applicationId) { 30 | case apps.TERMINAL: return appComponents.TerminalComponent; 31 | case apps.FINDER: return appComponents.FinderComponent; 32 | case apps.TRASH: return appComponents.TrashComponent; 33 | case apps.SPOTLIGHT: return appComponents.SpotlightComponent; 34 | 35 | default: return null; 36 | } 37 | } 38 | 39 | } -------------------------------------------------------------------------------- /src/app/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { SharedUiModule } from '../shared-ui/shared-ui.module'; 4 | 5 | import { DialogService, DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog'; 6 | import { ContextMenuComponent } from './components/context-menu/context-menu.component'; 7 | import { FormsModule } from '@angular/forms'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | ContextMenuComponent 12 | ], 13 | imports: [ 14 | CommonModule, 15 | SharedUiModule 16 | ], 17 | exports: [ 18 | ContextMenuComponent, 19 | FormsModule, 20 | SharedUiModule 21 | ], 22 | providers: [ 23 | DialogService, 24 | DynamicDialogRef, 25 | DynamicDialogConfig 26 | ] 27 | }) 28 | export class SharedModule { } 29 | -------------------------------------------------------------------------------- /src/app/shared/store/my-store.ts: -------------------------------------------------------------------------------- 1 | import { 2 | patchState, 3 | signalStore, 4 | withComputed, 5 | withMethods, 6 | withState, 7 | } from '@ngrx/signals'; 8 | import { State } from './state'; 9 | import { DESKTOP } from '../config/applications'; 10 | import { computed } from '@angular/core'; 11 | import { Folder } from '../models/folder'; 12 | import { FolderSelection } from '../models/folder-selection'; 13 | 14 | const initialState: State = { 15 | activeApplication: DESKTOP, 16 | selectedFolderIds: [], 17 | deletedFolderIds: [], 18 | folders: [ 19 | { 20 | id: 0, 21 | title: 'desktop', 22 | }, 23 | { 24 | id: 1, 25 | title: 'untitled', 26 | parentFolderId: 0, 27 | }, 28 | { 29 | id: 2, 30 | title: 'tutorials', 31 | parentFolderId: 0, 32 | }, 33 | { 34 | id: 3, 35 | title: 'assets', 36 | parentFolderId: 2, 37 | }, 38 | ], 39 | }; 40 | 41 | export const MyStore = signalStore( 42 | { providedIn: 'root' }, 43 | 44 | withState(initialState), 45 | 46 | withComputed(({ folders, deletedFolderIds, selectedFolderIds }) => ({ 47 | tutorialFolders: computed(() => { 48 | return folders() 49 | .filter( 50 | f => f.parentFolderId === 2 && !deletedFolderIds().includes(f.id) 51 | ) 52 | .map(f => { 53 | return { 54 | ...f, 55 | selected: selectedFolderIds().includes(f.id), 56 | }; 57 | }); 58 | }), 59 | 60 | desktopFolders: computed(() => { 61 | return folders() 62 | .filter( 63 | f => f.parentFolderId === 0 && !deletedFolderIds().includes(f.id) 64 | ) 65 | .map(f => { 66 | return { 67 | ...f, 68 | selected: selectedFolderIds().includes(f.id), 69 | }; 70 | }); 71 | }), 72 | 73 | trashFolders: computed(() => { 74 | return folders().filter(f => deletedFolderIds().includes(f.id)); 75 | }), 76 | 77 | trashItemsCount: computed(() => { 78 | return deletedFolderIds().length; 79 | }), 80 | })), 81 | 82 | withMethods(({ folders, selectedFolderIds, deletedFolderIds, ...store }) => ({ 83 | setActiveApplication(activeAppId = DESKTOP) { 84 | patchState(store, { 85 | activeApplication: activeAppId, 86 | }); 87 | }, 88 | 89 | addNewFolder() { 90 | const miliseconds = new Date().getTime(); 91 | const newFolder: Folder = { 92 | id: miliseconds, 93 | title: `${miliseconds}`, 94 | parentFolderId: 0, 95 | }; 96 | patchState(store, { folders: [...folders(), newFolder] }); 97 | }, 98 | 99 | toggleFolder(folderSelection: FolderSelection) { 100 | if (folderSelection.selectedMultiple) { 101 | patchState(store, { 102 | selectedFolderIds: [...selectedFolderIds(), folderSelection.id], 103 | }); 104 | } else { 105 | patchState(store, { 106 | selectedFolderIds: [folderSelection.id], 107 | }); 108 | } 109 | }, 110 | 111 | unselectAllFolders() { 112 | patchState(store, { selectedFolderIds: [] }); 113 | }, 114 | 115 | deleteSelectedFolders() { 116 | patchState(store, { 117 | deletedFolderIds: [...deletedFolderIds(), ...selectedFolderIds()], 118 | }); 119 | }, 120 | })) 121 | ); 122 | -------------------------------------------------------------------------------- /src/app/shared/store/state.ts: -------------------------------------------------------------------------------- 1 | import { Folder } from "../models/folder"; 2 | 3 | export interface State { 4 | folders: Folder[]; 5 | selectedFolderIds: number[]; 6 | deletedFolderIds: number[]; 7 | activeApplication: string; 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/images/airdrop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/airdrop.png -------------------------------------------------------------------------------- /src/assets/images/app-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/app-store.png -------------------------------------------------------------------------------- /src/assets/images/apple-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/apple-logo.png -------------------------------------------------------------------------------- /src/assets/images/applications.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/applications.png -------------------------------------------------------------------------------- /src/assets/images/bluetooth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/bluetooth.png -------------------------------------------------------------------------------- /src/assets/images/books.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/books.png -------------------------------------------------------------------------------- /src/assets/images/buy-me-a-coffee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/buy-me-a-coffee.png -------------------------------------------------------------------------------- /src/assets/images/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/calculator.png -------------------------------------------------------------------------------- /src/assets/images/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/chrome.png -------------------------------------------------------------------------------- /src/assets/images/contacts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/contacts.png -------------------------------------------------------------------------------- /src/assets/images/desktop-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/desktop-background.jpg -------------------------------------------------------------------------------- /src/assets/images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/desktop.png -------------------------------------------------------------------------------- /src/assets/images/dictionary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/dictionary.png -------------------------------------------------------------------------------- /src/assets/images/documents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/documents.png -------------------------------------------------------------------------------- /src/assets/images/downloads.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/downloads.png -------------------------------------------------------------------------------- /src/assets/images/facetime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/facetime.png -------------------------------------------------------------------------------- /src/assets/images/find-my.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/find-my.png -------------------------------------------------------------------------------- /src/assets/images/finder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/finder.png -------------------------------------------------------------------------------- /src/assets/images/folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/folder.png -------------------------------------------------------------------------------- /src/assets/images/garage-band.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/garage-band.png -------------------------------------------------------------------------------- /src/assets/images/golf-ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/golf-ball.png -------------------------------------------------------------------------------- /src/assets/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/home.png -------------------------------------------------------------------------------- /src/assets/images/i-movies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/i-movies.png -------------------------------------------------------------------------------- /src/assets/images/icloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/icloud.png -------------------------------------------------------------------------------- /src/assets/images/keynote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/keynote.png -------------------------------------------------------------------------------- /src/assets/images/launchpad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/launchpad.png -------------------------------------------------------------------------------- /src/assets/images/library.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/library.png -------------------------------------------------------------------------------- /src/assets/images/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/mail.png -------------------------------------------------------------------------------- /src/assets/images/messages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/messages.png -------------------------------------------------------------------------------- /src/assets/images/mission-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/mission-control.png -------------------------------------------------------------------------------- /src/assets/images/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/music.png -------------------------------------------------------------------------------- /src/assets/images/network.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/network.png -------------------------------------------------------------------------------- /src/assets/images/notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/notes.png -------------------------------------------------------------------------------- /src/assets/images/numbers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/numbers.png -------------------------------------------------------------------------------- /src/assets/images/pages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/pages.png -------------------------------------------------------------------------------- /src/assets/images/photos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/photos.png -------------------------------------------------------------------------------- /src/assets/images/podcasts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/podcasts.png -------------------------------------------------------------------------------- /src/assets/images/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/preview.png -------------------------------------------------------------------------------- /src/assets/images/recents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/recents.png -------------------------------------------------------------------------------- /src/assets/images/reminders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/reminders.png -------------------------------------------------------------------------------- /src/assets/images/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/safari.png -------------------------------------------------------------------------------- /src/assets/images/share-centre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/share-centre.png -------------------------------------------------------------------------------- /src/assets/images/siri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/siri.png -------------------------------------------------------------------------------- /src/assets/images/stock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/stock.png -------------------------------------------------------------------------------- /src/assets/images/system-preferences.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/system-preferences.png -------------------------------------------------------------------------------- /src/assets/images/terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/terminal.png -------------------------------------------------------------------------------- /src/assets/images/trash-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/trash-full.png -------------------------------------------------------------------------------- /src/assets/images/trash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/trash.png -------------------------------------------------------------------------------- /src/assets/images/tv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/tv.png -------------------------------------------------------------------------------- /src/assets/images/voice-memos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/assets/images/voice-memos.png -------------------------------------------------------------------------------- /src/assets/styles/_base.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;400&display=swap'); 2 | 3 | * { 4 | //margin: 0; 5 | box-sizing: border-box; 6 | user-select: none; 7 | -webkit-user-select: none; 8 | } 9 | 10 | body { 11 | font-family: 'Yantramanav'; 12 | margin: 0; 13 | } 14 | 15 | .text-red { 16 | color: var(--mac-red); 17 | } 18 | 19 | .text-gold { 20 | color: var(--mac-gold); 21 | } 22 | 23 | .text-green { 24 | color: var(--mac-green); 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/styles/_helpers.scss: -------------------------------------------------------------------------------- 1 | @mixin flex($dir: row, $ai: stretch, $jc: stretch, $wrap: nowrap) { 2 | display: flex; 3 | flex-direction: $dir; 4 | align-items: $ai; 5 | justify-content: $jc; 6 | flex-wrap: $wrap; 7 | } 8 | 9 | @mixin font($size: inherit, $weight: inherit, $color: inherit) { 10 | font-family: 'Yantramanav', sans-serif; 11 | font-size: $size; 12 | font-weight: $weight; 13 | color: $color; 14 | } 15 | 16 | @mixin bg-image($uri, $size, $position) { 17 | background-image: url($uri); 18 | background-size: $size; 19 | background-position: $position; 20 | } -------------------------------------------------------------------------------- /src/assets/styles/_prime-ng-overrides.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers'; 2 | 3 | .p-terminal { 4 | border: 0; 5 | } 6 | 7 | .p-dialog { 8 | border-radius: 0.5rem; 9 | 10 | .p-dialog-content { 11 | border: 0; 12 | border-radius: 0.5rem; 13 | padding: 0; 14 | } 15 | 16 | &.spotlight { 17 | box-shadow: none; 18 | 19 | .p-dialog-content { 20 | background-color: transparent; 21 | } 22 | } 23 | } 24 | 25 | .context-menu { 26 | @include font($size: 0.8rem, $weight: 500); 27 | } -------------------------------------------------------------------------------- /src/assets/styles/_prime-ng.scss: -------------------------------------------------------------------------------- 1 | @import 'primeng/resources/primeng.min.css'; 2 | @import 'primeng/resources/themes/saga-blue/theme.css'; 3 | @import 'primeicons/primeicons.css'; 4 | @import 'primeflex/primeflex.css'; 5 | -------------------------------------------------------------------------------- /src/assets/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --mac-sky-blue: #71c5e8; 3 | --mac-green: #00ca4e; 4 | --mac-red: #ff605c; 5 | --mac-gold: #ffbd44; 6 | --mac-plum: #8a1b61; 7 | --mac-blue: #009cdf; 8 | --mac-grey: rgb(219, 219, 219); 9 | --light-0: #fff; 10 | --light-1: rgb(223, 225, 235); 11 | --dark-0: #000; 12 | --dark-1: rgb(32, 32, 32); 13 | --purple-0: rgb(238, 201, 236); 14 | --purple-1: #5a0a56; 15 | --purple-2: rgb(95 1 109 / 50%); 16 | --grey-0: #e5e1ed; 17 | --grey-1: #a5a5a5; 18 | --grey-2: rgb(229, 226, 239); 19 | --grey-3: rgb(223, 225, 235); 20 | --grey-4: #cdcccc; 21 | --grey-5: #ddd; 22 | } -------------------------------------------------------------------------------- /src/assets/styles/styles.scss: -------------------------------------------------------------------------------- 1 | @import '_base'; 2 | @import '_prime-ng'; 3 | @import '_prime-ng-overrides'; 4 | @import '_variables'; 5 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Developer-Thing/mac-os-monterey/89ff22e27ea8d408b88a1e3838c565d83c75949a/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MacOsClone 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including 12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * By default, zone.js will patch all possible macroTask and DomEvents 23 | * user can disable parts of macroTask/DomEvents patch by setting following flags 24 | * because those flags need to be set before `zone.js` being loaded, and webpack 25 | * will put import in the top of bundle, so user need to create a separate file 26 | * in this directory (for example: zone-flags.ts), and put the following flags 27 | * into that file, and then add the following code before importing zone.js. 28 | * import './zone-flags'; 29 | * 30 | * The flags allowed in zone-flags.ts are listed here. 31 | * 32 | * The following flags will work for all browsers. 33 | * 34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 37 | * 38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 40 | * 41 | * (window as any).__Zone_enable_cross_context_check = true; 42 | * 43 | */ 44 | 45 | /*************************************************************************************************** 46 | * Zone JS is required by default for Angular itself. 47 | */ 48 | import 'zone.js'; // Included with Angular CLI. 49 | 50 | 51 | /*************************************************************************************************** 52 | * APPLICATION IMPORTS 53 | */ 54 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | // First, initialize the Angular testing environment. 11 | getTestBed().initTestEnvironment( 12 | BrowserDynamicTestingModule, 13 | platformBrowserDynamicTesting(), 14 | ); 15 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "esModuleInterop": true, 9 | "strict": true, 10 | "noImplicitOverride": true, 11 | "noPropertyAccessFromIndexSignature": true, 12 | "noImplicitReturns": true, 13 | "noFallthroughCasesInSwitch": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "node", 18 | "importHelpers": true, 19 | "target": "ES2022", 20 | "module": "es2020", 21 | "lib": [ 22 | "es2020", 23 | "dom" 24 | ], 25 | "useDefineForClassFields": false 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | --------------------------------------------------------------------------------