@sula-tech/webcomponents 0.15.0 → 0.17.0

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

@@ -0,0 +1,189 @@
+export default {
+    title: 'Components/sula-toggle',
+    tags: ['autodocs'],
+    argTypes: {
+        selected: {
+            control: 'boolean',
+            description: 'Indica se o favorito está selecionado (coração preenchido)',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        buttonDisabled: {
+            control: 'boolean',
+            description: 'Estado desabilitado do botão',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        icon: {
+            control: 'text',
+            description: 'Nome do ícone (Phosphor Icons) sem o prefixo. Exemplo: "heart", "star", "bookmark"',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'heart' },
+            },
+        },
+        toggleClicked: {
+            action: 'toggleClicked',
+            description: 'Evento emitido quando o botão de toggle é clicado',
+            table: {
+                type: { summary: 'CustomEvent<SulaToggleEvent>' },
+            },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+O componente **Sula Toggle Favorite** é um botão de alternância para favoritar itens.
+Utiliza ícones da biblioteca Phosphor Icons, com o coração (heart) como padrão, mas podendo ser customizado.
+
+### Características principais:
+- Ícone customizável (padrão: heart)
+- Alterna entre outline (padrão) e preenchido (selecionado)
+- Área clicável de 40x40 com ícone de 24x24
+- Estados: default, hover, pressed, selected e disabled
+- Suporte a light/dark mode
+- Acessibilidade com \`aria-pressed\` e \`aria-label\`
+
+### Como usar ícones customizados:
+Informe o nome do ícone da biblioteca Phosphor Icons sem o prefixo \`ph\` ou \`ph-fill\`.
+Exemplos: "heart", "star", "bookmark", "thumbs-up", etc.
+        `,
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.alignItems = 'center';
+    container.style.justifyContent = 'center';
+    container.style.minHeight = '80px';
+    const el = document.createElement('sula-toggle');
+    el.setAttribute('selected', args.selected ? args.selected.toString() : 'false');
+    el.setAttribute('button-disabled', args.buttonDisabled ? args.buttonDisabled.toString() : 'false');
+    if (args.icon) {
+        el.setAttribute('icon', args.icon);
+    }
+    el.addEventListener('toggleClicked', args.toggleClicked);
+    container.appendChild(el);
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    selected: false,
+    buttonDisabled: false,
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: 'Estado padrão do botão de favorito (coração outline, cor primária).',
+        },
+    },
+};
+export const Selected = Template.bind({});
+Selected.args = {
+    selected: true,
+    buttonDisabled: false,
+};
+Selected.parameters = {
+    docs: {
+        description: {
+            story: 'Estado selecionado/favoritado (coração preenchido, cor de erro/vermelho).',
+        },
+    },
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    selected: false,
+    buttonDisabled: true,
+};
+Disabled.parameters = {
+    docs: {
+        description: {
+            story: 'Estado desabilitado do botão de favorito.',
+        },
+    },
+};
+export const DisabledSelected = Template.bind({});
+DisabledSelected.args = {
+    selected: true,
+    buttonDisabled: true,
+};
+DisabledSelected.parameters = {
+    docs: {
+        description: {
+            story: 'Estado desabilitado com favorito previamente selecionado.',
+        },
+    },
+};
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+    selected: false,
+    buttonDisabled: false,
+    icon: 'star',
+};
+CustomIcon.parameters = {
+    docs: {
+        description: {
+            story: 'Exemplo de botão de toggle com ícone customizado (estrela). Você pode usar qualquer ícone da biblioteca Phosphor Icons informando apenas o nome sem o prefixo.',
+        },
+    },
+};
+export const CustomIconBookmark = Template.bind({});
+CustomIconBookmark.args = {
+    selected: true,
+    buttonDisabled: false,
+    icon: 'bookmark',
+};
+CustomIconBookmark.parameters = {
+    docs: {
+        description: {
+            story: 'Exemplo de botão de toggle com ícone de marcador (bookmark) selecionado.',
+        },
+    },
+};
+export const AllStates = () => {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.gap = '24px';
+    container.style.alignItems = 'center';
+    container.style.padding = '20px';
+    const states = [
+        { label: 'Default', selected: false, disabled: false },
+        { label: 'Selected', selected: true, disabled: false },
+        { label: 'Disabled', selected: false, disabled: true },
+        { label: 'Disabled + Selected', selected: true, disabled: true },
+    ];
+    states.forEach(state => {
+        const wrapper = document.createElement('div');
+        wrapper.style.display = 'flex';
+        wrapper.style.flexDirection = 'column';
+        wrapper.style.alignItems = 'center';
+        wrapper.style.gap = '8px';
+        const el = document.createElement('sula-toggle');
+        el.setAttribute('selected', state.selected.toString());
+        el.setAttribute('button-disabled', state.disabled.toString());
+        const label = document.createElement('span');
+        label.style.fontSize = '12px';
+        label.style.color = '#666';
+        label.textContent = state.label;
+        wrapper.appendChild(el);
+        wrapper.appendChild(label);
+        container.appendChild(wrapper);
+    });
+    return container;
+};
+AllStates.parameters = {
+    docs: {
+        description: {
+            story: 'Visualização de todos os estados do botão de favorito lado a lado.',
+        },
+    },
+};
+//# sourceMappingURL=sula-toggle.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sula-toggle.stories.js","sourceRoot":"","sources":["../../../src/components/sula-toggle/sula-toggle.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/sula-toggle',\n  tags: ['autodocs'],\n  argTypes: {\n    selected: {\n      control: 'boolean',\n      description: 'Indica se o favorito está selecionado (coração preenchido)',\n      table: {\n        type: { summary: 'boolean' },\n        defaultValue: { summary: 'false' },\n      },\n    },\n    buttonDisabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado do botão',\n      table: {\n        type: { summary: 'boolean' },\n        defaultValue: { summary: 'false' },\n      },\n    },\n    icon: {\n      control: 'text',\n      description: 'Nome do ícone (Phosphor Icons) sem o prefixo. Exemplo: \"heart\", \"star\", \"bookmark\"',\n      table: {\n        type: { summary: 'string' },\n        defaultValue: { summary: 'heart' },\n      },\n    },\n    toggleClicked: {\n      action: 'toggleClicked',\n      description: 'Evento emitido quando o botão de toggle é clicado',\n      table: {\n        type: { summary: 'CustomEvent<SulaToggleEvent>' },\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `\nO componente **Sula Toggle Favorite** é um botão de alternância para favoritar itens.\nUtiliza ícones da biblioteca Phosphor Icons, com o coração (heart) como padrão, mas podendo ser customizado.\n\n### Características principais:\n- Ícone customizável (padrão: heart)\n- Alterna entre outline (padrão) e preenchido (selecionado)\n- Área clicável de 40x40 com ícone de 24x24\n- Estados: default, hover, pressed, selected e disabled\n- Suporte a light/dark mode\n- Acessibilidade com \\`aria-pressed\\` e \\`aria-label\\`\n\n### Como usar ícones customizados:\nInforme o nome do ícone da biblioteca Phosphor Icons sem o prefixo \\`ph\\` ou \\`ph-fill\\`.\nExemplos: \"heart\", \"star\", \"bookmark\", \"thumbs-up\", etc.\n        `,\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'flex';\n  container.style.alignItems = 'center';\n  container.style.justifyContent = 'center';\n  container.style.minHeight = '80px';\n\n  const el = document.createElement('sula-toggle');\n\n  el.setAttribute('selected', args.selected ? args.selected.toString() : 'false');\n  el.setAttribute('button-disabled', args.buttonDisabled ? args.buttonDisabled.toString() : 'false');\n  if (args.icon) {\n    el.setAttribute('icon', args.icon);\n  }\n\n  el.addEventListener('toggleClicked', args.toggleClicked);\n\n  container.appendChild(el);\n  return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  selected: false,\n  buttonDisabled: false,\n};\nDefault.parameters = {\n  docs: {\n    description: {\n      story: 'Estado padrão do botão de favorito (coração outline, cor primária).',\n    },\n  },\n};\n\nexport const Selected = Template.bind({});\nSelected.args = {\n  selected: true,\n  buttonDisabled: false,\n};\nSelected.parameters = {\n  docs: {\n    description: {\n      story: 'Estado selecionado/favoritado (coração preenchido, cor de erro/vermelho).',\n    },\n  },\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  selected: false,\n  buttonDisabled: true,\n};\nDisabled.parameters = {\n  docs: {\n    description: {\n      story: 'Estado desabilitado do botão de favorito.',\n    },\n  },\n};\n\nexport const DisabledSelected = Template.bind({});\nDisabledSelected.args = {\n  selected: true,\n  buttonDisabled: true,\n};\nDisabledSelected.parameters = {\n  docs: {\n    description: {\n      story: 'Estado desabilitado com favorito previamente selecionado.',\n    },\n  },\n};\n\nexport const CustomIcon = Template.bind({});\nCustomIcon.args = {\n  selected: false,\n  buttonDisabled: false,\n  icon: 'star',\n};\nCustomIcon.parameters = {\n  docs: {\n    description: {\n      story: 'Exemplo de botão de toggle com ícone customizado (estrela). Você pode usar qualquer ícone da biblioteca Phosphor Icons informando apenas o nome sem o prefixo.',\n    },\n  },\n};\n\nexport const CustomIconBookmark = Template.bind({});\nCustomIconBookmark.args = {\n  selected: true,\n  buttonDisabled: false,\n  icon: 'bookmark',\n};\nCustomIconBookmark.parameters = {\n  docs: {\n    description: {\n      story: 'Exemplo de botão de toggle com ícone de marcador (bookmark) selecionado.',\n    },\n  },\n};\n\nexport const AllStates = () => {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.gap = '24px';\n  container.style.alignItems = 'center';\n  container.style.padding = '20px';\n\n  const states = [\n    { label: 'Default', selected: false, disabled: false },\n    { label: 'Selected', selected: true, disabled: false },\n    { label: 'Disabled', selected: false, disabled: true },\n    { label: 'Disabled + Selected', selected: true, disabled: true },\n  ];\n\n  states.forEach(state => {\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.flexDirection = 'column';\n    wrapper.style.alignItems = 'center';\n    wrapper.style.gap = '8px';\n\n    const el = document.createElement('sula-toggle');\n    el.setAttribute('selected', state.selected.toString());\n    el.setAttribute('button-disabled', state.disabled.toString());\n\n    const label = document.createElement('span');\n    label.style.fontSize = '12px';\n    label.style.color = '#666';\n    label.textContent = state.label;\n\n    wrapper.appendChild(el);\n    wrapper.appendChild(label);\n    container.appendChild(wrapper);\n  });\n\n  return container;\n};\nAllStates.parameters = {\n  docs: {\n    description: {\n      story: 'Visualização de todos os estados do botão de favorito lado a lado.',\n    },\n  },\n};\n"]}

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

