@stubber/form-fields 2.2.6 → 3.0.0

package/dist/form-fields/{sub → fields}/voicenote-field.svelte

@@ -1,20 +1,31 @@
 <script context="module">import {} from "../interfaces";
 </script>
 
-<script>import { Button } from "@stubber/ui/button";
-import { snakeCase } from "lodash-es";
+<script>import { snakeCase } from "lodash-es";
+import { getContext, onDestroy } from "svelte";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
+import UploadStatus from "../UploadStatus.svelte";
 import {
   append_attachment,
   remove_attachment,
   uploadFiles
 } from "../fileserver";
+import { STYLES_CONTEXT, classNames } from "../styles";
 export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
 const file_name_prefix = snakeCase($fieldStore.label || "voicenote");
 let mediaRecorder = null;
 let media = [];
 let fileList = [];
+onDestroy(() => {
+  if (mediaRecorder?.state === "recording") {
+    mediaRecorder.onstop = null;
+    mediaRecorder.stop();
+  }
+  mediaRecorder?.stream.getTracks().forEach((track) => track.stop());
+  fileList.forEach((item) => item.previewUrl && URL.revokeObjectURL(item.previewUrl));
+});
 $: isRecording = mediaRecorder?.state === "recording";
 $: buttonLabel = isRecording ? "Stop Recording" : "Start Recording";
 let max_files_param = $fieldStore.params?.max_files;
@@ -41,19 +52,21 @@ async function startRecording() {
     let filename = `${file_name_prefix}_${id}.ogg`;
     let blob = new Blob(media, { type: "audio/ogg; codecs=opus" });
     let file = new File([blob], filename, { type: "audio/ogg; codecs=opus" });
-    uploadFile(file, blob, filename);
+    uploadFile(file, blob, filename, URL.createObjectURL(blob));
     media = [];
+    mediaRecorder?.stream.getTracks().forEach((track) => track.stop());
     mediaRecorder = null;
   };
   mediaRecorder.start();
 }
