@hkdigital/lib-core 0.3.11 → 0.3.13

package/dist/ui/primitives/inputs/text-input/TextInput.svelte

@@ -1,223 +1,223 @@
-<script>
-  import IconValid from './assets/IconValid.svelte';
-  import IconInvalid from './assets/IconInvalid.svelte';
-
-  import { Star, ExclamationTriangle, CheckCircle } from '@steeze-ui/heroicons';
-
-  import { HkIcon } from '../../icons/index.js';
-
-  import {
-    PRISTINE,
-    DIRTY,
-    FOCUSED,
-    UNFOCUSED,
-    VALID,
-    INVALID,
-    REQUIRED,
-    DISABLED
-  } from '../../../../constants/states/input.js';
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   borderShape?: string,
-   *   classes?: string,
-   *   inputBase?: string,
-   *   inputClasses?: string,
-   *   legendBase?: string,
-   *   legendClasses?: string,
-   *   iconClasses?: string,
-   *   initialValue?: string,
-   *   value?: string,
-   *   type?: 'text' | 'url' | 'email' | 'number',
-   *   pattern?: string,
-   *   required?: boolean,
-   *   title?: string,
-   *   placeholder?: string,
-   *   isValid?: boolean,
-   *   isPristine?: boolean,
-   *   hasFocus?: boolean,
-   *   validate?: (value: string) => string | undefined,
-   *   iconRequired?: import('svelte').Snippet,
-   *   iconValid?: import('svelte').Snippet,
-   *   iconInvalid?: import('svelte').Snippet
-   * } & { [attr: string]: any }}
-   */
-  let {
-    initialValue = '',
-    value = $bindable(''),
-
-    isValid = $bindable(true),
-    isPristine = $bindable(true),
-    hasFocus = $bindable(false),
-
-    // Fieldset
-    base = 'px-10p pb-10p',
-    borderShape = 'border-1p rounded-xs',
-
-    classes = '',
-
-    // Input
-    inputBase = 'w-full outline-none border-none bg-transparent',
-    inputClasses,
-
-    // Legend
-    legendBase,
-    legendClasses,
-
-    // Icon
-    iconBase = 'w-[24px] h-[24px]',
-    iconClasses = '',
-
-    // Input type and built-in validation
-
-    type = 'text',
-    required = false,
-    disabled = false,
-
-    title = '',
-    placeholder = '',
-
-    // legend = 'Invalid',
-    // legendInvalid?
-
-    iconRequired,
-    iconValid,
-    iconInvalid,
-
-    validate,
-
-    ...attrs
-  } = $props();
-
-  let inputRef = $state();
-  let validationMessage = $state('');
-
-  $effect(() => {
-    if (!inputRef) return;
-    validateInput(inputRef, initialValue);
-    value = initialValue;
-  });
-
-  function validateInput(input, currentValue) {
-    input.setCustomValidity('');
-    const isBuiltInValid = input.checkValidity();
-
-    if (isBuiltInValid && validate) {
-      const customError = validate(currentValue);
-      input.setCustomValidity(customError || '');
-    }
-
-    isPristine = currentValue === initialValue;
-    isValid = input.validity.valid;
-    validationMessage = input.validationMessage;
-  }
-
-  function handleInput(event) {
-    validateInput(event.target, event.target.value);
-  }
-
-  // let legendHeight = $state(0);
-
-  // let paddingBottomStyle = $derived.by(() => {
-  //   return `padding-bottom: ${legendHeight / 2}px;`;
-  // });
-
-  let hideLegendStyle = $derived.by(() => {
-    if (isValid && !title) {
-      return 'width: 0;';
-    }
-  });
-
-  let stateClasses = $derived.by(() => {
-    //
-    // Return CSS classes that indicate the component's state
-    //
-    // @see $lib/constants/states
-    //
-    const outArr = [];
-
-    outArr.push(isPristine ? PRISTINE : DIRTY);
-    outArr.push(hasFocus ? FOCUSED : UNFOCUSED);
-    outArr.push(isValid ? VALID : INVALID);
-
-    if (required) {
-      outArr.push(REQUIRED);
-    }
-
-    if (disabled) {
-      outArr.push(DISABLED);
-    }
-
-    return outArr.join(' ');
-  });
-</script>
-
-<!-- {#snippet defaultWarning()}
-  <WarningIcon />
-{/snippet} -->
-
-<fieldset
-  data-input="text-input"
-  class="{base} {borderShape} {classes} {stateClasses}"
->
-  <legend
-    data-child="legend"
-    class="{legendBase} {legendClasses}"
-    style={hideLegendStyle}
-  >
-    {#if title}
-      {title}
-      <!-- {:else if !isValid}
-      {invalidTitle} -->
-    {:else}
-      &nbsp;
-    {/if}
-  </legend>
-
-  <div class="grid grid-cols-[1fr_auto] items-center">
-    <input
-      data-child="input"
-      bind:this={inputRef}
-      {type}
-      {required}
-      {disabled}
-      bind:value
-      {placeholder}
-      class="{inputBase} {inputClasses}"
-      aria-invalid={!isValid}
-      aria-errormessage={!isValid ? 'validation-message' : undefined}
-      oninput={handleInput}
-      onfocus={() => {
-        hasFocus = true;
-      }}
-      onblur={() => {
-        hasFocus = false;
-      }}
-      {...attrs}
-    />
-
-    <div data-child="icon-box" class="{iconBase} {iconClasses}">
-      {#if isPristine && required}
-        {#if iconRequired}
-          {@render iconRequired()}
-        {:else}
-          <HkIcon src={Star} theme="solid" />
-        {/if}
-      {:else if isValid}
-        {#if iconValid}
-          {@render iconValid()}
-        {:else}
-          <HkIcon src={CheckCircle} theme="solid" />
-        {/if}
-      {:else if iconInvalid}
-        {@render iconInvalid()}
-      {:else}
-        <HkIcon src={ExclamationTriangle} theme="solid" />
-      {/if}
-    </div>
-  </div>
-</fieldset>
-
-<style>
-</style>
+<script>
+  import IconValid from './assets/IconValid.svelte';
+  import IconInvalid from './assets/IconInvalid.svelte';
+
+  import { Star, ExclamationTriangle, CheckCircle } from '@steeze-ui/heroicons';
+
+  import { HkIcon } from '../../icons/index.js';
+
+  import {
+    PRISTINE,
+    DIRTY,
+    FOCUSED,
+    UNFOCUSED,
+    VALID,
+    INVALID,
+    REQUIRED,
+    DISABLED
+  } from '../../../../constants/states/input.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   borderShape?: string,
+   *   classes?: string,
+   *   inputBase?: string,
+   *   inputClasses?: string,
+   *   legendBase?: string,
+   *   legendClasses?: string,
+   *   iconClasses?: string,
+   *   initialValue?: string,
+   *   value?: string,
+   *   type?: 'text' | 'url' | 'email' | 'number',
+   *   pattern?: string,
+   *   required?: boolean,
+   *   title?: string,
+   *   placeholder?: string,
+   *   isValid?: boolean,
+   *   isPristine?: boolean,
+   *   hasFocus?: boolean,
+   *   validate?: (value: string) => string | undefined,
+   *   iconRequired?: import('svelte').Snippet,
+   *   iconValid?: import('svelte').Snippet,
+   *   iconInvalid?: import('svelte').Snippet
+   * } & { [attr: string]: any }}
+   */
+  let {
+    initialValue = '',
+    value = $bindable(''),
+
+    isValid = $bindable(true),
+    isPristine = $bindable(true),
+    hasFocus = $bindable(false),
+
+    // Fieldset
+    base = 'px-10p pb-10p',
+    borderShape = 'border-1p rounded-xs',
+
+    classes = '',
+
+    // Input
+    inputBase = 'w-full outline-none border-none bg-transparent',
+    inputClasses,
+
+    // Legend
+    legendBase,
+    legendClasses,
+
+    // Icon
+    iconBase = 'w-[24px] h-[24px]',
+    iconClasses = '',
+
+    // Input type and built-in validation
+
+    type = 'text',
+    required = false,
+    disabled = false,
+
+    title = '',
+    placeholder = '',
+
+    // legend = 'Invalid',
+    // legendInvalid?
+
+    iconRequired,
+    iconValid,
+    iconInvalid,
+
+    validate,
+
+    ...attrs
+  } = $props();
+
+  let inputRef = $state();
+  let validationMessage = $state('');
+
+  $effect(() => {
+    if (!inputRef) return;
+    validateInput(inputRef, initialValue);
+    value = initialValue;
+  });
+
+  function validateInput(input, currentValue) {
+    input.setCustomValidity('');
+    const isBuiltInValid = input.checkValidity();
+
+    if (isBuiltInValid && validate) {
+      const customError = validate(currentValue);
+      input.setCustomValidity(customError || '');
+    }
+
+    isPristine = currentValue === initialValue;
+    isValid = input.validity.valid;
+    validationMessage = input.validationMessage;
+  }
+
+  function handleInput(event) {
+    validateInput(event.target, event.target.value);
+  }
+
+  // let legendHeight = $state(0);
+
+  // let paddingBottomStyle = $derived.by(() => {
+  //   return `padding-bottom: ${legendHeight / 2}px;`;
+  // });
+
+  let hideLegendStyle = $derived.by(() => {
+    if (isValid && !title) {
+      return 'width: 0;';
+    }
+  });
+
+  let stateClasses = $derived.by(() => {
+    //
+    // Return CSS classes that indicate the component's state
+    //
+    // @see $lib/constants/states
+    //
+    const outArr = [];
+
+    outArr.push(isPristine ? PRISTINE : DIRTY);
+    outArr.push(hasFocus ? FOCUSED : UNFOCUSED);
+    outArr.push(isValid ? VALID : INVALID);
+
+    if (required) {
+      outArr.push(REQUIRED);
+    }
+
+    if (disabled) {
+      outArr.push(DISABLED);
+    }
+
+    return outArr.join(' ');
+  });
+</script>
+
+<!-- {#snippet defaultWarning()}
+  <WarningIcon />
+{/snippet} -->
+
+<fieldset
+  data-input="text-input"
+  class="{base} {borderShape} {classes} {stateClasses}"
+>
+  <legend
+    data-child="legend"
+    class="{legendBase} {legendClasses}"
+    style={hideLegendStyle}
+  >
+    {#if title}
+      {title}
+      <!-- {:else if !isValid}
+      {invalidTitle} -->
+    {:else}
+      &nbsp;
+    {/if}
+  </legend>
+
+  <div class="grid grid-cols-[1fr_auto] items-center">
+    <input
+      data-child="input"
+      bind:this={inputRef}
+      {type}
+      {required}
+      {disabled}
+      bind:value
+      {placeholder}
+      class="{inputBase} {inputClasses}"
+      aria-invalid={!isValid}
+      aria-errormessage={!isValid ? 'validation-message' : undefined}
+      oninput={handleInput}
+      onfocus={() => {
+        hasFocus = true;
+      }}
+      onblur={() => {
+        hasFocus = false;
+      }}
+      {...attrs}
+    />
+
+    <div data-child="icon-box" class="{iconBase} {iconClasses}">
+      {#if isPristine && required}
+        {#if iconRequired}
+          {@render iconRequired()}
+        {:else}
+          <HkIcon src={Star} theme="solid" />
+        {/if}
+      {:else if isValid}
+        {#if iconValid}
+          {@render iconValid()}
+        {:else}
+          <HkIcon src={CheckCircle} theme="solid" />
+        {/if}
+      {:else if iconInvalid}
+        {@render iconInvalid()}
+      {:else}
+        <HkIcon src={ExclamationTriangle} theme="solid" />
+      {/if}
+    </div>
+  </div>
+</fieldset>
+
+<style>
+</style>

package/dist/ui/primitives/inputs/text-input/TextInput.svelte___

@@ -0,0 +1,83 @@
+<script>
+	/**
+	 * @type {{
+	 *   classes?: string,
+	 *   fieldClasses?: string,
+	 *   legendClasses?: string,
+	 *   legendTitle?: string,
+	 *   error?: boolean,
+	 *   type?: string,
+	 *   placeholder: string,
+	 *   required: boolean,
+	 *   snippetWarning?: import('svelte').Snippet,
+	 * } & { [attr: string]: any }}
+	 */
+	let {
+		// Style
+		classes,
+		fieldClasses,
+		legendClasses,
+
+		// Functionality
+		name,
+		disabled,
+		required,
+
+		// initialValue
+		// value
+		// readonly
+		// pattern
+		// minlength
+		// maxlength
+
+		// Text placeholders
+		legendTitle,
+		placeholder,
+
+		type,
+		snippetWarning,
+
+		// Attributes
+		...attrs
+	} = $props();
+</script>
+
+{#snippet defaultWarning()}
+	<svg
+		width="17"
+		height="16"
+		viewBox="0 0 17 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
+			fill="#F8705E"
+		/>
+	</svg>
+{/snippet}
+
+<fieldset
+	data-input="text-input"
+	class="flex w-full items-center rounded {fieldClasses}"
+>
+	<legend class="px-2 {legendClasses}" class:error>{legendTitle}</legend>
+	<input
+		class="w-full border-none bg-transparent {classes}"
+		{type}
+		{placeholder}
+		{name}
+		{required}
+		{...attrs}
+	/>
+	{#if error}
+		{#if snippetWarning}
+			{@render snippetWarning()}
+		{:else}
+			{@render defaultWarning()}
+		{/if}
+		<!-- <img src={warningSymbol} class="mb-2 mr-8" alt="Warning" /> -->
+	{/if}
+</fieldset>

package/dist/ui/primitives/inputs/text-input/assets/IconInvalid.svelte

@@ -1,14 +1,14 @@
-<svg
-  width="17"
-  height="16"
-  viewBox="0 0 17 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
-    fill="currentColor"
-  />
-</svg>
+<svg
+  width="17"
+  height="16"
+  viewBox="0 0 17 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
+    fill="currentColor"
+  />
+</svg>

package/dist/ui/primitives/inputs/text-input/assets/IconValid.svelte

@@ -1,12 +1,12 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="currentColor"
-  class="size-6"
->
-  <path
-    fill-rule="evenodd"
-    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
-    clip-rule="evenodd"
-  />
-</svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  class="size-6"
+>
+  <path
+    fill-rule="evenodd"
+    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+    clip-rule="evenodd"
+  />
+</svg>