diff --git a/package-lock.json b/package-lock.json index 289715d..5c72ccd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,8 +42,7 @@ "stylelint-order": "^6.0.0", "terser": "^5.43.0", "tslib": "^2.8.0", - "typescript": "~5.8.0", - "watch": "^1.0.0" + "typescript": "~5.8.0" } }, "node_modules/@alloc/quick-lru": { @@ -8167,16 +8166,6 @@ "dev": true, "license": "MIT" }, - "node_modules/cpx/node_modules/string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "license": "MIT", - "dependencies": { - "safe-buffer": "~5.1.0" - } - }, "node_modules/cpx/node_modules/to-regex-range": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz", @@ -9159,16 +9148,6 @@ "node": ">=0.8.x" } }, - "node_modules/exec-sh": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.2.2.tgz", - "integrity": "sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==", - "dev": true, - "license": "MIT", - "dependencies": { - "merge": "^1.2.0" - } - }, "node_modules/expand-brackets": { "version": "0.1.5", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz", @@ -10347,16 +10326,6 @@ "dev": true, "license": "MIT" }, - "node_modules/hpack.js/node_modules/string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "license": "MIT", - "dependencies": { - "safe-buffer": "~5.1.0" - } - }, "node_modules/html-tags": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz", @@ -11144,9 +11113,9 @@ "license": "MIT" }, "node_modules/jsesc": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", - "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz", + "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==", "dev": true, "license": "MIT", "bin": { @@ -11892,13 +11861,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/merge": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz", - "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==", - "dev": true, - "license": "MIT" - }, "node_modules/merge-descriptors": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", @@ -14195,19 +14157,6 @@ "regjsparser": "bin/parser" } }, - "node_modules/regjsparser/node_modules/jsesc": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz", - "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==", - "dev": true, - "license": "MIT", - "bin": { - "jsesc": "bin/jsesc" - }, - "engines": { - "node": ">=6" - } - }, "node_modules/remove-trailing-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", @@ -15657,15 +15606,22 @@ } }, "node_modules/string_decoder": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", - "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "license": "MIT", "dependencies": { - "safe-buffer": "~5.2.0" + "safe-buffer": "~5.1.0" } }, + "node_modules/string_decoder/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true, + "license": "MIT" + }, "node_modules/string-width": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz", @@ -17118,23 +17074,6 @@ } } }, - "node_modules/watch": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/watch/-/watch-1.0.2.tgz", - "integrity": "sha512-1u+Z5n9Jc1E2c7qDO8SinPoZuHj7FgbgU1olSFoyaklduDvvtX7GMMtlE6OC9FTXq4KvNAOfj6Zu4vI1e9bAKA==", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "exec-sh": "^0.2.0", - "minimist": "^1.2.0" - }, - "bin": { - "watch": "cli.js" - }, - "engines": { - "node": ">=0.1.95" - } - }, "node_modules/watchpack": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz", diff --git a/package.json b/package.json index 90c7cef..d29d1c2 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ "stylelint-order": "^6.0.0", "terser": "^5.43.0", "tslib": "^2.8.0", - "typescript": "~5.8.0", - "watch": "^1.0.0" + "typescript": "~5.8.0" } } diff --git a/projects/lib/src/lib/color-picker.component.html b/projects/lib/src/lib/color-picker.component.html index 1bb9f62..5270c23 100644 --- a/projects/lib/src/lib/color-picker.component.html +++ b/projects/lib/src/lib/color-picker.component.html @@ -1,31 +1,41 @@
-
+ @if (cpDialogDisplay === 'popup') { +
+ } -
-
-
+ @if ((cpColorMode || 1) === 1) { +
+
+
+ }
- + @if (eyeDropperSupported && cpEyeDropper) { + + }
- + @if (cpAddColorButton) { + + }
-
+ @if (cpAlphaChannel === 'disabled') { +
+ } -
+
-
+
@@ -35,96 +45,129 @@
-
-
- - - - - -
- -
-
C
M
Y
K
A
+ @if (!cpDisableInput && (cpColorMode || 1) === 1) { +
+
+ + + + + @if (cpAlphaChannel !== 'disabled') { + + } +
+
+
C
M
Y
K
@if (cpAlphaChannel!=='disabled') {
A
}
+} -
+@if (!cpDisableInput && (cpColorMode || 1) === 1 ) { +
- - - - + + + + @if (cpAlphaChannel !== 'disabled') { + + }
-
-
H
S
L
A
-
+
H
S
L
@if (cpAlphaChannel !== 'disabled') {
A
}
+
+} -
+@if (!cpDisableInput && (cpColorMode || 1) === 1 ) { +
- - - - + + + + @if (cpAlphaChannel !== 'disabled') { + + }
-
-
R
G
B
A
-
+
R
G
B
@if (cpAlphaChannel !== 'disabled') {
A
}
+
+} -
- - + + @if (cpAlphaChannel === 'forced') { + + }
-
Hex
-
A
+ @if (cpAlphaChannel === 'forced') { +
A
+ }
+} -
+@if (!cpDisableInput && (cpColorMode || 1) === 2) { +
- - + + @if (cpAlphaChannel !== 'disabled') { + + }
-
V
A
+} -
+@if (!cpDisableInput && (cpColorMode || 1) === 1) { +
+} -
+@if (cpPresetColors?.length || cpAddColorButton) { +
- -
{{cpPresetLabel}}
- -
-
- -
+
{{cpPresetLabel}}
+ @if (cpPresetColors?.length) { +
+ @for (color of cpPresetColors; track color) { +
+ @if (cpAddColorButton) { + + } +
+ } +
+ } + @if (!cpPresetColors?.length && cpAddColorButton) { +
{{cpPresetEmptyMessage}}
+ }
+ } + + @if (cpOKButton || cpCancelButton) { +
+ @if (cpCancelButton) { + + } + @if (cpOKButton) { + + } +
+ } -
{{cpPresetEmptyMessage}}
-
- -
- - - -
- -
- -
+ @if (cpExtraTemplate) { +
+ +
+ }
diff --git a/projects/lib/src/lib/color-picker.component.ts b/projects/lib/src/lib/color-picker.component.ts index 14dcc6f..c2502fa 100644 --- a/projects/lib/src/lib/color-picker.component.ts +++ b/projects/lib/src/lib/color-picker.component.ts @@ -13,14 +13,7 @@ import { PLATFORM_ID, inject, } from '@angular/core' - -import { - DOCUMENT, - isPlatformBrowser, - NgForOf, - NgIf, - NgTemplateOutlet, -} from '@angular/common' +import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common'; import { calculateAutoPositioning, @@ -47,7 +40,7 @@ const SUPPORTS_TOUCH = typeof window !== 'undefined' && 'ontouchstart' in window templateUrl: './color-picker.component.html', styleUrls: ['./color-picker.component.css'], encapsulation: ViewEncapsulation.None, - imports: [SliderDirective, TextDirective, NgIf, NgForOf, NgTemplateOutlet], + imports: [SliderDirective, TextDirective, NgTemplateOutlet], }) export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit { private ngZone = inject(NgZone) diff --git a/projects/lib/src/lib/helpers.ts b/projects/lib/src/lib/helpers.ts index 4e99a48..12cdcab 100644 --- a/projects/lib/src/lib/helpers.ts +++ b/projects/lib/src/lib/helpers.ts @@ -110,8 +110,6 @@ export function calculateAutoPositioning( }) export class TextDirective { @Input() rg: number - @Input() text: any - @Output() newValue = new EventEmitter() @HostListener('input', ['$event']) inputChange(event: any): void {