@sula-tech/webcomponents 0.14.1 → 0.16.0

package/dist/collection/components/sula-tooltip/sula-tooltip.stories.js

@@ -0,0 +1,179 @@
+import { SulaTooltipPosition, SulaTooltipTrigger } from "./model/sula-tooltip.model";
+export default {
+    title: 'Components/sula-tooltip',
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Texto exibido no tooltip (máx. 300 caracteres)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+        position: {
+            control: { type: 'select' },
+            options: Object.values(SulaTooltipPosition),
+            description: 'Posição do tooltip em relação ao gatilho',
+            table: {
+                type: { summary: 'SulaTooltipPosition' },
+                defaultValue: { summary: 'SulaTooltipPosition.Top' },
+            },
+        },
+        icon: {
+            control: 'text',
+            description: 'Classe do ícone (Phosphor Icons)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'ph ph-info' },
+            },
+        },
+        focused: {
+            control: 'boolean',
+            description: 'Exibe o focus ring ao redor do ícone',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        trigger: {
+            control: { type: 'select' },
+            options: Object.values(SulaTooltipTrigger),
+            description: 'Modo de disparo: ícone (padrão) ou elemento pai',
+            table: {
+                type: { summary: 'SulaTooltipTrigger' },
+                defaultValue: { summary: 'SulaTooltipTrigger.Icon' },
+            },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+O componente **Sula Tooltip** exibe um hint informativo ao passar o mouse sobre um ícone ou elemento pai.
+
+### Características principais:
+- Posicionamento em 4 direções (top, bottom, left, right)
+- Adaptação automática ao tema via Tailwind
+- Suporte a focus ring
+- Modo trigger por ícone ou por elemento pai
+- Texto com até 300 caracteres
+        `,
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '100px';
+    container.style.display = 'flex';
+    container.style.justifyContent = 'center';
+    container.style.alignItems = 'center';
+    const el = document.createElement('sula-tooltip');
+    el.setAttribute('text', args.text);
+    el.setAttribute('position', args.position);
+    el.setAttribute('icon', args.icon || 'ph ph-info');
+    el.setAttribute('focused', args.focused ? 'true' : 'false');
+    el.setAttribute('trigger', args.trigger || 'icon');
+    container.appendChild(el);
+    return container;
+};
+export const Playground = Template.bind({});
+Playground.args = {
+    text: 'Este é um tooltip padrão',
+    position: SulaTooltipPosition.Top,
+    icon: 'ph ph-info',
+    focused: false,
+    trigger: SulaTooltipTrigger.Icon,
+};
+export const Positions = () => {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.gap = '64px';
+    container.style.alignItems = 'center';
+    container.style.justifyContent = 'center';
+    container.style.padding = '100px 20px';
+    Object.values(SulaTooltipPosition).forEach(pos => {
+        const wrapper = document.createElement('div');
+        wrapper.style.display = 'flex';
+        wrapper.style.alignItems = 'center';
+        wrapper.style.gap = '8px';
+        const label = document.createElement('span');
+        label.style.fontSize = '14px';
+        label.textContent = pos.charAt(0).toUpperCase() + pos.slice(1) + ':';
+        const el = document.createElement('sula-tooltip');
+        el.setAttribute('text', `Tooltip posicionado em ${pos}`);
+        el.setAttribute('position', pos);
+        wrapper.appendChild(label);
+        wrapper.appendChild(el);
+        container.appendChild(wrapper);
+    });
+    return container;
+};
+Positions.parameters = {
+    docs: { description: { story: 'Todas as posições disponíveis do tooltip.' } },
+};
+export const FocusRing = Template.bind({});
+FocusRing.args = {
+    text: 'Tooltip com focus ring',
+    position: SulaTooltipPosition.Top,
+    focused: true,
+};
+FocusRing.parameters = {
+    docs: { description: { story: 'Tooltip com focus ring visível ao redor do ícone.' } },
+};
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+    text: 'Tooltip com ícone customizado',
+    position: SulaTooltipPosition.Top,
+    icon: 'ph ph-question',
+};
+CustomIcon.parameters = {
+    docs: { description: { story: 'Tooltip com ícone de pergunta.' } },
+};
+export const LongText = Template.bind({});
+LongText.args = {
+    text: 'Este é um texto longo para demonstrar que o tooltip suporta quebra de linha e até 300 caracteres de conteúdo informativo para o usuário.',
+    position: SulaTooltipPosition.Right,
+};
+LongText.parameters = {
+    docs: { description: { story: 'Tooltip com texto longo demonstrando o suporte a múltiplas linhas.' } },
+};
+export const ParentTrigger = () => {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.gap = '16px';
+    container.style.padding = '100px 20px';
+    container.style.justifyContent = 'center';
+    const card = document.createElement('div');
+    card.style.position = 'relative';
+    card.style.padding = '16px 20px';
+    card.style.borderRadius = '8px';
+    card.style.border = '1px solid #e0e0e0';
+    card.style.background = '#fff';
+    card.style.cursor = 'default';
+    card.style.width = '180px';
+    const label = document.createElement('p');
+    label.style.fontSize = '12px';
+    label.style.color = '#6c6e6e';
+    label.style.margin = '0 0 4px';
+    label.textContent = 'Total investido';
+    const value = document.createElement('p');
+    value.style.fontSize = '20px';
+    value.style.fontWeight = 'bold';
+    value.style.margin = '0';
+    value.textContent = 'R$ 4.820';
+    const tooltip = document.createElement('sula-tooltip');
+    tooltip.setAttribute('text', 'Passe o mouse sobre o card para ver o tooltip.');
+    tooltip.setAttribute('trigger', SulaTooltipTrigger.Parent);
+    tooltip.setAttribute('position', SulaTooltipPosition.Top);
+    card.appendChild(label);
+    card.appendChild(value);
+    card.appendChild(tooltip);
+    container.appendChild(card);
+    return container;
+};
+ParentTrigger.parameters = {
+    docs: { description: { story: 'Tooltip disparado pelo hover no elemento pai (ícone oculto).' } },
+};
+//# sourceMappingURL=sula-tooltip.stories.js.map

package/dist/collection/components/sula-tooltip/sula-tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/sula-tooltip/sula-tooltip.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaTooltipPosition, SulaTooltipTrigger } from './model/sula-tooltip.model';\n\nexport default {\n  title: 'Components/sula-tooltip',\n  tags: ['autodocs'],\n  argTypes: {\n    text: {\n      control: 'text',\n      description: 'Texto exibido no tooltip (máx. 300 caracteres)',\n      table: {\n        type: { summary: 'string' },\n        defaultValue: { summary: 'undefined' },\n      },\n    },\n    position: {\n      control: { type: 'select' },\n      options: Object.values(SulaTooltipPosition),\n      description: 'Posição do tooltip em relação ao gatilho',\n      table: {\n        type: { summary: 'SulaTooltipPosition' },\n        defaultValue: { summary: 'SulaTooltipPosition.Top' },\n      },\n    },\n    icon: {\n      control: 'text',\n      description: 'Classe do ícone (Phosphor Icons)',\n      table: {\n        type: { summary: 'string' },\n        defaultValue: { summary: 'ph ph-info' },\n      },\n    },\n    focused: {\n      control: 'boolean',\n      description: 'Exibe o focus ring ao redor do ícone',\n      table: {\n        type: { summary: 'boolean' },\n        defaultValue: { summary: 'false' },\n      },\n    },\n    trigger: {\n      control: { type: 'select' },\n      options: Object.values(SulaTooltipTrigger),\n      description: 'Modo de disparo: ícone (padrão) ou elemento pai',\n      table: {\n        type: { summary: 'SulaTooltipTrigger' },\n        defaultValue: { summary: 'SulaTooltipTrigger.Icon' },\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `\nO componente **Sula Tooltip** exibe um hint informativo ao passar o mouse sobre um ícone ou elemento pai.\n\n### Características principais:\n- Posicionamento em 4 direções (top, bottom, left, right)\n- Adaptação automática ao tema via Tailwind\n- Suporte a focus ring\n- Modo trigger por ícone ou por elemento pai\n- Texto com até 300 caracteres\n        `,\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '100px';\n  container.style.display = 'flex';\n  container.style.justifyContent = 'center';\n  container.style.alignItems = 'center';\n\n  const el = document.createElement('sula-tooltip');\n\n  el.setAttribute('text', args.text);\n  el.setAttribute('position', args.position);\n  el.setAttribute('icon', args.icon || 'ph ph-info');\n  el.setAttribute('focused', args.focused ? 'true' : 'false');\n  el.setAttribute('trigger', args.trigger || 'icon');\n\n  container.appendChild(el);\n\n  return container;\n};\n\nexport const Playground = Template.bind({});\nPlayground.args = {\n  text: 'Este é um tooltip padrão',\n  position: SulaTooltipPosition.Top,\n  icon: 'ph ph-info',\n  focused: false,\n  trigger: SulaTooltipTrigger.Icon,\n};\n\nexport const Positions = () => {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.gap = '64px';\n  container.style.alignItems = 'center';\n  container.style.justifyContent = 'center';\n  container.style.padding = '100px 20px';\n\n  Object.values(SulaTooltipPosition).forEach(pos => {\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.alignItems = 'center';\n    wrapper.style.gap = '8px';\n\n    const label = document.createElement('span');\n    label.style.fontSize = '14px';\n    label.textContent = pos.charAt(0).toUpperCase() + pos.slice(1) + ':';\n\n    const el = document.createElement('sula-tooltip');\n    el.setAttribute('text', `Tooltip posicionado em ${pos}`);\n    el.setAttribute('position', pos);\n\n    wrapper.appendChild(label);\n    wrapper.appendChild(el);\n    container.appendChild(wrapper);\n  });\n\n  return container;\n};\nPositions.parameters = {\n  docs: { description: { story: 'Todas as posições disponíveis do tooltip.' } },\n};\n\nexport const FocusRing = Template.bind({});\nFocusRing.args = {\n  text: 'Tooltip com focus ring',\n  position: SulaTooltipPosition.Top,\n  focused: true,\n};\nFocusRing.parameters = {\n  docs: { description: { story: 'Tooltip com focus ring visível ao redor do ícone.' } },\n};\n\nexport const CustomIcon = Template.bind({});\nCustomIcon.args = {\n  text: 'Tooltip com ícone customizado',\n  position: SulaTooltipPosition.Top,\n  icon: 'ph ph-question',\n};\nCustomIcon.parameters = {\n  docs: { description: { story: 'Tooltip com ícone de pergunta.' } },\n};\n\nexport const LongText = Template.bind({});\nLongText.args = {\n  text: 'Este é um texto longo para demonstrar que o tooltip suporta quebra de linha e até 300 caracteres de conteúdo informativo para o usuário.',\n  position: SulaTooltipPosition.Right,\n};\nLongText.parameters = {\n  docs: { description: { story: 'Tooltip com texto longo demonstrando o suporte a múltiplas linhas.' } },\n};\n\nexport const ParentTrigger = () => {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.gap = '16px';\n  container.style.padding = '100px 20px';\n  container.style.justifyContent = 'center';\n\n  const card = document.createElement('div');\n  card.style.position = 'relative';\n  card.style.padding = '16px 20px';\n  card.style.borderRadius = '8px';\n  card.style.border = '1px solid #e0e0e0';\n  card.style.background = '#fff';\n  card.style.cursor = 'default';\n  card.style.width = '180px';\n\n  const label = document.createElement('p');\n  label.style.fontSize = '12px';\n  label.style.color = '#6c6e6e';\n  label.style.margin = '0 0 4px';\n  label.textContent = 'Total investido';\n\n  const value = document.createElement('p');\n  value.style.fontSize = '20px';\n  value.style.fontWeight = 'bold';\n  value.style.margin = '0';\n  value.textContent = 'R$ 4.820';\n\n  const tooltip = document.createElement('sula-tooltip');\n  tooltip.setAttribute('text', 'Passe o mouse sobre o card para ver o tooltip.');\n  tooltip.setAttribute('trigger', SulaTooltipTrigger.Parent);\n  tooltip.setAttribute('position', SulaTooltipPosition.Top);\n\n  card.appendChild(label);\n  card.appendChild(value);\n  card.appendChild(tooltip);\n  container.appendChild(card);\n\n  return container;\n};\nParentTrigger.parameters = {\n  docs: { description: { story: 'Tooltip disparado pelo hover no elemento pai (ícone oculto).' } },\n};\n"]}

package/dist/collection/utils/replace-host-with-rendered-element.js

@@ -0,0 +1,24 @@
+export const replaceHostWithRenderedElement = (host, selector) => {
+    const nativeElement = host.querySelector(selector);
+    const parentNode = host.parentNode;
+    if (!nativeElement || !parentNode) {
+        return;
+    }
+    Array.from(host.classList)
+        .filter(className => className !== 'hydrated')
+        .forEach(className => nativeElement.classList.add(className));
+    const hostStyle = host.getAttribute('style');
+    const nativeStyle = nativeElement.getAttribute('style');
+    if (hostStyle) {
+        nativeElement.setAttribute('style', [nativeStyle, hostStyle].filter(Boolean).join('; '));
+    }
+    Array.from(host.attributes).forEach(({ name, value }) => {
+        if (name === 'class' || name === 'style') {
+            return;
+        }
+        nativeElement.setAttribute(name, value);
+    });
+    parentNode.insertBefore(nativeElement, host);
+    parentNode.removeChild(host);
+};
+//# sourceMappingURL=replace-host-with-rendered-element.js.map

package/dist/collection/utils/replace-host-with-rendered-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replace-host-with-rendered-element.js","sourceRoot":"","sources":["../../src/utils/replace-host-with-rendered-element.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,IAAiB,EAAE,QAAgB,EAAE,EAAE;IACpF,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAc,QAAQ,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IAEnC,IAAI,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,OAAO;IACT,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;SACvB,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,KAAK,UAAU,CAAC;SAC7C,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhE,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,WAAW,GAAG,aAAa,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAExD,IAAI,SAAS,EAAE,CAAC;QACd,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3F,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;QACtD,IAAI,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACzC,OAAO;QACT,CAAC;QAED,aAAa,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,UAAU,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAC7C,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AAC/B,CAAC,CAAC","sourcesContent":["export const replaceHostWithRenderedElement = (host: HTMLElement, selector: string) => {\n  const nativeElement = host.querySelector<HTMLElement>(selector);\n  const parentNode = host.parentNode;\n\n  if (!nativeElement || !parentNode) {\n    return;\n  }\n\n  Array.from(host.classList)\n    .filter(className => className !== 'hydrated')\n    .forEach(className => nativeElement.classList.add(className));\n\n  const hostStyle = host.getAttribute('style');\n  const nativeStyle = nativeElement.getAttribute('style');\n\n  if (hostStyle) {\n    nativeElement.setAttribute('style', [nativeStyle, hostStyle].filter(Boolean).join('; '));\n  }\n\n  Array.from(host.attributes).forEach(({ name, value }) => {\n    if (name === 'class' || name === 'style') {\n      return;\n    }\n\n    nativeElement.setAttribute(name, value);\n  });\n\n  parentNode.insertBefore(nativeElement, host);\n  parentNode.removeChild(host);\n};\n"]}