@strapi/plugin-color-picker 0.0.0-next.fab38a080023b0850fc7a8ec8605d1ee6970e3c9 → 0.0.0-next.fc1775f7731f8999840e56e298a216b9a6c5c4ad

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/LICENSE +34 -12
  2. package/dist/_chunks/ColorPickerInput-BiwD6BEw.mjs +137 -0
  3. package/dist/_chunks/ColorPickerInput-gD_Mb6qe.js +155 -0
  4. package/dist/_chunks/cs-CKl0OyEH.js +15 -0
  5. package/dist/_chunks/{cs-70e06424.mjs → cs-DMmE6LK7.mjs} +2 -3
  6. package/dist/_chunks/{en-096b1095.mjs → en-BlDau3us.mjs} +2 -3
  7. package/dist/_chunks/en-Ct0C5cA2.js +18 -0
  8. package/dist/_chunks/index-CNTxZbMN.js +126 -0
  9. package/dist/_chunks/index-dnY2u5Dg.mjs +127 -0
  10. package/dist/_chunks/ru-Wrg-npZz.js +18 -0
  11. package/dist/_chunks/{ru-05c0aa5b.mjs → ru-aOnA-eym.mjs} +2 -3
  12. package/dist/_chunks/{sv-6ccbf5f0.mjs → sv-BaFDND79.mjs} +2 -3
  13. package/dist/_chunks/sv-CKY6es_6.js +15 -0
  14. package/dist/_chunks/{tr-34587a44.mjs → tr-CHHW_hYI.mjs} +2 -3
  15. package/dist/_chunks/tr-DcLzQS-J.js +15 -0
  16. package/dist/_chunks/{zh-667ba169.mjs → zh-DBH6uCXb.mjs} +2 -3
  17. package/dist/_chunks/zh-T5cJzhPD.js +15 -0
  18. package/dist/admin/index.js +3 -2
  19. package/dist/admin/index.mjs +2 -8
  20. package/dist/admin/src/components/ColorPickerInput.d.ts +7 -0
  21. package/dist/admin/{index.d.ts → src/index.d.ts} +3 -1
  22. package/dist/admin/src/utils/prefixPluginTranslations.d.ts +3 -0
  23. package/dist/server/index.js +12 -2
  24. package/dist/server/index.mjs +6 -6
  25. package/dist/server/{index.d.ts → src/index.d.ts} +1 -0
  26. package/dist/server/src/index.d.ts.map +1 -0
  27. package/dist/server/{register.d.ts → src/register.d.ts} +1 -0
  28. package/dist/server/src/register.d.ts.map +1 -0
  29. package/package.json +30 -37
  30. package/dist/_chunks/ColorPickerInput-1e9c7a15.js +0 -47
  31. package/dist/_chunks/ColorPickerInput-1e9c7a15.js.map +0 -1
  32. package/dist/_chunks/ColorPickerInput-3335ebf5.mjs +0 -168
  33. package/dist/_chunks/ColorPickerInput-3335ebf5.mjs.map +0 -1
  34. package/dist/_chunks/cs-67f98136.js +0 -2
  35. package/dist/_chunks/cs-67f98136.js.map +0 -1
  36. package/dist/_chunks/cs-70e06424.mjs.map +0 -1
  37. package/dist/_chunks/en-096b1095.mjs.map +0 -1
  38. package/dist/_chunks/en-32ea9fdb.js +0 -2
  39. package/dist/_chunks/en-32ea9fdb.js.map +0 -1
  40. package/dist/_chunks/index-3cecbc68.js +0 -37
  41. package/dist/_chunks/index-3cecbc68.js.map +0 -1
  42. package/dist/_chunks/index-e75c6fdb.mjs +0 -730
  43. package/dist/_chunks/index-e75c6fdb.mjs.map +0 -1
  44. package/dist/_chunks/ru-05c0aa5b.mjs.map +0 -1
  45. package/dist/_chunks/ru-c5a712be.js +0 -2
  46. package/dist/_chunks/ru-c5a712be.js.map +0 -1
  47. package/dist/_chunks/sv-6ccbf5f0.mjs.map +0 -1
  48. package/dist/_chunks/sv-e4ea8db8.js +0 -2
  49. package/dist/_chunks/sv-e4ea8db8.js.map +0 -1
  50. package/dist/_chunks/tr-34587a44.mjs.map +0 -1
  51. package/dist/_chunks/tr-fb5cfb93.js +0 -2
  52. package/dist/_chunks/tr-fb5cfb93.js.map +0 -1
  53. package/dist/_chunks/zh-667ba169.mjs.map +0 -1
  54. package/dist/_chunks/zh-b25c84c2.js +0 -2
  55. package/dist/_chunks/zh-b25c84c2.js.map +0 -1
  56. package/dist/admin/components/ColorPickerInput.d.ts +0 -32
  57. package/dist/admin/hooks/useComposeRefs.d.ts +0 -29
  58. package/dist/admin/index.js.map +0 -1
  59. package/dist/admin/index.mjs.map +0 -1
  60. package/dist/server/index.js.map +0 -1
  61. package/dist/server/index.mjs.map +0 -1
  62. package/strapi-server.js +0 -3
  63. /package/dist/admin/{components → src/components}/ColorPickerIcon.d.ts +0 -0
  64. /package/dist/admin/{pluginId.d.ts → src/pluginId.d.ts} +0 -0
  65. /package/dist/admin/{utils → src/utils}/getTrad.d.ts +0 -0
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const ru = {
4
+ "color-picker.description": "Выбирайте любые цвета",
5
+ "color-picker.input.aria-label": "Введите выбранный цвет",
6
+ "color-picker.input.format": "HEX",
7
+ "color-picker.label": "Цвет",
8
+ "color-picker.options.advanced.regex": "Шаблон регулярного выражения (RegExp)",
9
+ "color-picker.options.advanced.regex.description": "Обеспечивает проверку с помощью регулярного выражение для HEX (шестнадцатеричного) HEX значения цвета",
10
+ "color-picker.options.advanced.requiredField": "Обязательное поле",
11
+ "color-picker.options.advanced.requiredField.description": "Вы не сможете продолжить, если это поле пусто",
12
+ "color-picker.settings": "Настройки",
13
+ "color-picker.toggle.aria-label": "Переключатель средства выбора цвета",
14
+ "plugin.description.long": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi. Используйте ползунки насыщенности и оттенка, чтобы выбрать цвет и сохранить его HEX (шестнадцатеричное) значение.",
15
+ "plugin.description.short": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi.",
16
+ "plugin.name": "Выбор цвета"
17
+ };
18
+ exports.default = ru;
@@ -1,4 +1,4 @@
1
- const o = {
1
+ const ru = {
2
2
  "color-picker.description": "Выбирайте любые цвета",
3
3
  "color-picker.input.aria-label": "Введите выбранный цвет",
4
4
  "color-picker.input.format": "HEX",
@@ -14,6 +14,5 @@ const o = {
14
14
  "plugin.name": "Выбор цвета"
15
15
  };
16
16
  export {
17
- o as default
17
+ ru as default
18
18
  };
19
- //# sourceMappingURL=ru-05c0aa5b.mjs.map
@@ -1,4 +1,4 @@
1
- const r = {
1
+ const sv = {
2
2
  "color-picker.description": "Välj färger",
3
3
  "color-picker.input.aria-label": "Färgväljarinmatning",
4
4
  "color-picker.input.format": "HEX",
@@ -11,6 +11,5 @@ const r = {
11
11
  "color-picker.toggle.aria-label": "Växla färgväljare"
12
12
  };
13
13
  export {
14
- r as default
14
+ sv as default
15
15
  };
16
- //# sourceMappingURL=sv-6ccbf5f0.mjs.map
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const sv = {
4
+ "color-picker.description": "Välj färger",
5
+ "color-picker.input.aria-label": "Färgväljarinmatning",
6
+ "color-picker.input.format": "HEX",
7
+ "color-picker.label": "Färgväljare",
8
+ "color-picker.options.advanced.regex": "RegEx-mönster",
9
+ "color-picker.options.advanced.regex.description": "Ange ett regex-mönster för att validera HEX-värdet",
10
+ "color-picker.options.advanced.requiredField": "Obligatoriskt fält",
11
+ "color-picker.options.advanced.requiredField.description": "Du kommer inte att kunna skapa en post om det här fältet är tomt",
12
+ "color-picker.settings": "Inställningar",
13
+ "color-picker.toggle.aria-label": "Växla färgväljare"
14
+ };
15
+ exports.default = sv;
@@ -1,4 +1,4 @@
1
- const i = {
1
+ const tr = {
2
2
  "color-picker.description": "Herhangi bir renk seç",
3
3
  "color-picker.input.aria-label": "Renk seçici girişi",
4
4
  "color-picker.input.format": "HEX",
@@ -11,6 +11,5 @@ const i = {
11
11
  "color-picker.toggle.aria-label": "Renk seçici anahtarı"
12
12
  };
13
13
  export {
14
- i as default
14
+ tr as default
15
15
  };
16
- //# sourceMappingURL=tr-34587a44.mjs.map
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const tr = {
4
+ "color-picker.description": "Herhangi bir renk seç",
5
+ "color-picker.input.aria-label": "Renk seçici girişi",
6
+ "color-picker.input.format": "HEX",
7
+ "color-picker.label": "Renk",
8
+ "color-picker.options.advanced.regex": "RegExp ifadesi",
9
+ "color-picker.options.advanced.regex.description": "HEX değerini doğrulamak için bir RegExp ifadesi sağla",
10
+ "color-picker.options.advanced.requiredField": "Zorunlu alan",
11
+ "color-picker.options.advanced.requiredField.description": "Bu alan boş olursa yeni bir girdi oluşturamazsın",
12
+ "color-picker.settings": "Ayarlar",
13
+ "color-picker.toggle.aria-label": "Renk seçici anahtarı"
14
+ };
15
+ exports.default = tr;
@@ -1,4 +1,4 @@
1
- const o = {
1
+ const zh = {
2
2
  "color-picker.description": "選擇任意顏色",
3
3
  "color-picker.input.aria-label": "選色器輸入",
4
4
  "color-picker.input.format": "HEX",
@@ -11,6 +11,5 @@ const o = {
11
11
  "color-picker.toggle.aria-label": "選色器開關"
12
12
  };
13
13
  export {
14
- o as default
14
+ zh as default
15
15
  };
16
- //# sourceMappingURL=zh-667ba169.mjs.map
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const zh = {
4
+ "color-picker.description": "選擇任意顏色",
5
+ "color-picker.input.aria-label": "選色器輸入",
6
+ "color-picker.input.format": "HEX",
7
+ "color-picker.label": "顏色",
8
+ "color-picker.options.advanced.regex": "正則表達模式",
9
+ "color-picker.options.advanced.regex.description": "提供正則表達式以驗證 HEX 值",
10
+ "color-picker.options.advanced.requiredField": "必填欄位",
11
+ "color-picker.options.advanced.requiredField.description": "若此欄位為空,您將無法建立項目",
12
+ "color-picker.settings": "設定",
13
+ "color-picker.toggle.aria-label": "選色器開關"
14
+ };
15
+ exports.default = zh;
@@ -1,2 +1,3 @@
1
- "use strict";const e=require("../_chunks/index-3cecbc68.js");require("@strapi/helper-plugin");require("react");require("@strapi/design-system");require("@strapi/icons");require("styled-components");module.exports=e.index;
2
- //# sourceMappingURL=index.js.map
1
+ "use strict";
2
+ const index = require("../_chunks/index-CNTxZbMN.js");
3
+ module.exports = index.index;
@@ -1,10 +1,4 @@
1
- import { i as e } from "../_chunks/index-e75c6fdb.mjs";
2
- import "@strapi/helper-plugin";
3
- import "react";
4
- import "@strapi/design-system";
5
- import "@strapi/icons";
6
- import "styled-components";
1
+ import { i } from "../_chunks/index-dnY2u5Dg.mjs";
7
2
  export {
8
- e as default
3
+ i as default
9
4
  };
10
- //# sourceMappingURL=index.mjs.map
@@ -0,0 +1,7 @@
1
+ import * as React from 'react';
2
+ import { type InputProps } from '@strapi/strapi/admin';
3
+ type ColorPickerInputProps = InputProps & {
4
+ labelAction?: React.ReactNode;
5
+ };
6
+ export declare const ColorPickerInput: React.ForwardRefExoticComponent<ColorPickerInputProps & React.RefAttributes<HTMLButtonElement>>;
7
+ export {};
@@ -6,7 +6,9 @@ declare const _default: {
6
6
  registerTrads({ locales }: {
7
7
  locales: string[];
8
8
  }): Promise<({
9
- data: any;
9
+ data: {
10
+ [x: string]: string;
11
+ };
10
12
  locale: string;
11
13
  } | {
12
14
  data: {};
@@ -0,0 +1,3 @@
1
+ type TradOptions = Record<string, string>;
2
+ declare const prefixPluginTranslations: (trad: TradOptions, pluginId: string) => TradOptions;
3
+ export { prefixPluginTranslations };
@@ -1,2 +1,12 @@
1
- "use strict";const r=({strapi:e})=>{e.customFields.register({name:"color",plugin:"color-picker",type:"string"})},s={register:r};module.exports=s;
2
- //# sourceMappingURL=index.js.map
1
+ "use strict";
2
+ const register = ({ strapi }) => {
3
+ strapi.customFields.register({
4
+ name: "color",
5
+ plugin: "color-picker",
6
+ type: "string"
7
+ });
8
+ };
9
+ const index = {
10
+ register
11
+ };
12
+ module.exports = index;
@@ -1,13 +1,13 @@
1
- const r = ({ strapi: e }) => {
2
- e.customFields.register({
1
+ const register = ({ strapi }) => {
2
+ strapi.customFields.register({
3
3
  name: "color",
4
4
  plugin: "color-picker",
5
5
  type: "string"
6
6
  });
7
- }, t = {
8
- register: r
7
+ };
8
+ const index = {
9
+ register
9
10
  };
10
11
  export {
11
- t as default
12
+ index as default
12
13
  };
13
- //# sourceMappingURL=index.mjs.map
@@ -2,3 +2,4 @@ declare const _default: {
2
2
  register: ({ strapi }: any) => void;
3
3
  };
4
4
  export default _default;
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../server/src/index.ts"],"names":[],"mappings":";;;AAEA,wBAEE"}
@@ -1 +1,2 @@
1
1
  export declare const register: ({ strapi }: any) => void;
2
+ //# sourceMappingURL=register.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../../server/src/register.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,eAAgB,GAAG,SAMvC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@strapi/plugin-color-picker",
3
- "version": "0.0.0-next.fab38a080023b0850fc7a8ec8605d1ee6970e3c9",
3
+ "version": "0.0.0-next.fc1775f7731f8999840e56e298a216b9a6c5c4ad",
4
4
  "description": "Strapi maintained Custom Fields",
5
5
  "repository": {
6
6
  "type": "git",
@@ -22,14 +22,14 @@
22
22
  ],
23
23
  "exports": {
24
24
  "./strapi-admin": {
25
- "types": "./dist/admin/index.d.ts",
25
+ "types": "./dist/admin/src/index.d.ts",
26
26
  "source": "./admin/src/index.ts",
27
27
  "import": "./dist/admin/index.mjs",
28
28
  "require": "./dist/admin/index.js",
29
29
  "default": "./dist/admin/index.js"
30
30
  },
31
31
  "./strapi-server": {
32
- "types": "./dist/server/index.d.ts",
32
+ "types": "./dist/server/src/index.d.ts",
33
33
  "source": "./server/src/index.ts",
34
34
  "import": "./dist/server/index.mjs",
35
35
  "require": "./dist/server/index.js",
@@ -38,59 +38,52 @@
38
38
  "./package.json": "./package.json"
39
39
  },
40
40
  "files": [
41
- "./dist",
41
+ "dist/",
42
42
  "strapi-server.js"
43
43
  ],
44
- "strapi": {
45
- "name": "color-picker",
46
- "description": "Color picker custom field",
47
- "kind": "plugin",
48
- "displayName": "Color Picker"
49
- },
50
44
  "scripts": {
51
- "build": "NODE_ENV=production strapi plugin:build --force",
52
- "watch": "run -T tsc -w --preserveWatchOutput",
45
+ "build": "strapi-plugin build",
53
46
  "clean": "run -T rimraf ./dist",
54
- "prepublishOnly": "yarn clean && yarn build",
47
+ "lint": "run -T eslint .",
55
48
  "test:front": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js",
56
- "test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
57
49
  "test:front:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js",
50
+ "test:front:watch": "run -T cross-env IS_EE=true jest --config ./jest.config.front.js --watchAll",
58
51
  "test:front:watch:ce": "run -T cross-env IS_EE=false jest --config ./jest.config.front.js --watchAll",
59
52
  "test:ts:front": "run -T tsc -p admin/tsconfig.json",
60
- "lint": "yarn lint:project && yarn lint:back && yarn lint:front",
61
- "lint:project": "run -T eslint . -c ./.eslintrc.js",
62
- "lint:back": "run -T eslint ./server -c ./server/.eslintrc.js",
63
- "lint:front": "run -T eslint ./admin -c ./admin/.eslintrc.js"
53
+ "watch": "strapi-plugin watch"
64
54
  },
65
55
  "dependencies": {
66
- "@strapi/design-system": "1.12.0",
67
- "@strapi/helper-plugin": "0.0.0-next.fab38a080023b0850fc7a8ec8605d1ee6970e3c9",
68
- "@strapi/icons": "1.12.0",
69
- "prop-types": "^15.8.1",
56
+ "@strapi/design-system": "2.0.0-rc.14",
57
+ "@strapi/icons": "2.0.0-rc.14",
70
58
  "react-colorful": "5.6.1",
71
- "react-intl": "6.4.1"
59
+ "react-intl": "6.6.2"
72
60
  },
73
61
  "devDependencies": {
74
- "@strapi/strapi": "0.0.0-next.fab38a080023b0850fc7a8ec8605d1ee6970e3c9",
75
- "@testing-library/react": "14.0.0",
76
- "@testing-library/user-event": "14.4.3",
77
- "@types/styled-components": "5.1.26",
78
- "react": "^18.2.0",
79
- "react-dom": "^18.2.0",
80
- "react-router-dom": "5.3.4",
81
- "styled-components": "5.3.3",
82
- "typescript": "5.2.2"
62
+ "@strapi/sdk-plugin": "^5.2.0",
63
+ "@strapi/strapi": "0.0.0-next.fc1775f7731f8999840e56e298a216b9a6c5c4ad",
64
+ "@testing-library/react": "15.0.7",
65
+ "@testing-library/user-event": "14.5.2",
66
+ "react": "18.3.1",
67
+ "react-dom": "18.3.1",
68
+ "react-router-dom": "6.22.3",
69
+ "styled-components": "6.1.8",
70
+ "typescript": "5.3.2"
83
71
  },
84
72
  "peerDependencies": {
85
- "@strapi/strapi": "^4.4.0",
73
+ "@strapi/strapi": "^5.0.0",
86
74
  "react": "^17.0.0 || ^18.0.0",
87
75
  "react-dom": "^17.0.0 || ^18.0.0",
88
- "react-router-dom": "5.3.4",
89
- "styled-components": "5.3.3"
76
+ "react-router-dom": "^6.0.0",
77
+ "styled-components": "^6.0.0"
90
78
  },
91
79
  "engines": {
92
- "node": ">=16.0.0 <=20.x.x",
80
+ "node": ">=18.0.0 <=22.x.x",
93
81
  "npm": ">=6.0.0"
94
82
  },
95
- "gitHead": "fab38a080023b0850fc7a8ec8605d1ee6970e3c9"
83
+ "strapi": {
84
+ "name": "color-picker",
85
+ "description": "Color picker custom field",
86
+ "kind": "plugin",
87
+ "displayName": "Color Picker"
88
+ }
96
89
  }
@@ -1,47 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-3cecbc68.js"),y=require("react"),r=require("@strapi/design-system"),C=require("@strapi/icons"),P=require("react-colorful"),T=require("react-intl"),c=require("styled-components");require("@strapi/helper-plugin");function v(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(o,s,a.get?a:{enumerable:!0,get:()=>e[s]})}}return o.default=e,Object.freeze(o)}const l=v(y);function w(e,o){typeof e=="function"?e(o):e!=null&&(e.current=o)}function $(...e){return o=>e.forEach(s=>w(s,o))}function F(...e){return l.useCallback($(...e),e)}const _=c.div`
2
- border-radius: 50%;
3
- width: 20px;
4
- height: 20px;
5
- margin-right: 10px;
6
- background-color: ${e=>e.color};
7
- border: 1px solid rgba(0, 0, 0, 0.1);
8
- `,q=c(P.HexColorPicker)`
9
- && {
10
- width: 100%;
11
- aspect-ratio: 1.5;
12
- }
13
-
14
- .react-colorful__pointer {
15
- width: ${({theme:e})=>e.spaces[3]};
16
- height: ${({theme:e})=>e.spaces[3]};
17
- }
18
-
19
- .react-colorful__saturation {
20
- border-radius: ${({theme:e})=>e.spaces[1]};
21
- border-bottom: none;
22
- }
23
-
24
- .react-colorful__hue {
25
- border-radius: 10px;
26
- height: ${({theme:e})=>e.spaces[3]};
27
- margin-top: ${({theme:e})=>e.spaces[2]};
28
- }
29
- `,S=c(r.BaseButton)`
30
- display: flex;
31
- justify-content: space-between;
32
- align-items: center;
33
-
34
- svg {
35
- width: ${({theme:e})=>e.spaces[2]};
36
- height: ${({theme:e})=>e.spaces[2]};
37
- }
38
-
39
- svg > path {
40
- fill: ${({theme:e})=>e.colors.neutral500};
41
- justify-self: flex-end;
42
- }
43
- `,B=c(r.Popover)`
44
- padding: ${({theme:e})=>e.spaces[2]};
45
- min-height: 270px;
46
- `,I=l.forwardRef(({attribute:e,description:o,disabled:s=!1,error:a,intlLabel:h,labelAction:m,name:u,onChange:f,required:R=!1,value:p=""},b)=>{const[d,x]=l.useState(!1),j=l.useRef(null),{formatMessage:i}=T.useIntl(),g=p||"#000000",E=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||x(!1)},k=F(b,j);return t.jsxRuntimeExports.jsx(r.Field,{name:u,id:u,error:a,hint:o&&i(o),required:R,children:t.jsxRuntimeExports.jsxs(r.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsxRuntimeExports.jsx(r.FieldLabel,{action:m,children:i(h)}),t.jsxRuntimeExports.jsxs(S,{ref:k,"aria-label":i({id:t.getTrad("color-picker.toggle.aria-label"),defaultMessage:"Color picker toggle"}),"aria-controls":"color-picker-value","aria-haspopup":"dialog","aria-expanded":d,"aria-disabled":s,disabled:s,onClick:()=>x(!d),children:[t.jsxRuntimeExports.jsxs(r.Flex,{children:[t.jsxRuntimeExports.jsx(_,{color:g}),t.jsxRuntimeExports.jsx(r.Typography,{style:{textTransform:"uppercase"},textColor:p?void 0:"neutral600",variant:"omega",children:g})]}),t.jsxRuntimeExports.jsx(C.CarretDown,{"aria-hidden":!0})]}),d&&t.jsxRuntimeExports.jsx(B,{onBlur:E,role:"dialog",source:j,spacing:4,children:t.jsxRuntimeExports.jsxs(r.FocusTrap,{onEscape:()=>x(!1),children:[t.jsxRuntimeExports.jsx(q,{color:g,onChange:n=>f({target:{name:u,value:n,type:e.type}})}),t.jsxRuntimeExports.jsxs(r.Flex,{paddingTop:3,paddingLeft:4,justifyContent:"flex-end",children:[t.jsxRuntimeExports.jsx(r.Box,{paddingRight:2,children:t.jsxRuntimeExports.jsx(r.Typography,{variant:"omega",as:"label",textColor:"neutral600",children:i({id:t.getTrad("color-picker.input.format"),defaultMessage:"HEX"})})}),t.jsxRuntimeExports.jsx(r.FieldInput,{id:"color-picker-value","aria-label":i({id:t.getTrad("color-picker.input.aria-label"),defaultMessage:"Color picker input"}),style:{textTransform:"uppercase"},value:p,placeholder:"#000000",onChange:f})]})]})}),t.jsxRuntimeExports.jsx(r.FieldHint,{}),t.jsxRuntimeExports.jsx(r.FieldError,{})]})})});exports.ColorPickerInput=I;
47
- //# sourceMappingURL=ColorPickerInput-1e9c7a15.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColorPickerInput-1e9c7a15.js","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n *\n * Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n *\n * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n *\n * React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n *\n * return <input ref={ref} />\n * }\n * ```\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import * as React from 'react';\n\nimport {\n BaseButton,\n Box,\n Field,\n FieldError,\n FieldHint,\n FieldInput,\n FieldLabel,\n Flex,\n FocusTrap,\n Popover,\n Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\n/**\n * TODO: A lot of these props should extend `FieldProps`\n */\ninterface ColorPickerInputProps {\n intlLabel: MessageDescriptor;\n /**\n * TODO: this should be extended from `FieldInputProps['onChange']\n * but that conflicts with it's secondary usage in `HexColorPicker`\n */\n onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n attribute: { type: string; [key: string]: unknown };\n name: string;\n description?: MessageDescriptor;\n disabled?: boolean;\n error?: string;\n labelAction?: React.ReactNode;\n required?: boolean;\n value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n {\n attribute,\n description,\n disabled = false,\n error,\n intlLabel,\n labelAction,\n name,\n onChange,\n required = false,\n value = '',\n },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value || '#000000';\n\n const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n\n if (!e.currentTarget.contains(e.relatedTarget)) {\n setShowColorPicker(false);\n }\n };\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field\n name={name}\n id={name}\n // GenericInput calls formatMessage and returns a string for the error\n error={error}\n hint={description && formatMessage(description)}\n required={required}\n >\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => setShowColorPicker(!showColorPicker)}\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CarretDown aria-hidden />\n </ColorPickerToggle>\n {showColorPicker && (\n <ColorPickerPopover\n onBlur={handleBlur}\n role=\"dialog\"\n source={colorPickerButtonRef}\n spacing={4}\n >\n <FocusTrap onEscape={() => setShowColorPicker(false)}>\n <ColorPicker\n color={color}\n onChange={(hexValue) =>\n onChange({ target: { name, value: hexValue, type: attribute.type } })\n }\n />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <FieldInput\n id=\"color-picker-value\"\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Flex>\n </FocusTrap>\n </ColorPickerPopover>\n )}\n <FieldHint />\n <FieldError />\n </Flex>\n </Field>\n );\n }\n);\n"],"names":["setRef","ref","value","composeRefs","refs","node","useComposedRefs","React","ColorPreview","styled","props","ColorPicker","HexColorPicker","theme","ColorPickerToggle","BaseButton","ColorPickerPopover","Popover","ColorPickerInput","attribute","description","disabled","error","intlLabel","labelAction","name","onChange","required","forwardedRef","showColorPicker","setShowColorPicker","colorPickerButtonRef","formatMessage","useIntl","color","handleBlur","e","composedRefs","jsx","Field","Flex","FieldLabel","jsxs","getTrad","Typography","CarretDown","FocusTrap","hexValue","Box","FieldInput","FieldHint","FieldError"],"mappings":"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"}
@@ -1,168 +0,0 @@
1
- import { j as r, g as f } from "./index-e75c6fdb.mjs";
2
- import * as a from "react";
3
- import { BaseButton as w, Popover as R, Field as $, Flex as g, FieldLabel as T, Typography as m, FocusTrap as F, Box as B, FieldInput as _, FieldHint as E, FieldError as I } from "@strapi/design-system";
4
- import { CarretDown as M } from "@strapi/icons";
5
- import { HexColorPicker as H } from "react-colorful";
6
- import { useIntl as D } from "react-intl";
7
- import l from "styled-components";
8
- import "@strapi/helper-plugin";
9
- function L(e, o) {
10
- typeof e == "function" ? e(o) : e != null && (e.current = o);
11
- }
12
- function S(...e) {
13
- return (o) => e.forEach((i) => L(i, o));
14
- }
15
- function X(...e) {
16
- return a.useCallback(S(...e), e);
17
- }
18
- const q = l.div`
19
- border-radius: 50%;
20
- width: 20px;
21
- height: 20px;
22
- margin-right: 10px;
23
- background-color: ${(e) => e.color};
24
- border: 1px solid rgba(0, 0, 0, 0.1);
25
- `, z = l(H)`
26
- && {
27
- width: 100%;
28
- aspect-ratio: 1.5;
29
- }
30
-
31
- .react-colorful__pointer {
32
- width: ${({ theme: e }) => e.spaces[3]};
33
- height: ${({ theme: e }) => e.spaces[3]};
34
- }
35
-
36
- .react-colorful__saturation {
37
- border-radius: ${({ theme: e }) => e.spaces[1]};
38
- border-bottom: none;
39
- }
40
-
41
- .react-colorful__hue {
42
- border-radius: 10px;
43
- height: ${({ theme: e }) => e.spaces[3]};
44
- margin-top: ${({ theme: e }) => e.spaces[2]};
45
- }
46
- `, A = l(w)`
47
- display: flex;
48
- justify-content: space-between;
49
- align-items: center;
50
-
51
- svg {
52
- width: ${({ theme: e }) => e.spaces[2]};
53
- height: ${({ theme: e }) => e.spaces[2]};
54
- }
55
-
56
- svg > path {
57
- fill: ${({ theme: e }) => e.colors.neutral500};
58
- justify-self: flex-end;
59
- }
60
- `, G = l(R)`
61
- padding: ${({ theme: e }) => e.spaces[2]};
62
- min-height: 270px;
63
- `, W = a.forwardRef(
64
- ({
65
- attribute: e,
66
- description: o,
67
- disabled: i = !1,
68
- error: j,
69
- intlLabel: k,
70
- labelAction: C,
71
- name: c,
72
- onChange: h,
73
- required: b = !1,
74
- value: n = ""
75
- }, y) => {
76
- const [p, d] = a.useState(!1), x = a.useRef(null), { formatMessage: t } = D(), u = n || "#000000", v = (s) => {
77
- s.preventDefault(), s.currentTarget.contains(s.relatedTarget) || d(!1);
78
- }, P = X(y, x);
79
- return /* @__PURE__ */ r.jsx(
80
- $,
81
- {
82
- name: c,
83
- id: c,
84
- error: j,
85
- hint: o && t(o),
86
- required: b,
87
- children: /* @__PURE__ */ r.jsxs(g, { direction: "column", alignItems: "stretch", gap: 1, children: [
88
- /* @__PURE__ */ r.jsx(T, { action: C, children: t(k) }),
89
- /* @__PURE__ */ r.jsxs(
90
- A,
91
- {
92
- ref: P,
93
- "aria-label": t({
94
- id: f("color-picker.toggle.aria-label"),
95
- defaultMessage: "Color picker toggle"
96
- }),
97
- "aria-controls": "color-picker-value",
98
- "aria-haspopup": "dialog",
99
- "aria-expanded": p,
100
- "aria-disabled": i,
101
- disabled: i,
102
- onClick: () => d(!p),
103
- children: [
104
- /* @__PURE__ */ r.jsxs(g, { children: [
105
- /* @__PURE__ */ r.jsx(q, { color: u }),
106
- /* @__PURE__ */ r.jsx(
107
- m,
108
- {
109
- style: { textTransform: "uppercase" },
110
- textColor: n ? void 0 : "neutral600",
111
- variant: "omega",
112
- children: u
113
- }
114
- )
115
- ] }),
116
- /* @__PURE__ */ r.jsx(M, { "aria-hidden": !0 })
117
- ]
118
- }
119
- ),
120
- p && /* @__PURE__ */ r.jsx(
121
- G,
122
- {
123
- onBlur: v,
124
- role: "dialog",
125
- source: x,
126
- spacing: 4,
127
- children: /* @__PURE__ */ r.jsxs(F, { onEscape: () => d(!1), children: [
128
- /* @__PURE__ */ r.jsx(
129
- z,
130
- {
131
- color: u,
132
- onChange: (s) => h({ target: { name: c, value: s, type: e.type } })
133
- }
134
- ),
135
- /* @__PURE__ */ r.jsxs(g, { paddingTop: 3, paddingLeft: 4, justifyContent: "flex-end", children: [
136
- /* @__PURE__ */ r.jsx(B, { paddingRight: 2, children: /* @__PURE__ */ r.jsx(m, { variant: "omega", as: "label", textColor: "neutral600", children: t({
137
- id: f("color-picker.input.format"),
138
- defaultMessage: "HEX"
139
- }) }) }),
140
- /* @__PURE__ */ r.jsx(
141
- _,
142
- {
143
- id: "color-picker-value",
144
- "aria-label": t({
145
- id: f("color-picker.input.aria-label"),
146
- defaultMessage: "Color picker input"
147
- }),
148
- style: { textTransform: "uppercase" },
149
- value: n,
150
- placeholder: "#000000",
151
- onChange: h
152
- }
153
- )
154
- ] })
155
- ] })
156
- }
157
- ),
158
- /* @__PURE__ */ r.jsx(E, {}),
159
- /* @__PURE__ */ r.jsx(I, {})
160
- ] })
161
- }
162
- );
163
- }
164
- );
165
- export {
166
- W as ColorPickerInput
167
- };
168
- //# sourceMappingURL=ColorPickerInput-3335ebf5.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColorPickerInput-3335ebf5.mjs","sources":["../../admin/src/hooks/useComposeRefs.ts","../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n if (typeof ref === 'function') {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n return (node: T) => refs.forEach((ref) => setRef(ref, node));\n}\n\n/**\n * Takes multiple React like refs either React.Ref or a callback:\n * (node: T) => void and returns a single function that can be\n * passed to a React component as a ref.\n *\n * Example:\n * ```tsx\n * import { useComposedRefs } from '../hooks/useComposedRefs';\n *\n * const Component = React.forwardRef<HTMLInputElement, ComponentProps>((props, forwardedRef) => {\n * const ref = useComposedRefs(internalRef, forwardedRef);\n *\n * React.useEffect(() => {\n * ref.current.focus();\n * }, [ref]);\n *\n * return <input ref={ref} />\n * }\n * ```\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import * as React from 'react';\n\nimport {\n BaseButton,\n Box,\n Field,\n FieldError,\n FieldHint,\n FieldInput,\n FieldLabel,\n Flex,\n FocusTrap,\n Popover,\n Typography,\n} from '@strapi/design-system';\nimport { CarretDown } from '@strapi/icons';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport styled from 'styled-components';\n\nimport { useComposedRefs } from '../hooks/useComposeRefs';\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(BaseButton)`\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\n/**\n * TODO: A lot of these props should extend `FieldProps`\n */\ninterface ColorPickerInputProps {\n intlLabel: MessageDescriptor;\n /**\n * TODO: this should be extended from `FieldInputProps['onChange']\n * but that conflicts with it's secondary usage in `HexColorPicker`\n */\n onChange: (event: { target: { name: string; value: string; type: string } }) => void;\n attribute: { type: string; [key: string]: unknown };\n name: string;\n description?: MessageDescriptor;\n disabled?: boolean;\n error?: string;\n labelAction?: React.ReactNode;\n required?: boolean;\n value?: string;\n}\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n {\n attribute,\n description,\n disabled = false,\n error,\n intlLabel,\n labelAction,\n name,\n onChange,\n required = false,\n value = '',\n },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value || '#000000';\n\n const handleBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n\n if (!e.currentTarget.contains(e.relatedTarget)) {\n setShowColorPicker(false);\n }\n };\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field\n name={name}\n id={name}\n // GenericInput calls formatMessage and returns a string for the error\n error={error}\n hint={description && formatMessage(description)}\n required={required}\n >\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n onClick={() => setShowColorPicker(!showColorPicker)}\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CarretDown aria-hidden />\n </ColorPickerToggle>\n {showColorPicker && (\n <ColorPickerPopover\n onBlur={handleBlur}\n role=\"dialog\"\n source={colorPickerButtonRef}\n spacing={4}\n >\n <FocusTrap onEscape={() => setShowColorPicker(false)}>\n <ColorPicker\n color={color}\n onChange={(hexValue) =>\n onChange({ target: { name, value: hexValue, type: attribute.type } })\n }\n />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" as=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <FieldInput\n id=\"color-picker-value\"\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Flex>\n </FocusTrap>\n </ColorPickerPopover>\n )}\n <FieldHint />\n <FieldError />\n </Flex>\n </Field>\n );\n }\n);\n"],"names":["setRef","ref","value","composeRefs","refs","node","useComposedRefs","React","ColorPreview","styled","props","ColorPicker","HexColorPicker","theme","ColorPickerToggle","BaseButton","ColorPickerPopover","Popover","ColorPickerInput","attribute","description","disabled","error","intlLabel","labelAction","name","onChange","required","forwardedRef","showColorPicker","setShowColorPicker","colorPickerButtonRef","formatMessage","useIntl","color","handleBlur","e","composedRefs","jsx","Field","Flex","FieldLabel","jsxs","getTrad","Typography","CarretDown","FocusTrap","hexValue","Box","FieldInput","FieldHint","FieldError"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={"color-picker.description":"Vyberte libovolnou barvu","color-picker.input.aria-label":"Vstup pro výběr barvy","color-picker.input.format":"HEX","color-picker.label":"Barva","color-picker.options.advanced.regex":"RegExp vzor","color-picker.options.advanced.regex.description":"Zadejte regulární výraz pro ověření hodnoty HEX","color-picker.options.advanced.requiredField":"Povinné pole","color-picker.options.advanced.requiredField.description":"Pokud je toto pole prázdné, nebudete moci vytvořit záznam","color-picker.settings":"Nastavení","color-picker.toggle.aria-label":"Přepínač výběru barvy"};exports.default=e;
2
- //# sourceMappingURL=cs-67f98136.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"cs-67f98136.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- {"version":3,"file":"cs-70e06424.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}