Merge pull request #10300 from abpframework/auto-merge/rel-5-0/581

Merge branch dev with rel-5.0
abpframework · Oct 13, 2021 · af87736 · af87736
2 parents 12485f6 + 064d569
commit af87736
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/docs/en/UI/Angular/Content-Strategy.md b/docs/en/UI/Angular/Content-Strategy.md
@@ -11,13 +11,15 @@
 constructor(
   public content: string,
   protected domStrategy?: DomStrategy,
-  protected contentSecurityStrategy?: ContentSecurityStrategy
+  protected contentSecurityStrategy?: ContentSecurityStrategy,
+  protected options?: ElementOptions = {},
 )
 ```
 
 - `content` is set to `<script>` and `<style>` elements as `textContent` property.
 - `domStrategy` is the `DomStrategy` that will be used when inserting the created element. (_default: AppendToHead_)
 - `contentSecurityStrategy` is the `ContentSecurityStrategy` that will be used on the created element before inserting it. (_default: None_)
+- `options` can be used to pass any option to the element that will be created. e.g: `{ id: "some-id" }` (_default: empty object_)
 
 Please refer to [DomStrategy](./Dom-Strategy.md) and [ContentSecurityStrategy](./Content-Security-Strategy.md) documentation for their usage.
 
@@ -57,7 +59,7 @@ Predefined content strategies are accessible via `CONTENT_STRATEGY` constant.
 ### AppendScriptToBody
 
 ```js
-CONTENT_STRATEGY.AppendScriptToBody(content: string)
+CONTENT_STRATEGY.AppendScriptToBody(content: string, options?: ElementOptions<HTMLScriptElement>)
 ```
 
 Creates a `<script>` element with the given content and places it at the **end** of `<body>` tag in the document.
@@ -66,7 +68,7 @@ Creates a `<script>` element with the given content and places it at the **end**
 ### AppendScriptToHead
 
 ```js
-CONTENT_STRATEGY.AppendScriptToHead(content: string)
+CONTENT_STRATEGY.AppendScriptToHead(content: string, options?: ElementOptions<HTMLScriptElement>)
 ```
 
 Creates a `<script>` element with the given content and places it at the **end** of `<head>` tag in the document.
@@ -75,7 +77,7 @@ Creates a `<script>` element with the given content and places it at the **end**
 ### AppendStyleToHead
 
 ```js
-CONTENT_STRATEGY.AppendStyleToHead(content: string)
+CONTENT_STRATEGY.AppendStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>)
 ```
 
 Creates a `<style>` element with the given content and places it at the **end** of `<head>` tag in the document.
@@ -84,7 +86,7 @@ Creates a `<style>` element with the given content and places it at the **end**
 ### PrependStyleToHead
 
 ```js
-CONTENT_STRATEGY.PrependStyleToHead(content: string)
+CONTENT_STRATEGY.PrependStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>)
 ```
 
 Creates a `<style>` element with the given content and places it at the **beginning** of `<head>` tag in the document.

diff --git a/npm/ng-packs/packages/core/src/lib/strategies/content.strategy.ts b/npm/ng-packs/packages/core/src/lib/strategies/content.strategy.ts
@@ -1,18 +1,27 @@
 import { ContentSecurityStrategy, CONTENT_SECURITY_STRATEGY } from './content-security.strategy';
 import { DomStrategy, DOM_STRATEGY } from './dom.strategy';
 
+export type ElementOptions<T extends HTMLScriptElement | HTMLStyleElement = any> = Partial<{
+  [key in keyof T]: T[key];
+}>;
+
 export abstract class ContentStrategy<T extends HTMLScriptElement | HTMLStyleElement = any> {
   constructor(
     public content: string,
     protected domStrategy: DomStrategy = DOM_STRATEGY.AppendToHead(),
     protected contentSecurityStrategy: ContentSecurityStrategy = CONTENT_SECURITY_STRATEGY.None(),
+    protected options: ElementOptions<T> = {},
   ) {}
 
   abstract createElement(): T;
 
   insertElement(): T {
     const element = this.createElement();
 
+    if (this.options && Object.keys(this.options).length > 0) {
+      Object.keys(this.options).forEach(key => (element[key] = this.options[key]));
+    }
+
     this.contentSecurityStrategy.applyCSP(element);
     this.domStrategy.insertElement(element);
 
@@ -39,16 +48,16 @@ export class ScriptContentStrategy extends ContentStrategy<HTMLScriptElement> {
 }
 
 export const CONTENT_STRATEGY = {
-  AppendScriptToBody(content: string) {
-    return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToBody());
+  AppendScriptToBody(content: string, options?: ElementOptions<HTMLScriptElement>) {
+    return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToBody(), undefined, options);
   },
-  AppendScriptToHead(content: string) {
-    return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToHead());
+  AppendScriptToHead(content: string, options?: ElementOptions<HTMLScriptElement>) {
+    return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToHead(), undefined, options);
   },
-  AppendStyleToHead(content: string) {
-    return new StyleContentStrategy(content, DOM_STRATEGY.AppendToHead());
+  AppendStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>) {
+    return new StyleContentStrategy(content, DOM_STRATEGY.AppendToHead(), undefined, options);
   },
-  PrependStyleToHead(content: string) {
-    return new StyleContentStrategy(content, DOM_STRATEGY.PrependToHead());
+  PrependStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>) {
+    return new StyleContentStrategy(content, DOM_STRATEGY.PrependToHead(), undefined, options);
   },
 };