voa-ds-core 1.0.4

package/dist/collection/components/voa-keybinding/voa-keybinding.stories.js

@@ -0,0 +1,241 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../../Stories/styles/voa-keybinding.external.css";
+/**
+ * Componente Keybinding do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=439-2322
+ *
+ * Subcomponente usado pelo input-addon para exibir atalhos de teclado.
+ */
+const meta = {
+    title: "Componentes/Display/Keybinding",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=439-2322&t=eEPGXVkQRijr3FMg-4',
+        },
+    },
+    render: (args) => html `
+    <voa-keybinding
+      shortcut=${ifDefined(args.shortcut)}
+      .platform=${ifDefined(args.platform)}
+    ></voa-keybinding>
+  `,
+    argTypes: {
+        shortcut: {
+            control: 'text',
+            description: 'A tecla do atalho (ex: "S", "K", "Enter")',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'S' },
+            },
+        },
+        platform: {
+            control: 'select',
+            options: ['mac', 'win'],
+            description: 'Plataforma do atalho',
+            table: {
+                type: { summary: "'mac' | 'win'" },
+                defaultValue: { summary: "'mac'" },
+            },
+        },
+    },
+    args: {
+        shortcut: 'S',
+        platform: 'mac',
+    },
+};
+export default meta;
+export const Playground = {};
+export const Mac = {
+    args: {
+        platform: 'mac',
+        shortcut: 'S',
+    },
+};
+export const Windows = {
+    args: {
+        platform: 'win',
+        shortcut: 'S',
+    },
+};
+export const DifferentKeys = {
+    render: () => {
+        const keys = ['S', 'K', 'Enter', 'Esc', 'Ctrl'];
+        return html `
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        ${keys.map(k => html `<voa-keybinding shortcut=${k} platform="mac"></voa-keybinding>`)}
+      </div>
+    `;
+    },
+};
+// ============================================
+// Usage - Exemplos de Código
+// ============================================
+export const Usage = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## Uso do Componente
+
+Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:
+
+### HTML (Web Components)
+
+\`\`\`html
+<!-- Keybinding Mac -->
+<voa-keybinding 
+  shortcut="S"
+  platform="mac"
+></voa-keybinding>
+
+<!-- Keybinding Windows -->
+<voa-keybinding 
+  shortcut="K"
+  platform="win"
+></voa-keybinding>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaKeybinding } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    <>
+      {/* Keybinding Mac */}
+      <VoaKeybinding
+        shortcut="S"
+        platform="mac"
+      />
+
+      {/* Keybinding Windows */}
+      <VoaKeybinding
+        shortcut="K"
+        platform="win"
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaKeybinding } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Keybinding Mac -->
+    <voa-keybinding
+      [shortcut]="'S'"
+      [platform]="'mac'"
+    ></voa-keybinding>
+
+    <!-- Keybinding Windows -->
+    <voa-keybinding
+      [shortcut]="'K'"
+      [platform]="'win'"
+    ></voa-keybinding>
+  \`
+})
+export class ExampleComponent {}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Keybinding Mac -->
+    <VoaKeybinding
+      shortcut="S"
+      platform="mac"
+    />
+
+    <!-- Keybinding Windows -->
+    <VoaKeybinding
+      shortcut="K"
+      platform="win"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VoaKeybinding } from '@voa-ds/vue';
+</script>
+\`\`\`
+
+## Instalação
+
+### HTML
+\`\`\`bash
+# NPM
+npm install @voa-ds/components
+
+# Importar no HTML
+<script type="module" src="https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js"></script>
+\`\`\`
+
+### React
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/react
+\`\`\`
+
+### Angular
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/angular
+\`\`\`
+
+### Vue
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/vue
+\`\`\`
+        `
+            }
+        }
+    },
+    render: () => {
+        // Criar container que inclui o componente e a documentação
+        const container = document.createElement('div');
+        container.style.cssText = 'padding: 2rem; max-width: 100%;';
+        // Adicionar título
+        const title = document.createElement('h2');
+        title.textContent = 'Uso do Componente';
+        title.style.cssText = 'margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;';
+        container.appendChild(title);
+        // Adicionar descrição
+        const description = document.createElement('p');
+        description.textContent = 'Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:';
+        description.style.cssText = 'margin-bottom: 2rem; color: #666;';
+        container.appendChild(description);
+        // Adicionar componente de exemplo
+        const exampleTitle = document.createElement('h3');
+        exampleTitle.textContent = 'Exemplo Interativo';
+        exampleTitle.style.cssText = 'margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;';
+        container.appendChild(exampleTitle);
+        const el = document.createElement('voa-keybinding');
+        el.setAttribute('shortcut', 'S');
+        el.platform = 'mac';
+        el.style.cssText = 'margin-bottom: 2rem;';
+        container.appendChild(el);
+        // Adicionar nota sobre documentação completa
+        const note = document.createElement('div');
+        note.style.cssText = 'margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;';
+        note.innerHTML = `
+      <p style="margin: 0; font-weight: 600; margin-bottom: 0.5rem;">📚 Documentação Completa</p>
+      <p style="margin: 0; color: #666; font-size: 0.9rem;">
+        Para ver exemplos de código completos para HTML, React, Angular e Vue, 
+        <a href="?path=/docs/components-voakeybinding--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.
+      </p>
+    `;
+        container.appendChild(note);
+        return container;
+    }
+};
+//# sourceMappingURL=voa-keybinding.stories.js.map

