voa-ds-core 1.0.3

package/dist/collection/components/voa-text-area/voa-text-area.stories.js

@@ -0,0 +1,390 @@
+import { html } from "lit";
+import "../../Stories/styles/voa-text-area.external.css";
+const meta = {
+    title: "Componentes/Formulários/Text Area",
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        disabled: { control: 'boolean' },
+        readonly: { control: 'boolean' },
+        required: { control: 'boolean' },
+        hasError: { control: 'boolean' },
+        errorMessage: { control: 'text' },
+        maxLength: { control: 'number' },
+        info: { control: 'boolean' },
+        infoText: { control: 'text' },
+        value: { control: 'text' },
+        rows: { control: 'number' },
+        cols: { control: 'number' },
+    },
+    args: {
+        label: 'Biography',
+        placeholder: 'Tell us a little about yourself...',
+        disabled: false,
+        readonly: false,
+        required: false,
+        hasError: false,
+        errorMessage: 'This field is required',
+        maxLength: 500,
+        info: false,
+        infoText: 'Identificador único',
+        value: '',
+        rows: 4,
+        cols: 20,
+    },
+    component: 'voa-text-area',
+};
+export default meta;
+const render = (args) => html `
+  <voa-text-area
+    .label=${args.label}
+    .placeholder=${args.placeholder}
+    ?disabled=${args.disabled}
+    ?readonly=${args.readonly}
+    ?required=${args.required}
+    ?hasError=${args.hasError}
+    .errorMessage=${args.errorMessage}
+    .maxLength=${args.maxLength}
+    ?info=${args.info}
+    .infoText=${args.infoText}
+    .value=${args.value}
+    .rows=${args.rows}
+    .cols=${args.cols}
+    @voaInput=${(e) => console.log('Input:', e.detail)}
+    @voaChange=${(e) => console.log('Change:', e.detail)}
+    @voaFocus=${(e) => console.log('Focus:', e)}
+    @voaBlur=${(e) => console.log('Blur:', e)}
+  ></voa-text-area>
+`;
+export const Default = {
+    render: render
+};
+export const Filled = {
+    args: {
+        value: 'This is some pre-filled content in the textarea.',
+    },
+    render: render
+};
+export const WithMaxLength = {
+    args: {
+        maxLength: 100,
+        placeholder: 'Type up to 100 characters...',
+    },
+    render: render
+};
+export const WithInfoAndMaxLength = {
+    args: {
+        info: true,
+        infoText: 'Please provide a detailed description.',
+        maxLength: 250,
+    },
+    render: render
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+        value: 'This content is disabled.',
+    },
+    render: render
+};
+export const ReadOnly = {
+    args: {
+        readonly: true,
+        value: 'This content is read-only.',
+    },
+    render: render
+};
+export const Required = {
+    args: {
+        required: true,
+        label: 'Required Field',
+    },
+    render: render
+};
+export const WithError = {
+    args: {
+        hasError: true,
+        value: 'Invalid content...',
+        errorMessage: 'Please correct the errors above.',
+    },
+    render: render
+};
+export const CustomSized = {
+    args: {
+        rows: 8,
+        cols: 40,
+        label: 'Large Text Area',
+    },
+    render: render
+};
+// ============================================
+// 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
+<!-- TextArea básico -->
+<voa-text-area
+  label="Biography"
+  placeholder="Tell us a little about yourself..."
+  max-length="500"
+  onvoaInput={(e) => console.log('Input:', e.detail)}
+  onvoaChange={(e) => console.log('Change:', e.detail)}
+></voa-text-area>
+
+<!-- TextArea com erro -->
+<voa-text-area
+  label="Description"
+  placeholder="Enter description..."
+  has-error
+  error-message="This field is required"
+></voa-text-area>
+
+<!-- TextArea com info -->
+<voa-text-area
+  label="Notes"
+  placeholder="Add your notes..."
+  info
+  info-text="This information will be saved"
+  max-length="250"
+></voa-text-area>
+
+<!-- TextArea desabilitado -->
+<voa-text-area
+  label="Disabled Field"
+  value="This content is disabled."
+  disabled
+></voa-text-area>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaTextArea } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [value, setValue] = useState('');
+
+  const handleInput = (e: CustomEvent<string>) => {
+    setValue(e.detail);
+    console.log('Input:', e.detail);
+  };
+
+  const handleChange = (e: CustomEvent<string>) => {
+    console.log('Change:', e.detail);
+  };
+
+  return (
+    <>
+      {/* TextArea básico */}
+      <VoaTextArea
+        label="Biography"
+        placeholder="Tell us a little about yourself..."
+        maxLength={500}
+        value={value}
+        onVoaInput={handleInput}
+        onVoaChange={handleChange}
+      />
+
+      {/* TextArea com erro */}
+      <VoaTextArea
+        label="Description"
+        placeholder="Enter description..."
+        hasError
+        errorMessage="This field is required"
+      />
+
+      {/* TextArea com info */}
+      <VoaTextArea
+        label="Notes"
+        placeholder="Add your notes..."
+        info
+        infoText="This information will be saved"
+        maxLength={250}
+      />
+
+      {/* TextArea desabilitado */}
+      <VoaTextArea
+        label="Disabled Field"
+        value="This content is disabled."
+        disabled
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaTextArea } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- TextArea básico -->
+    <voa-text-area
+      [label]="'Biography'"
+      [placeholder]="'Tell us a little about yourself...'"
+      [maxLength]="500"
+      [value]="value"
+      (voaInput)="handleInput($event)"
+      (voaChange)="handleChange($event)"
+    ></voa-text-area>
+
+    <!-- TextArea com erro -->
+    <voa-text-area
+      [label]="'Description'"
+      [placeholder]="'Enter description...'"
+      [hasError]="true"
+      [errorMessage]="'This field is required'"
+    ></voa-text-area>
+
+    <!-- TextArea com info -->
+    <voa-text-area
+      [label]="'Notes'"
+      [placeholder]="'Add your notes...'"
+      [info]="true"
+      [infoText]="'This information will be saved'"
+      [maxLength]="250"
+    ></voa-text-area>
+
+    <!-- TextArea desabilitado -->
+    <voa-text-area
+      [label]="'Disabled Field'"
+      [value]="'This content is disabled.'"
+      [disabled]="true"
+    ></voa-text-area>
+  \`
+})
+export class ExampleComponent {
+  value = '';
+
+  handleInput(event: CustomEvent<string>) {
+    this.value = event.detail;
+    console.log('Input:', event.detail);
+  }
+
+  handleChange(event: CustomEvent<string>) {
+    console.log('Change:', event.detail);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- TextArea básico -->
+    <VoaTextArea
+      label="Biography"
+      placeholder="Tell us a little about yourself..."
+      :max-length="500"
+      :value="value"
+      @voaInput="handleInput"
+      @voaChange="handleChange"
+    />
+
+    <!-- TextArea com erro -->
+    <VoaTextArea
+      label="Description"
+      placeholder="Enter description..."
+      :has-error="true"
+      error-message="This field is required"
+    />
+
+    <!-- TextArea com info -->
+    <VoaTextArea
+      label="Notes"
+      placeholder="Add your notes..."
+      :info="true"
+      info-text="This information will be saved"
+      :max-length="250"
+    />
+
+    <!-- TextArea desabilitado -->
+    <VoaTextArea
+      label="Disabled Field"
+      value="This content is disabled."
+      :disabled="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VoaTextArea } from '@voa-ds/vue';
+
+const value = ref('');
+
+const handleInput = (event: CustomEvent<string>) => {
+  value.value = event.detail;
+  console.log('Input:', event.detail);
+};
+
+const handleChange = (event: CustomEvent<string>) => {
+  console.log('Change:', event.detail);
+};
+</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: () => html `
+    <div style="padding: 2rem; max-width: 100%;">
+      <h2 style="margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;">Uso do Componente</h2>
+      <p style="margin-bottom: 2rem; color: #666;">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>
+      <h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;">Exemplo Interativo</h3>
+      <voa-text-area
+        label="Biography"
+        placeholder="Tell us a little about yourself..."
+        max-length="500"
+        style="margin-bottom: 2rem; max-width: 400px;"
+      ></voa-text-area>
+      <div style="margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;">
+        <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-voatextarea--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-text-area.stories.js.map

