Update input elments to support popovers

src/lib/components/drop.svelte

@@ -13,6 +13,7 @@
  export let noStyle = false;
  export let fullWidth = false;
  export let fixed = false;
+ export let display = 'block';
 
  const dispatch = createEventDispatcher<{
  blur: undefined;
@@ -100,7 +101,11 @@
 
 <svelte:window on:click={onBlur} on:keydown={onKeyDown} />
 
-<div class:drop-wrapper={!noStyle} class:u-cross-child-start={childStart} bind:this={element}>
+<div
+ class:drop-wrapper={!noStyle}
+ class:u-cross-child-start={childStart}
+ bind:this={element}
+ style:display>
  <slot />
 </div>
 

src/lib/elements/forms/inputDomain.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
  import { onMount } from 'svelte';
  import { FormItem, Helper, Label } from '.';
+ import { Drop } from '$lib/components';
 
  export let label: string;
  export let showLabel = true;
@@ -19,6 +20,7 @@
 
  let element: HTMLInputElement;
  let error: string;
+ let show = false;
 
  onMount(() => {
  if (element && autofocus) {
@@ -48,7 +50,26 @@
 
 <FormItem>
  <Label {required} hide={!showLabel} for={id}>
- {label}
+ {label}{#if $$slots.popover}
+ <Drop bind:show display="inline-block">
+ <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+ &nbsp;<button
+ type="button"
+ on:click={() => (show = !show)}
+ class="tooltip"
+ aria-label="input tooltip">
+ <span
+ class="icon-info"
+ aria-hidden="true"
+ style="font-size: var(--icon-size-small)" />
+ </button>
+ <svelte:fragment slot="list">
+ <div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
+ <slot name="popover" />
+ </div>
+ </svelte:fragment>
+ </Drop>
+ {/if}
  </Label>
 
  <div class="input-text-wrapper">

src/lib/elements/forms/inputEmail.svelte

@@ -2,6 +2,7 @@
  import { onMount } from 'svelte';
  import { FormItem, Helper, Label } from '.';
  import NullCheckbox from './nullCheckbox.svelte';
+ import { Drop } from '$lib/components';
 
  export let label: string;
  export let optionalText: string | undefined = undefined;
@@ -19,6 +20,7 @@
 
  let element: HTMLInputElement;
  let error: string;
+ let show = false;
 
  onMount(() => {
  if (element && autofocus) {
@@ -57,7 +59,26 @@
 
 <FormItem>
  <Label {required} {optionalText} {tooltip} hide={!showLabel} for={id}>
- {label}
+ {label}{#if $$slots.popover}
+ <Drop bind:show display="inline-block">
+ <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+ &nbsp;<button
+ type="button"
+ on:click={() => (show = !show)}
+ class="tooltip"
+ aria-label="input tooltip">
+ <span
+ class="icon-info"
+ aria-hidden="true"
+ style="font-size: var(--icon-size-small)" />
+ </button>
+ <svelte:fragment slot="list">
+ <div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
+ <slot name="popover" />
+ </div>
+ </svelte:fragment>
+ </Drop>
+ {/if}
  </Label>
 
  <div

src/lib/elements/forms/inputFile.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
- import { Trim } from '$lib/components';
+ import { Drop, Trim } from '$lib/components';
  import { humanFileSize } from '$lib/helpers/sizeConvertion';
  import { onMount } from 'svelte';
  import { Helper, Label } from '.';
@@ -16,6 +16,7 @@
 
  let input: HTMLInputElement;
  let hovering = false;
+ let show = false;
 
  function setFiles(value: FileList) {
  if (!value) return;
@@ -94,7 +95,26 @@
 <div>
  {#if label}
  <Label {required} {optionalText} {tooltip} hide={!label}>
- {label}
+ {label}{#if $$slots.popover}
+ <Drop bind:show display="inline-block">
+ <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+ &nbsp;<button
+ type="button"
+ on:click={() => (show = !show)}
+ class="tooltip"
+ aria-label="input tooltip">
+ <span
+ class="icon-info"
+ aria-hidden="true"
+ style="font-size: var(--icon-size-small)" />
+ </button>
+ <svelte:fragment slot="list">
+ <div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
+ <slot name="popover" />
+ </div>
+ </svelte:fragment>
+ </Drop>
+ {/if}
  </Label>
  {/if}
  <div

src/lib/elements/forms/inputText.svelte

@@ -3,6 +3,7 @@
  import { FormItem, FormItemPart, Helper, Label } from '.';
  import NullCheckbox from './nullCheckbox.svelte';
  import TextCounter from './textCounter.svelte';
+ import { Drop } from '$lib/components';
 
  export let label: string = undefined;
  export let optionalText: string | undefined = undefined;
@@ -25,6 +26,7 @@
 
  let element: HTMLInputElement;
  let error: string;
+ let show = false;
 
  onMount(() => {
  if (element && autofocus) {
@@ -74,7 +76,26 @@
 <svelte:component this={wrapper} {fullWidth}>
  {#if label}
  <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
- {label}
+ {label}{#if $$slots.popover}
+ <Drop bind:show display="inline-block">
+ <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+ &nbsp;<button
+ type="button"
+ on:click={() => (show = !show)}
+ class="tooltip"
+ aria-label="input tooltip">
+ <span
+ class="icon-info"
+ aria-hidden="true"
+ style="font-size: var(--icon-size-small)" />
+ </button>
+ <svelte:fragment slot="list">
+ <div class="dropped card u-max-width-250" style="--p-card-padding: .75rem">
+ <slot name="popover" />
+ </div>
+ </svelte:fragment>
+ </Drop>
+ {/if}
  </Label>
  {/if}