package/dist/collection/components/voa-keybinding/voa-keybinding.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-keybinding.stories.js","sourceRoot":"","sources":["../../../src/components/voa-keybinding/voa-keybinding.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport '../../Stories/styles/voa-keybinding.external.css';\r\n\r\n/**\r\n * Componente Keybinding do Voa Design System.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=439-2322\r\n * \r\n * Subcomponente usado pelo input-addon para exibir atalhos de teclado.\r\n */\r\nconst meta = {\r\n  title: \"Componentes/Display/Keybinding\",\r\n  tags: ['autodocs'],\r\n  parameters: {\r\n    design: {\r\n      type: 'figma',\r\n      url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=439-2322&t=eEPGXVkQRijr3FMg-4',\r\n    },\r\n  },\r\n  render: (args) => html`\r\n    <voa-keybinding\r\n      shortcut=${ifDefined(args.shortcut)}\r\n      .platform=${ifDefined(args.platform)}\r\n    ></voa-keybinding>\r\n  `,\r\n  argTypes: {\r\n    shortcut: {\r\n      control: 'text',\r\n      description: 'A tecla do atalho (ex: \"S\", \"K\", \"Enter\")',\r\n      table: {\r\n        type: { summary: 'string' },\r\n        defaultValue: { summary: 'S' },\r\n      },\r\n    },\r\n    platform: {\r\n      control: 'select',\r\n      options: ['mac', 'win'],\r\n      description: 'Plataforma do atalho',\r\n      table: {\r\n        type: { summary: \"'mac' | 'win'\" },\r\n        defaultValue: { summary: \"'mac'\" },\r\n      },\r\n    },\r\n  },\r\n  args: {\r\n    shortcut: 'S',\r\n    platform: 'mac',\r\n  },\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\ntype Story = StoryObj;\r\n\r\nexport const Playground: Story = {};\r\n\r\nexport const Mac: Story = {\r\n  args: {\r\n    platform: 'mac',\r\n    shortcut: 'S',\r\n  },\r\n};\r\n\r\nexport const Windows: Story = {\r\n  args: {\r\n    platform: 'win',\r\n    shortcut: 'S',\r\n  },\r\n};\r\n\r\nexport const DifferentKeys: Story = {\r\n  render: () => {\r\n    const keys = ['S', 'K', 'Enter', 'Esc', 'Ctrl'];\r\n    return html`\r\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n        ${keys.map(k => html`<voa-keybinding shortcut=${k} platform=\"mac\"></voa-keybinding>`) }\r\n      </div>\r\n    `;\r\n  },\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage: Story = {\r\n  parameters: {\r\n    docs: {\r\n      description: {\r\n        story: `\r\n## Uso do Componente\r\n\r\nEste componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:\r\n\r\n### HTML (Web Components)\r\n\r\n\\`\\`\\`html\r\n<!-- Keybinding Mac -->\r\n<voa-keybinding \r\n  shortcut=\"S\"\r\n  platform=\"mac\"\r\n></voa-keybinding>\r\n\r\n<!-- Keybinding Windows -->\r\n<voa-keybinding \r\n  shortcut=\"K\"\r\n  platform=\"win\"\r\n></voa-keybinding>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaKeybinding } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <>\r\n      {/* Keybinding Mac */}\r\n      <VoaKeybinding\r\n        shortcut=\"S\"\r\n        platform=\"mac\"\r\n      />\r\n\r\n      {/* Keybinding Windows */}\r\n      <VoaKeybinding\r\n        shortcut=\"K\"\r\n        platform=\"win\"\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaKeybinding } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Keybinding Mac -->\r\n    <voa-keybinding\r\n      [shortcut]=\"'S'\"\r\n      [platform]=\"'mac'\"\r\n    ></voa-keybinding>\r\n\r\n    <!-- Keybinding Windows -->\r\n    <voa-keybinding\r\n      [shortcut]=\"'K'\"\r\n      [platform]=\"'win'\"\r\n    ></voa-keybinding>\r\n  \\`\r\n})\r\nexport class ExampleComponent {}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <div>\r\n    <!-- Keybinding Mac -->\r\n    <VoaKeybinding\r\n      shortcut=\"S\"\r\n      platform=\"mac\"\r\n    />\r\n\r\n    <!-- Keybinding Windows -->\r\n    <VoaKeybinding\r\n      shortcut=\"K\"\r\n      platform=\"win\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaKeybinding } from '@voa-ds/vue';\r\n</script>\r\n\\`\\`\\`\r\n\r\n## Instalação\r\n\r\n### HTML\r\n\\`\\`\\`bash\r\n# NPM\r\nnpm install @voa-ds/components\r\n\r\n# Importar no HTML\r\n<script type=\"module\" src=\"https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js\"></script>\r\n\\`\\`\\`\r\n\r\n### React\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/react\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/angular\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/vue\r\n\\`\\`\\`\r\n        `\r\n      }\r\n    }\r\n  },\r\n  render: () => {\r\n    // Criar container que inclui o componente e a documentação\r\n    const container = document.createElement('div');\r\n    container.style.cssText = 'padding: 2rem; max-width: 100%;';\r\n    \r\n    // Adicionar título\r\n    const title = document.createElement('h2');\r\n    title.textContent = 'Uso do Componente';\r\n    title.style.cssText = 'margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;';\r\n    container.appendChild(title);\r\n    \r\n    // Adicionar descrição\r\n    const description = document.createElement('p');\r\n    description.textContent = 'Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:';\r\n    description.style.cssText = 'margin-bottom: 2rem; color: #666;';\r\n    container.appendChild(description);\r\n    \r\n    // Adicionar componente de exemplo\r\n    const exampleTitle = document.createElement('h3');\r\n    exampleTitle.textContent = 'Exemplo Interativo';\r\n    exampleTitle.style.cssText = 'margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;';\r\n    container.appendChild(exampleTitle);\r\n    \r\n    const el = document.createElement('voa-keybinding') as HTMLVoaKeybindingElement;\r\n    el.setAttribute('shortcut', 'S');\r\n    el.platform = 'mac';\r\n    el.style.cssText = 'margin-bottom: 2rem;';\r\n    container.appendChild(el);\r\n    \r\n    // Adicionar nota sobre documentação completa\r\n    const note = document.createElement('div');\r\n    note.style.cssText = 'margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;';\r\n    note.innerHTML = `\r\n      <p style=\"margin: 0; font-weight: 600; margin-bottom: 0.5rem;\">📚 Documentação Completa</p>\r\n      <p style=\"margin: 0; color: #666; font-size: 0.9rem;\">\r\n        Para ver exemplos de código completos para HTML, React, Angular e Vue, \r\n        <a href=\"?path=/docs/components-voakeybinding--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.\r\n      </p>\r\n    `;\r\n    container.appendChild(note);\r\n    \r\n    return container;\r\n  }\r\n};\r\n\r\n"]}

