fix(module:colorpicker): remove inline style (CSP compliant) (#8874)

NG-ZORRO · Nov 15, 2024 · 0264da9 · 0264da9
1 parent 58797c7
commit 0264da9
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 12 deletions.
diff --git a/components/color-picker/src/components/gradient.component.ts b/components/color-picker/src/components/gradient.component.ts
@@ -16,7 +16,6 @@ import { generateColor } from '../util/util';
   template: `
     <div
       class="ant-color-picker-gradient"
-      style="position: absolute; inset: 0"
       [style.background]="'linear-gradient(' + direction + ', ' + gradientColors + ')'"
     >
       <ng-content></ng-content>

diff --git a/components/color-picker/src/components/palette.component.ts b/components/color-picker/src/components/palette.component.ts
@@ -10,7 +10,7 @@ import { Component } from '@angular/core';
   selector: 'color-palette',
   standalone: true,
   template: `
-    <div class="ant-color-picker-palette" style="position: relative">
+    <div class="ant-color-picker-palette">
       <ng-content></ng-content>
     </div>
   `

diff --git a/components/color-picker/src/components/picker.component.ts b/components/color-picker/src/components/picker.component.ts
@@ -52,20 +52,13 @@ function getPosition(e: EventType): { pageX: number; pageY: number } {
       <color-palette>
         <div
           #transform
-          style="position: absolute; z-index: 1;"
+          class="ant-color-picker-transform"
           [style.left]="offsetValue.x + 'px'"
           [style.top]="offsetValue.y + 'px'"
         >
           <color-handler [color]="toRgbString()" />
         </div>
-        <div
-          class="ant-color-picker-saturation"
-          style="
-        background-image: linear-gradient(0deg, #000, transparent),
-          linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
-      "
-          [style.background-color]="toHsb()"
-        ></div>
+        <div class="ant-color-picker-saturation" [style.background-color]="toHsb()"></div>
       </color-palette>
     </div>
   `

diff --git a/components/color-picker/src/components/slider.component.ts b/components/color-picker/src/components/slider.component.ts
@@ -54,7 +54,7 @@ function getPosition(e: EventType): { pageX: number; pageY: number } {
       <color-palette>
         <div
           #transform
-          style="position: absolute; z-index: 1;"
+          class="ant-color-picker-transform"
           [style.left]="offsetValue.x + 'px'"
           [style.top]="offsetValue.y + 'px'"
         >

diff --git a/components/color-picker/style/index.less b/components/color-picker/style/index.less
@@ -26,6 +26,15 @@
     }
   }
 
+  &-gradient {
+    position: absolute;
+    inset: 0;
+  }
+
+  &-palette {
+    position: relative;
+  }
+
   &-select {
     .@{color-picker-prefix-cls}-palette {
       min-height: 160px;
@@ -46,9 +55,15 @@
     right: 0;
     bottom: 0;
     left: 0;
+    background-image: linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsla(0deg, 0%, 100%, 0));
     border-radius: inherit;
   }
 
+  &-transform {
+    position: absolute;
+    z-index: 1;
+  }
+
   &-handler {
     box-sizing: border-box;
     width: 16px;