package/dist/collection/components/voa-text-area/voa-text-area.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-text-area.stories.js","sourceRoot":"","sources":["../../../src/components/voa-text-area/voa-text-area.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-text-area.external.css';\r\n\r\nconst meta = {\r\n  title: \"Componentes/Formulários/Text Area\",\r\n  tags: ['autodocs'],\r\n  argTypes: {\r\n    label: { control: 'text' },\r\n    placeholder: { control: 'text' },\r\n    disabled: { control: 'boolean' },\r\n    readonly: { control: 'boolean' },\r\n    required: { control: 'boolean' },\r\n    hasError: { control: 'boolean' },\r\n    errorMessage: { control: 'text' },\r\n    maxLength: { control: 'number' },\r\n    info: { control: 'boolean' },\r\n    infoText: { control: 'text' },\r\n    value: { control: 'text' },\r\n    rows: { control: 'number' },\r\n    cols: { control: 'number' },\r\n  },\r\n  args: {\r\n    label: 'Biography',\r\n    placeholder: 'Tell us a little about yourself...',\r\n    disabled: false,\r\n    readonly: false,\r\n    required: false,\r\n    hasError: false,\r\n    errorMessage: 'This field is required',\r\n    maxLength: 500,\r\n    info: false,\r\n    infoText: 'Identificador único',\r\n    value: '',\r\n    rows: 4,\r\n    cols: 20,\r\n  },\r\n  component: 'voa-text-area',\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\nconst render = (args) => html`\r\n  <voa-text-area\r\n    .label=${args.label}\r\n    .placeholder=${args.placeholder}\r\n    ?disabled=${args.disabled}\r\n    ?readonly=${args.readonly}\r\n    ?required=${args.required}\r\n    ?hasError=${args.hasError}\r\n    .errorMessage=${args.errorMessage}\r\n    .maxLength=${args.maxLength}\r\n    ?info=${args.info}\r\n    .infoText=${args.infoText}\r\n    .value=${args.value}\r\n    .rows=${args.rows}\r\n    .cols=${args.cols}\r\n    @voaInput=${(e: CustomEvent) => console.log('Input:', e.detail)}\r\n    @voaChange=${(e: CustomEvent) => console.log('Change:', e.detail)}\r\n    @voaFocus=${(e: FocusEvent) => console.log('Focus:', e)}\r\n    @voaBlur=${(e: FocusEvent) => console.log('Blur:', e)}\r\n  ></voa-text-area>\r\n`;\r\n\r\nexport const Default: StoryObj = {\r\n  render: render\r\n};\r\n\r\nexport const Filled: StoryObj = {\r\n  args: {\r\n    value: 'This is some pre-filled content in the textarea.',\r\n  },\r\n  render: render\r\n};\r\n\r\nexport const WithMaxLength: StoryObj = {\r\n  args: {\r\n    maxLength: 100,\r\n    placeholder: 'Type up to 100 characters...',\r\n  },\r\n  render: render\r\n};\r\n\r\nexport const WithInfoAndMaxLength: StoryObj = {\r\n  args: {\r\n    info: true,\r\n    infoText: 'Please provide a detailed description.',\r\n    maxLength: 250,\r\n  },\r\n  render: render\r\n};\r\n\r\nexport const Disabled: StoryObj = {\r\n  args: {\r\n    disabled: true,\r\n    value: 'This content is disabled.',\r\n  },\r\n  render: render\r\n};\r\n\r\nexport const ReadOnly: StoryObj = {\r\n  args: {\r\n    readonly: true,\r\n    value: 'This content is read-only.',\r\n  },\r\n  render: render\r\n};\r\n\r\nexport const Required: StoryObj = {\r\n  args: {\r\n    required: true,\r\n    label: 'Required Field',\r\n  },\r\n  render: render\r\n};\r\n\r\nexport const WithError: StoryObj = {\r\n  args: {\r\n    hasError: true,\r\n    value: 'Invalid content...',\r\n    errorMessage: 'Please correct the errors above.',\r\n  },\r\n  render: render\r\n};\r\n\r\nexport const CustomSized: StoryObj = {\r\n  args: {\r\n    rows: 8,\r\n    cols: 40,\r\n    label: 'Large Text Area',\r\n  },\r\n  render: render\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage: StoryObj = {\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<!-- TextArea básico -->\r\n<voa-text-area\r\n  label=\"Biography\"\r\n  placeholder=\"Tell us a little about yourself...\"\r\n  max-length=\"500\"\r\n  onvoaInput={(e) => console.log('Input:', e.detail)}\r\n  onvoaChange={(e) => console.log('Change:', e.detail)}\r\n></voa-text-area>\r\n\r\n<!-- TextArea com erro -->\r\n<voa-text-area\r\n  label=\"Description\"\r\n  placeholder=\"Enter description...\"\r\n  has-error\r\n  error-message=\"This field is required\"\r\n></voa-text-area>\r\n\r\n<!-- TextArea com info -->\r\n<voa-text-area\r\n  label=\"Notes\"\r\n  placeholder=\"Add your notes...\"\r\n  info\r\n  info-text=\"This information will be saved\"\r\n  max-length=\"250\"\r\n></voa-text-area>\r\n\r\n<!-- TextArea desabilitado -->\r\n<voa-text-area\r\n  label=\"Disabled Field\"\r\n  value=\"This content is disabled.\"\r\n  disabled\r\n></voa-text-area>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaTextArea } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MyComponent() {\r\n  const [value, setValue] = useState('');\r\n\r\n  const handleInput = (e: CustomEvent<string>) => {\r\n    setValue(e.detail);\r\n    console.log('Input:', e.detail);\r\n  };\r\n\r\n  const handleChange = (e: CustomEvent<string>) => {\r\n    console.log('Change:', e.detail);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* TextArea básico */}\r\n      <VoaTextArea\r\n        label=\"Biography\"\r\n        placeholder=\"Tell us a little about yourself...\"\r\n        maxLength={500}\r\n        value={value}\r\n        onVoaInput={handleInput}\r\n        onVoaChange={handleChange}\r\n      />\r\n\r\n      {/* TextArea com erro */}\r\n      <VoaTextArea\r\n        label=\"Description\"\r\n        placeholder=\"Enter description...\"\r\n        hasError\r\n        errorMessage=\"This field is required\"\r\n      />\r\n\r\n      {/* TextArea com info */}\r\n      <VoaTextArea\r\n        label=\"Notes\"\r\n        placeholder=\"Add your notes...\"\r\n        info\r\n        infoText=\"This information will be saved\"\r\n        maxLength={250}\r\n      />\r\n\r\n      {/* TextArea desabilitado */}\r\n      <VoaTextArea\r\n        label=\"Disabled Field\"\r\n        value=\"This content is disabled.\"\r\n        disabled\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaTextArea } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- TextArea básico -->\r\n    <voa-text-area\r\n      [label]=\"'Biography'\"\r\n      [placeholder]=\"'Tell us a little about yourself...'\"\r\n      [maxLength]=\"500\"\r\n      [value]=\"value\"\r\n      (voaInput)=\"handleInput($event)\"\r\n      (voaChange)=\"handleChange($event)\"\r\n    ></voa-text-area>\r\n\r\n    <!-- TextArea com erro -->\r\n    <voa-text-area\r\n      [label]=\"'Description'\"\r\n      [placeholder]=\"'Enter description...'\"\r\n      [hasError]=\"true\"\r\n      [errorMessage]=\"'This field is required'\"\r\n    ></voa-text-area>\r\n\r\n    <!-- TextArea com info -->\r\n    <voa-text-area\r\n      [label]=\"'Notes'\"\r\n      [placeholder]=\"'Add your notes...'\"\r\n      [info]=\"true\"\r\n      [infoText]=\"'This information will be saved'\"\r\n      [maxLength]=\"250\"\r\n    ></voa-text-area>\r\n\r\n    <!-- TextArea desabilitado -->\r\n    <voa-text-area\r\n      [label]=\"'Disabled Field'\"\r\n      [value]=\"'This content is disabled.'\"\r\n      [disabled]=\"true\"\r\n    ></voa-text-area>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  value = '';\r\n\r\n  handleInput(event: CustomEvent<string>) {\r\n    this.value = event.detail;\r\n    console.log('Input:', event.detail);\r\n  }\r\n\r\n  handleChange(event: CustomEvent<string>) {\r\n    console.log('Change:', event.detail);\r\n  }\r\n}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <div>\r\n    <!-- TextArea básico -->\r\n    <VoaTextArea\r\n      label=\"Biography\"\r\n      placeholder=\"Tell us a little about yourself...\"\r\n      :max-length=\"500\"\r\n      :value=\"value\"\r\n      @voaInput=\"handleInput\"\r\n      @voaChange=\"handleChange\"\r\n    />\r\n\r\n    <!-- TextArea com erro -->\r\n    <VoaTextArea\r\n      label=\"Description\"\r\n      placeholder=\"Enter description...\"\r\n      :has-error=\"true\"\r\n      error-message=\"This field is required\"\r\n    />\r\n\r\n    <!-- TextArea com info -->\r\n    <VoaTextArea\r\n      label=\"Notes\"\r\n      placeholder=\"Add your notes...\"\r\n      :info=\"true\"\r\n      info-text=\"This information will be saved\"\r\n      :max-length=\"250\"\r\n    />\r\n\r\n    <!-- TextArea desabilitado -->\r\n    <VoaTextArea\r\n      label=\"Disabled Field\"\r\n      value=\"This content is disabled.\"\r\n      :disabled=\"true\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { VoaTextArea } from '@voa-ds/vue';\r\n\r\nconst value = ref('');\r\n\r\nconst handleInput = (event: CustomEvent<string>) => {\r\n  value.value = event.detail;\r\n  console.log('Input:', event.detail);\r\n};\r\n\r\nconst handleChange = (event: CustomEvent<string>) => {\r\n  console.log('Change:', event.detail);\r\n};\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: () => html`\r\n    <div style=\"padding: 2rem; max-width: 100%;\">\r\n      <h2 style=\"margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;\">Uso do Componente</h2>\r\n      <p style=\"margin-bottom: 2rem; color: #666;\">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>\r\n      <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplo Interativo</h3>\r\n      <voa-text-area\r\n        label=\"Biography\"\r\n        placeholder=\"Tell us a little about yourself...\"\r\n        max-length=\"500\"\r\n        style=\"margin-bottom: 2rem; max-width: 400px;\"\r\n      ></voa-text-area>\r\n      <div style=\"margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;\">\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;\">Para ver exemplos de código completos para HTML, React, Angular e Vue, <a href=\"?path=/docs/components-voatextarea--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.</p>\r\n      </div>\r\n    </div>\r\n  `\r\n};"]}

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