@@ -99,7 +99,7 @@ export class SulaTooltip {
         const hostClass = isParentMode
             ? 'absolute inset-0 pointer-events-none overflow-visible'
             : 'inline-block relative';
-        return (h(Host, { key: '24bf98cfe6268747b1c8a9b641a1ba2949878eb0', class: hostClass }, !isParentMode && (h("div", { key: '0f53fc5dfd2ffcaf787be059146cf60b6b752340', class: this.getIconClasses(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, role: "button", "aria-label": "Tooltip trigger", ref: (el) => (this.triggerEl = el) }, h("sula-icon", { key: '5636e2af603eca17a6450d2c3bdfdb75c3d827d8', class: "flex items-center justify-center w-full h-full leading-[0]", icon: this.icon, customClass: "text-icon-primary text-[18px] leading-none" }))), this.displayText && (h("div", { key: '8a800e9e77323adfda8e11ddbc041bde55f33369', class: this.getHintClasses(), role: "tooltip", ref: (el) => (this.hintEl = el) }, this.displayText, h("div", { key: '073f4ed7af8bb575b55afd13db6595b88a36f227', class: "tooltip-arrow", "data-popper-arrow": true, ref: (el) => (this.arrowEl = el) })))));
+        return (h(Host, { key: 'd956da097b13617092e90a00d2abb209bdcaf046', class: hostClass }, !isParentMode && (h("div", { key: '0e8265bbd03ce89dc5ab88552efc0fa2e325fb32', class: this.getIconClasses(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, role: "button", "aria-label": "Tooltip trigger", ref: (el) => (this.triggerEl = el) }, h("sula-icon", { key: '1680ed4bdba2e29f12d4a2f2c453ce66f5278157', class: "flex items-center justify-center w-full h-full leading-[0]", icon: this.icon, customClass: "text-icon-primary text-[18px] leading-none" }))), this.displayText && (h("div", { key: '97fd111befdd2eb116d09544a03c603205f67b86', class: this.getHintClasses(), role: "tooltip", ref: (el) => (this.hintEl = el) }, this.displayText, h("div", { key: '0a12d3604b4d280d37c3c6b3b27469d93c3889d4', class: "tooltip-arrow", "data-popper-arrow": true, ref: (el) => (this.arrowEl = el) })))));
     }
     static get is() { return "sula-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport type * from './components.d.ts';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport type * from './components.d.ts';\nexport type { SulaToggleEvent } from './components/sula-toggle/model/sula-toggle.model';\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"]}