@bikdotai/bik-component-library 0.0.867-beta.0 → 0.0.867
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/dist/cjs/components/agent-builder/utils/mentionSerialization.js +4 -4
- package/dist/cjs/components/agent-builder/utils/mentionSerialization.js.map +1 -1
- package/dist/cjs/components/button/Button.js +1 -1
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/components/button/Button.styled.js +2 -2
- package/dist/cjs/components/button/Button.styled.js.map +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.js +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.js.map +1 -1
- package/dist/cjs/components/tag/Tag.js +1 -1
- package/dist/cjs/components/tag/Tag.js.map +1 -1
- package/dist/cjs/components/tag/Tag.styled.js +4 -4
- package/dist/cjs/components/tag/Tag.styled.js.map +1 -1
- package/dist/cjs/components/tag/model.js.map +1 -1
- package/dist/cjs/editor/extensions/buildExtensions.js +2 -2
- package/dist/cjs/editor/extensions/buildExtensions.js.map +1 -1
- package/dist/cjs/icons/BIK AI specific/WandSparkles.js +1 -1
- package/dist/cjs/icons/BIK AI specific/WandSparkles.js.map +1 -1
- package/dist/esm/components/agent-builder/utils/mentionSerialization.d.ts +3 -1
- package/dist/esm/components/agent-builder/utils/mentionSerialization.js +31 -23
- package/dist/esm/components/agent-builder/utils/mentionSerialization.js.map +1 -1
- package/dist/esm/components/button/Button.js +19 -21
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/button/Button.styled.d.ts +0 -1
- package/dist/esm/components/button/Button.styled.js +5 -5
- package/dist/esm/components/button/Button.styled.js.map +1 -1
- package/dist/esm/components/button/model.d.ts +0 -5
- package/dist/esm/components/dropdown-button/DropdownButton.d.ts +0 -5
- package/dist/esm/components/dropdown-button/DropdownButton.js +3 -4
- package/dist/esm/components/dropdown-button/DropdownButton.js.map +1 -1
- package/dist/esm/components/tag/Tag.d.ts +1 -1
- package/dist/esm/components/tag/Tag.js +41 -48
- package/dist/esm/components/tag/Tag.js.map +1 -1
- package/dist/esm/components/tag/Tag.styled.d.ts +0 -3
- package/dist/esm/components/tag/Tag.styled.js +9 -6
- package/dist/esm/components/tag/Tag.styled.js.map +1 -1
- package/dist/esm/components/tag/model.d.ts +0 -11
- package/dist/esm/components/tag/model.js.map +1 -1
- package/dist/esm/editor/extensions/buildExtensions.d.ts +1 -1
- package/dist/esm/editor/extensions/buildExtensions.js +43 -49
- package/dist/esm/editor/extensions/buildExtensions.js.map +1 -1
- package/dist/esm/icons/BIK AI specific/WandSparkles.js +1 -1
- package/dist/esm/icons/BIK AI specific/WandSparkles.js.map +1 -1
- package/package.json +1 -2
- package/dist/cjs/editor/extensions/emailLayout/EmailLayoutExtensions.js +0 -2
- package/dist/cjs/editor/extensions/emailLayout/EmailLayoutExtensions.js.map +0 -1
- package/dist/esm/editor/extensions/emailLayout/EmailLayoutExtensions.d.ts +0 -19
- package/dist/esm/editor/extensions/emailLayout/EmailLayoutExtensions.js +0 -110
- package/dist/esm/editor/extensions/emailLayout/EmailLayoutExtensions.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../constants/tools.js"),d=(e,t="Manifest")=>!e||e===i.ToolSource.Manifest?t:i.TOOL_SOURCE_LABELS[e]??e,
|
|
2
|
-
`;case"orderedList":case"bulletList":{const n=e.type==="orderedList";return(e.content??[]).map((o
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../constants/tools.js"),d=(e,t="Manifest")=>!e||e===i.ToolSource.Manifest?t:i.TOOL_SOURCE_LABELS[e]??e,f=e=>{const t=e?String(e):"";return t==="BIK"?"BIK":t==="BSP"?"BSP":"Manifest"},L=(e,t,n="Manifest")=>[...e.map(a=>({id:a.tool_id,label:`${d(a.source,n)} : ${a.display_name}`,meta:{kind:"tool",plainLabel:a.display_name,source:a.source,authRequired:a.auth_required}})),...t.map(a=>({id:a.id,label:`sub-agent: ${a.name}`,meta:{kind:"subagent",plainLabel:a.name}}))],p=e=>e.replace(/^\{\{|\}\}$/g,""),$=(e=[])=>{const t=[],n=a=>{const o=a.actualValue;if(o){const l=p(o);t.push({id:l,label:`{{${l}}}`,meta:{kind:"variable",plainLabel:a.displayName}})}Object.values(a.variables??{}).forEach(n)};return e.forEach(n),t},b=e=>{if(e.tool_key==="send_slack_message")return String(e.params.channelId?.value??"").trim()||"Send Slack message";if(e.tool_key==="send_email"){const t=String(e.params.name?.value??"").trim();return t||String(e.params.sendTo?.value??"").split(",").map(n=>n.trim()).filter(Boolean)[0]||"Send email"}return e.tool_key},g=e=>e.name||"Rest API",S=e=>{const t=g(e);return{id:e.id,label:`${i.TOOL_SOURCE_LABELS[i.ToolSource.RestApi]} : ${t}`,meta:{kind:"tool",plainLabel:t,source:i.ToolSource.RestApi}}},T=e=>{const t=e.tool_key==="send_slack_message"?i.ToolSource.Slack:i.ToolSource.EmailHandover,n=b(e);return{id:e.id,label:`${i.TOOL_SOURCE_LABELS[t]} : ${n}`,meta:{kind:"tool",plainLabel:n,source:t}}},_=(e=[],t=[])=>[...t.map(S),...e.map(T)],r=e=>e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),s=e=>r(e).replace(/"/g,"""),k=(e,t,n,a)=>`<span data-type="mentionAgent" class="bik-mention bik-mention--agent" data-id="${s(e)}" data-label="${s(t)}" data-kind="${s(n)}"`+(a?` data-source="${s(a)}"`:"")+`>${r(t)}</span>`,E=(e,t,n,a)=>k(e,t,n,a),O=e=>{const t=new Map;for(const n of e){const a=n.meta;a?.kind==="tool"?t.set(`tool:${String(n.id)}`,n):a?.kind==="subagent"?t.set(`subagent:${String(n.id)}`,n):a?.kind==="variable"&&t.set(`variable:${String(n.id)}`,n)}return t},c=/\{\{((?:tool|subagent|variable):[^{}]+)\}\}/g,v=(e,t)=>{let n="",a=0;c.lastIndex=0;let o;for(;(o=c.exec(e))!==null;){n+=r(e.slice(a,o.index));const l=t.get(o[1]);if(l){const m=l.meta;n+=k(String(l.id),l.label,m.kind,m.source)}else n+=r(o[0]);a=c.lastIndex}return n+=r(e.slice(a)),n.replace(/\n/g,"<br>")},I=(e,t=[])=>{if(!e)return"";const n=O(t);return e.split(/\n{2,}/).map(a=>`<p>${v(a,n)}</p>`).join("")},M=(e,t,n)=>t==="variable"?`{{variable:${e}}}`:(t??(n.has(e)?"tool":"subagent"))==="tool"?`{{tool:${e}}}`:`{{subagent:${e}}}`,u=(e,t)=>{switch(e.type){case"text":return e.text??"";case"mentionAgent":case"mentionTeam":{const n=e.attrs?.id;if(n==null)return"";const a=e.attrs?.kind;return M(String(n),a==null?null:String(a),t)}case"variable":return`{{${String(e.attrs?.variableName??"")}}}`;case"hardBreak":return`
|
|
2
|
+
`;case"orderedList":case"bulletList":{const n=e.type==="orderedList";return(e.content??[]).map((a,o)=>`${n?`${o+1}.`:"-"} ${u(a,t).replace(/\n+$/,"")}`).join(`
|
|
3
3
|
`)+`
|
|
4
|
-
`}default:{const n=(e.content??[]).map(
|
|
5
|
-
`:n}}},A=(e,t)=>{if(!e)return"";const n=new Set(t.map(
|
|
4
|
+
`}default:{const n=(e.content??[]).map(o=>u(o,t)).join("");return["paragraph","heading","listItem","blockquote"].includes(e.type)?`${n}
|
|
5
|
+
`:n}}},A=(e,t)=>{if(!e)return"";const n=new Set(t.map(a=>a.tool_id));return u(e,n).replace(/\n+$/,"")};exports.TOOL_SOURCE_LABELS=i.TOOL_SOURCE_LABELS;exports.appTypeLabel=f;exports.buildAgentMentionItems=L;exports.buildCustomToolMentionItems=_;exports.buildMentionHtml=E;exports.buildVariableMentionItems=$;exports.configToolMentionItem=T;exports.configToolName=b;exports.editorDocToInstructions=A;exports.instructionsToEditorHtml=I;exports.restApiMentionItem=S;exports.restApiToolName=g;exports.toolSourceLabel=d;exports.variableTokenName=p;
|
|
6
6
|
//# sourceMappingURL=mentionSerialization.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mentionSerialization.js","sources":["../../../../../src/components/agent-builder/utils/mentionSerialization.ts"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth';\nimport { MentionItem } from '@src/editor';\nimport type {\n\tSubHeader,\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport {\n\tAgentTool,\n\tConfigToolConfig,\n\tRestApiToolConfig,\n\tSubAgentRef,\n} from '../AgentBuilder.model';\nimport { TOOL_SOURCE_LABELS, ToolSource } from '../constants/tools';\n\n/**\n * Serialization helpers between the BikEditor document and the firebase\n * `instructions` string.\n *\n * Firebase stores `instructions` as PLAIN TEXT with inline reference tokens:\n * - `{{subagent:<agentId>}}` — hand-off to another agent\n * - `{{tool:<tool_id>}}` — an action the agent can call\n * - `{{variable:<name>}}` — a template variable picked from the catalog\n *\n * In the editor those references are inserted via the `@` mention menu (which we\n * populate with BOTH tools and sub-agents). Mention nodes keep their `id` in the\n * ProseMirror doc JSON (the rendered HTML drops it), so we serialize from the doc\n * JSON — not from HTML.\n */\n\nexport interface MentionKindMeta {\n\t/** Distinguishes a tool / sub-agent / variable reference. */\n\tkind: 'tool' | 'subagent' | 'variable';\n\t/** Plain item name (no prefix) shown in the picker dropdown rows. */\n\tplainLabel?: string;\n\t/** For tools: the source bucket (manifest / shopify / …) the picker groups by. */\n\tsource?: string;\n\t/** For tools: touches customer-private data → shows a shield in the picker. */\n\tauthRequired?: boolean;\n}\n\n// Source labels moved to constants/tools.ts; re-exported for existing importers.\nexport { TOOL_SOURCE_LABELS };\n\n/**\n * Human label for a tool source. The native tools are named after whichever host\n * product the merchant is in — \"Manifest\" in Manifest, \"BIK\" in BIK — so both an\n * explicit `manifest` source and a missing one resolve to `appLabel`. Every other\n * source is a vendor name, then the raw key.\n */\nexport const toolSourceLabel = (\n\tsource: string | undefined,\n\tappLabel = 'Manifest',\n): string => {\n\tif (!source || source === ToolSource.Manifest) {\n\t\treturn appLabel;\n\t}\n\treturn TOOL_SOURCE_LABELS[source as ToolSource] ?? source;\n};\n\n/** Human label for the host application, used as the tool-chip prefix. */\nexport const appTypeLabel = (applicationType?: ApplicationType): string => {\n\tconst key = applicationType ? String(applicationType) : '';\n\tif (key === 'BIK') {\n\t\treturn 'BIK';\n\t}\n\tif (key === 'BSP') {\n\t\treturn 'BSP';\n\t}\n\treturn 'Manifest';\n};\n\n/**\n * Build the combined `@` mention list from the available tools + sub-agents.\n *\n * The `label` is the CHIP text shown once inserted — tools read\n * `\"<App> : <tool name>\"` (e.g. \"Manifest : Look up order\"), sub-agents read\n * `\"sub-agent: <name>\"`. `meta.plainLabel` is the un-prefixed name for the\n * picker rows, and `meta.kind` drives the `{{tool}}` / `{{subagent}}` colour.\n */\nexport const buildAgentMentionItems = (\n\ttools: AgentTool[],\n\tsubAgents: SubAgentRef[],\n\tappLabel = 'Manifest',\n): MentionItem[] => [\n\t...tools.map(\n\t\t(t): MentionItem => ({\n\t\t\tid: t.tool_id,\n\t\t\tlabel: `${toolSourceLabel(t.source, appLabel)} : ${t.display_name}`,\n\t\t\tmeta: {\n\t\t\t\tkind: 'tool',\n\t\t\t\tplainLabel: t.display_name,\n\t\t\t\tsource: t.source,\n\t\t\t\tauthRequired: t.auth_required,\n\t\t\t},\n\t\t}),\n\t),\n\t...subAgents.map(\n\t\t(s): MentionItem => ({\n\t\t\tid: s.id,\n\t\t\tlabel: `sub-agent: ${s.name}`,\n\t\t\tmeta: { kind: 'subagent', plainLabel: s.name },\n\t\t}),\n\t),\n];\n\n/** Strip the `{{ }}` wrapper from a variable token (`{{a.b}}` → `a.b`). */\nexport const variableTokenName = (actualValue: string): string =>\n\tactualValue.replace(/^\\{\\{|\\}\\}$/g, '');\n\n/**\n * Flatten the (nested) variable catalog into mention items, so stored\n * `{{<name>}}` tokens rehydrate as `Variable: <display name>` chips. The item\n * id is the BARE token name (no braces) — `resolveMentionToken` re-wraps it on\n * save. Merge alongside {@link buildAgentMentionItems} for serialization.\n */\nexport const buildVariableMentionItems = (\n\tvariablesData: VariableListInterfaceV3[] = [],\n): MentionItem[] => {\n\tconst items: MentionItem[] = [];\n\tconst walk = (entry: VariableListInterfaceV3 | SubHeader | VariableV3) => {\n\t\tconst actual = (entry as VariableV3).actualValue;\n\t\tif (actual) {\n\t\t\tconst name = variableTokenName(actual);\n\t\t\titems.push({\n\t\t\t\tid: name,\n\t\t\t\t// Chip text is the raw token — designers want variables to read as\n\t\t\t\t// {{a.b.c}} (styled purple by the editor), not a labelled chip.\n\t\t\t\tlabel: `{{${name}}}`,\n\t\t\t\tmeta: { kind: 'variable', plainLabel: entry.displayName },\n\t\t\t});\n\t\t}\n\t\tObject.values(entry.variables ?? {}).forEach(walk);\n\t};\n\tvariablesData.forEach(walk);\n\treturn items;\n};\n\n/** Display name for a shared config tool: first recipient / channel, else generic. */\nexport const configToolName = (t: ConfigToolConfig): string => {\n\tif (t.tool_key === 'send_slack_message') {\n\t\treturn (\n\t\t\tString(t.params['channelId']?.value ?? '').trim() || 'Send Slack message'\n\t\t);\n\t}\n\treturn (\n\t\tString(t.params['sendTo']?.value ?? '')\n\t\t\t.split(',')\n\t\t\t.map((s) => s.trim())\n\t\t\t.filter(Boolean)[0] || 'Send email'\n\t);\n};\n\n/** Display name for a Rest API tool row / chip. */\nexport const restApiToolName = (t: RestApiToolConfig): string =>\n\tt.name || 'Rest API';\n\n/** The `@`-mention chip item for a Rest API tool (kind 'tool', restapi source). */\nexport const restApiMentionItem = (t: RestApiToolConfig): MentionItem => {\n\tconst name = restApiToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[ToolSource.RestApi]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source: ToolSource.RestApi },\n\t};\n};\n\n/** The `@`-mention chip item for a shared config tool (email / Slack). */\nexport const configToolMentionItem = (t: ConfigToolConfig): MentionItem => {\n\tconst source =\n\t\tt.tool_key === 'send_slack_message'\n\t\t\t? ToolSource.Slack\n\t\t\t: ToolSource.EmailHandover;\n\tconst name = configToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[source]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source },\n\t};\n};\n\n/**\n * Mention items for the inline-configured custom tools (Rest API + email / Slack)\n * so their `{{tool:<id>}}` tokens rehydrate as chips — they live on the agent\n * value, not in the catalog `availableTools`. Merge alongside\n * {@link buildAgentMentionItems} in the editor's mention list.\n */\nexport const buildCustomToolMentionItems = (\n\tconfigTools: ConfigToolConfig[] = [],\n\trestApiTools: RestApiToolConfig[] = [],\n): MentionItem[] => [\n\t...restApiTools.map(restApiMentionItem),\n\t...configTools.map(configToolMentionItem),\n];\n\nconst escapeHtml = (raw: string): string =>\n\traw.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\nconst escapeAttr = (raw: string): string =>\n\tescapeHtml(raw).replace(/\"/g, '"');\n\n/**\n * The HTML for a single mention chip. Must round-trip through the TipTap mention\n * extension's `parseHTML` (`span[data-type=\"mentionAgent\"]`, reading\n * `data-id`/`data-label`/`data-kind`) — see MentionExtension.ts. `normalizeHtml`\n * is taught to keep `data-type=\"mention…\"` spans so this survives to the parser.\n */\nconst mentionSpanHtml = (\n\tid: string,\n\tlabel: string,\n\tkind: string,\n\tsource?: string,\n): string =>\n\t`<span data-type=\"mentionAgent\" class=\"bik-mention bik-mention--agent\"` +\n\t` data-id=\"${escapeAttr(id)}\" data-label=\"${escapeAttr(label)}\"` +\n\t` data-kind=\"${escapeAttr(kind)}\"` +\n\t(source ? ` data-source=\"${escapeAttr(source)}\"` : '') +\n\t`>${escapeHtml(label)}</span>`;\n\n/**\n * Public: HTML for one mention chip, for inserting at the cursor (e.g. when a\n * tool / sub-agent is added from the Step-3 side panel). Round-trips through the\n * same parser path as the rehydrated chips. `source` (tool source bucket) drives\n * the chip's leading icon.\n */\nexport const buildMentionHtml = (\n\tid: string,\n\tlabel: string,\n\tkind: 'tool' | 'subagent' | 'variable',\n\tsource?: string,\n): string => mentionSpanHtml(id, label, kind, source);\n\n/**\n * `{{tool:<id>}}` / `{{subagent:<id>}}` / `{{<variableName>}}` → the mention\n * item that produced them. The map key is the token's INNER text.\n */\nconst buildTokenLookup = (\n\tmentionItems: MentionItem[],\n): Map<string, MentionItem> => {\n\tconst byToken = new Map<string, MentionItem>();\n\tfor (const item of mentionItems) {\n\t\tconst meta = item.meta as unknown as MentionKindMeta | undefined;\n\t\t// Everything is keyed by its kind-prefixed id (a tool's id is its tool_id).\n\t\tif (meta?.kind === 'tool') {\n\t\t\tbyToken.set(`tool:${String(item.id)}`, item);\n\t\t} else if (meta?.kind === 'subagent') {\n\t\t\tbyToken.set(`subagent:${String(item.id)}`, item);\n\t\t} else if (meta?.kind === 'variable') {\n\t\t\tbyToken.set(`variable:${String(item.id)}`, item);\n\t\t}\n\t}\n\treturn byToken;\n};\n\n// Matches the kind-prefixed reference tokens we render as chips. Other\n// `{{var}}` tokens fall through untouched (left as literal text for the\n// variable decoration).\nconst REFERENCE_TOKEN = /\\{\\{((?:tool|subagent|variable):[^{}]+)\\}\\}/g;\n\n/** Escape plain text, swapping recognised reference tokens for mention spans. */\nconst inlineToHtml = (\n\tsegment: string,\n\tbyToken: Map<string, MentionItem>,\n): string => {\n\tlet out = '';\n\tlet lastIndex = 0;\n\tREFERENCE_TOKEN.lastIndex = 0;\n\tlet match: RegExpExecArray | null;\n\twhile ((match = REFERENCE_TOKEN.exec(segment)) !== null) {\n\t\tout += escapeHtml(segment.slice(lastIndex, match.index));\n\t\tconst item = byToken.get(match[1]);\n\t\tif (item) {\n\t\t\tconst meta = item.meta as unknown as MentionKindMeta;\n\t\t\tout += mentionSpanHtml(\n\t\t\t\tString(item.id),\n\t\t\t\titem.label,\n\t\t\t\tmeta.kind,\n\t\t\t\tmeta.source,\n\t\t\t);\n\t\t} else {\n\t\t\t// Not in any available list (removed tool / unknown variable) → keep the\n\t\t\t// raw token as literal text.\n\t\t\tout += escapeHtml(match[0]);\n\t\t}\n\t\tlastIndex = REFERENCE_TOKEN.lastIndex;\n\t}\n\tout += escapeHtml(segment.slice(lastIndex));\n\treturn out.replace(/\\n/g, '<br>');\n};\n\n/**\n * Convert the stored instructions string into HTML for `BikEditor.initialContent`.\n * `{{tool:KEY}}` / `{{subagent:ID}}` tokens are rehydrated into mention chips\n * (resolved via `mentionItems`); any other `{{…}}` token is left as literal text\n * for the editor's variable decoration. Newlines become paragraph / line breaks.\n */\nexport const instructionsToEditorHtml = (\n\ttext: string,\n\tmentionItems: MentionItem[] = [],\n): string => {\n\tif (!text) {\n\t\treturn '';\n\t}\n\tconst byToken = buildTokenLookup(mentionItems);\n\treturn text\n\t\t.split(/\\n{2,}/)\n\t\t.map((para) => `<p>${inlineToHtml(para, byToken)}</p>`)\n\t\t.join('');\n};\n\ninterface ProseMirrorNode {\n\ttype: string;\n\ttext?: string;\n\tattrs?: Record<string, unknown>;\n\tcontent?: ProseMirrorNode[];\n}\n\n/**\n * The token for a mention node. All kinds store their id in the node, so the\n * token value is just that id — the kind only picks the prefix. The node's\n * `kind` attr is authoritative; `toolIds` is a fallback for older content\n * saved before the kind attr existed.\n */\nconst resolveMentionToken = (\n\tid: string,\n\tkind: string | null,\n\ttoolIds: Set<string>,\n): string => {\n\tif (kind === 'variable') {\n\t\treturn `{{variable:${id}}}`;\n\t}\n\tconst resolved = kind ?? (toolIds.has(id) ? 'tool' : 'subagent');\n\treturn resolved === 'tool' ? `{{tool:${id}}}` : `{{subagent:${id}}}`;\n};\n\nconst nodeToText = (node: ProseMirrorNode, toolIds: Set<string>): string => {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn node.text ?? '';\n\t\tcase 'mentionAgent':\n\t\tcase 'mentionTeam': {\n\t\t\tconst id = node.attrs?.['id'];\n\t\t\tif (id == null) {\n\t\t\t\treturn '';\n\t\t\t}\n\t\t\tconst kind = node.attrs?.['kind'];\n\t\t\treturn resolveMentionToken(\n\t\t\t\tString(id),\n\t\t\t\tkind == null ? null : String(kind),\n\t\t\t\ttoolIds,\n\t\t\t);\n\t\t}\n\t\tcase 'variable':\n\t\t\treturn `{{${String(node.attrs?.['variableName'] ?? '')}}}`;\n\t\tcase 'hardBreak':\n\t\t\treturn '\\n';\n\t\tcase 'orderedList':\n\t\tcase 'bulletList': {\n\t\t\t// Flattening to plain text otherwise drops the list markers, so a\n\t\t\t// numbered / bulleted list looks \"removed\" after publish. Emit an\n\t\t\t// ordinal (\"1. \") / bullet (\"- \") prefix per item to preserve it.\n\t\t\tconst ordered = node.type === 'orderedList';\n\t\t\treturn (\n\t\t\t\t(node.content ?? [])\n\t\t\t\t\t.map(\n\t\t\t\t\t\t(item, i) =>\n\t\t\t\t\t\t\t`${ordered ? `${i + 1}.` : '-'} ${nodeToText(\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\ttoolIds,\n\t\t\t\t\t\t\t).replace(/\\n+$/, '')}`,\n\t\t\t\t\t)\n\t\t\t\t\t.join('\\n') + '\\n'\n\t\t\t);\n\t\t}\n\t\tdefault: {\n\t\t\tconst inner = (node.content ?? [])\n\t\t\t\t.map((child) => nodeToText(child, toolIds))\n\t\t\t\t.join('');\n\t\t\t// Block nodes terminate with a newline so paragraphs stay separated.\n\t\t\tconst BLOCK_NODES = ['paragraph', 'heading', 'listItem', 'blockquote'];\n\t\t\treturn BLOCK_NODES.includes(node.type) ? `${inner}\\n` : inner;\n\t\t}\n\t}\n};\n\n/**\n * Convert a BikEditor document (from `ref.getJSON()`) into the firebase\n * instructions string, replacing mention nodes with `{{subagent:<id>}}` /\n * `{{tool:<tool_id>}}` tokens.\n */\nexport const editorDocToInstructions = (\n\tdoc: Record<string, unknown> | null,\n\ttools: AgentTool[],\n): string => {\n\tif (!doc) {\n\t\treturn '';\n\t}\n\tconst toolIds = new Set(tools.map((t) => t.tool_id));\n\treturn nodeToText(doc as unknown as ProseMirrorNode, toolIds).replace(\n\t\t/\\n+$/,\n\t\t'',\n\t);\n};\n"],"names":["toolSourceLabel","source","appLabel","ToolSource","TOOL_SOURCE_LABELS","appTypeLabel","applicationType","key","buildAgentMentionItems","tools","subAgents","t","s","variableTokenName","actualValue","buildVariableMentionItems","variablesData","items","walk","entry","actual","name","configToolName","restApiToolName","restApiMentionItem","configToolMentionItem","buildCustomToolMentionItems","configTools","restApiTools","escapeHtml","raw","escapeAttr","mentionSpanHtml","id","label","kind","buildMentionHtml","buildTokenLookup","mentionItems","byToken","item","meta","REFERENCE_TOKEN","inlineToHtml","segment","out","lastIndex","match","instructionsToEditorHtml","text","para","resolveMentionToken","toolIds","nodeToText","node","ordered","i","inner","child","editorDocToInstructions","doc"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"mentionSerialization.js","sources":["../../../../../src/components/agent-builder/utils/mentionSerialization.ts"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth';\nimport { MentionItem } from '@src/editor';\nimport type {\n\tSubHeader,\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport {\n\tAgentTool,\n\tConfigToolConfig,\n\tRestApiToolConfig,\n\tSubAgentRef,\n} from '../AgentBuilder.model';\nimport { TOOL_SOURCE_LABELS, ToolSource } from '../constants/tools';\n\n/**\n * Serialization helpers between the BikEditor document and the firebase\n * `instructions` string.\n *\n * Firebase stores `instructions` as PLAIN TEXT with inline reference tokens:\n * - `{{subagent:<agentId>}}` — hand-off to another agent\n * - `{{tool:<tool_id>}}` — an action the agent can call\n * - `{{variable:<name>}}` — a template variable picked from the catalog\n *\n * In the editor those references are inserted via the `@` mention menu (which we\n * populate with BOTH tools and sub-agents). Mention nodes keep their `id` in the\n * ProseMirror doc JSON (the rendered HTML drops it), so we serialize from the doc\n * JSON — not from HTML.\n */\n\nexport interface MentionKindMeta {\n\t/** Distinguishes a tool / sub-agent / variable reference. */\n\tkind: 'tool' | 'subagent' | 'variable';\n\t/** Plain item name (no prefix) shown in the picker dropdown rows. */\n\tplainLabel?: string;\n\t/** For tools: the source bucket (manifest / shopify / …) the picker groups by. */\n\tsource?: string;\n\t/** For tools: touches customer-private data → shows a shield in the picker. */\n\tauthRequired?: boolean;\n}\n\n// Source labels moved to constants/tools.ts; re-exported for existing importers.\nexport { TOOL_SOURCE_LABELS };\n\n/**\n * Human label for a tool source. The native tools are named after whichever host\n * product the merchant is in — \"Manifest\" in Manifest, \"BIK\" in BIK — so both an\n * explicit `manifest` source and a missing one resolve to `appLabel`. Every other\n * source is a vendor name, then the raw key.\n */\nexport const toolSourceLabel = (\n\tsource: string | undefined,\n\tappLabel = 'Manifest',\n): string => {\n\tif (!source || source === ToolSource.Manifest) {\n\t\treturn appLabel;\n\t}\n\treturn TOOL_SOURCE_LABELS[source as ToolSource] ?? source;\n};\n\n/** Human label for the host application, used as the tool-chip prefix. */\nexport const appTypeLabel = (applicationType?: ApplicationType): string => {\n\tconst key = applicationType ? String(applicationType) : '';\n\tif (key === 'BIK') {\n\t\treturn 'BIK';\n\t}\n\tif (key === 'BSP') {\n\t\treturn 'BSP';\n\t}\n\treturn 'Manifest';\n};\n\n/**\n * Build the combined `@` mention list from the available tools + sub-agents.\n *\n * The `label` is the CHIP text shown once inserted — tools read\n * `\"<App> : <tool name>\"` (e.g. \"Manifest : Look up order\"), sub-agents read\n * `\"sub-agent: <name>\"`. `meta.plainLabel` is the un-prefixed name for the\n * picker rows, and `meta.kind` drives the `{{tool}}` / `{{subagent}}` colour.\n */\nexport const buildAgentMentionItems = (\n\ttools: AgentTool[],\n\tsubAgents: SubAgentRef[],\n\tappLabel = 'Manifest',\n): MentionItem[] => [\n\t...tools.map(\n\t\t(t): MentionItem => ({\n\t\t\tid: t.tool_id,\n\t\t\tlabel: `${toolSourceLabel(t.source, appLabel)} : ${t.display_name}`,\n\t\t\tmeta: {\n\t\t\t\tkind: 'tool',\n\t\t\t\tplainLabel: t.display_name,\n\t\t\t\tsource: t.source,\n\t\t\t\tauthRequired: t.auth_required,\n\t\t\t},\n\t\t}),\n\t),\n\t...subAgents.map(\n\t\t(s): MentionItem => ({\n\t\t\tid: s.id,\n\t\t\tlabel: `sub-agent: ${s.name}`,\n\t\t\tmeta: { kind: 'subagent', plainLabel: s.name },\n\t\t}),\n\t),\n];\n\n/** Strip the `{{ }}` wrapper from a variable token (`{{a.b}}` → `a.b`). */\nexport const variableTokenName = (actualValue: string): string =>\n\tactualValue.replace(/^\\{\\{|\\}\\}$/g, '');\n\n/**\n * Flatten the (nested) variable catalog into mention items, so stored\n * `{{<name>}}` tokens rehydrate as `Variable: <display name>` chips. The item\n * id is the BARE token name (no braces) — `resolveMentionToken` re-wraps it on\n * save. Merge alongside {@link buildAgentMentionItems} for serialization.\n */\nexport const buildVariableMentionItems = (\n\tvariablesData: VariableListInterfaceV3[] = [],\n): MentionItem[] => {\n\tconst items: MentionItem[] = [];\n\tconst walk = (entry: VariableListInterfaceV3 | SubHeader | VariableV3) => {\n\t\tconst actual = (entry as VariableV3).actualValue;\n\t\tif (actual) {\n\t\t\tconst name = variableTokenName(actual);\n\t\t\titems.push({\n\t\t\t\tid: name,\n\t\t\t\t// Chip text is the raw token — designers want variables to read as\n\t\t\t\t// {{a.b.c}} (styled purple by the editor), not a labelled chip.\n\t\t\t\tlabel: `{{${name}}}`,\n\t\t\t\tmeta: { kind: 'variable', plainLabel: entry.displayName },\n\t\t\t});\n\t\t}\n\t\tObject.values(entry.variables ?? {}).forEach(walk);\n\t};\n\tvariablesData.forEach(walk);\n\treturn items;\n};\n\n/** Display name for a shared config tool: the merchant's action name when set\n * (MAP-7245), else first recipient / channel (pre-action-name tools), else\n * generic. */\nexport const configToolName = (t: ConfigToolConfig): string => {\n\tif (t.tool_key === 'send_slack_message') {\n\t\treturn (\n\t\t\tString(t.params['channelId']?.value ?? '').trim() || 'Send Slack message'\n\t\t);\n\t}\n\tif (t.tool_key === 'send_email') {\n\t\tconst actionName = String(t.params['name']?.value ?? '').trim();\n\t\tif (actionName) {\n\t\t\treturn actionName;\n\t\t}\n\t\treturn (\n\t\t\tString(t.params['sendTo']?.value ?? '')\n\t\t\t\t.split(',')\n\t\t\t\t.map((s) => s.trim())\n\t\t\t\t.filter(Boolean)[0] || 'Send email'\n\t\t);\n\t}\n\t// Future config-tool keys: no bespoke naming yet — fall back to the key.\n\treturn t.tool_key;\n};\n\n/** Display name for a Rest API tool row / chip. */\nexport const restApiToolName = (t: RestApiToolConfig): string =>\n\tt.name || 'Rest API';\n\n/** The `@`-mention chip item for a Rest API tool (kind 'tool', restapi source). */\nexport const restApiMentionItem = (t: RestApiToolConfig): MentionItem => {\n\tconst name = restApiToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[ToolSource.RestApi]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source: ToolSource.RestApi },\n\t};\n};\n\n/** The `@`-mention chip item for a shared config tool (email / Slack). */\nexport const configToolMentionItem = (t: ConfigToolConfig): MentionItem => {\n\tconst source =\n\t\tt.tool_key === 'send_slack_message'\n\t\t\t? ToolSource.Slack\n\t\t\t: ToolSource.EmailHandover;\n\tconst name = configToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[source]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source },\n\t};\n};\n\n/**\n * Mention items for the inline-configured custom tools (Rest API + email / Slack)\n * so their `{{tool:<id>}}` tokens rehydrate as chips — they live on the agent\n * value, not in the catalog `availableTools`. Merge alongside\n * {@link buildAgentMentionItems} in the editor's mention list.\n */\nexport const buildCustomToolMentionItems = (\n\tconfigTools: ConfigToolConfig[] = [],\n\trestApiTools: RestApiToolConfig[] = [],\n): MentionItem[] => [\n\t...restApiTools.map(restApiMentionItem),\n\t...configTools.map(configToolMentionItem),\n];\n\nconst escapeHtml = (raw: string): string =>\n\traw.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\nconst escapeAttr = (raw: string): string =>\n\tescapeHtml(raw).replace(/\"/g, '"');\n\n/**\n * The HTML for a single mention chip. Must round-trip through the TipTap mention\n * extension's `parseHTML` (`span[data-type=\"mentionAgent\"]`, reading\n * `data-id`/`data-label`/`data-kind`) — see MentionExtension.ts. `normalizeHtml`\n * is taught to keep `data-type=\"mention…\"` spans so this survives to the parser.\n */\nconst mentionSpanHtml = (\n\tid: string,\n\tlabel: string,\n\tkind: string,\n\tsource?: string,\n): string =>\n\t`<span data-type=\"mentionAgent\" class=\"bik-mention bik-mention--agent\"` +\n\t` data-id=\"${escapeAttr(id)}\" data-label=\"${escapeAttr(label)}\"` +\n\t` data-kind=\"${escapeAttr(kind)}\"` +\n\t(source ? ` data-source=\"${escapeAttr(source)}\"` : '') +\n\t`>${escapeHtml(label)}</span>`;\n\n/**\n * Public: HTML for one mention chip, for inserting at the cursor (e.g. when a\n * tool / sub-agent is added from the Step-3 side panel). Round-trips through the\n * same parser path as the rehydrated chips. `source` (tool source bucket) drives\n * the chip's leading icon.\n */\nexport const buildMentionHtml = (\n\tid: string,\n\tlabel: string,\n\tkind: 'tool' | 'subagent' | 'variable',\n\tsource?: string,\n): string => mentionSpanHtml(id, label, kind, source);\n\n/**\n * `{{tool:<id>}}` / `{{subagent:<id>}}` / `{{<variableName>}}` → the mention\n * item that produced them. The map key is the token's INNER text.\n */\nconst buildTokenLookup = (\n\tmentionItems: MentionItem[],\n): Map<string, MentionItem> => {\n\tconst byToken = new Map<string, MentionItem>();\n\tfor (const item of mentionItems) {\n\t\tconst meta = item.meta as unknown as MentionKindMeta | undefined;\n\t\t// Everything is keyed by its kind-prefixed id (a tool's id is its tool_id).\n\t\tif (meta?.kind === 'tool') {\n\t\t\tbyToken.set(`tool:${String(item.id)}`, item);\n\t\t} else if (meta?.kind === 'subagent') {\n\t\t\tbyToken.set(`subagent:${String(item.id)}`, item);\n\t\t} else if (meta?.kind === 'variable') {\n\t\t\tbyToken.set(`variable:${String(item.id)}`, item);\n\t\t}\n\t}\n\treturn byToken;\n};\n\n// Matches the kind-prefixed reference tokens we render as chips. Other\n// `{{var}}` tokens fall through untouched (left as literal text for the\n// variable decoration).\nconst REFERENCE_TOKEN = /\\{\\{((?:tool|subagent|variable):[^{}]+)\\}\\}/g;\n\n/** Escape plain text, swapping recognised reference tokens for mention spans. */\nconst inlineToHtml = (\n\tsegment: string,\n\tbyToken: Map<string, MentionItem>,\n): string => {\n\tlet out = '';\n\tlet lastIndex = 0;\n\tREFERENCE_TOKEN.lastIndex = 0;\n\tlet match: RegExpExecArray | null;\n\twhile ((match = REFERENCE_TOKEN.exec(segment)) !== null) {\n\t\tout += escapeHtml(segment.slice(lastIndex, match.index));\n\t\tconst item = byToken.get(match[1]);\n\t\tif (item) {\n\t\t\tconst meta = item.meta as unknown as MentionKindMeta;\n\t\t\tout += mentionSpanHtml(\n\t\t\t\tString(item.id),\n\t\t\t\titem.label,\n\t\t\t\tmeta.kind,\n\t\t\t\tmeta.source,\n\t\t\t);\n\t\t} else {\n\t\t\t// Not in any available list (removed tool / unknown variable) → keep the\n\t\t\t// raw token as literal text.\n\t\t\tout += escapeHtml(match[0]);\n\t\t}\n\t\tlastIndex = REFERENCE_TOKEN.lastIndex;\n\t}\n\tout += escapeHtml(segment.slice(lastIndex));\n\treturn out.replace(/\\n/g, '<br>');\n};\n\n/**\n * Convert the stored instructions string into HTML for `BikEditor.initialContent`.\n * `{{tool:KEY}}` / `{{subagent:ID}}` tokens are rehydrated into mention chips\n * (resolved via `mentionItems`); any other `{{…}}` token is left as literal text\n * for the editor's variable decoration. Newlines become paragraph / line breaks.\n */\nexport const instructionsToEditorHtml = (\n\ttext: string,\n\tmentionItems: MentionItem[] = [],\n): string => {\n\tif (!text) {\n\t\treturn '';\n\t}\n\tconst byToken = buildTokenLookup(mentionItems);\n\treturn text\n\t\t.split(/\\n{2,}/)\n\t\t.map((para) => `<p>${inlineToHtml(para, byToken)}</p>`)\n\t\t.join('');\n};\n\ninterface ProseMirrorNode {\n\ttype: string;\n\ttext?: string;\n\tattrs?: Record<string, unknown>;\n\tcontent?: ProseMirrorNode[];\n}\n\n/**\n * The token for a mention node. All kinds store their id in the node, so the\n * token value is just that id — the kind only picks the prefix. The node's\n * `kind` attr is authoritative; `toolIds` is a fallback for older content\n * saved before the kind attr existed.\n */\nconst resolveMentionToken = (\n\tid: string,\n\tkind: string | null,\n\ttoolIds: Set<string>,\n): string => {\n\tif (kind === 'variable') {\n\t\treturn `{{variable:${id}}}`;\n\t}\n\tconst resolved = kind ?? (toolIds.has(id) ? 'tool' : 'subagent');\n\treturn resolved === 'tool' ? `{{tool:${id}}}` : `{{subagent:${id}}}`;\n};\n\nconst nodeToText = (node: ProseMirrorNode, toolIds: Set<string>): string => {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn node.text ?? '';\n\t\tcase 'mentionAgent':\n\t\tcase 'mentionTeam': {\n\t\t\tconst id = node.attrs?.['id'];\n\t\t\tif (id == null) {\n\t\t\t\treturn '';\n\t\t\t}\n\t\t\tconst kind = node.attrs?.['kind'];\n\t\t\treturn resolveMentionToken(\n\t\t\t\tString(id),\n\t\t\t\tkind == null ? null : String(kind),\n\t\t\t\ttoolIds,\n\t\t\t);\n\t\t}\n\t\tcase 'variable':\n\t\t\treturn `{{${String(node.attrs?.['variableName'] ?? '')}}}`;\n\t\tcase 'hardBreak':\n\t\t\treturn '\\n';\n\t\tcase 'orderedList':\n\t\tcase 'bulletList': {\n\t\t\t// Flattening to plain text otherwise drops the list markers, so a\n\t\t\t// numbered / bulleted list looks \"removed\" after publish. Emit an\n\t\t\t// ordinal (\"1. \") / bullet (\"- \") prefix per item to preserve it.\n\t\t\tconst ordered = node.type === 'orderedList';\n\t\t\treturn (\n\t\t\t\t(node.content ?? [])\n\t\t\t\t\t.map(\n\t\t\t\t\t\t(item, i) =>\n\t\t\t\t\t\t\t`${ordered ? `${i + 1}.` : '-'} ${nodeToText(\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\ttoolIds,\n\t\t\t\t\t\t\t).replace(/\\n+$/, '')}`,\n\t\t\t\t\t)\n\t\t\t\t\t.join('\\n') + '\\n'\n\t\t\t);\n\t\t}\n\t\tdefault: {\n\t\t\tconst inner = (node.content ?? [])\n\t\t\t\t.map((child) => nodeToText(child, toolIds))\n\t\t\t\t.join('');\n\t\t\t// Block nodes terminate with a newline so paragraphs stay separated.\n\t\t\tconst BLOCK_NODES = ['paragraph', 'heading', 'listItem', 'blockquote'];\n\t\t\treturn BLOCK_NODES.includes(node.type) ? `${inner}\\n` : inner;\n\t\t}\n\t}\n};\n\n/**\n * Convert a BikEditor document (from `ref.getJSON()`) into the firebase\n * instructions string, replacing mention nodes with `{{subagent:<id>}}` /\n * `{{tool:<tool_id>}}` tokens.\n */\nexport const editorDocToInstructions = (\n\tdoc: Record<string, unknown> | null,\n\ttools: AgentTool[],\n): string => {\n\tif (!doc) {\n\t\treturn '';\n\t}\n\tconst toolIds = new Set(tools.map((t) => t.tool_id));\n\treturn nodeToText(doc as unknown as ProseMirrorNode, toolIds).replace(\n\t\t/\\n+$/,\n\t\t'',\n\t);\n};\n"],"names":["toolSourceLabel","source","appLabel","ToolSource","TOOL_SOURCE_LABELS","appTypeLabel","applicationType","key","buildAgentMentionItems","tools","subAgents","t","s","variableTokenName","actualValue","buildVariableMentionItems","variablesData","items","walk","entry","actual","name","configToolName","actionName","restApiToolName","restApiMentionItem","configToolMentionItem","buildCustomToolMentionItems","configTools","restApiTools","escapeHtml","raw","escapeAttr","mentionSpanHtml","id","label","kind","buildMentionHtml","buildTokenLookup","mentionItems","byToken","item","meta","REFERENCE_TOKEN","inlineToHtml","segment","out","lastIndex","match","instructionsToEditorHtml","text","para","resolveMentionToken","toolIds","nodeToText","node","ordered","i","inner","child","editorDocToInstructions","doc"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),y=require("./Button.styled.js"),i=require("./themes.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),y=require("./Button.styled.js"),i=require("./themes.js"),G=require("../spinner/Spinner.js"),M=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=M(u),S=u.forwardRef(({version:e,id:v,buttonType:n="primary",size:s="small",buttonText:m,disabled:a,IconComponent:x,LeadingIcon:h,TrailingIcon:j,isLoading:l,inverse:c,onClick:q,matchParentWidth:C,subtitle:E,darkMode:f,activated:R,error:_,buttonTextColor:g,buttonFontSize:k,customIconColor:r,buttonColor:w,LeadingIconStyles:D,...p},P)=>{const F=i.GetButtonTextComponent(s,n,a),B=i.getButtonIconColor(s,n,c,a,l,f),o=u.useCallback(()=>{const N=s==="chip"||s==="xs"?16:20;return{height:N,width:N,color:r||B,style:{display:"block"},className:"icon"}},[s,r,B]);return t.jsx(y.Button,{"data-test":p["data-test"],version:e,onClick:l?()=>{}:q,ref:P,id:v,disabled:a,size:s,buttonType:n,isLoading:l,inverse:c,matchParentWidth:C,darkMode:f,activated:R,error:_,buttonColor:w,...p,children:t.jsxs("div",{className:"button-container",children:[n.startsWith("dash")&&t.jsx(y.ButtonCustomDashedBorder,{}),t.jsx("div",{className:"overlay-container",children:l&&t.jsx(G.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(n,c)})}),x&&t.jsx("div",{className:"icon-component",children:d.default.createElement(x,o())}),h&&t.jsx("div",{className:"icon-leading",style:{zIndex:1,...D},children:d.default.createElement(h,o())}),m?t.jsxs(F,{className:"text",style:{color:g,fontSize:k},children:[m,t.jsx("div",{className:"text-subtitle",children:E})]}):t.jsx(t.Fragment,{}),j&&t.jsx("div",{className:"icon-trailing",style:{zIndex:1},children:d.default.createElement(j,o())})]})})});S.displayName="Button";exports.Button=S;
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' || size === 'xs' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":"mSAWaA,EAASC,EAAAA,WACrB,CACC,CACC,QAAAC,EACA,GAAAC,EACA,WAAAC,EAAa,UACb,KAAAC,EAAO,QACP,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,uBACzBtB,EACAD,EACAG,CAAA,EAGKqB,EAAYC,EAAAA,mBACjBxB,EACAD,EACAQ,EACAL,EACAI,EACAK,CAAA,EAGKc,EAAeC,EAAAA,YAAY,IAAM,CACtC,MAAMC,EAAW3B,IAAS,QAAUA,IAAS,KAAO,GAAK,GACzD,MAAO,CACN,OAAQ2B,EACR,MAAOA,EACP,MAAOX,GAAoCO,EAC3C,MAAO,CAAE,QAAS,OAAA,EAClB,UAAW,MAAA,CAEb,EAAG,CAACvB,EAAMgB,EAAiBO,CAAS,CAAC,EAErC,OACCK,EAAAA,IAACC,EAAAA,OAAA,CACA,YAAWV,EAAK,WAAW,EAC3B,QAAAtB,EACA,QACCS,EACG,IAAM,CAEN,EACAE,EAEJ,IAAAY,EACA,GAAAtB,EACA,SAAAI,EACA,KAAAF,EACA,WAAAD,EACA,UAAAO,EACA,QAAAC,EACA,iBAAAE,EACA,SAAAE,EACA,UAAAC,EACA,MAAAC,EACA,YAAAI,EACC,GAAGE,EAEJ,SAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA/B,EAAW,WAAW,MAAM,GAAK6B,EAAAA,IAACG,EAAAA,yBAAA,CAAA,CAA4B,EAC/DH,EAAAA,IAAC,MAAA,CAAI,UAAU,oBACb,SAAAtB,GACAsB,EAAAA,IAACI,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBAAgBlC,EAAYQ,CAAO,CAAA,CAAA,EAG7C,EACCJ,GACAyB,EAAAA,IAAC,MAAA,CAAI,UAAU,iBACb,mBAAM,cAAczB,EAAesB,EAAA,CAAc,CAAA,CACnD,EAEArB,GACAwB,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,MAAO,CAAE,OAAQ,EAAG,GAAGV,CAAA,EAEtB,SAAAgB,EAAAA,QAAM,cAAc9B,EAAaqB,EAAA,CAAc,CAAA,CAAA,EAGjDxB,EACA6B,EAAAA,KAACT,EAAA,CACA,UAAU,OACV,MAAO,CACN,MAAOP,EACP,SAAUC,CAAA,EAGV,SAAA,CAAAd,EACD2B,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAiB,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAAA,EAG1CkB,EAAAA,IAAAO,EAAAA,SAAA,EAAE,EAEF9B,GACAuB,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAgB,MAAO,CAAE,OAAQ,CAAA,EAC9C,SAAAM,EAAAA,QAAM,cAAc7B,EAAcoB,EAAA,CAAc,CAAA,CAClD,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH,CACD,EAEA9B,EAAO,YAAc"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
outline: none;
|
|
4
4
|
cursor: pointer;
|
|
5
5
|
display: flex;
|
|
6
|
-
gap:
|
|
6
|
+
gap: 8.83px;
|
|
7
7
|
border-radius: ${t=>t.buttonType=="text"?"0":"4px"};
|
|
8
8
|
overflow: hidden;
|
|
9
9
|
${t=>t.matchParentWidth?"flex-grow: 1;":""}
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
|
|
166
166
|
.button-container {
|
|
167
167
|
display: flex;
|
|
168
|
-
gap:
|
|
168
|
+
gap: 8.33px;
|
|
169
169
|
${t=>t.matchParentWidth?"margin: auto;":""}
|
|
170
170
|
}
|
|
171
171
|
`,l=()=>i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"line-top"}),i.jsx("div",{className:"line-left"}),i.jsx("div",{className:"line-bottom"}),i.jsx("div",{className:"line-right"})]});exports.Button=c;exports.ButtonCustomDashedBorder=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n\tgap?: number;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: ${(props) => (props.gap !== undefined ? `${props.gap}px` : '8.83px')};\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' || props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\t\t${getLoadingBackground(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.buttonColor,\n\t\t)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: ${(props) => (props.gap !== undefined ? `${props.gap}px` : '8.33px')};\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingBackground","getLoadingButtonBackgroundCustom","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' || props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\t\t${getLoadingBackground(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.buttonColor,\n\t\t)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingBackground","getLoadingButtonBackgroundCustom","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../dropdown/DropdownPopover/index.js"),b=require("../button/themes.js"),i=require("./DropdownButton.style.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../dropdown/DropdownPopover/index.js"),b=require("../button/themes.js"),i=require("./DropdownButton.style.js"),a=require("../icon-button/IconButton.js"),p=require("../tooltips/Tooltip.js"),x=require("../spinner/Spinner.js"),c=require("../button/Button.js"),y=o=>{const r=!!o.iconButtonProps,s=r?o.iconButtonProps?.disabled:o.buttonProps?.disabled;if(r){const{iconButtonProps:n,iconButtonTooltip:e}=o,d=t.jsx(a.IconButton,{...n,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px"}});return t.jsxs(i.DropdownButtonStyle,{type:void 0,disabled:s,isIconButton:!0,iconButtonType:n?.iconButtonType??"primary",iconButtonSize:n?.size??"default",children:[e?t.jsx(p.Tooltip,{body:e.body,tooltipContent:e.tooltipContent,placement:e.placement,children:d}):d,t.jsx("div",{className:"dd-button-divider"}),t.jsx("div",{style:{display:"flex",alignItems:"center"},children:t.jsx(u.DropdownPopover,{...o.dropdownProps,isChildLoading:!1,children:t.jsx(a.IconButton,{Icon:o.iconProps,iconButtonType:n?.iconButtonType??"primary",size:n?.size,disabled:s,style:{display:"flex",borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}})})})]})}const{onClick:B,LeadingIcon:P,LeadingIconStyles:R,IconComponent:g,TrailingIcon:h,...l}=o.buttonProps;return t.jsxs(i.DropdownButtonStyle,{type:o.buttonProps.buttonType,disabled:o.buttonProps.disabled,size:o.buttonProps.size,children:[o.buttonProps?.isLoading&&t.jsx(i.LoaderContainer,{type:o.buttonProps.buttonType,children:t.jsx(x.Spinner,{className:"spinner",size:"small",color:b.SpinnerColorMap(o.buttonProps.buttonType||"primary",o.buttonProps.inverse)})}),t.jsx(c.Button,{...o.buttonProps,isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px",...o.buttonProps?.size==="xs"?{border:"none",boxShadow:"none",borderRadius:"0px"}:{}}}),t.jsx("div",{className:"dd-button-divider"}),t.jsx(u.DropdownPopover,{...o.dropdownProps,isChildLoading:o.buttonProps?.isLoading,children:t.jsx(c.Button,{...l,isLoading:!1,buttonText:"",TrailingIcon:o.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px",...o.buttonProps?.size==="xs"?{border:"none",boxShadow:"none",borderRadius:"0px"}:{}}})})]})};exports.DropdownButton=y;
|
|
2
2
|
//# sourceMappingURL=DropdownButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.js","sources":["../../../../src/components/dropdown-button/DropdownButton.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownPopover, DropdownProps } from '@src/components/dropdown';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { SpinnerColorMap } from '../button/themes';\nimport { IconButton } from '../icon-button';\nimport { IconButtonProps } from '../icon-button/model';\nimport { Spinner } from '../spinner';\nimport { Placement, Tooltip } from '../tooltips';\nimport { DropdownButtonStyle, LoaderContainer } from './DropdownButton.style';\n\nexport interface DropdownButtonProps {\n\tdropdownProps: DropdownProps;\n\ticonProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tbuttonProps?: ButtonProps;\n\ticonButtonProps?: IconButtonProps;\n\t/**\n\t * Optional tooltip shown only on the main icon button (icon mode),\n\t * not on the dropdown/chevron trigger.\n\t */\n\ticonButtonTooltip?: {\n\t\tbody?: string;\n\t\ttooltipContent?: JSX.Element;\n\t\tplacement?: Placement;\n\t};\n
|
|
1
|
+
{"version":3,"file":"DropdownButton.js","sources":["../../../../src/components/dropdown-button/DropdownButton.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownPopover, DropdownProps } from '@src/components/dropdown';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { SpinnerColorMap } from '../button/themes';\nimport { IconButton } from '../icon-button';\nimport { IconButtonProps } from '../icon-button/model';\nimport { Spinner } from '../spinner';\nimport { Placement, Tooltip } from '../tooltips';\nimport { DropdownButtonStyle, LoaderContainer } from './DropdownButton.style';\n\nexport interface DropdownButtonProps {\n\tdropdownProps: DropdownProps;\n\ticonProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tbuttonProps?: ButtonProps;\n\ticonButtonProps?: IconButtonProps;\n\t/**\n\t * Optional tooltip shown only on the main icon button (icon mode),\n\t * not on the dropdown/chevron trigger.\n\t */\n\ticonButtonTooltip?: {\n\t\tbody?: string;\n\t\ttooltipContent?: JSX.Element;\n\t\tplacement?: Placement;\n\t};\n}\n\nexport const DropdownButton: React.FC<DropdownButtonProps> = (props) => {\n\tconst isIconMode = !!props.iconButtonProps;\n\tconst disabled = isIconMode\n\t\t? props.iconButtonProps?.disabled\n\t\t: props.buttonProps?.disabled;\n\n\tif (isIconMode) {\n\t\tconst { iconButtonProps, iconButtonTooltip } = props;\n\t\tconst iconButton = (\n\t\t\t<IconButton\n\t\t\t\t{...iconButtonProps!}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t\treturn (\n\t\t\t<DropdownButtonStyle\n\t\t\t\ttype={undefined}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisIconButton\n\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\ticonButtonSize={iconButtonProps?.size ?? 'default'}\n\t\t\t>\n\t\t\t\t{iconButtonTooltip ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={iconButtonTooltip.body}\n\t\t\t\t\t\ttooltipContent={iconButtonTooltip.tooltipContent}\n\t\t\t\t\t\tplacement={iconButtonTooltip.placement}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconButton}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\ticonButton\n\t\t\t\t)}\n\t\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t\t<DropdownPopover {...props.dropdownProps} isChildLoading={false}>\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={props.iconProps}\n\t\t\t\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\t\t\t\tsize={iconButtonProps?.size}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</DropdownButtonStyle>\n\t\t);\n\t}\n\n\tconst {\n\t\tonClick,\n\t\tLeadingIcon,\n\t\tLeadingIconStyles,\n\t\tIconComponent,\n\t\tTrailingIcon,\n\t\t...childButtonProps\n\t} = props.buttonProps!;\n\n\treturn (\n\t\t<DropdownButtonStyle\n\t\t\ttype={props.buttonProps!.buttonType}\n\t\t\tdisabled={props.buttonProps!.disabled}\n\t\t\tsize={props.buttonProps!.size}\n\t\t>\n\t\t\t{props.buttonProps?.isLoading && (\n\t\t\t\t<LoaderContainer type={props.buttonProps.buttonType}>\n\t\t\t\t\t<Spinner\n\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tcolor={SpinnerColorMap(\n\t\t\t\t\t\t\tprops.buttonProps.buttonType || 'primary',\n\t\t\t\t\t\t\tprops.buttonProps.inverse,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</LoaderContainer>\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\t{...props.buttonProps!}\n\t\t\t\tisLoading={false}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t\tborderRight: '0px',\n\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t? { border: 'none', boxShadow: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t: {}),\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t<DropdownPopover\n\t\t\t\t{...props.dropdownProps}\n\t\t\t\tisChildLoading={props.buttonProps?.isLoading}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\t{...childButtonProps}\n\t\t\t\t\tisLoading={false}\n\t\t\t\t\tbuttonText={''}\n\t\t\t\t\tTrailingIcon={props.iconProps}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t\t? { border: 'none', boxShadow: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</DropdownPopover>\n\t\t</DropdownButtonStyle>\n\t);\n};\n"],"names":["DropdownButton","props","isIconMode","disabled","iconButtonProps","iconButtonTooltip","iconButton","jsx","IconButton","jsxs","DropdownButtonStyle","Tooltip","DropdownPopover","onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon","childButtonProps","LoaderContainer","Spinner","SpinnerColorMap","Button"],"mappings":"iYA2BaA,EAAiDC,GAAU,CACvE,MAAMC,EAAa,CAAC,CAACD,EAAM,gBACrBE,EAAWD,EACdD,EAAM,iBAAiB,SACvBA,EAAM,aAAa,SAEtB,GAAIC,EAAY,CACf,KAAM,CAAE,gBAAAE,EAAiB,kBAAAC,CAAA,EAAsBJ,EACzCK,EACLC,EAAAA,IAACC,EAAAA,WAAA,CACC,GAAGJ,EACJ,MAAO,CACN,aAAc,MACd,oBAAqB,MACrB,uBAAwB,KAAA,CACzB,CAAA,EAGF,OACCK,EAAAA,KAACC,EAAAA,oBAAA,CACA,KAAM,OACN,SAAAP,EACA,aAAY,GACZ,eAAgBC,GAAiB,gBAAkB,UACnD,eAAgBA,GAAiB,MAAQ,UAExC,SAAA,CAAAC,EACAE,EAAAA,IAACI,EAAAA,QAAA,CACA,KAAMN,EAAkB,KACxB,eAAgBA,EAAkB,eAClC,UAAWA,EAAkB,UAE5B,SAAAC,CAAA,CAAA,EAGFA,EAEDC,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAA,CAAoB,EACnCA,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,QAAA,EAC1C,eAACK,EAAAA,gBAAA,CAAiB,GAAGX,EAAM,cAAe,eAAgB,GACzD,SAAAM,EAAAA,IAACC,EAAAA,WAAA,CACA,KAAMP,EAAM,UACZ,eAAgBG,GAAiB,gBAAkB,UACnD,KAAMA,GAAiB,KACvB,SAAAD,EACA,MAAO,CACN,QAAS,OACT,aAAc,MACd,qBAAsB,MACtB,wBAAyB,KAAA,CAC1B,CAAA,EAEF,CAAA,CACD,CAAA,CAAA,CAAA,CAGH,CAEA,KAAM,CACL,QAAAU,EACA,YAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,aAAAC,EACA,GAAGC,CAAA,EACAjB,EAAM,YAEV,OACCQ,EAAAA,KAACC,EAAAA,oBAAA,CACA,KAAMT,EAAM,YAAa,WACzB,SAAUA,EAAM,YAAa,SAC7B,KAAMA,EAAM,YAAa,KAExB,SAAA,CAAAA,EAAM,aAAa,WACnBM,EAAAA,IAACY,EAAAA,iBAAgB,KAAMlB,EAAM,YAAY,WACxC,SAAAM,EAAAA,IAACa,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBACNpB,EAAM,YAAY,YAAc,UAChCA,EAAM,YAAY,OAAA,CACnB,CAAA,EAEF,EAGDM,EAAAA,IAACe,EAAAA,OAAA,CACC,GAAGrB,EAAM,YACV,UAAW,GACX,MAAO,CACN,aAAc,MACd,oBAAqB,MACrB,uBAAwB,MACxB,YAAa,MACb,GAAIA,EAAM,aAAa,OAAS,KAC7B,CAAE,OAAQ,OAAQ,UAAW,OAAQ,aAAc,KAAA,EACnD,CAAA,CAAC,CACL,CAAA,EAEDM,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAA,CAAoB,EACnCA,EAAAA,IAACK,EAAAA,gBAAA,CACC,GAAGX,EAAM,cACV,eAAgBA,EAAM,aAAa,UAEnC,SAAAM,EAAAA,IAACe,EAAAA,OAAA,CACC,GAAGJ,EACJ,UAAW,GACX,WAAY,GACZ,aAAcjB,EAAM,UACpB,MAAO,CACN,aAAc,MACd,qBAAsB,MACtB,wBAAyB,MACzB,GAAIA,EAAM,aAAa,OAAS,KAC7B,CAAE,OAAQ,OAAQ,UAAW,OAAQ,aAAc,KAAA,EACnD,CAAA,CAAC,CACL,CAAA,CACD,CAAA,CACD,CAAA,CAAA,CAGH"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),D=require("react"),B=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),V=require("./model.js"),v=require("./Tag.styled.js"),F=require("./themes.js"),G=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},h=G(D),C=({tagText:o,LeadingIcon:u,TrailingIcon:j,onLeadingIconClicked:m=void 0,leadingIconId:s,trailingIconId:d,onTrailingIconClicked:T=void 0,theme:n="light",type:p="neutral",variant:c="regular",version:f,cursor:q,alignIcon:A,noBorder:E,tagHtmlText:a,contentPadding:_,padding:$,height:k,leadingIconTooltip:g,trailingIconTooltip:N,tagColor:w,numberOfLines:l,backgroundColor:R,borderRadius:S,size:t="regular",hoverBackgroundColor:b})=>{let i=o;const M=n;let x=p;V.ValidTagTypeMap[c][p]||(x="neutral"),c==="circle"&&typeof i=="number"&&i>99&&(i="99+");const P=F.getTagIconColor(n,x),y={height:c==="compressed"?12:16,width:c==="compressed"?12:16,color:P,style:{display:"block"}};return e.jsx(v.Tag,{cursor:q,theme:M,type:x,variant:c,version:f,alignIcon:A,noBorder:E,contentPadding:_,padding:$,height:k,backgroundColor:R,borderRadius:S,size:t,hoverBackgroundColor:b,children:e.jsxs("div",{className:"container",children:[u&&(g?e.jsx(B.Tooltip,{...g,children:e.jsx("button",{className:"icon-leading",onClick:m,id:`${s}-wrapper`||"leading-icon-wrapper",children:h.default.createElement(u,{...y,id:s||"leading-icon"})})}):e.jsx("button",{className:"icon-leading",onClick:m,id:`${s}-wrapper`||"leading-icon-wrapper",children:h.default.createElement(u,{...y,id:s||"leading-icon"})})),a&&(p==="ai"&&n==="light"?t==="small"?e.jsx(r.AiBodyTiny,{numberOfLines:l,children:a}):e.jsx(r.AiBodyCaption,{numberOfLines:l,children:a}):t==="small"?e.jsx(r.BodyTiny,{className:"text",numberOfLines:l,children:a}):e.jsx(r.BodyCaption,{className:"text",numberOfLines:l,children:a})),!a&&i!==""&&(p==="ai"&&n==="light"?t==="small"?e.jsx(r.AiBodyTiny,{numberOfLines:l,children:i}):e.jsx(r.AiBodyCaption,{numberOfLines:l,children:i}):t==="small"?e.jsx(r.BodyTiny,{className:"text",color:w,numberOfLines:l,children:i}):e.jsx(r.BodyCaption,{className:"text",color:w,numberOfLines:l,children:i})),j&&(N?e.jsx(B.Tooltip,{...N,children:e.jsx("button",{className:"icon-trailing",onClick:T,id:`${d}-wrapper`||"trailing-icon-wrapper",children:h.default.createElement(j,{...y,id:d||"trailing-icon"})})}):e.jsx("button",{className:"icon-trailing",onClick:T,id:`${d}-wrapper`||"trailing-icon-wrapper",children:h.default.createElement(j,{...y,id:d||"trailing-icon"})}))]})})};C.displayName="Tag";exports.Tag=C;
|
|
2
2
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n\
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n\thoverBackgroundColor,\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t\thoverBackgroundColor={hoverBackgroundColor}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","hoverBackgroundColor","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("./themes.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=a(i),n=d.default.div`
|
|
2
2
|
cursor: ${e=>e.cursor??"default"};
|
|
3
3
|
${e=>e.size!=="small"&&(e.variant==="regular"?`display: block;
|
|
4
4
|
min-height: 26px;
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
.container {
|
|
7
7
|
display: flex;
|
|
8
8
|
align-items: ${e=>e.alignIcon?e.alignIcon:"center"};
|
|
9
|
-
gap:
|
|
9
|
+
gap: 6px;
|
|
10
10
|
${e=>e.height?`height: ${e.height}px; box-sizing: border-box;`:e.size==="small"?"height: 16px; box-sizing: border-box;":""}
|
|
11
11
|
padding: ${e=>e.padding?e.padding:e.size==="small"?"2px 6px":e.contentPadding?`${e.contentPadding}px`:t.getPadding(e.variant)};
|
|
12
12
|
background: ${e=>e.backgroundColor??t.getBackgroundColor(e.theme,e.type)};
|
|
13
13
|
|
|
14
14
|
border-radius: ${e=>e.borderRadius!==void 0?typeof e.borderRadius=="number"?`${e.borderRadius}px`:e.borderRadius:e.variant==="regular"?"4px":"12px"};
|
|
15
15
|
|
|
16
|
-
${e=>!e.noBorder&&e.theme==="light"&&`border: ${e.version==="2.0"?.5:1}px
|
|
16
|
+
${e=>!e.noBorder&&e.theme==="light"&&`border: ${e.version==="2.0"?.5:1}px solid ${t.generateBorder(e.type,e.theme)};`}
|
|
17
17
|
|
|
18
18
|
.text {
|
|
19
|
-
color: ${e=>
|
|
19
|
+
color: ${e=>t.getTextColor(e.theme,e.type)};
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
.icon-trailing {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string | number;\n\tsize?: 'regular' | 'small';\n\
|
|
1
|
+
{"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string | number;\n\tsize?: 'regular' | 'small';\n\thoverBackgroundColor?: string;\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.height\n\t\t\t\t? `height: ${props.height}px; box-sizing: border-box;`\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? 'height: 16px; box-sizing: border-box;'\n\t\t\t\t: ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.padding\n\t\t\t\t? props.padding\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t${(props) =>\n\t\t\tprops.hoverBackgroundColor &&\n\t\t\t`&:hover {\n\t\t\t\tbackground: ${props.hoverBackgroundColor};\n\t\t\t}`}\n\t}\n`;\n"],"names":["Tag","styled","props","getPadding","getBackgroundColor","generateBorder","getTextColor"],"mappings":"6MASaA,EAAMC,EAAAA,QAAO;AAAA,WAgBdC,GAAUA,EAAM,QAAU,SAAS;AAAA,GAC3CA,GACFA,EAAM,OAAS,UACdA,EAAM,UAAY,UAChB;AAAA;AAAA,IAGA,oBAAoB;AAAA;AAAA;AAAA,iBAGPA,GAAWA,EAAM,UAAYA,EAAM,UAAY,QAAS;AAAA;AAAA,IAErEA,GACFA,EAAM,OACH,WAAWA,EAAM,MAAM,8BACvBA,EAAM,OAAS,QACf,wCACA,EAAE;AAAA,aACMA,GACXA,EAAM,QACHA,EAAM,QACNA,EAAM,OAAS,QACf,UACAA,EAAM,eACN,GAAGA,EAAM,cAAc,KACvBC,EAAAA,WAAWD,EAAM,OAAO,CAAC;AAAA,gBACdA,GACdA,EAAM,iBAAmBE,EAAAA,mBAAmBF,EAAM,MAAOA,EAAM,IAAI,CAAC;AAAA;AAAA,mBAEnDA,GACjBA,EAAM,eAAiB,OACpB,OAAOA,EAAM,cAAiB,SAC7B,GAAGA,EAAM,YAAY,KACrBA,EAAM,aACPA,EAAM,UAAY,UAClB,MACA,MAAM;AAAA;AAAA,IAEPA,GACF,CAACA,EAAM,UACPA,EAAM,QAAU,SAChB,WAAWA,EAAM,UAAY,MAAQ,GAAM,CAAC,YAAYG,EAAAA,eACvDH,EAAM,KACNA,EAAM,KACP,CAAC,GAAG;AAAA;AAAA;AAAA,YAGMA,GAAUI,eAAaJ,EAAM,MAAOA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAavDA,GACFA,EAAM,sBACN;AAAA,kBACeA,EAAM,oBAAoB;AAAA,KACvC;AAAA;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0' | '3.0';\n\t/** Custom CSS padding string, e.g. '4px 8px' */\n\tpadding?: string;\n\t/** Custom height in px */\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n\t/**\n\t *
|
|
1
|
+
{"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0' | '3.0';\n\t/** Custom CSS padding string, e.g. '4px 8px' */\n\tpadding?: string;\n\t/** Custom height in px */\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n\t/**\n\t * Background color on hover.\n\t * @default undefined (no hover effect)\n\t */\n\thoverBackgroundColor?: string;\n}\n"],"names":["ValidTagTypeMap"],"mappings":"gFAmBO,MAAMA,EAAkB,CAC9B,QAAS,CACR,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,EAEL,OAAQ,CACP,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,KAAM,GACN,KAAM,GACN,GAAI,EAAA,EAEL,WAAY,CACX,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,CAEN"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("@tiptap/extension-character-count"),_=require("@tiptap/extension-color"),k=require("@tiptap/extension-font-family"),b=require("@tiptap/extension-hard-break"),C=require("@tiptap/extension-highlight"),M=require("@tiptap/extension-image"),y=require("@tiptap/extension-link"),T=require("../../node_modules/@tiptap/extension-paragraph/dist/index.js"),P=require("@tiptap/extension-placeholder"),g=require("@tiptap/extension-subscript"),L=require("@tiptap/extension-superscript"),H=require("@tiptap/extension-text-align"),D=require("@tiptap/extension-text-style"),A=require("@tiptap/extension-underline"),w=require("@tiptap/starter-kit"),I=require("../../helpers/sanitize.js"),z=require("./characterLimit/CharacterLimitExtension.js"),B=require("./FontSizeExtension.js"),F=require("./htmlTagStrip/HtmlTagStripExtension.js"),O=require("./jsonHighlight/JsonHighlightExtension.js"),i=require("./mention/MentionExtension.js"),R=require("./paste/PasteExtension.js"),N=require("./plainClipboard/PasteNormalizationExtension.js"),U=require("./sectionDivider/SectionDividerNode.js"),l=require("./sendShortcut/SendShortcutExtension.js"),j=require("./slashCommand/SlashCommandExtension.js"),v=require("./variable/VariableDecorationExtension.js"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=r(E),d=r(_),K=r(k),J=r(b),V=r(C),W=r(M),Z=r(y),c=r(P),G=r(g),Q=r(L),X=r(H),Y=r(A),h=r(w);function $(e){if(e.features?.jsonMode)return[h.default.configure({link:!1,underline:!1,bold:!1,italic:!1,strike:!1,code:!1,heading:!1,bulletList:!1,orderedList:!1,blockquote:!1,horizontalRule:!1}),c.default.configure({placeholder:e.placeholder??`{
|
|
2
2
|
|
|
3
|
-
}`}),
|
|
3
|
+
}`}),O.JsonHighlightExtension,l.SendShortcutExtension.configure({onSend:e.onSend,sendShortcut:e.sendShortcut,extraShortcuts:e.shortcuts??[]}),...e.maxCharacters?[u.default.configure({limit:e.maxCharacters})]:[]];const s=e.features?.richPaste??!1,m=e.features?.richTypography??!1,a=e.features?.allowedMarks,n=t=>!a||a.includes(t),f=J.default.extend({addKeyboardShortcuts(){return{"Shift-Enter":()=>this.editor.commands.setHardBreak()}}}),o=t=>t==="0"||t==="0px"||t==="0pt"||t==="0em",p=T.default.extend({addAttributes(){return{...this.parent?.()??{},margin:{default:null,parseHTML:t=>o(t.style.marginTop)&&o(t.style.marginBottom)?"0":null,renderHTML:t=>t.margin==="0"?{style:"margin: 0px"}:{}}}}}),x=[h.default.configure({link:!1,underline:!1,hardBreak:!1,paragraph:!1,bold:n("bold")?{}:!1,italic:n("italic")?{}:!1,strike:n("strike")?{}:!1,code:n("code")?{}:!1}),p,f,...n("underline")?[Y.default]:[],Z.default.extend({addPasteRules:()=>[],addInputRules:()=>[]}).configure({openOnClick:!1,autolink:!1,linkOnPaste:!1,isAllowedUri:t=>I.isAllowedLinkUrl(t),HTMLAttributes:{rel:"noopener noreferrer",class:"bik-link"}}),D.TextStyle,c.default.configure({placeholder:e.placeholder??"Type a message..."}),...e.onPaste?[R.PasteExtension.configure({onPaste:e.onPaste})]:[],N.PasteNormalizationExtension.configure({preserveMarks:s,plainOnly:!s}),l.SendShortcutExtension.configure({onSend:e.onSend,sendShortcut:e.sendShortcut,extraShortcuts:e.shortcuts??[]}),v.VariableDecorationExtension,F.HtmlTagStripExtension.configure({stripAll:!s}),...e.maxCharacters?[u.default.configure({limit:e.maxCharacters})]:[],...e.characterLimit?[z.CharacterLimitExtension.configure({limit:e.characterLimit,hard:e.characterLimitHard})]:[],U.SectionDividerNode],S=[...e.mentions?.agents?[i.buildAgentMentionExtension(e.mentions.agents,e.onMentionSelected,e.renderMentionItem,e.renderMentionDropdown,e.removeMentionTriggerOnDismiss,e.renderMentionChipIcon)]:[],...e.mentions?.teams?[i.buildTeamMentionExtension(e.mentions.teams,e.onMentionSelected,e.renderMentionItem,e.renderMentionDropdown,e.removeMentionTriggerOnDismiss)]:[],...e.slashCommands?[j.buildSlashCommandExtension(e.slashCommands,e.onSlashCommandSelected,e.renderSlashCommandItem,e.renderSlashCommandDropdown)]:[]],q=m?[d.default,V.default.configure({multicolor:!0}),K.default,B.FontSizeExtension,X.default.configure({types:["heading","paragraph"]}),G.default,Q.default,W.default]:[d.default];return[...x,...S,...q]}exports.buildExtensions=$;
|
|
4
4
|
//# sourceMappingURL=buildExtensions.js.map
|