package/dist/collection/components/voa-link/link.css

@@ -0,0 +1,9 @@
+.link {
+  color: #007bff;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.link:hover {
+  color: #0056b3;
+}

package/dist/collection/components/voa-link/link.js

@@ -0,0 +1,65 @@
+import { h } from "@stencil/core";
+export class Link {
+    constructor() {
+        this.target = "_self";
+    }
+    render() {
+        return (h("a", { key: 'ae23df31beba64a9a94922b395abde5b3a248fa5', class: "link", href: this.href, target: this.target }, h("slot", { key: '5638e97a3145c8ab9239a8946e7a4d944674e155' })));
+    }
+    static get is() { return "voa-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["link.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "\"_self\""
+            }
+        };
+    }
+}
+//# sourceMappingURL=link.js.map

package/dist/collection/components/voa-link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/voa-link/link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,IAAI;IALjB;QAOU,WAAM,GAAW,OAAO,CAAC;KASlC;IAPC,MAAM;QACJ,OAAO,CACL,0DAAG,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM;YAClD,8DAAa,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-link\",\r\n  styleUrl: \"link.css\",\r\n  shadow: true,\r\n})\r\nexport class Link {\r\n  @Prop() href: string;\r\n  @Prop() target: string = \"_self\";\r\n\r\n  render() {\r\n    return (\r\n      <a class=\"link\" href={this.href} target={this.target}>\r\n        <slot></slot>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/voa-link/link.stories.js