-async function uploadFile(file, blob, filename) {
+async function uploadFile(file, blob, filename, previewUrl) {
   fileList = [
     ...fileList,
     {
       file,
       blob,
       filename,
+      previewUrl,
       is_uploaded: false,
       is_failed: false
     }
@@ -112,54 +125,112 @@ function stopRecording() {
 }
 function removeFile(item) {
   fileList = fileList.filter((f) => f !== item);
+  if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
   remove_attachment(item.fileuuid, $fieldStore.attachmentsStore);
 }
 </script>
 
-<FieldLabel {fieldStore} />
-<div class="flex flex-col items-start gap-2">
-  <Button variant={isRecording ? "destructive" : "default"} on:click={toggleRecording}>
-    {#if isRecording}
-      <i class="fa-solid fa-microphone-slash" />
-    {:else}
-      <i class="fa-solid fa-microphone" />
-    {/if}
-    {buttonLabel}
-  </Button>
-  <div class="flex w-full flex-col gap-1">
-    {#each fileList as item}
-      <div class="flex w-full flex-row items-center gap-1">
-        <div class="flex h-6 w-6 shrink-0 items-center justify-center">
-          {#if item.is_uploaded}
-            <i class="fa fa-check text-success-500" />
-          {:else if item.is_failed}
-            <i class="fa-regular fa-triangle-exclamation text-danger-400" />
+<div class="voicenote-field">
+  <FieldLabel {fieldStore} />
+  <div
+    class="voicenote-control"
+    class:voicenote-control-invalid={$fieldStore.validation_result?.type === "error"}
+    aria-invalid={$fieldStore.validation_result?.type === "error" ? true : undefined}
+  >
+    <div class="voicenote-list" aria-live="polite">
+      {#each fileList as item}
+        <div class={classNames("voicenote-item", $styles.uploadItem)}>
+          <UploadStatus
+            status={item.is_uploaded ? "uploaded" : item.is_failed ? "failed" : "uploading"}
+          />
+          {#if item.previewUrl}
+            <audio class="voicenote-preview" controls src={item.previewUrl}>
+              <track kind="captions" />
+            </audio>
           {:else}
-            <i class="fa fa-pulse fa-spinner text-surface-500" />
+            <p class="voicenote-filename">{item?.filename}</p>
           {/if}
+          <button
+            type="button"
+            class={classNames("voicenote-remove", $styles.button)}
+            data-variant="destructive"
+            data-size="icon"
+            aria-label="Remove {item.filename}"
+            on:click={() => removeFile(item)}
+          >
+            <span aria-hidden="true">×</span>
+          </button>
         </div>
-        {#if item?.blob}
-          <div class="w-full shrink p-2">
-            <div class="overflow-hidden">
-              <audio class="w-full" controls src={window.URL.createObjectURL(item.blob)} />
-            </div>
-          </div>
-        {:else}
-          <div class="w-full shrink truncate rounded-sm border border-surface-200 py-1 pl-2">
-            <p class="text-fluid-md text-surface-800">
-              {item?.filename}
-            </p>
-          </div>
-        {/if}
-        <Button
-          variant="destructive"
-          class="h-6 w-6 shrink-0 p-0"
-          on:click={() => removeFile(item)}
-        >
-          <i class="fa-solid fa-2xs fa-x" />
-        </Button>
-      </div>
-    {/each}
+      {/each}
+    </div>
+    <button
+      id={$fieldStore.id}
+      type="button"
+      class={classNames("voicenote-record", $styles.button)}
+      data-variant="primary"
+      class:voicenote-record-active={isRecording}
+      aria-pressed={isRecording}
+      aria-describedby="message-{$fieldStore.id}"
+      on:click={toggleRecording}
+    >
+      <span class="voicenote-icon" aria-hidden="true">
+        {isRecording ? "■" : "●"}
+      </span>
+      {buttonLabel}
+    </button>
   </div>
+  <FieldMessage {fieldStore} />
 </div>
-<FieldMessage {fieldStore} />
+
+<style>
+  .voicenote-field,
+  .voicenote-control,
+  .voicenote-list {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .voicenote-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .voicenote-control {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  :where(.voicenote-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    padding: var(--form-upload-item-padding, 0.625rem 0.75rem);
+    border: var(--form-upload-item-border, 1px solid #e2e8f0);
+    border-radius: var(--form-upload-item-radius, 0.5rem);
+    background: var(--form-upload-item-background, #fff);
+  }
+
+  .voicenote-preview,
+  .voicenote-filename {
+    flex: 1;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .voicenote-filename {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.voicenote-record) {
+    align-self: flex-start;
+  }
+
+  :where(.voicenote-remove) {
+    flex: none;
+  }
+</style>

package/dist/form-fields/file_creation_options.d.ts

@@ -1,4 +1,4 @@
 import type { IInitialForm } from "./interfaces";
-import type { ISectionField } from "./sub/section-field.svelte";
+import type { ISectionField } from "./fields/section-field.svelte";
 export declare const file_creation_options_field_spec: ISectionField;
 export declare const basic_files_field_param_spec: IInitialForm;

package/dist/form-fields/form-field.svelte

@@ -30,7 +30,14 @@ const handle_field_type_change = (new_fieldtype) => {
 </script>
 
 {#if !$fieldStore.hidden}
-  <div class="w-full">
+  <div class="formField">
     <svelte:component this={component} {fieldStore} />
   </div>
 {/if}
+
+<style>
+  .formField {
+    min-width: 0;
+    width: 100%;
+  }
+</style>

package/dist/form-fields/icons/ChevronDownIcon.svelte

@@ -0,0 +1,21 @@
+<script>export let size = 16;
+export let strokeWidth = 2;
+export let title = void 0;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden={title ? undefined : "true"}
+  role={title ? "img" : undefined}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="m6 9 6 6 6-6" />
+</svg>

package/dist/form-fields/icons/ChevronDownIcon.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | string;
+        strokeWidth?: number;
+        title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ChevronDownIconProps = typeof __propDef.props;
+export type ChevronDownIconEvents = typeof __propDef.events;
+export type ChevronDownIconSlots = typeof __propDef.slots;
+export default class ChevronDownIcon extends SvelteComponent<ChevronDownIconProps, ChevronDownIconEvents, ChevronDownIconSlots> {
+}
+export {};

package/dist/form-fields/icons/QrCodeScannerIcon.svelte

@@ -0,0 +1,25 @@
+<script>export let size = 18;
+export let strokeWidth = 1.75;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+  <path d="M16 3h3a2 2 0 0 1 2 2v3" />
+  <path d="M21 16v3a2 2 0 0 1-2 2h-3" />
+  <path d="M8 21H5a2 2 0 0 1-2-2v-3" />
+  <rect x="7" y="7" width="3" height="3" />
+  <rect x="14" y="7" width="3" height="3" />
+  <rect x="7" y="14" width="3" height="3" />
+  <path d="M14 14h1v1h2v2h-3v-3Z" />
+</svg>

package/dist/form-fields/icons/QrCodeScannerIcon.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | string;
+        strokeWidth?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type QrCodeScannerIconProps = typeof __propDef.props;
+export type QrCodeScannerIconEvents = typeof __propDef.events;
+export type QrCodeScannerIconSlots = typeof __propDef.slots;
+export default class QrCodeScannerIcon extends SvelteComponent<QrCodeScannerIconProps, QrCodeScannerIconEvents, QrCodeScannerIconSlots> {
+}
+export {};

package/dist/form-fields/icons/ScreenRecordingIcon.svelte

@@ -0,0 +1,21 @@
+<script>export let size = 16;
+export let strokeWidth = 2;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <rect x="3" y="4" width="18" height="14" rx="2" />
+  <path d="M8 22h8" />
+  <path d="M12 18v4" />
+  <circle cx="12" cy="11" r="3" />
+</svg>

package/dist/form-fields/icons/ScreenRecordingIcon.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | string;
+        strokeWidth?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ScreenRecordingIconProps = typeof __propDef.props;
+export type ScreenRecordingIconEvents = typeof __propDef.events;
+export type ScreenRecordingIconSlots = typeof __propDef.slots;
+export default class ScreenRecordingIcon extends SvelteComponent<ScreenRecordingIconProps, ScreenRecordingIconEvents, ScreenRecordingIconSlots> {
+}
+export {};

package/dist/form-fields/icons/ScreenshotIcon.svelte

@@ -0,0 +1,22 @@
+<script>export let size = 16;
+export let strokeWidth = 2;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <path d="M4 8V6a2 2 0 0 1 2-2h2" />
+  <path d="M16 4h2a2 2 0 0 1 2 2v2" />
+  <path d="M20 16v2a2 2 0 0 1-2 2h-2" />
+  <path d="M8 20H6a2 2 0 0 1-2-2v-2" />
+  <circle cx="12" cy="12" r="3" />
+</svg>

package/dist/form-fields/icons/ScreenshotIcon.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | string;
+        strokeWidth?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ScreenshotIconProps = typeof __propDef.props;
+export type ScreenshotIconEvents = typeof __propDef.events;
+export type ScreenshotIconSlots = typeof __propDef.slots;
+export default class ScreenshotIcon extends SvelteComponent<ScreenshotIconProps, ScreenshotIconEvents, ScreenshotIconSlots> {
+}
+export {};

package/dist/form-fields/index.d.ts

@@ -1,3 +1,7 @@
 import Form from "./Form.svelte";
-export { Form };
+import Autocomplete from "./Autocomplete.svelte";
+import ChevronDownIcon from "./icons/ChevronDownIcon.svelte";
+export { Autocomplete, ChevronDownIcon, Form };
+export type { AutocompleteOption } from "./Autocomplete.svelte";
 export type { IFormDependencies, IInitialForm } from "./interfaces";
+export type { FormFieldStyles } from "./styles";

package/dist/form-fields/index.js

@@ -1,2 +1,4 @@
 import Form from "./Form.svelte";
-export { Form };
+import Autocomplete from "./Autocomplete.svelte";
+import ChevronDownIcon from "./icons/ChevronDownIcon.svelte";
+export { Autocomplete, ChevronDownIcon, Form };

package/dist/form-fields/interfaces.d.ts

@@ -1,69 +1,69 @@
 import type { Socket } from "socket.io-client";
 import type { Writable } from "svelte/store";
 import type { UploadedFile } from "./fileserver";
-import type { IArrayBuilderField } from "./sub/array-builder-field.svelte";
-import ArrayBuilderField from "./sub/array-builder-field.svelte";
-import type { ICheckboxAutocompleteField } from "./sub/checkbox-autocomplete.svelte";
-import CheckboxAutocomplete from "./sub/checkbox-autocomplete.svelte";
-import type { ICheckboxField } from "./sub/checkbox-field.svelte";
-import CheckboxField from "./sub/checkbox-field.svelte";
-import type { ICodeField } from "./sub/code-field.svelte";
-import CodeField from "./sub/code-field.svelte";
-import type { IContactSelectorField } from "./sub/contact-selector-field.svelte";
-import ContactSelectorField from "./sub/contact-selector-field.svelte";
-import type { ICurrencyField } from "./sub/currency-field.svelte";
-import CurrencyField from "./sub/currency-field.svelte";
-import DataIndicationField, { type IDataIndicationField } from "./sub/data-indication-field.svelte";
-import type { IDateField } from "./sub/date-field.svelte";
-import DateField from "./sub/date-field.svelte";
-import type { IDateTimeField } from "./sub/date-time-field.svelte";
-import DateTimeField from "./sub/date-time-field.svelte";
-import type { IEmailField } from "./sub/email-field.svelte";
-import EmailField from "./sub/email-field.svelte";
-import FieldBuilderField, { type IFieldBuilderField } from "./sub/field-builder-field.svelte";
-import FileField, { type IFileField } from "./sub/file-field.svelte";
-import type { IGridField } from "./sub/grid-field.svelte";
-import GridField from "./sub/grid-field.svelte";
-import HeadingField, { type IHeadingField } from "./sub/heading-field.svelte";
-import HiddenField, { type IHiddenField } from "./sub/hidden-field.svelte";
-import type { IHiddenLocationField } from "./sub/hidden-location-field.svelte";
-import HiddenLocationField from "./sub/hidden-location-field.svelte";
-import HtmlField, { type IHTMLField } from "./sub/html-field.svelte";
-import JSONEditorField, { type IJSONEditorField } from "./sub/jsoneditor-field.svelte";
-import type { IMapField } from "./sub/map-field.svelte";
-import MapField from "./sub/map-field.svelte";
-import type { IMultiCheckboxField } from "./sub/multi-checkbox-field.svelte";
-import MultiCheckboxField from "./sub/multi-checkbox-field.svelte";
-import type { IMultistepField } from "./sub/multistep-field.svelte";
-import MultistepField from "./sub/multistep-field.svelte";
-import NoteField, { type INoteField } from "./sub/note-field.svelte";
-import type { INumberField } from "./sub/number-field.svelte";
-import NumberField from "./sub/number-field.svelte";
-import ObjectBuilderField, { type IObjectBuilderField } from "./sub/object-builder-field.svelte";
-import QrCodeScannerField, { type IQRCodeScannerField } from "./sub/qr-code-scanner-field.svelte";
-import type { IRadioField } from "./sub/radio-field.svelte";
-import RadioField from "./sub/radio-field.svelte";
-import type { IScreenRecorderField } from "./sub/screenrecorder-field.svelte";
-import ScreenrecorderField from "./sub/screenrecorder-field.svelte";
-import type { IScreenshotField } from "./sub/screenshot-field.svelte";
-import ScreenshotField from "./sub/screenshot-field.svelte";
-import ScrollAndReadDisplayField, { type IScrollAndReadDisplayField } from "./sub/scroll-and-read-display-field.svelte";
-import type { ISectionField } from "./sub/section-field.svelte";
-import SectionField from "./sub/section-field.svelte";
-import type { ISelectField } from "./sub/select-field.svelte";
-import SelectField from "./sub/select-field.svelte";
-import SelectresourceField, { type ISelectResourceField } from "./sub/selectresource-field.svelte";
-import SignatureField, { type ISignatureField } from "./sub/signature-field.svelte";
-import type { ISliderField } from "./sub/slider-field.svelte";
-import SliderField from "./sub/slider-field.svelte";
-import type { ISmartTextField } from "./sub/smart-text-field.svelte";
-import SmartTextField from "./sub/smart-text-field.svelte";
-import type { ITelephoneField } from "./sub/telephone-field.svelte";
-import TelephoneField from "./sub/telephone-field.svelte";
-import type { ITextField } from "./sub/text-field.svelte";
-import TextField from "./sub/text-field.svelte";
-import type { IVoicenoteField } from "./sub/voicenote-field.svelte";
-import VoicenoteField from "./sub/voicenote-field.svelte";
+import type { IArrayBuilderField } from "./fields/array-builder-field.svelte";
+import ArrayBuilderField from "./fields/array-builder-field.svelte";
+import type { ICheckboxAutocompleteField } from "./fields/checkbox-autocomplete.svelte";
+import CheckboxAutocomplete from "./fields/checkbox-autocomplete.svelte";
+import type { ICheckboxField } from "./fields/checkbox-field.svelte";
+import CheckboxField from "./fields/checkbox-field.svelte";
+import type { ICodeField } from "./fields/code-field.svelte";
+import CodeField from "./fields/code-field.svelte";
+import type { IContactSelectorField } from "./fields/contact-selector-field.svelte";
+import ContactSelectorField from "./fields/contact-selector-field.svelte";
+import type { ICurrencyField } from "./fields/currency-field.svelte";
+import CurrencyField from "./fields/currency-field.svelte";
+import DataIndicationField, { type IDataIndicationField } from "./fields/data-indication-field.svelte";
+import type { IDateField } from "./fields/date-field.svelte";
+import DateField from "./fields/date-field.svelte";
+import type { IDateTimeField } from "./fields/date-time-field.svelte";
+import DateTimeField from "./fields/date-time-field.svelte";
+import type { IEmailField } from "./fields/email-field.svelte";
+import EmailField from "./fields/email-field.svelte";
+import FieldBuilderField, { type IFieldBuilderField } from "./fields/field-builder-field.svelte";
+import FileField, { type IFileField } from "./fields/file-field.svelte";
+import type { IGridField } from "./fields/grid-field.svelte";
+import GridField from "./fields/grid-field.svelte";
+import HeadingField, { type IHeadingField } from "./fields/heading-field.svelte";
+import HiddenField, { type IHiddenField } from "./fields/hidden-field.svelte";
+import type { IHiddenLocationField } from "./fields/hidden-location-field.svelte";
+import HiddenLocationField from "./fields/hidden-location-field.svelte";
+import HtmlField, { type IHTMLField } from "./fields/html-field.svelte";
+import JSONEditorField, { type IJSONEditorField } from "./fields/jsoneditor-field.svelte";
+import type { IMapField } from "./fields/map-field.svelte";
+import MapField from "./fields/map-field.svelte";
+import type { IMultiCheckboxField } from "./fields/multi-checkbox-field.svelte";
+import MultiCheckboxField from "./fields/multi-checkbox-field.svelte";
+import type { IMultistepField } from "./fields/multistep-field.svelte";
+import MultistepField from "./fields/multistep-field.svelte";
+import NoteField, { type INoteField } from "./fields/note-field.svelte";
+import type { INumberField } from "./fields/number-field.svelte";
+import NumberField from "./fields/number-field.svelte";
+import ObjectBuilderField, { type IObjectBuilderField } from "./fields/object-builder-field.svelte";
+import QrCodeScannerField, { type IQRCodeScannerField } from "./fields/qr-code-scanner-field.svelte";
+import type { IRadioField } from "./fields/radio-field.svelte";
+import RadioField from "./fields/radio-field.svelte";
+import type { IScreenRecorderField } from "./fields/screenrecorder-field.svelte";
+import ScreenrecorderField from "./fields/screenrecorder-field.svelte";
+import type { IScreenshotField } from "./fields/screenshot-field.svelte";
+import ScreenshotField from "./fields/screenshot-field.svelte";
+import ScrollAndReadDisplayField, { type IScrollAndReadDisplayField } from "./fields/scroll-and-read-display-field.svelte";
+import type { ISectionField } from "./fields/section-field.svelte";
+import SectionField from "./fields/section-field.svelte";
+import type { ISelectField } from "./fields/select-field.svelte";
+import SelectField from "./fields/select-field.svelte";
+import SelectresourceField, { type ISelectResourceField } from "./fields/selectresource-field.svelte";
+import SignatureField, { type ISignatureField } from "./fields/signature-field.svelte";
+import type { ISliderField } from "./fields/slider-field.svelte";
+import SliderField from "./fields/slider-field.svelte";
+import type { ISmartTextField } from "./fields/smart-text-field.svelte";
+import SmartTextField from "./fields/smart-text-field.svelte";
+import type { ITelephoneField } from "./fields/telephone-field.svelte";
+import TelephoneField from "./fields/telephone-field.svelte";
+import type { ITextField } from "./fields/text-field.svelte";
+import TextField from "./fields/text-field.svelte";
+import type { IVoicenoteField } from "./fields/voicenote-field.svelte";
+import VoicenoteField from "./fields/voicenote-field.svelte";
 export interface IBaseField<TParams> {
     __key?: string;
     name?: string;