@prolibu-suite/cobalt-core 0.11.8 → 0.11.10
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.
- package/custom-elements.json +44 -1
- package/dist/cjs/co-color-picker.cjs.entry.js +1 -1
- package/dist/cjs/co-file-field.cjs.entry.js +30 -8
- package/dist/cjs/co-sidebar-nav.cjs.entry.js +29 -8
- package/dist/cjs/cobalt.cjs.js +1 -1
- package/dist/cjs/{fileI18n-6sdbKvo6.js → fileI18n-Bz8zbHlB.js} +3 -0
- package/dist/cjs/index-bHoidDwv.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cobalt/cobalt.esm.js +1 -1
- package/dist/cobalt/{p-cd43d372.entry.js → p-15d995b4.entry.js} +1 -1
- package/dist/cobalt/p-438cc876.entry.js +1 -0
- package/dist/cobalt/p-b6463d35.entry.js +1 -0
- package/dist/cobalt/p-z0tbse7d.js +1 -0
- package/dist/collection/components/co-file-field/co-file-field.js +50 -8
- package/dist/collection/components/co-file-field/co-file-field.utils.js +14 -0
- package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js +5 -189
- package/dist/collection/components/co-sidebar-nav/sidebar-icon-map.js +205 -0
- package/dist/collection/utils/fileI18n.js +3 -0
- package/dist/components/co-color-picker.js +1 -1
- package/dist/components/co-file-field.js +1 -1
- package/dist/components/co-sidebar-nav.js +1 -1
- package/dist/components/p-z0tbse7d.js +1 -0
- package/dist/esm/co-color-picker.entry.js +1 -1
- package/dist/esm/co-file-field.entry.js +30 -8
- package/dist/esm/co-sidebar-nav.entry.js +29 -8
- package/dist/esm/cobalt.js +1 -1
- package/dist/esm/{fileI18n-gKnOhsd2.js → fileI18n-z0tbse7d.js} +3 -0
- package/dist/esm/index-DJkaRtbb.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/co-file-field/co-file-field.d.ts +13 -0
- package/dist/types/components/co-file-field/co-file-field.utils.d.ts +6 -0
- package/dist/types/components/co-sidebar-nav/sidebar-icon-map.d.ts +6 -0
- package/dist/types/components.d.ts +16 -0
- package/dist/types/utils/fileI18n.d.ts +1 -0
- package/package.json +3 -3
- package/dist/cobalt/p-99781b0b.entry.js +0 -1
- package/dist/cobalt/p-c31b9b51.entry.js +0 -1
- package/dist/cobalt/p-gKnOhsd2.js +0 -1
- package/dist/components/p-gKnOhsd2.js +0 -1
|
@@ -1,190 +1,6 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { normalizeText } from "../../utils/normalizeText";
|
|
3
|
-
|
|
4
|
-
const DEFAULT_ICON_MAP = {
|
|
5
|
-
// Directory
|
|
6
|
-
Home: 'house',
|
|
7
|
-
Contacts: 'address-book',
|
|
8
|
-
Companies: 'buildings',
|
|
9
|
-
// Sales
|
|
10
|
-
Presentations: 'presentation-chart',
|
|
11
|
-
Deals: 'handshake',
|
|
12
|
-
Invoices: 'receipt',
|
|
13
|
-
Payments: 'credit-card',
|
|
14
|
-
// Communications
|
|
15
|
-
Conversations: 'chat-circle',
|
|
16
|
-
Channels: 'broadcast',
|
|
17
|
-
ChannelProviders: 'plugs-connected',
|
|
18
|
-
ConversationFlows: 'flow-arrow',
|
|
19
|
-
PhoneNumbers: 'phone',
|
|
20
|
-
// Operations
|
|
21
|
-
Tasks: 'check-square',
|
|
22
|
-
TaskGroups: 'squares-four',
|
|
23
|
-
WorkOrders: 'clipboard-text',
|
|
24
|
-
// Support
|
|
25
|
-
Tickets: 'ticket',
|
|
26
|
-
CaseTypes: 'tag',
|
|
27
|
-
EmailHubs: 'at',
|
|
28
|
-
RoutingRules: 'path',
|
|
29
|
-
// Tools
|
|
30
|
-
Contracts: 'file-text',
|
|
31
|
-
Notes: 'note',
|
|
32
|
-
Meetings: 'video-camera',
|
|
33
|
-
Calls: 'phone-call',
|
|
34
|
-
CloudDrive: 'cloud',
|
|
35
|
-
// Libraries
|
|
36
|
-
Quotes: 'quotes',
|
|
37
|
-
ContentTemplates: 'article',
|
|
38
|
-
MessageTemplates: 'chat-text',
|
|
39
|
-
Skills: 'brain',
|
|
40
|
-
AiAgentProfiles: 'robot',
|
|
41
|
-
// Analytics
|
|
42
|
-
Insights: 'chart-line',
|
|
43
|
-
Dashboards: 'gauge',
|
|
44
|
-
Reports: 'chart-bar',
|
|
45
|
-
// Mailing
|
|
46
|
-
Emails: 'envelope',
|
|
47
|
-
ContactLists: 'users-three',
|
|
48
|
-
EmailCampaigns: 'megaphone',
|
|
49
|
-
// TourStudio
|
|
50
|
-
VirtualTours: 'cube',
|
|
51
|
-
Scenes: 'image',
|
|
52
|
-
Spots: 'map-pin',
|
|
53
|
-
FloorPlans: 'blueprint',
|
|
54
|
-
// Configuration
|
|
55
|
-
Users: 'user',
|
|
56
|
-
UserTeams: 'users',
|
|
57
|
-
UserGroups: 'user-circle-gear',
|
|
58
|
-
Roles: 'shield',
|
|
59
|
-
Workspaces: 'stack',
|
|
60
|
-
AuthenticationRules: 'lock-key',
|
|
61
|
-
OauthApps: 'key',
|
|
62
|
-
ServiceCredentials: 'certificate',
|
|
63
|
-
// Scheduling
|
|
64
|
-
Calendars: 'calendar',
|
|
65
|
-
CalendarPolicies: 'calendar-check',
|
|
66
|
-
CalendarGroups: 'calendar-dots',
|
|
67
|
-
CalendarEvents: 'calendar-plus',
|
|
68
|
-
// Wizards
|
|
69
|
-
ProposalWizards: 'magic-wand',
|
|
70
|
-
WizardGroups: 'folders',
|
|
71
|
-
// Advertising
|
|
72
|
-
AdHubs: 'storefront',
|
|
73
|
-
AdCampaigns: 'flag-banner',
|
|
74
|
-
// Pricing
|
|
75
|
-
Pricebooks: 'book-open',
|
|
76
|
-
PricebookEntries: 'list-numbers',
|
|
77
|
-
Products: 'package',
|
|
78
|
-
Taxes: 'percent',
|
|
79
|
-
ProductGroups: 'stack',
|
|
80
|
-
ProductFamilies: 'tree-structure',
|
|
81
|
-
ProductCategories: 'tag',
|
|
82
|
-
ProductRules: 'gear-six',
|
|
83
|
-
DiscountSchedules: 'piggy-bank',
|
|
84
|
-
// Notifications
|
|
85
|
-
LiveStreams: 'broadcast',
|
|
86
|
-
EventSubscriptions: 'bell-ringing',
|
|
87
|
-
// System
|
|
88
|
-
Stages: 'steps',
|
|
89
|
-
ContactFlows: 'flow-arrow',
|
|
90
|
-
Categories: 'folder-simple',
|
|
91
|
-
CustomFilters: 'funnel',
|
|
92
|
-
Logs: 'list-bullets',
|
|
93
|
-
// Iot
|
|
94
|
-
Devices: 'cpu',
|
|
95
|
-
// Development
|
|
96
|
-
Scripts: 'code',
|
|
97
|
-
Webhooks: 'webhooks-logo',
|
|
98
|
-
Endpoints: 'plug',
|
|
99
|
-
Sites: 'globe',
|
|
100
|
-
HealthChecks: 'heartbeat',
|
|
101
|
-
Plugins: 'puzzle-piece',
|
|
102
|
-
Cobs: 'cube',
|
|
103
|
-
CustomFields: 'textbox',
|
|
104
|
-
CustomUis: 'layout',
|
|
105
|
-
Documentation: 'book-open-text',
|
|
106
|
-
// Docs
|
|
107
|
-
Sections: 'article',
|
|
108
|
-
Articles: 'newspaper',
|
|
109
|
-
// Category-level icons
|
|
110
|
-
Directory: 'address-book',
|
|
111
|
-
Sales: 'currency-dollar',
|
|
112
|
-
Communications: 'chat-teardrop-text',
|
|
113
|
-
Operations: 'gear',
|
|
114
|
-
Support: 'lifebuoy',
|
|
115
|
-
Tools: 'wrench',
|
|
116
|
-
Configuration: 'sliders',
|
|
117
|
-
Analytics: 'chart-pie',
|
|
118
|
-
Mailing: 'envelope-simple',
|
|
119
|
-
Billing: 'money',
|
|
120
|
-
Libraries: 'books',
|
|
121
|
-
Scheduling: 'timer',
|
|
122
|
-
Pricing: 'tag',
|
|
123
|
-
Development: 'terminal',
|
|
124
|
-
AccessControl: 'shield-check',
|
|
125
|
-
Notifications: 'bell',
|
|
126
|
-
System: 'database',
|
|
127
|
-
Iot: 'wifi-high',
|
|
128
|
-
Advertising: 'megaphone',
|
|
129
|
-
Wizards: 'magic-wand',
|
|
130
|
-
TourStudio: 'cube',
|
|
131
|
-
Docs: 'file-text',
|
|
132
|
-
Setup: 'gear-six',
|
|
133
|
-
// Human Resources — Learning
|
|
134
|
-
Learning: 'graduation-cap',
|
|
135
|
-
Programs: 'path',
|
|
136
|
-
Courses: 'chalkboard-teacher',
|
|
137
|
-
Enrollments: 'student',
|
|
138
|
-
Certificates: 'certificate',
|
|
139
|
-
Assessments: 'exam',
|
|
140
|
-
// Human Resources — Recruitment
|
|
141
|
-
Recruitment: 'user-plus',
|
|
142
|
-
Vacancies: 'briefcase',
|
|
143
|
-
Candidates: 'user-list',
|
|
144
|
-
JobApplications: 'read-cv-logo',
|
|
145
|
-
Interviews: 'chats-circle',
|
|
146
|
-
// Human Resources — Asset Management
|
|
147
|
-
AssetManagement: 'package',
|
|
148
|
-
Assets: 'devices',
|
|
149
|
-
AssetAssignments: 'user-switch',
|
|
150
|
-
// Achievements / Recognition
|
|
151
|
-
Recognition: 'hands-clapping',
|
|
152
|
-
Achievements: 'trophy',
|
|
153
|
-
Rewards: 'gift',
|
|
154
|
-
Badges: 'medal',
|
|
155
|
-
BadgeNominations: 'star',
|
|
156
|
-
Prizes: 'trophy',
|
|
157
|
-
RewardsBudgets: 'wallet',
|
|
158
|
-
RedeemedPrizes: 'crown',
|
|
159
|
-
// Sales / Billing extras
|
|
160
|
-
PaymentReceipts: 'hand-coins',
|
|
161
|
-
Coupons: 'seal-percent',
|
|
162
|
-
// Events
|
|
163
|
-
EventManager: 'calendar-star',
|
|
164
|
-
EventProspects: 'users-four',
|
|
165
|
-
BusinessEvents: 'briefcase',
|
|
166
|
-
EventExpense: 'coins',
|
|
167
|
-
// Content
|
|
168
|
-
Content: 'folder-open',
|
|
169
|
-
Portals: 'app-window',
|
|
170
|
-
// Communication Center
|
|
171
|
-
CommunicationCenter: 'headset',
|
|
172
|
-
// Integrations
|
|
173
|
-
Integrations: 'plugs-connected',
|
|
174
|
-
Mcp: 'plug',
|
|
175
|
-
LifecycleHooks: 'arrows-clockwise',
|
|
176
|
-
PaymentProviders: 'credit-card',
|
|
177
|
-
Stripe: 'credit-card',
|
|
178
|
-
ThirdParty: 'plugs-connected',
|
|
179
|
-
Sendgrid: 'paper-plane-tilt',
|
|
180
|
-
Apollo: 'rocket-launch',
|
|
181
|
-
Kaspr: 'identification-card',
|
|
182
|
-
OpenAi: 'robot',
|
|
183
|
-
Ultramsg: 'whatsapp-logo',
|
|
184
|
-
Slack: 'slack-logo',
|
|
185
|
-
Telegram: 'telegram-logo',
|
|
186
|
-
Discord: 'discord-logo',
|
|
187
|
-
};
|
|
3
|
+
import { SIDEBAR_ICON_MAP } from "./sidebar-icon-map";
|
|
188
4
|
/** Ícono de un ítem en modo `min` (sin label): 18 (20 se veía pesado; 16 = el de full, se perdía). */
|
|
189
5
|
const MIN_ICON_SIZE = 18;
|
|
190
6
|
/**
|
|
@@ -257,10 +73,10 @@ export class CoSidebarNav {
|
|
|
257
73
|
}
|
|
258
74
|
parseIconMap() {
|
|
259
75
|
try {
|
|
260
|
-
this.parsedIconMap = Object.assign(Object.assign({},
|
|
76
|
+
this.parsedIconMap = Object.assign(Object.assign({}, SIDEBAR_ICON_MAP), JSON.parse(this.iconMap));
|
|
261
77
|
}
|
|
262
78
|
catch (_a) {
|
|
263
|
-
this.parsedIconMap = Object.assign({},
|
|
79
|
+
this.parsedIconMap = Object.assign({}, SIDEBAR_ICON_MAP);
|
|
264
80
|
}
|
|
265
81
|
}
|
|
266
82
|
parseTranslations() {
|
|
@@ -514,10 +330,10 @@ export class CoSidebarNav {
|
|
|
514
330
|
// `flyout-open` (min mode only) lets the CSS drop the host edge-fade mask
|
|
515
331
|
// while a flyout is shown — a host mask would otherwise clip AND
|
|
516
332
|
// mis-position the fixed flyout (mask makes the host a containing block).
|
|
517
|
-
h(Host, { key: '
|
|
333
|
+
h(Host, { key: 'a7c5661ad2613a6f2c45c37e6def2e4c8d7e9801', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: '597d59612958ab2014a7db0ad561abd1db15524f', class: {
|
|
518
334
|
'co-sidebar-nav': true,
|
|
519
335
|
'co-sidebar-nav--min': this.mode === 'min',
|
|
520
|
-
} }, this.renderSearch(), h("div", { key: '
|
|
336
|
+
} }, this.renderSearch(), h("div", { key: '55a5bb260444a26e3e2228fb08c30c15746994a9', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
|
|
521
337
|
}
|
|
522
338
|
static get is() { return "co-sidebar-nav"; }
|
|
523
339
|
static get encapsulation() { return "shadow"; }
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Clave del menú de Prolibu → ícono Phosphor (lo usa `co-sidebar-nav`; el prop `icon-map`
|
|
3
|
+
* lo extiende). Una clave sin entrada cae a `circle`: `sidebar-icon-map.test.ts` cruza este
|
|
4
|
+
* mapa con las claves que manda el backend y verifica que cada ícono exista en Phosphor.
|
|
5
|
+
*/
|
|
6
|
+
export const SIDEBAR_ICON_MAP = {
|
|
7
|
+
// Directory
|
|
8
|
+
Home: 'house',
|
|
9
|
+
Contacts: 'address-book',
|
|
10
|
+
Companies: 'buildings',
|
|
11
|
+
Leads: 'user-focus',
|
|
12
|
+
// Sales
|
|
13
|
+
Presentations: 'presentation-chart',
|
|
14
|
+
Deals: 'handshake',
|
|
15
|
+
TestDrive: 'steering-wheel',
|
|
16
|
+
Invoices: 'receipt',
|
|
17
|
+
Payments: 'credit-card',
|
|
18
|
+
// Communications
|
|
19
|
+
Conversations: 'chat-circle',
|
|
20
|
+
Channels: 'broadcast',
|
|
21
|
+
ChannelProviders: 'plugs-connected',
|
|
22
|
+
ConversationFlows: 'flow-arrow',
|
|
23
|
+
PhoneNumbers: 'phone',
|
|
24
|
+
// Operations
|
|
25
|
+
Tasks: 'check-square',
|
|
26
|
+
TaskGroups: 'squares-four',
|
|
27
|
+
WorkOrders: 'clipboard-text',
|
|
28
|
+
// Support
|
|
29
|
+
Tickets: 'ticket',
|
|
30
|
+
CaseTypes: 'tag',
|
|
31
|
+
EmailHubs: 'at',
|
|
32
|
+
RoutingRules: 'path',
|
|
33
|
+
// Tools
|
|
34
|
+
Contracts: 'file-text',
|
|
35
|
+
Notes: 'note',
|
|
36
|
+
Meetings: 'video-camera',
|
|
37
|
+
Calls: 'phone-call',
|
|
38
|
+
CloudDrive: 'cloud',
|
|
39
|
+
Forms: 'note-pencil',
|
|
40
|
+
// Libraries
|
|
41
|
+
Quotes: 'quotes',
|
|
42
|
+
ContentTemplates: 'article',
|
|
43
|
+
MessageTemplates: 'chat-text',
|
|
44
|
+
Skills: 'brain',
|
|
45
|
+
AiAgentProfiles: 'robot',
|
|
46
|
+
// Analytics
|
|
47
|
+
Insights: 'chart-line',
|
|
48
|
+
Dashboards: 'gauge',
|
|
49
|
+
Reports: 'chart-bar',
|
|
50
|
+
// Mailing
|
|
51
|
+
Emails: 'envelope',
|
|
52
|
+
ContactLists: 'users-three',
|
|
53
|
+
EmailCampaigns: 'megaphone',
|
|
54
|
+
// TourStudio
|
|
55
|
+
VirtualTours: 'cube',
|
|
56
|
+
Scenes: 'image',
|
|
57
|
+
Spots: 'map-pin',
|
|
58
|
+
FloorPlans: 'blueprint',
|
|
59
|
+
// Configuration
|
|
60
|
+
Users: 'user',
|
|
61
|
+
UserTeams: 'users',
|
|
62
|
+
Teams: 'users',
|
|
63
|
+
UserGroups: 'user-circle-gear',
|
|
64
|
+
Roles: 'shield',
|
|
65
|
+
Workspaces: 'stack',
|
|
66
|
+
AuthenticationRules: 'lock-key',
|
|
67
|
+
OauthApps: 'key',
|
|
68
|
+
ServiceCredentials: 'certificate',
|
|
69
|
+
// Scheduling
|
|
70
|
+
Calendars: 'calendar',
|
|
71
|
+
CalendarPolicies: 'calendar-check',
|
|
72
|
+
CalendarGroups: 'calendar-dots',
|
|
73
|
+
CalendarEvents: 'calendar-plus',
|
|
74
|
+
// Wizards
|
|
75
|
+
ProposalWizards: 'magic-wand',
|
|
76
|
+
WizardGroups: 'folders',
|
|
77
|
+
ProposalWizardGroup: 'folders',
|
|
78
|
+
// Advertising
|
|
79
|
+
AdHubs: 'storefront',
|
|
80
|
+
AdCampaigns: 'flag-banner',
|
|
81
|
+
// Pricing
|
|
82
|
+
Pricebooks: 'book-open',
|
|
83
|
+
PricebookEntries: 'list-numbers',
|
|
84
|
+
Products: 'package',
|
|
85
|
+
Taxes: 'percent',
|
|
86
|
+
ProductGroups: 'stack',
|
|
87
|
+
ProductFamilies: 'tree-structure',
|
|
88
|
+
ProductCategories: 'tag',
|
|
89
|
+
ProductRules: 'gear-six',
|
|
90
|
+
DiscountSchedules: 'piggy-bank',
|
|
91
|
+
// Notifications
|
|
92
|
+
LiveStreams: 'broadcast',
|
|
93
|
+
EventSubscriptions: 'bell-ringing',
|
|
94
|
+
// System
|
|
95
|
+
Stages: 'steps',
|
|
96
|
+
ContactFlows: 'flow-arrow',
|
|
97
|
+
Categories: 'folder-simple',
|
|
98
|
+
CustomFilters: 'funnel',
|
|
99
|
+
Logs: 'list-bullets',
|
|
100
|
+
ContactProtocols: 'list-checks',
|
|
101
|
+
Scorings: 'chart-line-up',
|
|
102
|
+
// Iot
|
|
103
|
+
Devices: 'cpu',
|
|
104
|
+
// Development
|
|
105
|
+
Scripts: 'code',
|
|
106
|
+
Webhooks: 'webhooks-logo',
|
|
107
|
+
Endpoints: 'plug',
|
|
108
|
+
Sites: 'globe',
|
|
109
|
+
HealthChecks: 'heartbeat',
|
|
110
|
+
Plugins: 'puzzle-piece',
|
|
111
|
+
Cobs: 'cube',
|
|
112
|
+
CustomFields: 'textbox',
|
|
113
|
+
CustomUis: 'layout',
|
|
114
|
+
Documentation: 'book-open-text',
|
|
115
|
+
// Docs
|
|
116
|
+
Sections: 'article',
|
|
117
|
+
Articles: 'newspaper',
|
|
118
|
+
// Category-level icons
|
|
119
|
+
Directory: 'address-book',
|
|
120
|
+
Sales: 'currency-dollar',
|
|
121
|
+
Communications: 'chat-teardrop-text',
|
|
122
|
+
Operations: 'gear',
|
|
123
|
+
Support: 'lifebuoy',
|
|
124
|
+
Tools: 'wrench',
|
|
125
|
+
Configuration: 'sliders',
|
|
126
|
+
Analytics: 'chart-pie',
|
|
127
|
+
Mailing: 'envelope-simple',
|
|
128
|
+
Billing: 'money',
|
|
129
|
+
Libraries: 'books',
|
|
130
|
+
Scheduling: 'timer',
|
|
131
|
+
Pricing: 'tag',
|
|
132
|
+
Development: 'terminal',
|
|
133
|
+
AccessControl: 'shield-check',
|
|
134
|
+
Notifications: 'bell',
|
|
135
|
+
System: 'database',
|
|
136
|
+
Iot: 'wifi-high',
|
|
137
|
+
Advertising: 'megaphone',
|
|
138
|
+
Wizards: 'magic-wand',
|
|
139
|
+
TourStudio: 'cube',
|
|
140
|
+
Docs: 'file-text',
|
|
141
|
+
Setup: 'gear-six',
|
|
142
|
+
SalesAndMarketing: 'trend-up',
|
|
143
|
+
CustomerService: 'lifebuoy',
|
|
144
|
+
HumanResources: 'identification-badge',
|
|
145
|
+
TicketsSetup: 'ticket',
|
|
146
|
+
CommunicationCenterSetup: 'headset',
|
|
147
|
+
// Inventory
|
|
148
|
+
Inventory: 'warehouse',
|
|
149
|
+
Branches: 'building-office',
|
|
150
|
+
ItemStock: 'barcode',
|
|
151
|
+
// Human Resources — Learning
|
|
152
|
+
Learning: 'graduation-cap',
|
|
153
|
+
Programs: 'path',
|
|
154
|
+
Courses: 'chalkboard-teacher',
|
|
155
|
+
Enrollments: 'student',
|
|
156
|
+
Certificates: 'certificate',
|
|
157
|
+
Assessments: 'exam',
|
|
158
|
+
// Human Resources — Recruitment
|
|
159
|
+
Recruitment: 'user-plus',
|
|
160
|
+
Vacancies: 'briefcase',
|
|
161
|
+
Candidates: 'user-list',
|
|
162
|
+
JobApplications: 'read-cv-logo',
|
|
163
|
+
Interviews: 'chats-circle',
|
|
164
|
+
// Human Resources — Asset Management
|
|
165
|
+
AssetManagement: 'package',
|
|
166
|
+
Assets: 'devices',
|
|
167
|
+
AssetAssignments: 'user-switch',
|
|
168
|
+
// Achievements / Recognition
|
|
169
|
+
Recognition: 'hands-clapping',
|
|
170
|
+
Achievements: 'trophy',
|
|
171
|
+
Rewards: 'gift',
|
|
172
|
+
Badges: 'medal',
|
|
173
|
+
BadgeNominations: 'star',
|
|
174
|
+
Prizes: 'trophy',
|
|
175
|
+
RewardsBudgets: 'wallet',
|
|
176
|
+
RedeemedPrizes: 'crown',
|
|
177
|
+
// Sales / Billing extras
|
|
178
|
+
PaymentReceipts: 'hand-coins',
|
|
179
|
+
Coupons: 'seal-percent',
|
|
180
|
+
// Events
|
|
181
|
+
EventManager: 'calendar-star',
|
|
182
|
+
EventProspects: 'users-four',
|
|
183
|
+
BusinessEvents: 'briefcase',
|
|
184
|
+
EventExpense: 'coins',
|
|
185
|
+
// Content
|
|
186
|
+
Content: 'folder-open',
|
|
187
|
+
Portals: 'app-window',
|
|
188
|
+
// Communication Center
|
|
189
|
+
CommunicationCenter: 'headset',
|
|
190
|
+
// Integrations
|
|
191
|
+
Integrations: 'plugs-connected',
|
|
192
|
+
Mcp: 'plug',
|
|
193
|
+
LifecycleHooks: 'arrows-clockwise',
|
|
194
|
+
PaymentProviders: 'credit-card',
|
|
195
|
+
Stripe: 'credit-card',
|
|
196
|
+
ThirdParty: 'plugs-connected',
|
|
197
|
+
Sendgrid: 'paper-plane-tilt',
|
|
198
|
+
Apollo: 'rocket-launch',
|
|
199
|
+
Kaspr: 'identification-card',
|
|
200
|
+
OpenAi: 'robot',
|
|
201
|
+
Ultramsg: 'whatsapp-logo',
|
|
202
|
+
Slack: 'slack-logo',
|
|
203
|
+
Telegram: 'telegram-logo',
|
|
204
|
+
Discord: 'discord-logo',
|
|
205
|
+
};
|
|
@@ -17,6 +17,7 @@ const DICT = {
|
|
|
17
17
|
removeFile: 'Eliminar archivo',
|
|
18
18
|
copyUrl: 'Copiar enlace',
|
|
19
19
|
downloadFile: 'Descargar',
|
|
20
|
+
annotateImage: 'Anotar imagen',
|
|
20
21
|
copied: 'Copiado',
|
|
21
22
|
dragToReorder: 'Arrastra para reordenar',
|
|
22
23
|
openPreview: 'Abrir vista previa',
|
|
@@ -35,6 +36,7 @@ const DICT = {
|
|
|
35
36
|
removeFile: 'Remove file',
|
|
36
37
|
copyUrl: 'Copy link',
|
|
37
38
|
downloadFile: 'Download',
|
|
39
|
+
annotateImage: 'Annotate image',
|
|
38
40
|
copied: 'Copied',
|
|
39
41
|
dragToReorder: 'Drag to reorder',
|
|
40
42
|
openPreview: 'Open preview',
|
|
@@ -53,6 +55,7 @@ const DICT = {
|
|
|
53
55
|
removeFile: 'Remover arquivo',
|
|
54
56
|
copyUrl: 'Copiar link',
|
|
55
57
|
downloadFile: 'Baixar',
|
|
58
|
+
annotateImage: 'Anotar imagem',
|
|
56
59
|
copied: 'Copiado',
|
|
57
60
|
dragToReorder: 'Arraste para reordenar',
|
|
58
61
|
openPreview: 'Abrir pré-visualização',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as o,H as e,c as r,h as i,t}from"./index.js";import{R as s}from"./p-CWneqh4n.js";import{h as c,a,b as n,c as l,i as h}from"./p-BzxEh7sq.js";import{l as p,f as d}from"./p-gKnOhsd2.js";import{d as u}from"./p-qMNHMnvI.js";import{d as v}from"./p-xA7AfoIW.js";const m={en:{swatches:"Color presets",groupNeutrals:"Neutrals",groupBrand:"Brand colors",area:"Saturation and brightness",hue:"Hue",hueValue:"{n} degrees",saturation:"Saturation",satValue:"Saturation {n}%",brightness:"Brightness",briValue:"Brightness {n}%",area2D:"2D slider",hexField:"Hex code",eyedropper:"Pick a color from the screen",copy:"Copy"},es:{swatches:"Colores predefinidos",groupNeutrals:"Neutros",groupBrand:"Colores de marca",area:"Saturación y brillo",hue:"Matiz",hueValue:"{n} grados",saturation:"Saturación",satValue:"Saturación {n} %",brightness:"Brillo",briValue:"Brillo {n} %",area2D:"Control 2D",hexField:"Código hexadecimal",eyedropper:"Elegir un color de la pantalla",copy:"Copiar"},pt:{swatches:"Cores predefinidas",groupNeutrals:"Neutros",groupBrand:"Cores da marca",area:"Saturação e brilho",hue:"Matiz",hueValue:"{n} graus",saturation:"Saturação",satValue:"Saturação {n} %",brightness:"Brilho",briValue:"Brilho {n} %",area2D:"Controle 2D",hexField:"Código hexadecimal",eyedropper:"Escolher uma cor da tela",copy:"Copiar"}},g=o=>{var e;return"string"==typeof o?{key:o,name:o,value:o,synthesizedKey:!0}:null!=o.key?{key:o.key,name:o.name,value:o.value}:{key:null!==(e=o.name)&&void 0!==e?e:o.value,name:o.name,value:o.value,synthesizedKey:!0}},b=[{key:"black",name:"Black",value:"#1F1C1B"},{key:"gray",name:"Gray",value:"#585858"},{key:"silver",name:"Silver",value:"#C4C4C4"},{key:"smoke",name:"Smoke",value:"#E3E3E3"},{key:"bone",name:"Bone",value:"#F7F6F0"},{key:"green",name:"Green",value:"#02A270"},{key:"olive",name:"Olive",value:"#AAB43C"},{key:"yellow",name:"Yellow",value:"#FDBF00"},{key:"orange",name:"Orange",value:"#F0821E"},{key:"red",name:"Red",value:"#EB1E1E"},{key:"pink",name:"Pink",value:"#F32A73"},{key:"burgundy",name:"Burgundy",value:"#811137"},{key:"violet",name:"Violet",value:"#5F4BD7"},{key:"electricBlue",name:"Electric blue",value:"#000AFF"},{key:"blue",name:"Blue",value:"#2563EB"},{key:"lightBlue",name:"Light blue",value:"#00BEE6"},{key:"teal",name:"Teal",value:"#00AFAF"}],f=["black","gray","silver","smoke","bone"],x=b.filter((o=>!f.includes(o.key))).map((o=>o.key)),k=new Set(f),_=new Set(x),y=/^#?[0-9a-f]*$/i,w=Object.freeze({h:0,s:100,v:100}),z=o=>o.reduce(((o,e)=>o.concat(e.items)),[]),C=o(class o extends e{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coChange=r(this,"coChange",7),this.coInput=r(this,"coInput",7),this.inline=!1,this.value="",this.placeholder="Select color",this.disabled=!1,this.required=!1,this.status="default",this.layout="vertical",this.size="md",this.presets="",this.locale="en",this.isOpen=!1,this.copied=!1,this.hsv=w,this.hexDraft="",this.hexEditing=!1,this.areaAxis="s",this.emitted="",this.committed="",this.focusedIndex=0,this.areaDragging=!1,this.handlePopoverOpen=()=>{this.isOpen=!0,this.areaDragging=!1,this.resetHexDraft();const o=this.flatPresets.findIndex((o=>o.value.toUpperCase()===(this.value||"").toUpperCase()));this.focusedIndex=o>=0?o:0},this.handlePopoverClose=()=>{this.isOpen=!1,this.finishHexEdit(),this.restoreTriggerFocus()},this.handleTriggerKeyDown=o=>{this.disabled||("Enter"===o.key||" "===o.key?(o.preventDefault(),this.isOpen=!this.isOpen):"ArrowDown"!==o.key||this.isOpen||(o.preventDefault(),this.isOpen=!0))},this.pointerToHsv=o=>{var e;const r=null===(e=this.areaEl)||void 0===e?void 0:e.getBoundingClientRect();return!!(r&&r.width>0&&r.height>0)&&(this.previewHsv({s:100*Math.min(Math.max((o.clientX-r.left)/r.width,0),1),v:100*(1-Math.min(Math.max((o.clientY-r.top)/r.height,0),1))}),!0)},this.handleAreaPointerDown=o=>{var e,r;this.disabled||0!==o.button||(null===(r=null===(e=this.areaEl)||void 0===e?void 0:e.setPointerCapture)||void 0===r||r.call(e,o.pointerId),this.areaDragging=this.pointerToHsv(o))},this.handleAreaPointerMove=o=>{!this.disabled&&this.areaDragging&&1===o.buttons&&this.pointerToHsv(o)},this.handleAreaPointerCancel=()=>{this.areaDragging=!1},this.handleAreaPointerUp=o=>{this.areaDragging&&0===o.button&&(this.areaDragging=!1,this.disabled||this.commit(c(this.hsv)))},this.handleAreaKeyDown=e=>{if(this.disabled)return;const r=o.AREA_KEYS[e.key];if(!r)return;e.preventDefault();const i=Math.min(100,Math.max(0,this.hsv[r.axis]+r.dir*(e.shiftKey?10:1)));this.focusAxis(r.axis),this.previewHsv({[r.axis]:i}),this.commit(c(this.hsv))},this.handleHueKeyDown=o=>{if(this.disabled||!o.shiftKey)return;const e="ArrowRight"===o.key||"ArrowUp"===o.key?1:"ArrowLeft"===o.key||"ArrowDown"===o.key?-1:0;e&&(o.preventDefault(),this.previewHsv({h:Math.min(360,Math.max(0,this.hsv.h+10*e))}),this.commit(c(this.hsv)))},this.handleGridKeyDown=o=>{var e;if(this.disabled)return;const r=this.presetGroups,i=z(r),t=i.length;if(!t)return;const s=Math.min(Math.max(this.focusedIndex,0),t-1);let c=s;switch(o.key){case"ArrowRight":c=(s+1)%t;break;case"ArrowLeft":c=(s-1+t)%t;break;case"ArrowDown":c=this.verticalNeighbor(r,s,1);break;case"ArrowUp":c=this.verticalNeighbor(r,s,-1);break;case"Home":c=0;break;case"End":c=t-1;break;case"Enter":case" ":return o.preventDefault(),void this.handleSwatchClick(i[s].value);default:return}o.preventDefault(),this.focusedIndex=c,null===(e=this.optionEls()[c])||void 0===e||e.focus()},this.handleHexInput=o=>{var e,r;if(this.disabled)return;const i=o.target,t=this.escapeHex(i.value);if(i.value!==t){const o=null!==(e=i.selectionStart)&&void 0!==e?e:i.value.length,s=Math.min(this.escapeHex(i.value.slice(0,o)).length,t.length);i.value=t,null===(r=i.setSelectionRange)||void 0===r||r.call(i,s,s)}this.hexEditing=!0,this.hexDraft=t,a(t)&&this.previewHex(this.expandHex(t))},this.handleHexBlur=()=>{this.finishHexEdit()},this.handleHexKeyDown=o=>{"Enter"===o.key&&(o.preventDefault(),this.finishHexEdit())},this.handleHexPaste=o=>{var e,r;if(this.disabled)return;const i=(null!==(r=null===(e=o.clipboardData)||void 0===e?void 0:e.getData("text"))&&void 0!==r?r:"").trim(),t=n(i);if(t)return o.preventDefault(),this.hexEditing=!1,this.hexDraft=this.escapeHex(t),void this.commit(t);y.test(i)||o.preventDefault()},this.handleEyeDropper=async()=>{if(this.finishHexEdit(),this.hasEyeDropper)try{const o=window.EyeDropper,{sRGBHex:e}=await(new o).open(),r=n(e);r&&this.commit(r)}catch(o){}}}syncFromValue(o){if(this.syncHexDraft(o),(o||"").toUpperCase()===(this.emitted||"").toUpperCase())return;this.committed=o,this.emitted=o;const e=l(o||"");e&&(this.hsv=e)}componentWillLoad(){this.inline&&this.handlePopoverOpen();const o=l(this.value||"");this.hsv=null!=o?o:w,this.areaAxis="s",this.resetHexDraft(),this.committed=this.value,this.emitted=this.value}previewHsv(o){this.hsv=Object.assign(Object.assign({},this.hsv),o),this.emitPreview(c(this.hsv))}previewHex(o){const e=l(o);e&&(this.hsv=e),this.emitPreview(o)}emitPreview(o){this.emitted=o,this.value=o,this.coInput.emit(o)}commit(o){if(c(this.hsv)!==o){const e=l(o);e&&(this.hsv=e)}this.emitted=o,this.committed=o,this.value=o,this.coChange.emit(o)}get strings(){return function(o){return m[p(o)]}(this.locale)}get parsedPresets(){if(Array.isArray(this.presets))return this.presets.map(g);if("string"==typeof this.presets&&this.presets.trim())try{const o=JSON.parse(this.presets);if(Array.isArray(o))return o.map((o=>g(o)))}catch(o){}return b}get presetGroups(){const o=this.parsedPresets,e=function(o){const e=[],r=[];for(const i of o){if(i.synthesizedKey)return null;if(k.has(i.key))e.push(i);else{if(!_.has(i.key))return null;r.push(i)}}return e.length&&r.length?{neutrals:e,brand:r}:null}(o);return e?[{label:this.strings.groupNeutrals,items:e.neutrals,from:0},{label:this.strings.groupBrand,items:e.brand,from:e.neutrals.length}]:[{label:void 0,items:o,from:0}]}get flatPresets(){return z(this.presetGroups)}restoreTriggerFocus(){var o;const e=document.activeElement;(e===this.el||this.el.contains(e))&&(null===(o=this.triggerEl)||void 0===o||o.focus({preventScroll:!0}))}handleSwatchClick(o){this.disabled||(this.commit(o),this.inline||(this.isOpen=!1,this.restoreTriggerFocus()))}focusAxis(o){this.areaAxis=o;const e="s"===o?this.satEl:this.valEl;e&&(e.removeAttribute("aria-hidden"),e.focus())}optionEls(){var o,e;return Array.from(null!==(e=null===(o=this.gridEl)||void 0===o?void 0:o.querySelectorAll('[role="option"]'))&&void 0!==e?e:[])}verticalNeighbor(o,e,r){const i=o.findIndex((o=>e>=o.from&&e<o.from+o.items.length));if(i<0)return e;const t=o[i],s=e-t.from,c=s%6,a=Math.ceil(t.items.length/6),n=Math.floor(s/6)+r;if(n>=0&&n<a)return t.from+Math.min(6*n+c,t.items.length-1);const l=o[i+r];return l?l.from+Math.min(6*(1===r?0:(Math.ceil(l.items.length/6)||1)-1)+c,l.items.length-1):e}renderArea(){const{h:o,s:e,v:r}=this.hsv,t="s"===this.areaAxis;return i("div",{class:"co-color-picker__area",role:"group","aria-label":this.strings.area,ref:o=>this.areaEl=o,style:{"--co-color-picker-hue":""+o},onPointerDown:this.handleAreaPointerDown,onPointerMove:this.handleAreaPointerMove,onPointerUp:this.handleAreaPointerUp,onPointerCancel:this.handleAreaPointerCancel},i("span",{class:"co-color-picker__area-thumb",role:"presentation",style:{left:e+"%",top:100-r+"%",background:this.value}}),i("input",{type:"range",min:"0",max:"100",step:"1",class:"co-color-picker__channel","data-channel":"s",value:Math.round(e),ref:o=>this.satEl=o,tabIndex:t?0:-1,"aria-hidden":t?void 0:"true","aria-label":this.strings.saturation,"aria-roledescription":this.strings.area2D,"aria-valuetext":d(this.strings.satValue,{n:Math.round(e)}),"aria-orientation":"horizontal",disabled:this.disabled,onFocus:()=>this.areaAxis="s",onInput:o=>this.previewHsv({s:+o.target.value}),onChange:()=>this.commit(c(this.hsv)),onKeyDown:this.handleAreaKeyDown}),i("input",{type:"range",min:"0",max:"100",step:"1",class:"co-color-picker__channel","data-channel":"v",value:Math.round(r),ref:o=>this.valEl=o,tabIndex:t?-1:0,"aria-hidden":t?"true":void 0,"aria-label":this.strings.brightness,"aria-roledescription":this.strings.area2D,"aria-valuetext":d(this.strings.briValue,{n:Math.round(r)}),"aria-orientation":"vertical",disabled:this.disabled,onFocus:()=>this.areaAxis="v",onInput:o=>this.previewHsv({v:+o.target.value}),onChange:()=>this.commit(c(this.hsv)),onKeyDown:this.handleAreaKeyDown}))}renderHue(){return i("input",{type:"range",min:"0",max:"360",step:"1",class:"co-color-picker__hue-input",value:Math.round(this.hsv.h),"aria-label":this.strings.hue,"aria-valuetext":d(this.strings.hueValue,{n:Math.round(this.hsv.h)}),disabled:this.disabled,onInput:o=>this.previewHsv({h:+o.target.value}),onChange:()=>this.commit(c(this.hsv)),onKeyDown:this.handleHueKeyDown})}renderSwatches(){return i("div",{class:"co-color-picker__grid",role:"listbox","aria-label":this.strings.swatches,ref:o=>this.gridEl=o,onKeyDown:this.handleGridKeyDown},this.presetGroups.map((o=>i("div",{class:"co-color-picker__grid-group",key:o.from,role:o.label?"group":"presentation","aria-label":o.label},o.items.map(((e,r)=>{const t=o.from+r,s=e.value.toUpperCase()===(this.value||"").toUpperCase();return i("div",{key:e.value,role:"option","aria-selected":s?"true":"false","aria-label":e.name,title:e.name,tabIndex:t===this.focusedIndex?0:-1,class:{"co-color-picker__grid-item":!0,"co-color-picker__grid-item--selected":s,"co-color-picker__grid-item--light":h(e.value)},style:{background:e.value},onFocus:()=>this.focusedIndex=t,onClick:()=>this.handleSwatchClick(e.value)},s&&i("co-icon",{name:"check",size:16,weight:"bold",class:"co-color-picker__grid-check"}))}))))))}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning"}[this.status]||null}escapeHex(o){return(o||"").replace(/[^0-9a-f]/gi,"").substring(0,6).toUpperCase()}expandHex(o){const e=o.replace("#","");return"#"+(3===e.length?e[0]+e[0]+e[1]+e[1]+e[2]+e[2]:e).toUpperCase()}resetHexDraft(){this.hexEditing=!1,this.syncHexDraft(this.value)}syncHexDraft(o){this.hexEditing||o&&!a(o)||(this.hexDraft=this.escapeHex(o))}finishHexEdit(){const o=this.hexEditing;if(this.hexEditing=!1,!this.disabled){if(o&&a(this.hexDraft)){const o=this.expandHex(this.hexDraft);return this.commit(o),void this.syncHexDraft(o)}this.revertToCommitted()}}revertToCommitted(){const o=this.committed;this.syncHexDraft(o),o||(this.hsv=w),(this.value||"").toUpperCase()!==(o||"").toUpperCase()&&(this.value=o,this.coInput.emit(o))}get hasEyeDropper(){return"undefined"!=typeof window&&"EyeDropper"in window}renderHexRow(){const o=!!this.value;return i("div",{class:"co-color-picker__hex-row"},i("span",{class:"co-color-picker__hex-prefix"},"#"),i("input",{type:"text",class:"co-color-picker__hex-input",value:this.hexDraft,spellcheck:!1,autocomplete:"off",maxLength:6,"aria-label":this.strings.hexField,disabled:this.disabled,onInput:this.handleHexInput,onBlur:this.handleHexBlur,onKeyDown:this.handleHexKeyDown,onPaste:this.handleHexPaste}),this.hasEyeDropper&&i("button",{type:"button",class:"co-color-picker__eyedropper",title:this.strings.eyedropper,"aria-label":this.strings.eyedropper,disabled:this.disabled,onClick:this.handleEyeDropper},i("co-icon",{name:"eyedropper",size:16})),i("button",{type:"button",class:"co-color-picker__copy-btn "+(this.copied?"co-color-picker__copy-btn--copied":""),title:this.strings.copy,"aria-label":this.strings.copy,disabled:this.disabled||!o,onClick:()=>this.handleCopy()},i("co-icon",{name:this.copied?"check":"copy",size:16})))}async handleCopy(){if(this.value)try{await navigator.clipboard.writeText(this.value),this.copied=!0,setTimeout((()=>{this.copied=!1}),1500)}catch(o){}}render(){const e=!!this.value,r="default"!==this.status?"co-color-picker--"+this.status:"";return this.inline?i("div",{class:`co-color-picker co-color-picker--${this.size} co-color-picker--inline ${r} ${this.disabled?"co-color-picker--disabled":""}`},this.label&&i("span",{class:"co-color-picker__label"},this.label,i(s,{required:this.required})),i("div",{class:"co-color-picker__panel",id:o.PANEL_ID,role:"group","aria-label":this.label||this.placeholder},this.renderArea(),this.renderHue(),this.renderSwatches(),this.renderHexRow()),this.helperText&&i("div",{class:"co-color-picker__helper"},this.statusIcon&&i("co-icon",{name:this.statusIcon,size:14,weight:"fill",class:"co-color-picker__helper-icon"}),i("span",{class:"co-color-picker__helper-text"},this.helperText))):i("div",{class:`co-color-picker co-color-picker--${this.size} ${r} ${this.isOpen?"co-color-picker--open":""} ${this.disabled?"co-color-picker--disabled":""}`},this.label&&i("label",{class:"co-color-picker__label"},this.label,i(s,{required:this.required})),i("co-popover",{open:this.isOpen,placement:"bottom-start",offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},i("div",{slot:"trigger",class:"co-color-picker__trigger",role:"combobox","aria-expanded":this.isOpen?"true":"false","aria-haspopup":"dialog","aria-controls":this.isOpen?o.PANEL_ID:void 0,"aria-label":this.label||void 0,"aria-disabled":this.disabled?"true":void 0,tabIndex:this.disabled?-1:0,ref:o=>this.triggerEl=o,onKeyDown:this.handleTriggerKeyDown},i("span",{class:"co-color-picker__swatch",style:{background:e?this.value:"transparent"}}),i("span",{class:"co-color-picker__value "+(e?"":"co-color-picker__value--empty")},e?this.value:this.placeholder)),this.isOpen&&i("div",{class:"co-color-picker__panel",id:o.PANEL_ID,role:"dialog","aria-label":this.label||this.placeholder},this.renderArea(),this.renderHue(),this.renderSwatches(),this.renderHexRow())),this.helperText&&i("div",{class:"co-color-picker__helper"},this.statusIcon&&i("co-icon",{name:this.statusIcon,size:14,weight:"fill",class:"co-color-picker__helper-icon"}),i("span",{class:"co-color-picker__helper-text"},this.helperText)))}get el(){return this}static get watchers(){return{value:[{syncFromValue:0}]}}static get style(){return":host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-color-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-color-picker--disabled{opacity:0.5;pointer-events:none}.co-color-picker__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);padding:0 var(--co-spacing-xs)}.co-field-required{margin-left:2px;color:var(--co-semantic-text-error, var(--co-color-status-error))}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-color-picker co-popover{display:block;width:100%}.co-color-picker__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker--s .co-color-picker__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-color-picker--sm .co-color-picker__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-color-picker--lg .co-color-picker__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-color-picker--s .co-color-picker__swatch,.co-color-picker--sm .co-color-picker__swatch{width:18px;height:18px}.co-color-picker__trigger:hover{border-color:var(--co-semantic-border-default)}.co-color-picker--open .co-color-picker__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-color-picker__trigger:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-color-picker--error .co-color-picker__trigger{border-color:var(--co-semantic-border-error, var(--co-color-status-error))}.co-color-picker__swatch{width:22px;height:22px;box-sizing:border-box;border-radius:var(--co-border-radius-full);border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-color-picker__value{flex:1;font-size:inherit;font-family:inherit;color:var(--co-semantic-text-default);font-weight:500;text-transform:uppercase}.co-color-picker__value--empty{color:var(--co-semantic-text-muted);font-weight:400}.co-color-picker__panel{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-md)}.co-color-picker--inline .co-color-picker__panel{padding:0}.co-color-picker__area{position:relative;height:132px;border-radius:var(--co-border-radius-xxs);cursor:crosshair;touch-action:none;background:linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent), hsl(var(--co-color-picker-hue, 0) 100% 50%)}.co-color-picker__area-thumb{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:var(--co-border-radius-full);border:2px solid var(--co-semantic-surface-page);box-shadow:0 0 0 1px var(--co-semantic-border-default);box-sizing:border-box;pointer-events:none}.co-color-picker__channel{position:absolute;inset:0;opacity:0;pointer-events:none;margin:0}.co-color-picker__area:focus-within{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-color-picker__hue-input{width:100%;height:12px;margin:0;appearance:none;-webkit-appearance:none;border-radius:var(--co-border-radius-full);background:linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%));cursor:pointer}.co-color-picker__hue-input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-page);box-shadow:0 0 0 1px var(--co-semantic-border-default);cursor:grab}.co-color-picker__hue-input::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-page);box-shadow:0 0 0 1px var(--co-semantic-border-default)}.co-color-picker__hue-input:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-color-picker__grid{display:flex;flex-direction:column;gap:var(--co-spacing-md)}.co-color-picker__grid-group{display:grid;grid-template-columns:repeat(6, 32px);gap:var(--co-spacing-sm2)}.co-color-picker__grid-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--co-border-radius-xxs);border:2px solid transparent;cursor:pointer;box-sizing:border-box;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker__grid-item:hover{transform:scale(1.1)}.co-color-picker__grid-item--selected{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent)}.co-color-picker__grid-item--light{box-shadow:inset 0 0 0 1px var(--co-semantic-border-default)}.co-color-picker__grid-item--light.co-color-picker__grid-item--selected{box-shadow:inset 0 0 0 1px var(--co-semantic-border-default), 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent)}.co-color-picker__grid-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-surface-page), 0 0 0 4px var(--co-semantic-border-focus)}.co-color-picker__grid-item--light:focus-visible{box-shadow:inset 0 0 0 1px var(--co-semantic-border-default), 0 0 0 2px var(--co-semantic-surface-page), 0 0 0 4px var(--co-semantic-border-focus)}.co-color-picker__grid-check{color:var(--co-color-base-blanco)}.co-color-picker__grid-item--light .co-color-picker__grid-check{color:var(--co-color-base-negro)}.co-color-picker__hex-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xxs)}.co-color-picker__hex-prefix{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:500}.co-color-picker__hex-row:has(>.co-color-picker__hex-input:focus){border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-color-picker__hex-input{flex:1;min-width:0;box-sizing:border-box;border:none;background:transparent;padding:0;font-size:var(--co-font-size-14);font-family:var(--co-font-family-mono, monospace);color:var(--co-semantic-text-default);text-transform:uppercase}.co-color-picker__hex-input:focus,.co-color-picker__hex-input:focus-visible{outline:none}.co-color-picker__hex-input:disabled{color:var(--co-semantic-text-muted);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--co-semantic-text-muted)}.co-color-picker__eyedropper{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker__eyedropper:hover:not(:disabled){color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-color-picker__eyedropper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-color-picker__eyedropper:disabled{cursor:not-allowed;opacity:0.5}.co-color-picker__copy-btn{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker__copy-btn:hover:not(:disabled){color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-color-picker__copy-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-color-picker__copy-btn:disabled{cursor:not-allowed;opacity:0.5}.co-color-picker__copy-btn--copied{color:var(--co-semantic-text-success, var(--co-color-status-success))}.co-color-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);padding:0 var(--co-spacing-xs)}.co-color-picker__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-color-picker--error .co-color-picker__helper{color:var(--co-semantic-text-error, var(--co-semantic-status-error))}:host([layout='horizontal']) .co-color-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-color-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-color-picker__label{white-space:normal}:host([layout='horizontal']) .co-color-picker>:not(.co-color-picker__label){grid-column:2;min-width:0}"}},[1,"co-color-picker",{inline:[516],value:[1025],label:[1],placeholder:[1],disabled:[4],required:[4],status:[1],helperText:[1,"helper-text"],layout:[513],size:[513],name:[1],presets:[1],locale:[1],isOpen:[32],copied:[32],hsv:[32],hexDraft:[32],areaAxis:[32],focusedIndex:[32]},void 0,{value:[{syncFromValue:0}]}]);function A(){"undefined"!=typeof customElements&&["co-color-picker","co-icon","co-popover"].forEach((o=>{switch(o){case"co-color-picker":customElements.get(t(o))||customElements.define(t(o),C);break;case"co-icon":customElements.get(t(o))||u();break;case"co-popover":customElements.get(t(o))||v()}}))}C.PANEL_ID="co-color-picker-panel",C.AREA_KEYS={ArrowRight:{axis:"s",dir:1},ArrowLeft:{axis:"s",dir:-1},ArrowUp:{axis:"v",dir:1},ArrowDown:{axis:"v",dir:-1}},A();const E=C,M=A;export{E as CoColorPicker,M as defineCustomElement}
|
|
1
|
+
import{p as o,H as e,c as r,h as i,t}from"./index.js";import{R as s}from"./p-CWneqh4n.js";import{h as c,a,b as n,c as l,i as h}from"./p-BzxEh7sq.js";import{l as p,f as d}from"./p-z0tbse7d.js";import{d as u}from"./p-qMNHMnvI.js";import{d as v}from"./p-xA7AfoIW.js";const m={en:{swatches:"Color presets",groupNeutrals:"Neutrals",groupBrand:"Brand colors",area:"Saturation and brightness",hue:"Hue",hueValue:"{n} degrees",saturation:"Saturation",satValue:"Saturation {n}%",brightness:"Brightness",briValue:"Brightness {n}%",area2D:"2D slider",hexField:"Hex code",eyedropper:"Pick a color from the screen",copy:"Copy"},es:{swatches:"Colores predefinidos",groupNeutrals:"Neutros",groupBrand:"Colores de marca",area:"Saturación y brillo",hue:"Matiz",hueValue:"{n} grados",saturation:"Saturación",satValue:"Saturación {n} %",brightness:"Brillo",briValue:"Brillo {n} %",area2D:"Control 2D",hexField:"Código hexadecimal",eyedropper:"Elegir un color de la pantalla",copy:"Copiar"},pt:{swatches:"Cores predefinidas",groupNeutrals:"Neutros",groupBrand:"Cores da marca",area:"Saturação e brilho",hue:"Matiz",hueValue:"{n} graus",saturation:"Saturação",satValue:"Saturação {n} %",brightness:"Brilho",briValue:"Brilho {n} %",area2D:"Controle 2D",hexField:"Código hexadecimal",eyedropper:"Escolher uma cor da tela",copy:"Copiar"}},g=o=>{var e;return"string"==typeof o?{key:o,name:o,value:o,synthesizedKey:!0}:null!=o.key?{key:o.key,name:o.name,value:o.value}:{key:null!==(e=o.name)&&void 0!==e?e:o.value,name:o.name,value:o.value,synthesizedKey:!0}},b=[{key:"black",name:"Black",value:"#1F1C1B"},{key:"gray",name:"Gray",value:"#585858"},{key:"silver",name:"Silver",value:"#C4C4C4"},{key:"smoke",name:"Smoke",value:"#E3E3E3"},{key:"bone",name:"Bone",value:"#F7F6F0"},{key:"green",name:"Green",value:"#02A270"},{key:"olive",name:"Olive",value:"#AAB43C"},{key:"yellow",name:"Yellow",value:"#FDBF00"},{key:"orange",name:"Orange",value:"#F0821E"},{key:"red",name:"Red",value:"#EB1E1E"},{key:"pink",name:"Pink",value:"#F32A73"},{key:"burgundy",name:"Burgundy",value:"#811137"},{key:"violet",name:"Violet",value:"#5F4BD7"},{key:"electricBlue",name:"Electric blue",value:"#000AFF"},{key:"blue",name:"Blue",value:"#2563EB"},{key:"lightBlue",name:"Light blue",value:"#00BEE6"},{key:"teal",name:"Teal",value:"#00AFAF"}],f=["black","gray","silver","smoke","bone"],x=b.filter((o=>!f.includes(o.key))).map((o=>o.key)),k=new Set(f),_=new Set(x),y=/^#?[0-9a-f]*$/i,w=Object.freeze({h:0,s:100,v:100}),z=o=>o.reduce(((o,e)=>o.concat(e.items)),[]),C=o(class o extends e{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coChange=r(this,"coChange",7),this.coInput=r(this,"coInput",7),this.inline=!1,this.value="",this.placeholder="Select color",this.disabled=!1,this.required=!1,this.status="default",this.layout="vertical",this.size="md",this.presets="",this.locale="en",this.isOpen=!1,this.copied=!1,this.hsv=w,this.hexDraft="",this.hexEditing=!1,this.areaAxis="s",this.emitted="",this.committed="",this.focusedIndex=0,this.areaDragging=!1,this.handlePopoverOpen=()=>{this.isOpen=!0,this.areaDragging=!1,this.resetHexDraft();const o=this.flatPresets.findIndex((o=>o.value.toUpperCase()===(this.value||"").toUpperCase()));this.focusedIndex=o>=0?o:0},this.handlePopoverClose=()=>{this.isOpen=!1,this.finishHexEdit(),this.restoreTriggerFocus()},this.handleTriggerKeyDown=o=>{this.disabled||("Enter"===o.key||" "===o.key?(o.preventDefault(),this.isOpen=!this.isOpen):"ArrowDown"!==o.key||this.isOpen||(o.preventDefault(),this.isOpen=!0))},this.pointerToHsv=o=>{var e;const r=null===(e=this.areaEl)||void 0===e?void 0:e.getBoundingClientRect();return!!(r&&r.width>0&&r.height>0)&&(this.previewHsv({s:100*Math.min(Math.max((o.clientX-r.left)/r.width,0),1),v:100*(1-Math.min(Math.max((o.clientY-r.top)/r.height,0),1))}),!0)},this.handleAreaPointerDown=o=>{var e,r;this.disabled||0!==o.button||(null===(r=null===(e=this.areaEl)||void 0===e?void 0:e.setPointerCapture)||void 0===r||r.call(e,o.pointerId),this.areaDragging=this.pointerToHsv(o))},this.handleAreaPointerMove=o=>{!this.disabled&&this.areaDragging&&1===o.buttons&&this.pointerToHsv(o)},this.handleAreaPointerCancel=()=>{this.areaDragging=!1},this.handleAreaPointerUp=o=>{this.areaDragging&&0===o.button&&(this.areaDragging=!1,this.disabled||this.commit(c(this.hsv)))},this.handleAreaKeyDown=e=>{if(this.disabled)return;const r=o.AREA_KEYS[e.key];if(!r)return;e.preventDefault();const i=Math.min(100,Math.max(0,this.hsv[r.axis]+r.dir*(e.shiftKey?10:1)));this.focusAxis(r.axis),this.previewHsv({[r.axis]:i}),this.commit(c(this.hsv))},this.handleHueKeyDown=o=>{if(this.disabled||!o.shiftKey)return;const e="ArrowRight"===o.key||"ArrowUp"===o.key?1:"ArrowLeft"===o.key||"ArrowDown"===o.key?-1:0;e&&(o.preventDefault(),this.previewHsv({h:Math.min(360,Math.max(0,this.hsv.h+10*e))}),this.commit(c(this.hsv)))},this.handleGridKeyDown=o=>{var e;if(this.disabled)return;const r=this.presetGroups,i=z(r),t=i.length;if(!t)return;const s=Math.min(Math.max(this.focusedIndex,0),t-1);let c=s;switch(o.key){case"ArrowRight":c=(s+1)%t;break;case"ArrowLeft":c=(s-1+t)%t;break;case"ArrowDown":c=this.verticalNeighbor(r,s,1);break;case"ArrowUp":c=this.verticalNeighbor(r,s,-1);break;case"Home":c=0;break;case"End":c=t-1;break;case"Enter":case" ":return o.preventDefault(),void this.handleSwatchClick(i[s].value);default:return}o.preventDefault(),this.focusedIndex=c,null===(e=this.optionEls()[c])||void 0===e||e.focus()},this.handleHexInput=o=>{var e,r;if(this.disabled)return;const i=o.target,t=this.escapeHex(i.value);if(i.value!==t){const o=null!==(e=i.selectionStart)&&void 0!==e?e:i.value.length,s=Math.min(this.escapeHex(i.value.slice(0,o)).length,t.length);i.value=t,null===(r=i.setSelectionRange)||void 0===r||r.call(i,s,s)}this.hexEditing=!0,this.hexDraft=t,a(t)&&this.previewHex(this.expandHex(t))},this.handleHexBlur=()=>{this.finishHexEdit()},this.handleHexKeyDown=o=>{"Enter"===o.key&&(o.preventDefault(),this.finishHexEdit())},this.handleHexPaste=o=>{var e,r;if(this.disabled)return;const i=(null!==(r=null===(e=o.clipboardData)||void 0===e?void 0:e.getData("text"))&&void 0!==r?r:"").trim(),t=n(i);if(t)return o.preventDefault(),this.hexEditing=!1,this.hexDraft=this.escapeHex(t),void this.commit(t);y.test(i)||o.preventDefault()},this.handleEyeDropper=async()=>{if(this.finishHexEdit(),this.hasEyeDropper)try{const o=window.EyeDropper,{sRGBHex:e}=await(new o).open(),r=n(e);r&&this.commit(r)}catch(o){}}}syncFromValue(o){if(this.syncHexDraft(o),(o||"").toUpperCase()===(this.emitted||"").toUpperCase())return;this.committed=o,this.emitted=o;const e=l(o||"");e&&(this.hsv=e)}componentWillLoad(){this.inline&&this.handlePopoverOpen();const o=l(this.value||"");this.hsv=null!=o?o:w,this.areaAxis="s",this.resetHexDraft(),this.committed=this.value,this.emitted=this.value}previewHsv(o){this.hsv=Object.assign(Object.assign({},this.hsv),o),this.emitPreview(c(this.hsv))}previewHex(o){const e=l(o);e&&(this.hsv=e),this.emitPreview(o)}emitPreview(o){this.emitted=o,this.value=o,this.coInput.emit(o)}commit(o){if(c(this.hsv)!==o){const e=l(o);e&&(this.hsv=e)}this.emitted=o,this.committed=o,this.value=o,this.coChange.emit(o)}get strings(){return function(o){return m[p(o)]}(this.locale)}get parsedPresets(){if(Array.isArray(this.presets))return this.presets.map(g);if("string"==typeof this.presets&&this.presets.trim())try{const o=JSON.parse(this.presets);if(Array.isArray(o))return o.map((o=>g(o)))}catch(o){}return b}get presetGroups(){const o=this.parsedPresets,e=function(o){const e=[],r=[];for(const i of o){if(i.synthesizedKey)return null;if(k.has(i.key))e.push(i);else{if(!_.has(i.key))return null;r.push(i)}}return e.length&&r.length?{neutrals:e,brand:r}:null}(o);return e?[{label:this.strings.groupNeutrals,items:e.neutrals,from:0},{label:this.strings.groupBrand,items:e.brand,from:e.neutrals.length}]:[{label:void 0,items:o,from:0}]}get flatPresets(){return z(this.presetGroups)}restoreTriggerFocus(){var o;const e=document.activeElement;(e===this.el||this.el.contains(e))&&(null===(o=this.triggerEl)||void 0===o||o.focus({preventScroll:!0}))}handleSwatchClick(o){this.disabled||(this.commit(o),this.inline||(this.isOpen=!1,this.restoreTriggerFocus()))}focusAxis(o){this.areaAxis=o;const e="s"===o?this.satEl:this.valEl;e&&(e.removeAttribute("aria-hidden"),e.focus())}optionEls(){var o,e;return Array.from(null!==(e=null===(o=this.gridEl)||void 0===o?void 0:o.querySelectorAll('[role="option"]'))&&void 0!==e?e:[])}verticalNeighbor(o,e,r){const i=o.findIndex((o=>e>=o.from&&e<o.from+o.items.length));if(i<0)return e;const t=o[i],s=e-t.from,c=s%6,a=Math.ceil(t.items.length/6),n=Math.floor(s/6)+r;if(n>=0&&n<a)return t.from+Math.min(6*n+c,t.items.length-1);const l=o[i+r];return l?l.from+Math.min(6*(1===r?0:(Math.ceil(l.items.length/6)||1)-1)+c,l.items.length-1):e}renderArea(){const{h:o,s:e,v:r}=this.hsv,t="s"===this.areaAxis;return i("div",{class:"co-color-picker__area",role:"group","aria-label":this.strings.area,ref:o=>this.areaEl=o,style:{"--co-color-picker-hue":""+o},onPointerDown:this.handleAreaPointerDown,onPointerMove:this.handleAreaPointerMove,onPointerUp:this.handleAreaPointerUp,onPointerCancel:this.handleAreaPointerCancel},i("span",{class:"co-color-picker__area-thumb",role:"presentation",style:{left:e+"%",top:100-r+"%",background:this.value}}),i("input",{type:"range",min:"0",max:"100",step:"1",class:"co-color-picker__channel","data-channel":"s",value:Math.round(e),ref:o=>this.satEl=o,tabIndex:t?0:-1,"aria-hidden":t?void 0:"true","aria-label":this.strings.saturation,"aria-roledescription":this.strings.area2D,"aria-valuetext":d(this.strings.satValue,{n:Math.round(e)}),"aria-orientation":"horizontal",disabled:this.disabled,onFocus:()=>this.areaAxis="s",onInput:o=>this.previewHsv({s:+o.target.value}),onChange:()=>this.commit(c(this.hsv)),onKeyDown:this.handleAreaKeyDown}),i("input",{type:"range",min:"0",max:"100",step:"1",class:"co-color-picker__channel","data-channel":"v",value:Math.round(r),ref:o=>this.valEl=o,tabIndex:t?-1:0,"aria-hidden":t?"true":void 0,"aria-label":this.strings.brightness,"aria-roledescription":this.strings.area2D,"aria-valuetext":d(this.strings.briValue,{n:Math.round(r)}),"aria-orientation":"vertical",disabled:this.disabled,onFocus:()=>this.areaAxis="v",onInput:o=>this.previewHsv({v:+o.target.value}),onChange:()=>this.commit(c(this.hsv)),onKeyDown:this.handleAreaKeyDown}))}renderHue(){return i("input",{type:"range",min:"0",max:"360",step:"1",class:"co-color-picker__hue-input",value:Math.round(this.hsv.h),"aria-label":this.strings.hue,"aria-valuetext":d(this.strings.hueValue,{n:Math.round(this.hsv.h)}),disabled:this.disabled,onInput:o=>this.previewHsv({h:+o.target.value}),onChange:()=>this.commit(c(this.hsv)),onKeyDown:this.handleHueKeyDown})}renderSwatches(){return i("div",{class:"co-color-picker__grid",role:"listbox","aria-label":this.strings.swatches,ref:o=>this.gridEl=o,onKeyDown:this.handleGridKeyDown},this.presetGroups.map((o=>i("div",{class:"co-color-picker__grid-group",key:o.from,role:o.label?"group":"presentation","aria-label":o.label},o.items.map(((e,r)=>{const t=o.from+r,s=e.value.toUpperCase()===(this.value||"").toUpperCase();return i("div",{key:e.value,role:"option","aria-selected":s?"true":"false","aria-label":e.name,title:e.name,tabIndex:t===this.focusedIndex?0:-1,class:{"co-color-picker__grid-item":!0,"co-color-picker__grid-item--selected":s,"co-color-picker__grid-item--light":h(e.value)},style:{background:e.value},onFocus:()=>this.focusedIndex=t,onClick:()=>this.handleSwatchClick(e.value)},s&&i("co-icon",{name:"check",size:16,weight:"bold",class:"co-color-picker__grid-check"}))}))))))}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning"}[this.status]||null}escapeHex(o){return(o||"").replace(/[^0-9a-f]/gi,"").substring(0,6).toUpperCase()}expandHex(o){const e=o.replace("#","");return"#"+(3===e.length?e[0]+e[0]+e[1]+e[1]+e[2]+e[2]:e).toUpperCase()}resetHexDraft(){this.hexEditing=!1,this.syncHexDraft(this.value)}syncHexDraft(o){this.hexEditing||o&&!a(o)||(this.hexDraft=this.escapeHex(o))}finishHexEdit(){const o=this.hexEditing;if(this.hexEditing=!1,!this.disabled){if(o&&a(this.hexDraft)){const o=this.expandHex(this.hexDraft);return this.commit(o),void this.syncHexDraft(o)}this.revertToCommitted()}}revertToCommitted(){const o=this.committed;this.syncHexDraft(o),o||(this.hsv=w),(this.value||"").toUpperCase()!==(o||"").toUpperCase()&&(this.value=o,this.coInput.emit(o))}get hasEyeDropper(){return"undefined"!=typeof window&&"EyeDropper"in window}renderHexRow(){const o=!!this.value;return i("div",{class:"co-color-picker__hex-row"},i("span",{class:"co-color-picker__hex-prefix"},"#"),i("input",{type:"text",class:"co-color-picker__hex-input",value:this.hexDraft,spellcheck:!1,autocomplete:"off",maxLength:6,"aria-label":this.strings.hexField,disabled:this.disabled,onInput:this.handleHexInput,onBlur:this.handleHexBlur,onKeyDown:this.handleHexKeyDown,onPaste:this.handleHexPaste}),this.hasEyeDropper&&i("button",{type:"button",class:"co-color-picker__eyedropper",title:this.strings.eyedropper,"aria-label":this.strings.eyedropper,disabled:this.disabled,onClick:this.handleEyeDropper},i("co-icon",{name:"eyedropper",size:16})),i("button",{type:"button",class:"co-color-picker__copy-btn "+(this.copied?"co-color-picker__copy-btn--copied":""),title:this.strings.copy,"aria-label":this.strings.copy,disabled:this.disabled||!o,onClick:()=>this.handleCopy()},i("co-icon",{name:this.copied?"check":"copy",size:16})))}async handleCopy(){if(this.value)try{await navigator.clipboard.writeText(this.value),this.copied=!0,setTimeout((()=>{this.copied=!1}),1500)}catch(o){}}render(){const e=!!this.value,r="default"!==this.status?"co-color-picker--"+this.status:"";return this.inline?i("div",{class:`co-color-picker co-color-picker--${this.size} co-color-picker--inline ${r} ${this.disabled?"co-color-picker--disabled":""}`},this.label&&i("span",{class:"co-color-picker__label"},this.label,i(s,{required:this.required})),i("div",{class:"co-color-picker__panel",id:o.PANEL_ID,role:"group","aria-label":this.label||this.placeholder},this.renderArea(),this.renderHue(),this.renderSwatches(),this.renderHexRow()),this.helperText&&i("div",{class:"co-color-picker__helper"},this.statusIcon&&i("co-icon",{name:this.statusIcon,size:14,weight:"fill",class:"co-color-picker__helper-icon"}),i("span",{class:"co-color-picker__helper-text"},this.helperText))):i("div",{class:`co-color-picker co-color-picker--${this.size} ${r} ${this.isOpen?"co-color-picker--open":""} ${this.disabled?"co-color-picker--disabled":""}`},this.label&&i("label",{class:"co-color-picker__label"},this.label,i(s,{required:this.required})),i("co-popover",{open:this.isOpen,placement:"bottom-start",offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},i("div",{slot:"trigger",class:"co-color-picker__trigger",role:"combobox","aria-expanded":this.isOpen?"true":"false","aria-haspopup":"dialog","aria-controls":this.isOpen?o.PANEL_ID:void 0,"aria-label":this.label||void 0,"aria-disabled":this.disabled?"true":void 0,tabIndex:this.disabled?-1:0,ref:o=>this.triggerEl=o,onKeyDown:this.handleTriggerKeyDown},i("span",{class:"co-color-picker__swatch",style:{background:e?this.value:"transparent"}}),i("span",{class:"co-color-picker__value "+(e?"":"co-color-picker__value--empty")},e?this.value:this.placeholder)),this.isOpen&&i("div",{class:"co-color-picker__panel",id:o.PANEL_ID,role:"dialog","aria-label":this.label||this.placeholder},this.renderArea(),this.renderHue(),this.renderSwatches(),this.renderHexRow())),this.helperText&&i("div",{class:"co-color-picker__helper"},this.statusIcon&&i("co-icon",{name:this.statusIcon,size:14,weight:"fill",class:"co-color-picker__helper-icon"}),i("span",{class:"co-color-picker__helper-text"},this.helperText)))}get el(){return this}static get watchers(){return{value:[{syncFromValue:0}]}}static get style(){return":host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-color-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-color-picker--disabled{opacity:0.5;pointer-events:none}.co-color-picker__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);padding:0 var(--co-spacing-xs)}.co-field-required{margin-left:2px;color:var(--co-semantic-text-error, var(--co-color-status-error))}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-color-picker co-popover{display:block;width:100%}.co-color-picker__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker--s .co-color-picker__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-color-picker--sm .co-color-picker__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-color-picker--lg .co-color-picker__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-color-picker--s .co-color-picker__swatch,.co-color-picker--sm .co-color-picker__swatch{width:18px;height:18px}.co-color-picker__trigger:hover{border-color:var(--co-semantic-border-default)}.co-color-picker--open .co-color-picker__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-color-picker__trigger:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-color-picker--error .co-color-picker__trigger{border-color:var(--co-semantic-border-error, var(--co-color-status-error))}.co-color-picker__swatch{width:22px;height:22px;box-sizing:border-box;border-radius:var(--co-border-radius-full);border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-color-picker__value{flex:1;font-size:inherit;font-family:inherit;color:var(--co-semantic-text-default);font-weight:500;text-transform:uppercase}.co-color-picker__value--empty{color:var(--co-semantic-text-muted);font-weight:400}.co-color-picker__panel{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-md)}.co-color-picker--inline .co-color-picker__panel{padding:0}.co-color-picker__area{position:relative;height:132px;border-radius:var(--co-border-radius-xxs);cursor:crosshair;touch-action:none;background:linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent), hsl(var(--co-color-picker-hue, 0) 100% 50%)}.co-color-picker__area-thumb{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:var(--co-border-radius-full);border:2px solid var(--co-semantic-surface-page);box-shadow:0 0 0 1px var(--co-semantic-border-default);box-sizing:border-box;pointer-events:none}.co-color-picker__channel{position:absolute;inset:0;opacity:0;pointer-events:none;margin:0}.co-color-picker__area:focus-within{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-color-picker__hue-input{width:100%;height:12px;margin:0;appearance:none;-webkit-appearance:none;border-radius:var(--co-border-radius-full);background:linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%));cursor:pointer}.co-color-picker__hue-input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-page);box-shadow:0 0 0 1px var(--co-semantic-border-default);cursor:grab}.co-color-picker__hue-input::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-page);box-shadow:0 0 0 1px var(--co-semantic-border-default)}.co-color-picker__hue-input:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-color-picker__grid{display:flex;flex-direction:column;gap:var(--co-spacing-md)}.co-color-picker__grid-group{display:grid;grid-template-columns:repeat(6, 32px);gap:var(--co-spacing-sm2)}.co-color-picker__grid-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--co-border-radius-xxs);border:2px solid transparent;cursor:pointer;box-sizing:border-box;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-out), border-color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker__grid-item:hover{transform:scale(1.1)}.co-color-picker__grid-item--selected{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent)}.co-color-picker__grid-item--light{box-shadow:inset 0 0 0 1px var(--co-semantic-border-default)}.co-color-picker__grid-item--light.co-color-picker__grid-item--selected{box-shadow:inset 0 0 0 1px var(--co-semantic-border-default), 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent)}.co-color-picker__grid-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-surface-page), 0 0 0 4px var(--co-semantic-border-focus)}.co-color-picker__grid-item--light:focus-visible{box-shadow:inset 0 0 0 1px var(--co-semantic-border-default), 0 0 0 2px var(--co-semantic-surface-page), 0 0 0 4px var(--co-semantic-border-focus)}.co-color-picker__grid-check{color:var(--co-color-base-blanco)}.co-color-picker__grid-item--light .co-color-picker__grid-check{color:var(--co-color-base-negro)}.co-color-picker__hex-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xxs)}.co-color-picker__hex-prefix{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:500}.co-color-picker__hex-row:has(>.co-color-picker__hex-input:focus){border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-color-picker__hex-input{flex:1;min-width:0;box-sizing:border-box;border:none;background:transparent;padding:0;font-size:var(--co-font-size-14);font-family:var(--co-font-family-mono, monospace);color:var(--co-semantic-text-default);text-transform:uppercase}.co-color-picker__hex-input:focus,.co-color-picker__hex-input:focus-visible{outline:none}.co-color-picker__hex-input:disabled{color:var(--co-semantic-text-muted);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--co-semantic-text-muted)}.co-color-picker__eyedropper{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker__eyedropper:hover:not(:disabled){color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-color-picker__eyedropper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-color-picker__eyedropper:disabled{cursor:not-allowed;opacity:0.5}.co-color-picker__copy-btn{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-color-picker__copy-btn:hover:not(:disabled){color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-color-picker__copy-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-color-picker__copy-btn:disabled{cursor:not-allowed;opacity:0.5}.co-color-picker__copy-btn--copied{color:var(--co-semantic-text-success, var(--co-color-status-success))}.co-color-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);padding:0 var(--co-spacing-xs)}.co-color-picker__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-color-picker--error .co-color-picker__helper{color:var(--co-semantic-text-error, var(--co-semantic-status-error))}:host([layout='horizontal']) .co-color-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-color-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-color-picker__label{white-space:normal}:host([layout='horizontal']) .co-color-picker>:not(.co-color-picker__label){grid-column:2;min-width:0}"}},[1,"co-color-picker",{inline:[516],value:[1025],label:[1],placeholder:[1],disabled:[4],required:[4],status:[1],helperText:[1,"helper-text"],layout:[513],size:[513],name:[1],presets:[1],locale:[1],isOpen:[32],copied:[32],hsv:[32],hexDraft:[32],areaAxis:[32],focusedIndex:[32]},void 0,{value:[{syncFromValue:0}]}]);function A(){"undefined"!=typeof customElements&&["co-color-picker","co-icon","co-popover"].forEach((o=>{switch(o){case"co-color-picker":customElements.get(t(o))||customElements.define(t(o),C);break;case"co-icon":customElements.get(t(o))||u();break;case"co-popover":customElements.get(t(o))||v()}}))}C.PANEL_ID="co-color-picker-panel",C.AREA_KEYS={ArrowRight:{axis:"s",dir:1},ArrowLeft:{axis:"s",dir:-1},ArrowUp:{axis:"v",dir:1},ArrowDown:{axis:"v",dir:-1}},A();const E=C,M=A;export{E as CoColorPicker,M as defineCustomElement}
|