@@ -0,0 +1,21 @@
+import { html } from "lit-html";
+export default {
+    title: "Componentes/Ações/Link",
+    component: "voa-link",
+    argTypes: {
+        href: { control: "text" },
+        target: {
+            control: "select",
+            options: ["_self", "_blank", "_parent", "_top"],
+        },
+    },
+};
+const Template = ({ href, target }) => html `
+  <voa-link href="${href}" target="${target}">Visit Link</voa-link>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    href: "https://www.example.com",
+    target: "_blank",
+};
+//# sourceMappingURL=link.stories.js.map

package/dist/collection/components/voa-link/link.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/components/voa-link/link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,MAAM,EAAE;YACN,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;SAChD;KACF;CACM,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;oBAChC,IAAI,aAAa,MAAM;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,yBAAyB;IAC/B,MAAM,EAAE,QAAQ;CACjB,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta, StoryFn } from \"@storybook/web-components\";\r\n\r\nexport default {\r\n  title: \"Componentes/Ações/Link\",\r\n  component: \"voa-link\",\r\n  argTypes: {\r\n    href: { control: \"text\" },\r\n    target: {\r\n      control: \"select\",\r\n      options: [\"_self\", \"_blank\", \"_parent\", \"_top\"],\r\n    },\r\n  },\r\n} as Meta;\r\n\r\nconst Template: StoryFn = ({ href, target }) => html`\r\n  <voa-link href=\"${href}\" target=\"${target}\">Visit Link</voa-link>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  href: \"https://www.example.com\",\r\n  target: \"_blank\",\r\n};\r\n"]}

package/dist/collection/components/voa-list/list.css

@@ -0,0 +1,14 @@
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.list li {
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.list li:last-child {
+  border-bottom: none;
+}

package/dist/collection/components/voa-list/list.js

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+export class List {
+    constructor() {
+        this.items = [];
+    }
+    render() {
+        return (h("ul", { key: '0018ac5129fa18fede040669ac7fd144018afcb7', class: "list" }, this.items.map((item) => (h("li", null, item)))));
+    }
+    static get is() { return "voa-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+}
+//# sourceMappingURL=list.js.map

package/dist/collection/components/voa-list/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/voa-list/list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,IAAI;IALjB;QAMU,UAAK,GAAa,EAAE,CAAC;KAW9B;IATC,MAAM;QACJ,OAAO,CACL,2DAAI,KAAK,EAAC,MAAM,IACb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,cAAK,IAAI,CAAM,CAChB,CAAC,CACC,CACN,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-list\",\r\n  styleUrl: \"list.css\",\r\n  shadow: true,\r\n})\r\nexport class List {\r\n  @Prop() items: string[] = [];\r\n\r\n  render() {\r\n    return (\r\n      <ul class=\"list\">\r\n        {this.items.map((item) => (\r\n          <li>{item}</li>\r\n        ))}\r\n      </ul>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/voa-list/list.stories.js

@@ -0,0 +1,16 @@
+import { html } from "lit-html";
+export default {
+    title: "Componentes/Dados/List",
+    component: "voa-list",
+    argTypes: {
+        items: { control: { type: "object" } },
+    },
+};
+const Template = ({ items }) => html `
+  <voa-list .items="${items}"></voa-list>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    items: ["Item 1", "Item 2", "Item 3"],
+};
+//# sourceMappingURL=list.stories.js.map

package/dist/collection/components/voa-list/list.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.stories.js","sourceRoot":"","sources":["../../../src/components/voa-list/list.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KACvC;CACM,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;sBACvB,KAAK;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;CACtC,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta, StoryFn } from \"@storybook/web-components\";\r\n\r\nexport default {\r\n  title: \"Componentes/Dados/List\",\r\n  component: \"voa-list\",\r\n  argTypes: {\r\n    items: { control: { type: \"object\" } },\r\n  },\r\n} as Meta;\r\n\r\nconst Template: StoryFn = ({ items }) => html`\r\n  <voa-list .items=\"${items}\"></voa-list>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  items: [\"Item 1\", \"Item 2\", \"Item 3\"],\r\n};\r\n"]}

package/dist/collection/components/voa-modal/modal.css

@@ -0,0 +1,40 @@
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal.open {
+  display: flex;
+}
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  position: relative;
+  z-index: 1001;
+}
+
+.close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 1.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+}

package/dist/collection/components/voa-modal/modal.js

@@ -0,0 +1,55 @@
+import { h } from "@stencil/core";
+export class Modal {
+    constructor() {
+        this.open = false;
+        this.isOpen = this.open;
+        this.closeModal = () => {
+            this.isOpen = false;
+        };
+    }
+    render() {
+        return (h("div", { key: 'c0e105af6a694cb130eb9d1144a4c59e20671713', class: `modal ${this.isOpen ? "open" : ""}` }, h("div", { key: 'd0e513097ba4294a890a012346e43fd57d89b822', class: "overlay", onClick: this.closeModal }), h("div", { key: '324eedf9a9b03c21316a57ca468ccd6a78b69cf2', class: "content" }, h("button", { key: 'e631ad6af68a96d6fcd10815694a053f47786450', class: "close", onClick: this.closeModal }, "\u00D7"), h("slot", { key: '12fd5b949f993855dc866904a13c5acc870f215c' }))));
+    }
+    static get is() { return "voa-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+}
+//# sourceMappingURL=modal.js.map

package/dist/collection/components/voa-modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/voa-modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,KAAK;IALlB;QAMU,SAAI,GAAY,KAAK,CAAC;QACrB,WAAM,GAAY,IAAI,CAAC,IAAI,CAAC;QAErC,eAAU,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC,CAAC;KAeH;IAbC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9C,4DAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,GAAQ;YACrD,4DAAK,KAAK,EAAC,SAAS;gBAClB,+DAAQ,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,aAErC;gBACT,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-modal\",\r\n  styleUrl: \"modal.css\",\r\n  shadow: true,\r\n})\r\nexport class Modal {\r\n  @Prop() open: boolean = false;\r\n  @State() isOpen: boolean = this.open;\r\n\r\n  closeModal = () => {\r\n    this.isOpen = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div class={`modal ${this.isOpen ? \"open\" : \"\"}`}>\r\n        <div class=\"overlay\" onClick={this.closeModal}></div>\r\n        <div class=\"content\">\r\n          <button class=\"close\" onClick={this.closeModal}>\r\n            &times;\r\n          </button>\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/voa-modal/modal.stories.js

@@ -0,0 +1,18 @@
+import { html } from "lit-html";
+export default {
+    title: "Componentes/Layout/Modal",
+    component: "voa-modal",
+    argTypes: {
+        open: { control: "boolean" },
+    },
+};
+const Template = ({ open }) => html `
+  <voa-modal .open="${open}">
+    <p>Modal content goes here.</p>
+  </voa-modal>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    open: false,
+};
+//# sourceMappingURL=modal.stories.js.map

package/dist/collection/components/voa-modal/modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.stories.js","sourceRoot":"","sources":["../../../src/components/voa-modal/modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC7B;CACM,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;sBACtB,IAAI;;;CAGzB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,KAAK;CACZ,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta, StoryFn } from \"@storybook/web-components\";\r\n\r\nexport default {\r\n  title: \"Componentes/Layout/Modal\",\r\n  component: \"voa-modal\",\r\n  argTypes: {\r\n    open: { control: \"boolean\" },\r\n  },\r\n} as Meta;\r\n\r\nconst Template: StoryFn = ({ open }) => html`\r\n  <voa-modal .open=\"${open}\">\r\n    <p>Modal content goes here.</p>\r\n  </voa-modal>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  open: false,\r\n};\r\n"]}

package/dist/collection/components/voa-option/voa-option.css

@@ -0,0 +1,55 @@
+/* UNSTYLED PATTERN: Structural CSS only */
+
+:host {
+  display: inline-block;
+  box-sizing: border-box;
+  contain: content;
+}
+
+:host(:focus) {
+  outline: none; /* Focus ring handled on part(base) via external CSS */
+}
+
+.option-container {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+  gap: 0;
+  width: 100%;
+  cursor: pointer;
+}
+
+.option-container.option-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* The Radio Circle Container */
+.option-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  
+  /* DEFAULT STRUCTURAL SIZE */
+  width: 20px;
+  height: 20px;
+}
+
+/* The Inner Dot */
+.option-indicator-dot {
+  display: block;
+  position: absolute;
+  /* Size must be set by external CSS or it is invisible */
+}
+
+.option-label {
+  display: inline-block;
+  box-sizing: border-box;
+  flex: 1;
+}