@@ -0,0 +1,7 @@
+.timepicker {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  width: 100%;
+}

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

@@ -0,0 +1,42 @@
+import { h } from "@stencil/core";
+export class TimePicker {
+    render() {
+        return h("input", { key: '04a5343c2e052aa3937c8de8c3b89c9e63a6100f', class: "timepicker", type: "time", value: this.value });
+    }
+    static get is() { return "voa-timepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["timepicker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["timepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+}
+//# sourceMappingURL=timepicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timepicker.js","sourceRoot":"","sources":["../../../src/components/voa-timepicker/timepicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,UAAU;IAGrB,MAAM;QACJ,OAAO,8DAAO,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;IACrE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"voa-timepicker\",\r\n  styleUrl: \"timepicker.css\",\r\n  shadow: true,\r\n})\r\nexport class TimePicker {\r\n  @Prop() value: string;\r\n\r\n  render() {\r\n    return <input class=\"timepicker\" type=\"time\" value={this.value} />;\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,16 @@
+import { html } from "lit-html";
+export default {
+    title: "Componentes/Formulários/Time Picker",
+    component: "voa-timepicker",
+    argTypes: {
+        value: { control: "text" },
+    },
+};
+const Template = ({ value }) => html `
+  <voa-timepicker value="${value}"></voa-timepicker>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    value: "12:00",
+};
+//# sourceMappingURL=timepicker.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timepicker.stories.js","sourceRoot":"","sources":["../../../src/components/voa-timepicker/timepicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,eAAe;IACb,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC3B;CACM,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;2BAClB,KAAK;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["import { html } from \"lit-html\";\r\nimport { Meta, StoryFn } from \"@storybook/web-components\";\r\n\r\nexport default {\r\n  title: \"Componentes/Formulários/Time Picker\",\r\n  component: \"voa-timepicker\",\r\n  argTypes: {\r\n    value: { control: \"text\" },\r\n  },\r\n} as Meta;\r\n\r\nconst Template: StoryFn = ({ value }) => html`\r\n  <voa-timepicker value=\"${value}\"></voa-timepicker>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  value: \"12:00\",\r\n};\r\n"]}