diff --git a/How to/Restrict the context menu option/.editorconfig b/How to/Restrict the context menu option/.editorconfig new file mode 100644 index 0000000..f166060 --- /dev/null +++ b/How to/Restrict the context menu option/.editorconfig @@ -0,0 +1,17 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.ts] +quote_type = single +ij_typescript_use_double_quotes = false + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/How to/Restrict the context menu option/.gitignore b/How to/Restrict the context menu option/.gitignore new file mode 100644 index 0000000..cc7b141 --- /dev/null +++ b/How to/Restrict the context menu option/.gitignore @@ -0,0 +1,42 @@ +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings + +# System files +.DS_Store +Thumbs.db diff --git a/How to/Restrict the context menu option/README.md b/How to/Restrict the context menu option/README.md new file mode 100644 index 0000000..4766ad2 --- /dev/null +++ b/How to/Restrict the context menu option/README.md @@ -0,0 +1,59 @@ +# MyApp + +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.15. + +## Development server + +To start a local development server, run: + +```bash +ng serve +``` + +Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. + +## Code scaffolding + +Angular CLI includes powerful code scaffolding tools. To generate a new component, run: + +```bash +ng generate component component-name +``` + +For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run: + +```bash +ng generate --help +``` + +## Building + +To build the project run: + +```bash +ng build +``` + +This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. + +## Running unit tests + +To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: + +```bash +ng test +``` + +## Running end-to-end tests + +For end-to-end (e2e) testing, run: + +```bash +ng e2e +``` + +Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs. + +## Additional Resources + +For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. diff --git a/How to/Restrict the context menu option/angular.json b/How to/Restrict the context menu option/angular.json new file mode 100644 index 0000000..273e795 --- /dev/null +++ b/How to/Restrict the context menu option/angular.json @@ -0,0 +1,104 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "my-app": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:application", + "options": { + "outputPath": "dist/my-app", + "index": "src/index.html", + "browser": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ], + "scripts": [], + "server": "src/main.server.ts", + "outputMode": "server", + "ssr": { + "entry": "src/server.ts" + } + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "4kB", + "maximumError": "8kB" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "my-app:build:production" + }, + "development": { + "buildTarget": "my-app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n" + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + } + } + } + }, + "cli": { + "analytics": "00c678c6-17d6-4fa4-bd0b-bc333253ddde" + } +} diff --git a/How to/Restrict the context menu option/package.json b/How to/Restrict the context menu option/package.json new file mode 100644 index 0000000..d61e32c --- /dev/null +++ b/How to/Restrict the context menu option/package.json @@ -0,0 +1,46 @@ +{ + "name": "my-app", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test", + "serve:ssr:my-app": "node dist/my-app/server/server.mjs" + }, + "private": true, + "dependencies": { + "@angular/common": "^19.2.0", + "@angular/compiler": "^19.2.0", + "@angular/core": "^19.2.0", + "@angular/forms": "^19.2.0", + "@angular/platform-browser": "^19.2.0", + "@angular/platform-browser-dynamic": "^19.2.0", + "@angular/platform-server": "^19.2.0", + "@angular/router": "^19.2.0", + "@angular/ssr": "^19.2.15", + "@syncfusion/ej2-angular-pdfviewer": "*", + "@syncfusion/ej2-angular-buttons":"*", + "@syncfusion/ej2-angular-notifications":"*", + "express": "^4.18.2", + "rxjs": "~7.8.0", + "tslib": "^2.3.0", + "zone.js": "~0.15.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^19.2.15", + "@angular/cli": "^19.2.15", + "@angular/compiler-cli": "^19.2.0", + "@types/express": "^4.17.17", + "@types/jasmine": "~5.1.0", + "@types/node": "^18.18.0", + "jasmine-core": "~5.6.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.2.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.1.0", + "typescript": "~5.7.2" + } +} diff --git a/How to/Restrict the context menu option/public/favicon.ico b/How to/Restrict the context menu option/public/favicon.ico new file mode 100644 index 0000000..57614f9 Binary files /dev/null and b/How to/Restrict the context menu option/public/favicon.ico differ diff --git a/How to/Restrict the context menu option/src/app/app.component.css b/How to/Restrict the context menu option/src/app/app.component.css new file mode 100644 index 0000000..e69de29 diff --git a/How to/Restrict the context menu option/src/app/app.component.html b/How to/Restrict the context menu option/src/app/app.component.html new file mode 100644 index 0000000..3ed4904 --- /dev/null +++ b/How to/Restrict the context menu option/src/app/app.component.html @@ -0,0 +1,18 @@ + +
+
+ +
+
diff --git a/How to/Restrict the context menu option/src/app/app.component.spec.ts b/How to/Restrict the context menu option/src/app/app.component.spec.ts new file mode 100644 index 0000000..5119ea2 --- /dev/null +++ b/How to/Restrict the context menu option/src/app/app.component.spec.ts @@ -0,0 +1,29 @@ +import { TestBed } from '@angular/core/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AppComponent], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have the 'my-app' title`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('my-app'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Hello, my-app'); + }); +}); diff --git a/How to/Restrict the context menu option/src/app/app.component.ts b/How to/Restrict the context menu option/src/app/app.component.ts new file mode 100644 index 0000000..d93df43 --- /dev/null +++ b/How to/Restrict the context menu option/src/app/app.component.ts @@ -0,0 +1,47 @@ +import { Component, ViewEncapsulation, OnInit,ViewChild} from '@angular/core'; +import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService, PageOrganizerService,PdfViewerModule, TextSelectionStartEventArgs, AnnotationSelectEventArgs } from '@syncfusion/ej2-angular-pdfviewer'; +import { SwitchComponent, SwitchModule } from '@syncfusion/ej2-angular-buttons'; +import { ClickEventArgs } from '@syncfusion/ej2-buttons'; + + + +/** + * Default PdfViewer Controller + */ +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + encapsulation: ViewEncapsulation.None, + // tslint:disable-next-line:max-line-length + providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, + TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService,PageOrganizerService], + styleUrls: ['app.component.css'], + standalone: true, + imports: [ + + SwitchModule, + PdfViewerModule, + + ], +}) + +export class AppComponent { + @ViewChild('pdfviewer') + public pdfviewerControl: PdfViewerComponent | undefined; + + public document: string = 'https://cdn.syncfusion.com/content/pdf/blazor-annotations.pdf'; + public resource:string = "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib"; + ngOnInit(): void { + // ngOnInit function + } + //Restrict Context Menu Option on TextSelection + public textSelection(e: TextSelectionStartEventArgs): void { + if(this.pdfviewerControl) + this.pdfviewerControl.contextMenuOption = "None"; + } + //Context Menu Option on AnnotationSelection + public annotationSelected(e: AnnotationSelectEventArgs): void { + if(this.pdfviewerControl) + this.pdfviewerControl.contextMenuOption = "RightClick"; + } +} diff --git a/How to/Restrict the context menu option/src/app/app.config.server.ts b/How to/Restrict the context menu option/src/app/app.config.server.ts new file mode 100644 index 0000000..0125189 --- /dev/null +++ b/How to/Restrict the context menu option/src/app/app.config.server.ts @@ -0,0 +1,14 @@ +import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; +import { provideServerRendering } from '@angular/platform-server'; +import { provideServerRouting } from '@angular/ssr'; +import { appConfig } from './app.config'; +import { serverRoutes } from './app.routes.server'; + +const serverConfig: ApplicationConfig = { + providers: [ + provideServerRendering(), + provideServerRouting(serverRoutes) + ] +}; + +export const config = mergeApplicationConfig(appConfig, serverConfig); diff --git a/How to/Restrict the context menu option/src/app/app.config.ts b/How to/Restrict the context menu option/src/app/app.config.ts new file mode 100644 index 0000000..a9af518 --- /dev/null +++ b/How to/Restrict the context menu option/src/app/app.config.ts @@ -0,0 +1,9 @@ +import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { provideRouter } from '@angular/router'; + +import { routes } from './app.routes'; +import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; + +export const appConfig: ApplicationConfig = { + providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())] +}; diff --git a/How to/Restrict the context menu option/src/app/app.routes.server.ts b/How to/Restrict the context menu option/src/app/app.routes.server.ts new file mode 100644 index 0000000..ffd37b1 --- /dev/null +++ b/How to/Restrict the context menu option/src/app/app.routes.server.ts @@ -0,0 +1,8 @@ +import { RenderMode, ServerRoute } from '@angular/ssr'; + +export const serverRoutes: ServerRoute[] = [ + { + path: '**', + renderMode: RenderMode.Prerender + } +]; diff --git a/How to/Restrict the context menu option/src/app/app.routes.ts b/How to/Restrict the context menu option/src/app/app.routes.ts new file mode 100644 index 0000000..dc39edb --- /dev/null +++ b/How to/Restrict the context menu option/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = []; diff --git a/How to/Restrict the context menu option/src/index.html b/How to/Restrict the context menu option/src/index.html new file mode 100644 index 0000000..7fa8cd9 --- /dev/null +++ b/How to/Restrict the context menu option/src/index.html @@ -0,0 +1,13 @@ + + + + + MyApp + + + + + + + + diff --git a/How to/Restrict the context menu option/src/main.server.ts b/How to/Restrict the context menu option/src/main.server.ts new file mode 100644 index 0000000..4b9d4d1 --- /dev/null +++ b/How to/Restrict the context menu option/src/main.server.ts @@ -0,0 +1,7 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app/app.component'; +import { config } from './app/app.config.server'; + +const bootstrap = () => bootstrapApplication(AppComponent, config); + +export default bootstrap; diff --git a/How to/Restrict the context menu option/src/main.ts b/How to/Restrict the context menu option/src/main.ts new file mode 100644 index 0000000..35b00f3 --- /dev/null +++ b/How to/Restrict the context menu option/src/main.ts @@ -0,0 +1,6 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err)); diff --git a/How to/Restrict the context menu option/src/server.ts b/How to/Restrict the context menu option/src/server.ts new file mode 100644 index 0000000..591b7a6 --- /dev/null +++ b/How to/Restrict the context menu option/src/server.ts @@ -0,0 +1,66 @@ +import { + AngularNodeAppEngine, + createNodeRequestHandler, + isMainModule, + writeResponseToNodeResponse, +} from '@angular/ssr/node'; +import express from 'express'; +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const serverDistFolder = dirname(fileURLToPath(import.meta.url)); +const browserDistFolder = resolve(serverDistFolder, '../browser'); + +const app = express(); +const angularApp = new AngularNodeAppEngine(); + +/** + * Example Express Rest API endpoints can be defined here. + * Uncomment and define endpoints as necessary. + * + * Example: + * ```ts + * app.get('/api/**', (req, res) => { + * // Handle API request + * }); + * ``` + */ + +/** + * Serve static files from /browser + */ +app.use( + express.static(browserDistFolder, { + maxAge: '1y', + index: false, + redirect: false, + }), +); + +/** + * Handle all other requests by rendering the Angular application. + */ +app.use('/**', (req, res, next) => { + angularApp + .handle(req) + .then((response) => + response ? writeResponseToNodeResponse(response, res) : next(), + ) + .catch(next); +}); + +/** + * Start the server if this module is the main entry point. + * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000. + */ +if (isMainModule(import.meta.url)) { + const port = process.env['PORT'] || 4000; + app.listen(port, () => { + console.log(`Node Express server listening on http://localhost:${port}`); + }); +} + +/** + * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions. + */ +export const reqHandler = createNodeRequestHandler(app); diff --git a/How to/Restrict the context menu option/src/styles.css b/How to/Restrict the context menu option/src/styles.css new file mode 100644 index 0000000..baf1a1a --- /dev/null +++ b/How to/Restrict the context menu option/src/styles.css @@ -0,0 +1,11 @@ +/* You can add global styles to this file, and also import other style files */ +/* You can add global styles to this file, and also import other style files */ +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; \ No newline at end of file diff --git a/How to/Restrict the context menu option/tsconfig.app.json b/How to/Restrict the context menu option/tsconfig.app.json new file mode 100644 index 0000000..9ab8527 --- /dev/null +++ b/How to/Restrict the context menu option/tsconfig.app.json @@ -0,0 +1,19 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [ + "node" + ] + }, + "files": [ + "src/main.ts", + "src/main.server.ts", + "src/server.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/How to/Restrict the context menu option/tsconfig.json b/How to/Restrict the context menu option/tsconfig.json new file mode 100644 index 0000000..5525117 --- /dev/null +++ b/How to/Restrict the context menu option/tsconfig.json @@ -0,0 +1,27 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "skipLibCheck": true, + "isolatedModules": true, + "esModuleInterop": true, + "experimentalDecorators": true, + "moduleResolution": "bundler", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022" + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/How to/Restrict the context menu option/tsconfig.spec.json b/How to/Restrict the context menu option/tsconfig.spec.json new file mode 100644 index 0000000..5fb748d --- /dev/null +++ b/How to/Restrict the context menu option/tsconfig.spec.json @@ -0,0 +1,15 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +}