@sensefolks/fastpoll 0.1.0

package/dist/types/utils/utils.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Utility functions for sf-fastpoll
+ */
+/**
+ * Sanitize user input to prevent XSS and limit length
+ * @param input The raw user input
+ * @param maxLength Maximum allowed length (default: 500)
+ * @returns Sanitized string
+ */
+export declare function sanitizeInput(input: string, maxLength?: number): string;
+/**
+ * Sanitize email input with email-specific rules
+ * @param email The raw email input
+ * @returns Sanitized email string
+ */
+export declare function sanitizeEmail(email: string): string;
+/**
+ * Sanitize a value based on field type
+ * @param value The raw value
+ * @param inputType The type of input field
+ * @returns Sanitized value
+ */
+export declare function sanitizeByType(value: string, inputType: string): string;
+/**
+ * Interface for respondent detail options
+ */
+interface RespondentDetailOption {
+    value: string;
+    label: string;
+}
+/**
+ * Interface for respondent detail configuration
+ */
+interface RespondentDetail {
+    label: string;
+    value: string;
+    inputType: string;
+    required?: boolean;
+    placeholder?: string;
+    options?: RespondentDetailOption[];
+    defaultValue?: any;
+}
+/**
+ * Check if a survey key is valid UUID
+ * @param key The survey key to validate
+ * @returns True if the key is a valid UUID, false otherwise
+ */
+export declare function isValidKey(key: string | undefined | null): boolean;
+/**
+ * Format error messages for display
+ * @param error The error object or message
+ * @returns A formatted error message string
+ */
+export declare function formatErrorMessage(error: any): string;
+/**
+ * Get field configuration for rendering
+ * @param detail The respondent detail configuration
+ * @param value The current value of the field
+ * @returns Field configuration object
+ */
+export declare function getFieldConfig(detail: RespondentDetail, value: string): {
+    inputType: string;
+    placeholder: string;
+    required: boolean;
+    options: RespondentDetailOption[];
+    defaultValue: any;
+    hasOptions: boolean;
+    selectedValues: string[];
+    fieldValue: string;
+    currentValue: string;
+};
+/**
+ * Browser-compatible helper to add value to comma-separated list
+ * @param currentValue The current comma-separated string
+ * @param valueToAdd The value to add
+ * @returns Updated comma-separated string
+ */
+export declare function addToCommaSeparatedList(currentValue: string, valueToAdd: string): string;
+/**
+ * Browser-compatible helper to remove value from comma-separated list
+ * @param currentValue The current comma-separated string
+ * @param valueToRemove The value to remove
+ * @returns Updated comma-separated string
+ */
+export declare function removeFromCommaSeparatedList(currentValue: string, valueToRemove: string): string;
+export {};

package/loader/cdn.js

@@ -0,0 +1,2 @@
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -0,0 +1,2 @@
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1,2 @@
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,3 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm-es5/loader.js';

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@sensefolks/fastpoll",
+  "version": "0.1.0",
+  "description": "Conduct single or multi-choice polls to understand user opinions in a snap",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/sf-fastpoll/sf-fastpoll.esm.js",
+  "jsdelivr": "dist/sf-fastpoll/sf-fastpoll.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/sf-fastpoll/sf-fastpoll.esm.js",
+      "require": "./dist/sf-fastpoll/sf-fastpoll.cjs.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./sf-fastpoll": {
+      "import": "./dist/components/sf-fastpoll.js",
+      "types": "./dist/components/sf-fastpoll.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/",
+    "loader/",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "build:watch": "stencil build --watch",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test:watch": "stencil test --spec --e2e --watchAll",
+    "test:unit": "stencil test --spec",
+    "test:e2e": "stencil test --e2e",
+    "generate": "stencil generate",
+    "prepublishOnly": "npm run build",
+    "version": "npm run build"
+  },
+  "keywords": [
+    "survey",
+    "poll",
+    "fastpoll",
+    "web-component",
+    "stencil",
+    "custom-element",
+    "feedback",
+    "questionnaire",
+    "form",
+    "accessible",
+    "wcag",
+    "a11y",
+    "sensefolks"
+  ],
+  "author": "SenseFolks <support@sensefolks.com> (https://sensefolks.com)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sensefolks/survey-components.git",
+    "directory": "fastpoll"
+  },
+  "bugs": {
+    "url": "https://github.com/sensefolks/survey-components/issues"
+  },
+  "homepage": "https://sensefolks.com/surveys/fastpoll",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "sideEffects": false,
+  "devDependencies": {
+    "@stencil/core": "^4.27.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.5",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "puppeteer": "^24.3.0"
+  }
+}

package/readme.md

@@ -0,0 +1,239 @@
+# sf-fastpoll
+
+[![npm version](https://img.shields.io/npm/v/@sensefolks/fastpoll.svg)](https://www.npmjs.com/package/@sensefolks/fastpoll)
+[![npm downloads](https://img.shields.io/npm/dm/@sensefolks/fastpoll.svg)](https://www.npmjs.com/package/@sensefolks/fastpoll)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+> Fast poll survey web component for collecting user feedback with single/multiple choice options. WCAG 2.1 AA accessible.
+
+## Features
+
+- 🎯 Single and multiple choice polls
+- 📝 Follow-up questions support
+- ♿ WCAG 2.1 AA accessible
+- ⌨️ Full keyboard navigation
+- 🔊 Screen reader optimized
+- 🎨 Customizable via CSS Parts
+- 📱 Responsive design
+- 🌐 Works with any framework
+
+## Installation
+
+### NPM
+
+```bash
+npm install @sensefolks/fastpoll
+```
+
+### CDN (Script Tag)
+
+```html
+<!-- Modern browsers (ES modules) -->
+<script type="module" src="https://unpkg.com/@sensefolks/fastpoll/dist/sf-fastpoll/sf-fastpoll.esm.js"></script>
+
+<!-- Legacy browsers -->
+<script nomodule src="https://unpkg.com/@sensefolks/fastpoll/dist/sf-fastpoll/sf-fastpoll.js"></script>
+```
+
+Or via jsDelivr:
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@sensefolks/fastpoll/dist/sf-fastpoll/sf-fastpoll.esm.js"></script>
+```
+
+## Usage
+
+### HTML
+
+```html
+<sf-fastpoll survey-key="your-survey-uuid" completion-message="Thank you for your feedback!"> </sf-fastpoll>
+```
+
+### React
+
+```jsx
+import '@sensefolks/fastpoll';
+
+function App() {
+  return <sf-fastpoll survey-key="your-survey-uuid" completion-message="Thank you!"></sf-fastpoll>;
+}
+```
+
+### Vue
+
+```vue
+<template>
+  <sf-fastpoll survey-key="your-survey-uuid" completion-message="Thank you!"> </sf-fastpoll>
+</template>
+
+<script>
+import '@sensefolks/fastpoll';
+export default { name: 'App' };
+</script>
+```
+
+### Angular
+
+```typescript
+// app.module.ts
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@sensefolks/fastpoll';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AppModule {}
+```
+
+```html
+<!-- component.html -->
+<sf-fastpoll survey-key="your-survey-uuid" completion-message="Thank you!"> </sf-fastpoll>
+```
+
+## API
+
+### Properties
+
+| Property            | Attribute            | Type     | Default                          | Description                    |
+| ------------------- | -------------------- | -------- | -------------------------------- | ------------------------------ |
+| `surveyKey`         | `survey-key`         | `string` | -                                | UUID of the survey to load     |
+| `completionMessage` | `completion-message` | `string` | `'Thank you for your response!'` | Message shown after submission |
+
+### CSS Parts
+
+Style the component using CSS Parts:
+
+```css
+sf-fastpoll::part(survey-container) {
+  /* Main container */
+}
+sf-fastpoll::part(heading) {
+  /* Step headings */
+}
+sf-fastpoll::part(choices-container) {
+  /* Poll options container */
+}
+sf-fastpoll::part(choice-option) {
+  /* Individual choice */
+}
+sf-fastpoll::part(button) {
+  /* All buttons */
+}
+sf-fastpoll::part(next-button) {
+  /* Next/Submit button */
+}
+sf-fastpoll::part(back-button) {
+  /* Back button */
+}
+sf-fastpoll::part(error-message) {
+  /* Error messages */
+}
+sf-fastpoll::part(form-field) {
+  /* Form fields */
+}
+sf-fastpoll::part(form-label) {
+  /* Form labels */
+}
+sf-fastpoll::part(input) {
+  /* Input elements */
+}
+```
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Arrow keys, Enter/Space)
+- ARIA labels and live regions for screen readers
+- Focus indicators and high contrast mode support
+- Respects `prefers-reduced-motion`
+
+## Development
+
+### Building
+
+```bash
+# Install dependencies
+npm install
+
+# Build the component
+npm run build
+
+# Build with watch mode (for development)
+npm run build:watch
+
+# Start dev server with hot reload
+npm start
+```
+
+### Testing
+
+```bash
+# Run all tests (unit + e2e)
+npm test
+
+# Run unit tests only
+npm run test:unit
+
+# Run e2e tests only
+npm run test:e2e
+
+# Run tests in watch mode
+npm run test:watch
+```
+
+#### Test Coverage
+
+The component includes 146 tests covering:
+
+- **Utility functions** (68 tests): UUID validation, error formatting, field configuration, comma-separated list operations
+- **Component spec tests** (65 tests): Initialization, error handling, poll steps, navigation, submission, accessibility, form validation
+- **E2E tests** (13 tests): Rendering, shadow DOM, props, styling, accessibility features
+
+### Publishing to NPM
+
+#### Prerequisites
+
+1. Create an NPM account at [npmjs.com](https://www.npmjs.com/signup) if you don't have one
+2. Ensure you have publish access to the `@sensefolks` organization
+
+#### NPM Login
+
+```bash
+# Login to NPM
+npm login
+
+# Verify you're logged in
+npm whoami
+```
+
+#### Publishing Workflow
+
+```bash
+# 1. Build the component
+npm run build
+
+# 2. Run tests
+npm test
+
+# 3. Update version (choose one)
+npm version patch  # for bug fixes (1.0.0 -> 1.0.1)
+npm version minor  # for new features (1.0.0 -> 1.1.0)
+npm version major  # for breaking changes (1.0.0 -> 2.0.0)
+
+# 4. Dry run to verify what will be published
+npm publish --dry-run
+
+# 5. Publish to NPM
+npm publish
+```
+
+## Browser Support
+
+- Chrome 88+
+- Firefox 85+
+- Safari 14+
+- Edge 88+
+- IE11 (with ES5 build)
+
+## License
+
+MIT © [SenseFolks](https://sensefolks.com)