@likable-hair/svelte 3.0.44 → 3.0.45

package/dist/components/composed/forms/CountriesAutocomplete.svelte

@@ -1,6 +1,8 @@
 <script>import "/node_modules/flag-icons/css/flag-icons.min.css";
 import Autocomplete, {
 } from "../../simple/forms/Autocomplete.svelte";
+let clazz = {};
+export { clazz as class };
 export let autocompleteProps = {};
 let items = [
   { value: "AD", label: "Andorra" },
@@ -259,19 +261,29 @@ let items = [
   items={items}
   {...autocompleteProps}
 >
-  <svelte:fragment slot="chip-label" let:selection>
-    <span class="fi fi-{selection.value.toString().toLowerCase()} fis"></span>
+  <svelte:fragment 
+    slot="chip-label"
+    let:selection
+  >
+    <span 
+      class="flag-icon fi fi-{selection.value.toString().toLowerCase()} fis {clazz.flagIcon || ''}"
+    ></span>
     {selection.label}
   </svelte:fragment>
-  <svelte:fragment slot="item-label" let:item>
-    <span class="fi fi-{item.value.toString().toLowerCase()} fis"></span>
+  <svelte:fragment
+    slot="item-label" 
+    let:item
+  >
+    <span 
+      class="flag-icon fi fi-{item.value.toString().toLowerCase()} fis {clazz.flagIcon || ''}"
+    ></span>
     {item.label}
   </svelte:fragment>
 </Autocomplete>
 
 <style>
-  .fis {
+  .flag-icon {
     border-radius: 4px;
-    font-size: 1.2rem;
+    font-size: var(--countries-autocomplete-flag-icon-size, 1.2rem);
   }
 </style>

package/dist/components/composed/forms/CountriesAutocomplete.svelte.d.ts

@@ -3,10 +3,20 @@ import "/node_modules/flag-icons/css/flag-icons.min.css";
 import { type Item } from "../../simple/forms/Autocomplete.svelte";
 declare const __propDef: {
     props: {
+        class?: {
+            flagIcon?: string | undefined;
+        } | undefined;
         autocompleteProps?: Omit<{
             class?: {
                 activator?: string | undefined;
                 menu?: string | undefined;
+                simpleTextfield?: {
+                    container?: string | undefined;
+                    row?: string | undefined;
+                    field?: string | undefined;
+                    hint?: string | undefined;
+                    input?: string | undefined;
+                } | undefined;
             } | undefined;
             values?: Item[] | undefined;
             items: Item[];

package/dist/components/simple/forms/Autocomplete.svelte

@@ -170,12 +170,12 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
           <div class="not-visible-chip-number">+ {notVisibleChipNumber}</div>
         </slot>
       {/if}
-
+      
       <SimpleTextField
         --simple-textfield-max-width="min(200px, 90%)"
         --simple-textfield-height="auto"
         --simple-textfield-padding="0px"
-        --simple-textfield-background-color="rgb(1, 1, 1, 0)"
+        --simple-textfield-default-background-color="rgb(1, 1, 1, 0)"
         --simple-textfield-default-margin-bottom="0px"
         --simple-textfield-default-margin-left="10px"
         bind:value={searchText}
@@ -188,6 +188,7 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
         {disabled}
         placeholder={placeholder}
         bind:input={input}
+        class={clazz.simpleTextfield}
       ></SimpleTextField>
     </div>
   </slot>
@@ -312,13 +313,21 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
       var(--autocomplete-default-border-radius)
     );
     padding: var(
-      --autocomplete-paddding,
+      --autocomplete-padding,
       var(--autocomplete-default-padding)
     );
     min-height: var(
       --autocomplete-min-height,
       var(--autocomplete-default-min-height)
-    )
+    );
+    transition: all .1s;
+  }
+
+  .selection-container:focus-within {
+    border: var(
+      --autocomplete-focus-border,
+      var(--autocomplete-default-focus-border)
+    );
   }
 
   .selection-item {

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -6,11 +6,14 @@ export type Item = {
 };
 import '../../../css/main.css';
 import './Autocomplete.css';
+import { type ComponentProps } from "svelte";
+import SimpleTextField from "./SimpleTextField.svelte";
 declare const __propDef: {
     props: {
         class?: {
             activator?: string | undefined;
             menu?: string | undefined;
+            simpleTextfield?: ComponentProps<SimpleTextField>['class'];
         } | undefined;
         values?: Item[] | undefined;
         items: Item[];

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export { default as GlobalSearchTextField } from './components/composed/search/G
 export { default as MenuOrDrawer } from './components/composed/common/MenuOrDrawer.svelte';
 export { default as MenuOrDrawerOptions } from './components/composed/common/MenuOrDrawerOptions.svelte';
 export { default as AsyncAutocomplete } from './components/composed/forms/AsyncAutocomplete.svelte';
+export { default as CountriesAutocomplete } from './components/composed/forms/CountriesAutocomplete.svelte';
 export { default as FilterBuilder } from './utils/filters/builder';
 export { default as FilterConverter } from './utils/filters/filters';
 export { default as FilterValidator } from './utils/filters/validator';

package/dist/index.js

@@ -52,6 +52,7 @@ export { default as GlobalSearchTextField } from './components/composed/search/G
 export { default as MenuOrDrawer } from './components/composed/common/MenuOrDrawer.svelte';
 export { default as MenuOrDrawerOptions } from './components/composed/common/MenuOrDrawerOptions.svelte';
 export { default as AsyncAutocomplete } from './components/composed/forms/AsyncAutocomplete.svelte';
+export { default as CountriesAutocomplete } from './components/composed/forms/CountriesAutocomplete.svelte';
 export { default as FilterBuilder } from './utils/filters/builder';
 export { default as FilterConverter } from './utils/filters/filters';
 export { default as FilterValidator } from './utils/filters/validator';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "3.0.44",
+  "version": "3.0.45",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",