@ship-ui/core 0.22.15 → 0.22.17

package/fesm2022/ship-ui-core-ship-color-picker.mjs

@@ -82,7 +82,7 @@ class ShipColorPicker {
             }
             else {
                 if (this._prevColorStr !== str) {
-                    this.updateMarkerFromColor(selectedColor);
+                    this.#updateMarkerFromColor(selectedColor);
                     this._prevColorStr = str;
                 }
                 else {
@@ -102,55 +102,55 @@ class ShipColorPicker {
             });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedColorEffect" }] : /* istanbul ignore next */ []));
-        this.alphaColorRedrawEffect = effect(() => {
+        this.#alphaColorRedrawEffect = effect(() => {
             const color = this.selectedColor();
             if (this.renderingType() === 'alpha' && this.#canvasData()) {
-                untracked(() => this.drawAlpha());
+                untracked(() => this.#drawAlpha());
             }
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "alphaColorRedrawEffect" }] : /* istanbul ignore next */ []));
-        this.previousLayoutHash = '';
-        this.previousHue = null;
-        this.renderingTypeEffect = effect(() => {
+        ...(ngDevMode ? [{ debugName: "#alphaColorRedrawEffect" }] : /* istanbul ignore next */ []));
+        this.#previousLayoutHash = '';
+        this.#previousHue = null;
+        this.#renderingTypeEffect = effect(() => {
             const currentHue = this.hue();
-            const layoutHash = this.getLayoutHash();
+            const layoutHash = this.#getLayoutHash();
             const canvasData = untracked(() => this.#canvasData());
             if (canvasData) {
-                untracked(() => this.drawColorPicker());
-                if (this.previousLayoutHash !== layoutHash) {
+                untracked(() => this.#drawColorPicker());
+                if (this.#previousLayoutHash !== layoutHash) {
                     if (this.renderingType() === 'hsl') {
-                        this.adjustMarkerPosition();
-                        queueMicrotask(() => this.updateMarkerFromColor(untracked(() => this.selectedColor())));
+                        this.#adjustMarkerPosition();
+                        queueMicrotask(() => this.#updateMarkerFromColor(untracked(() => this.selectedColor())));
                     }
                     else {
-                        this.updateMarkerFromColor(untracked(() => this.selectedColor()));
+                        this.#updateMarkerFromColor(untracked(() => this.selectedColor()));
                     }
-                    this.previousLayoutHash = layoutHash;
-                    this.previousHue = currentHue;
+                    this.#previousLayoutHash = layoutHash;
+                    this.#previousHue = currentHue;
                 }
-                else if (this.previousHue !== currentHue) {
+                else if (this.#previousHue !== currentHue) {
                     const pos = untracked(() => this.markerPosition());
                     const { canvas, ctx } = canvasData;
                     let x = (parseFloat(pos.x.replace('%', '')) / 100) * Math.max(1, canvas.width - 1);
                     let y = (parseFloat(pos.y.replace('%', '')) / 100) * Math.max(1, canvas.height - 1);
                     x = Math.max(0, Math.min(canvas.width - 1, Math.round(x)));
                     y = Math.max(0, Math.min(canvas.height - 1, Math.round(y)));
-                    const color = untracked(() => this.getColorAtPosition(x, y));
+                    const color = untracked(() => this.#getColorAtPosition(x, y));
                     if (this.renderingType() !== 'alpha') {
                         color[3] = untracked(() => this.selectedColor()[3] ?? 1);
                     }
                     this.#skipMarkerUpdate = true;
                     this.selectedColor.set(color);
-                    this.previousHue = currentHue;
+                    this.#previousHue = currentHue;
                 }
             }
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "renderingTypeEffect" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "#renderingTypeEffect" }] : /* istanbul ignore next */ []));
         this.#resizeObserver = typeof ResizeObserver !== 'undefined'
             ? new ResizeObserver((entries) => {
                 for (const entry of entries) {
                     if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
-                        this.setCanvasSize();
+                        this.#setCanvasSize();
                     }
                 }
             })
@@ -161,12 +161,16 @@ class ShipColorPicker {
     #platformId;
     #canvasData;
     #skipMarkerUpdate;
+    #alphaColorRedrawEffect;
     onResize() {
-        this.setCanvasSize();
+        this.#setCanvasSize();
     }
-    getLayoutHash() {
+    #previousLayoutHash;
+    #previousHue;
+    #getLayoutHash() {
         return `${this.renderingType()}-${this.direction()}-${this.gridSize()}-${this.showDarkColors()}`;
     }
+    #renderingTypeEffect;
     #resizeObserver;
     ngAfterViewInit() {
         this.initColor = this.selectedColor();
@@ -174,15 +178,15 @@ class ShipColorPicker {
         if (canvas?.parentElement) {
             this.#resizeObserver?.observe(canvas.parentElement);
         }
-        this.setCanvasSize();
-        this.initCanvasEvents();
+        this.#setCanvasSize();
+        this.#initCanvasEvents();
     }
     ngOnDestroy() {
         this.#resizeObserver?.disconnect();
     }
-    updateMarkerFromColor(rgba) {
+    #updateMarkerFromColor(rgba) {
         const [r, g, b, a] = rgba;
-        const coords = this.findPositionByColor(r, g, b, a);
+        const coords = this.#findPositionByColor(r, g, b, a);
         if (coords === null)
             return;
         const { x, y } = coords;
@@ -193,9 +197,9 @@ class ShipColorPicker {
             clientY: y,
             touches: [{ clientX: x, clientY: y }],
         };
-        this.updateColorAndMarker(mockEvent, false, true);
+        this.#updateColorAndMarker(mockEvent, false, true);
     }
-    findPositionByColor(r, g, b, a) {
+    #findPositionByColor(r, g, b, a) {
         const canvasData = this.#canvasData();
         if (!canvasData || !canvasData.canvas)
             return null;
@@ -268,7 +272,7 @@ class ShipColorPicker {
         }
         return { x: bestMatch.x, y: bestMatch.y };
     }
-    adjustMarkerPosition() {
+    #adjustMarkerPosition() {
         const { canvas, centerX, centerY, radius } = this.#canvasData();
         let { x, y } = this._pos;
         let markerX = (parseFloat(x.replace('%', '')) / 100) * canvas.width;
@@ -283,19 +287,19 @@ class ShipColorPicker {
             this.markerPosition.set({ x, y });
         }
     }
-    initCanvasEvents() {
+    #initCanvasEvents() {
         const data = this.#canvasData();
         if (!data)
             return;
         const { canvas } = data;
         canvas.addEventListener('mousedown', (event) => {
             this.isDragging.set(true);
-            this.updateColorAndMarker(event);
+            this.#updateColorAndMarker(event);
         });
         this.#document.addEventListener('mousemove', (event) => {
             if (this.isDragging()) {
                 event.preventDefault();
-                this.updateColorAndMarker(event, true);
+                this.#updateColorAndMarker(event, true);
             }
         });
         this.#document.addEventListener('mouseup', () => this.isDragging.set(false));
@@ -303,13 +307,13 @@ class ShipColorPicker {
         this.#document.addEventListener('touchmove', (event) => {
             if (this.isDragging()) {
                 event.preventDefault();
-                this.updateColorAndMarker(event.touches[0], true);
+                this.#updateColorAndMarker(event.touches[0], true);
             }
         });
         this.#document.addEventListener('touchend', () => this.isDragging.set(false));
         this.#document.addEventListener('touchcancel', () => this.isDragging.set(false));
     }
-    setCanvasSize() {
+    #setCanvasSize() {
         if (!isPlatformBrowser(this.#platformId))
             return;
         const canvas = this.canvasRef()?.nativeElement;
@@ -329,15 +333,15 @@ class ShipColorPicker {
                 centerY: canvas.height / 2,
                 radius: Math.min(canvas.width, canvas.height) / 2,
             });
-            this.drawColorPicker();
+            this.#drawColorPicker();
             setTimeout(() => {
                 if (!this.isDragging()) {
-                    this.updateMarkerFromColor(untracked(() => this.selectedColor()));
+                    this.#updateMarkerFromColor(untracked(() => this.selectedColor()));
                 }
             });
         }
     }
-    getColorAtPosition(mouseX, mouseY) {
+    #getColorAtPosition(mouseX, mouseY) {
         const { canvas, ctx } = this.#canvasData();
         const w = Math.max(1, canvas.width - 1);
         const h = Math.max(1, canvas.height - 1);
@@ -364,7 +368,7 @@ class ShipColorPicker {
             return [pixelData[0], pixelData[1], pixelData[2]];
         }
     }
-    updateColorAndMarker(event, outsideCanvas = false, onlyMarker = false) {
+    #updateColorAndMarker(event, outsideCanvas = false, onlyMarker = false) {
         const { canvas, ctx } = this.#canvasData();
         let mouseX = event instanceof MouseEvent ? event.offsetX : event.clientX;
         let mouseY = event instanceof MouseEvent ? event.offsetY : event.clientY;
@@ -387,7 +391,7 @@ class ShipColorPicker {
         mouseX = Math.max(0, Math.min(canvas.width - 1, Math.round(mouseX)));
         mouseY = Math.max(0, Math.min(canvas.height - 1, Math.round(mouseY)));
         if (!onlyMarker) {
-            const newColor = this.getColorAtPosition(mouseX, mouseY);
+            const newColor = this.#getColorAtPosition(mouseX, mouseY);
             if (this.renderingType() !== 'alpha') {
                 newColor[3] = this.selectedColor()[3] ?? 1;
             }
@@ -398,29 +402,29 @@ class ShipColorPicker {
         const yPercent = ((mouseY / Math.max(1, canvas.height - 1)) * 100).toFixed(2) + '%';
         this.markerPosition.set({ x: xPercent, y: yPercent });
     }
-    drawColorPicker() {
+    #drawColorPicker() {
         switch (this.renderingType()) {
             case 'hsl':
-                this.drawColorWheel();
+                this.#drawColorWheel();
                 break;
             case 'grid':
-                this.drawGrid();
+                this.#drawGrid();
                 break;
             case 'hue':
-                this.drawHue();
+                this.#drawHue();
                 break;
             case 'alpha':
-                this.drawAlpha();
+                this.#drawAlpha();
                 break;
             case 'rgb':
-                this.drawRgb();
+                this.#drawRgb();
                 break;
             case 'saturation':
-                this.drawSaturation();
+                this.#drawSaturation();
                 break;
         }
     }
-    drawAlpha() {
+    #drawAlpha() {
         const { canvas, ctx } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         const w = Math.max(1, canvas.width - 1);
@@ -432,7 +436,7 @@ class ShipColorPicker {
         ctx.fillStyle = gradient;
         ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
-    drawRgb() {
+    #drawRgb() {
         const { canvas, ctx } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         const w = Math.max(1, canvas.width - 1);
@@ -448,7 +452,7 @@ class ShipColorPicker {
         ctx.fillStyle = gradient2;
         ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
-    drawSaturation() {
+    #drawSaturation() {
         const { canvas, ctx } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         const w = Math.max(1, canvas.width - 1);
@@ -468,7 +472,7 @@ class ShipColorPicker {
             ctx.fillRect(0, 0, canvas.width, canvas.height);
         }
     }
-    drawHue() {
+    #drawHue() {
         const { canvas, ctx } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         const w = Math.max(1, canvas.width - 1);
@@ -480,7 +484,7 @@ class ShipColorPicker {
         ctx.fillStyle = gradient;
         ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
-    drawColorWheel() {
+    #drawColorWheel() {
         const { canvas, ctx, centerX, centerY, radius } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         for (let y = 0; y < canvas.height; y++) {
@@ -495,7 +499,7 @@ class ShipColorPicker {
             }
         }
     }
-    drawGrid() {
+    #drawGrid() {
         const { canvas, ctx } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         const gridSize = this.gridSize();
@@ -629,11 +633,11 @@ class ShipColorPickerInput {
                 return;
             this.#createCustomInputEventListener(input);
             input.addEventListener('inputValueChanged', (event) => {
-                this.parseAndSetColor(event.detail.value);
+                this.#parseAndSetColor(event.detail.value);
             });
             input.addEventListener('input', (event) => {
                 const target = event.target;
-                this.parseAndSetColor(target.value);
+                this.#parseAndSetColor(target.value);
             });
             input.addEventListener('blur', () => {
                 const str = untracked(() => this.formattedColorString());
@@ -648,7 +652,7 @@ class ShipColorPickerInput {
             this.#inputRef.set(input);
             input.autocomplete = 'off';
             if (typeof input.value === 'string' && input.value) {
-                this.parseAndSetColor(input.value);
+                this.#parseAndSetColor(input.value);
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : /* istanbul ignore next */ []));
@@ -677,7 +681,7 @@ class ShipColorPickerInput {
             const eyeDropper = new window.EyeDropper();
             const result = await eyeDropper.open();
             if (result && result.sRGBHex) {
-                this.parseAndSetColor(result.sRGBHex);
+                this.#parseAndSetColor(result.sRGBHex);
                 // Force the text field to immediately display the new output string according to the active format
                 const input = untracked(() => this.#inputRef());
                 if (input) {
@@ -697,7 +701,7 @@ class ShipColorPickerInput {
         this.closed.emit(this.formattedColorString());
     }
     #inputRefEffect;
-    parseAndSetColor(colorStr) {
+    #parseAndSetColor(colorStr) {
         if (!colorStr)
             return;
         if (colorStr === untracked(() => this.formattedColorString()))
@@ -742,7 +746,7 @@ class ShipColorPickerInput {
             }
         }
     }
-    hslToRgbExact(h, s, l) {
+    #hslToRgbExact(h, s, l) {
         s /= 100;
         l /= 100;
         const k = (n) => (n + h / 30) % 12;
@@ -750,16 +754,16 @@ class ShipColorPickerInput {
         const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
         return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))];
     }
-    rgbToHex(r, g, b) {
+    #rgbToHex(r, g, b) {
         return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
     }
-    rgbaToHex8(r, g, b, a) {
+    #rgbaToHex8(r, g, b, a) {
         const alphaHex = Math.round(a * 255)
             .toString(16)
             .padStart(2, '0');
-        return this.rgbToHex(r, g, b) + alphaHex;
+        return this.#rgbToHex(r, g, b) + alphaHex;
     }
-    rgbToHsl(r, g, b) {
+    #rgbToHsl(r, g, b) {
         r /= 255;
         g /= 255;
         b /= 255;