iconograph-ui 1.6.13 → 1.7.3

package/example/src/routes/+layout.svelte

@@ -1,26 +1,18 @@
 <script>
 // @ts-nocheck
-    import { page } from '$app/stores';
-    import { afterUpdate } from 'svelte';
 
     import NotificationWrapper from '$lib/iconograph-ui/notification/NotificationWrapper.svelte';
     import MainMenu from "$lib/iconograph-ui/navigation/MainMenu.svelte";
 
-    let current_url = $page.url.pathname.split('/');
-
-    afterUpdate(() => {
-        current_url = $page.url.pathname.split('/');
-    });
-
     let isMenuOpen = false;
 
     let menu = {
         logo: "",
         main: [
-            { name: 'Home', uri: '', icon: '/icons/icon-calendar-g.png', iconHover: '/icons/icon-calendar-v.png', selected: current_url[1] == ''},
-            { name: 'Home', uri: '', icon: '/icons/icon-calendar-g.png', iconHover: '/icons/icon-calendar-v.png', selected: current_url[1] == '1' },
-            { name: 'Home', uri: '', icon: '/icons/icon-calendar-g.png', iconHover: '/icons/icon-calendar-v.png', selected: current_url[1] == '1' },
-            { name: 'Home', uri: '', icon: '/icons/icon-calendar-g.png', iconHover: '/icons/icon-calendar-v.png', selected: current_url[1] == '1' },
+            { name: 'Home', uri: '/', icon: '/icons/icon-calendar-g.png', iconHover: '/icons/icon-calendar-v.png'},
+            { name: 'User', uri: '/user', icon: '/icons/icon-calendar-g.png', iconHover: '/icons/icon-calendar-v.png'},
+            { name: 'Home', uri: '/', icon: '/icons/icon-calendar-g.png', iconHover: '/icons/icon-calendar-v.png'},
+            { name: 'Home', uri: '/', icon: '/icons/icon-calendar-g.png', iconHover: '/icons/icon-calendar-v.png'},
         ],
     };
 

package/example/src/routes/user/+page.svelte

@@ -6,17 +6,24 @@
     import NavBar from "$lib/iconograph-ui/navigation/NavBar.svelte";
     import SelectUserInput from "$lib/iconograph-ui/user/SelectUserInput.svelte";
     import UserSelect from "$lib/iconograph-ui/user/UserSelect.svelte";
+    import SearchSelect from "$lib/iconograph-ui/inputs/SearchSelect.svelte";
 
     import Form from "$lib/iconograph-ui/form/Form.svelte";
     import ActionButton from "$lib/iconograph-ui/form/ActionButton.svelte";
+    import Button from "$lib/iconograph-ui/navigation/Button.svelte";
     import Input from "$lib/iconograph-ui/form/Input.svelte";
+    import PasswordInput from "$lib/iconograph-ui/inputs/PasswordInput.svelte";
     import SexeChoiceInput from "$lib/iconograph-ui/form/SexeChoiceInput.svelte";
     import CustomInput from "$lib/components/CustomInput.svelte";
 
+    import loaderIcon from '$lib/iconograph-ui/assets/icons/icon-add-w.svg?url';
+    import iconV from '$lib/assets/icon-calendar-v.png?url';
+
     let inputs = [
         { component: Input, props: { type: "text", name: "title", label: "Titre" } },
         { component: Input, props: { type: "select", name: "title", label: "Titre", options: ['Maison', 'Voiture']} },
         { component: Input, props: { type: "email", name: "email", label: "Email"}, value: "test@example.com" },
+        { component: PasswordInput, props: { type: "password", name: "password", label: "Password"}, value: "azerty" },
         { component: SexeChoiceInput, props: { name: "sexe", label: "Sexe" } },
         { component: CustomInput, props: { name: "color", label: "Couleur" } },
     ];
@@ -60,8 +67,10 @@
                     </div>
                     <span class="margin-l-s" style="text-transform: uppercase; color: #888; font-weight: 600;"></span>
                 </div>
-                <div style="margin-right: 60px; display: flex; gap: 8px;">
+                <div style="margin-right: 0px; display: flex; gap: 8px;">
                     <ActionButton options={[{label: "Supprimer les derniers", action: () => {alert();}}]}></ActionButton>
+                    <Button label={'Enregistrer'} icon={loaderIcon}></Button>
+                    <Button label={'Enregistrer'} style={"outline"} icon={iconV}></Button>
                     <ActionButton style={"icon"} options={[{label: "Supprimer les derniers", action: () => {alert();}}]}></ActionButton>
                 </div>
             </div>
@@ -74,6 +83,12 @@
 
 <BodySection>
 
+    <Card>
+
+        <SearchSelect uri={'/user?userType=*&'} type={'user'}></SearchSelect>
+
+    </Card>
+
     <Card>
 
         <SelectUserInput></SelectUserInput>

package/example/static/css/testapp.css

@@ -21,10 +21,11 @@
     --theme-input-outline-offset: 2px;
     --theme-input-border-failure: 2px solid #f95959;
     --theme-input-height: 40px;
-    --theme-input-text-color: #111;
+    --theme-input-text-color: #222;
 
     /** Icons */
     --logo-minimized: url('/favicon.svg');
+    --logo-large: url('/logo.svg');
 
     /** Fonts */
     --theme-main-font: 'Montserrat';

package/example/static/logo.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="372"
+   viewBox="0 0 1920 372"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   sodipodi:docname="logo-bibliapedia-etendu.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     inkscape:zoom="0.56421229"
+     inkscape:cx="1305.3597"
+     inkscape:cy="518.42189"
+     inkscape:window-width="2560"
+     inkscape:window-height="1369"
+     inkscape:window-x="1072"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1" /><g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"><g
+       id="g3-2"
+       transform="matrix(2.0483496,0,0,2.0483496,-1805.7042,-784.79795)"><path
+         id="rect1-7"
+         style="color:#000000;fill:#000000;fill-opacity:1;stroke-width:0.968983;-inkscape-stroke:none;paint-order:stroke markers fill"
+         d="m 974.62305,383.13672 v 2.6289 0.42579 V 540 v 0.30273 c 0.61489,12.70689 11.11084,22.57422 23.85937,22.57422 12.74858,0 23.21518,-10.17006 23.83008,-22.87695 h 0.029 v -153.80859 -3.05469 h -2.5703 -3.2285 c 0,10.00984 -8.0507,18.06055 -18.06058,18.06055 -10.00984,0 -18.06055,-8.05071 -18.06054,-18.06055 h -2.9004 z m 5.59765,15.6289 c 4.41649,5.15515 10.9669,8.43165 18.26172,8.43165 7.29388,0 13.84328,-3.27578 18.25978,-8.42969 v 135.97461 c 0.038,1.99502 -0.064,3.8137 -0.1992,5.78711 -0.2978,4.34648 -2.1391,8.14049 -4.9551,10.98437 V 413.59766 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 v 140.93945 c -1.2002,0.6657 -2.4808,1.21141 -3.834,1.59961 V 416.96875 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -1.99999,2 v 139.84961 c -0.42311,0.0277 -0.84507,0.0586 -1.27539,0.0586 -0.84542,0 -1.67079,-0.0782 -2.48438,-0.1914 v -139.7168 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 V 555.6543 c -1.187,-0.46224 -2.31291,-1.04502 -3.36328,-1.73828 V 413.59766 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 v 136.71289 c -2.34873,-2.83809 -3.88253,-6.39661 -4.20898,-10.31055 -0.14295,-1.7138 -0.13692,-3.48919 -0.20508,-5.25781 z" /><path
+         id="rect1-3-9"
+         style="color:#000000;fill:#000000;fill-opacity:1;stroke-width:0.968983;-inkscape-stroke:none;paint-order:stroke markers fill"
+         d="m 881.54102,515.1582 v 2.57032 3.22851 c 10.00983,0 18.06054,8.05068 18.06054,18.06055 0,10.00983 -8.05071,18.06055 -18.06054,18.06054 v 2.9004 2.89843 h 2.6289 0.42578 95.96875 c -2.17898,-1.45691 -4.27598,-3.28211 -6.09375,-5.5957 l -77.30078,-0.002 c 5.15515,-4.41648 8.43164,-10.96692 8.43164,-18.26172 0,-7.29387 -3.27578,-13.84328 -8.42968,-18.25977 h 71.2539 V 515.1582 H 884.5957 Z m 30.46093,10.75391 a 2,2 0 0 0 -2,2 2,2 0 0 0 2,2 h 56.42383 v -4 z m 3.3711,7.83398 a 2,2 0 0 0 -2,2 2,2 0 0 0 2,2 h 53.05273 v -4 z m 0,7.75977 a 2,2 0 0 0 -2,2 2,2 0 0 0 2,2 h 53.80078 c -0.25787,-1.26543 -0.45654,-2.59535 -0.58203,-4 z m -3.3711,7.36328 a 2,2 0 0 0 -2,2 2,2 0 0 0 2,2 h 59.67188 c -0.61864,-1.23448 -1.16044,-2.56817 -1.6211,-4 z" /><path
+         id="rect1-6-1"
+         style="color:#000000;fill:#000000;fill-opacity:1;stroke-width:0.968983;-inkscape-stroke:none;paint-order:stroke markers fill"
+         d="m 1026.3418,383.13672 v 2.6289 0.42579 V 540 v 0.30273 c 0.6149,12.70689 11.1108,22.57422 23.8594,22.57422 12.7486,0 23.2152,-10.17006 23.8301,-22.87695 h 0.029 v -153.80859 -3.05469 h -2.5703 -3.2285 c 0,10.00984 -8.0507,18.06055 -18.0606,18.06055 -10.0099,0 -18.0606,-8.05071 -18.0606,-18.06055 h -2.9004 z m 5.5977,15.6289 c 4.4164,5.15515 10.9669,8.43165 18.2617,8.43165 7.2939,0 13.8433,-3.27578 18.2598,-8.42969 v 135.97461 c 0.038,1.99502 -0.064,3.8137 -0.1992,5.78711 -0.2978,4.34648 -2.1391,8.14049 -4.9551,10.98437 V 413.59766 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 v 140.93945 c -1.2002,0.6657 -2.4808,1.21141 -3.834,1.59961 V 416.96875 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 v 139.84961 c -0.4231,0.0277 -0.8451,0.0586 -1.2754,0.0586 -0.8454,0 -1.6708,-0.0782 -2.4844,-0.1914 v -139.7168 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 V 555.6543 c -1.187,-0.46224 -2.3129,-1.04502 -3.3633,-1.73828 V 413.59766 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 v 136.71289 c -2.3487,-2.83809 -3.8825,-6.39661 -4.209,-10.31055 -0.1429,-1.7138 -0.1369,-3.48919 -0.2051,-5.25781 z" /><path
+         id="rect1-6-0-6"
+         style="color:#000000;fill:#000000;fill-opacity:1;stroke-width:0.968983;-inkscape-stroke:none;paint-order:stroke markers fill"
+         d="m 1078.0603,383.13672 v 2.6289 0.42579 V 540 v 0.30273 c 0.6149,12.70689 11.1108,22.57422 23.8594,22.57422 12.7486,0 23.2152,-10.17006 23.8301,-22.87695 h 0.029 v -153.80859 -3.05469 h -2.5703 -3.2285 c 0,10.00984 -8.0507,18.06055 -18.0606,18.06055 -10.0099,0 -18.0606,-8.05071 -18.0606,-18.06055 h -2.9004 z m 5.5977,15.6289 c 4.4164,5.15515 10.9669,8.43165 18.2617,8.43165 7.2939,0 13.8433,-3.27578 18.2598,-8.42969 v 135.97461 c 0.038,1.99502 -0.064,3.8137 -0.1992,5.78711 -0.2978,4.34648 -2.1391,8.14049 -4.9551,10.98437 V 413.59766 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 v 140.93945 c -1.2002,0.6657 -2.4808,1.21141 -3.834,1.59961 V 416.96875 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 v 139.84961 c -0.4231,0.0277 -0.8451,0.0586 -1.2754,0.0586 -0.8454,0 -1.6708,-0.0782 -2.4844,-0.1914 v -139.7168 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 V 555.6543 c -1.187,-0.46224 -2.3129,-1.04502 -3.3633,-1.73828 V 413.59766 a 2,2 0 0 0 -2,-2 2,2 0 0 0 -2,2 v 136.71289 c -2.3487,-2.83809 -3.8825,-6.39661 -4.209,-10.31055 -0.1429,-1.7138 -0.1369,-3.48919 -0.2051,-5.25781 z" /></g><g
+       id="g4-1"
+       transform="matrix(2.0483496,0,0,2.0483496,-1805.7042,-784.79795)"><path
+         id="path18-6"
+         style="opacity:1;fill:#ff914d;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:0.756028;paint-order:stroke markers fill"
+         d="m 965.30664,419.78516 c -0.24729,-0.043 -0.48004,0.26509 -0.52344,0.55273 -0.047,0.32198 -1.65142,20.34272 -1.00195,30.48828 0.13628,2.12897 0.62261,5.75697 1.02344,6.31836 0.86409,1.21026 1.70043,0.70962 2.06836,-0.0469 0.30171,-0.62033 0.63675,-4.11765 0.68945,-6.19532 0.25919,-10.20877 -1.73143,-30.28274 -1.83203,-30.58203 -0.12025,-0.35773 -0.27514,-0.50929 -0.42383,-0.53515 z m -21.25195,3.48242 c -0.2508,0.0192 -0.40066,0.37425 -0.3711,0.66406 0.032,0.31413 3.40718,20.12305 6.53516,29.79883 0.65622,2.0299 2.02017,5.42565 2.54687,5.87109 1.13543,0.96024 1.82378,0.2691 1.99415,-0.55468 0.1397,-0.67551 -0.39705,-4.14908 -0.85743,-6.17579 -2.26208,-9.95836 -9.13349,-28.92413 -9.30468,-29.18945 -0.20463,-0.31713 -0.39249,-0.42559 -0.54297,-0.41406 z m -20.50586,8.38672 c -0.30112,0.0273 -0.36959,0.46052 -0.25,0.75781 0.11782,0.29296 8.8504,18.39021 14.53711,26.82031 1.19301,1.76856 3.44471,4.65351 4.07422,4.93555 1.35707,0.60803 1.82827,-0.24525 1.76367,-1.08399 -0.053,-0.68777 -1.53311,-3.87751 -2.53711,-5.69726 -4.93302,-8.94156 -16.7913,-25.25932 -17.0293,-25.4668 -0.23707,-0.20667 -0.42172,-0.27804 -0.55859,-0.26562 z m -17.21094,13.48242 c -0.37736,0.0364 -0.34943,0.53122 -0.14453,0.81445 0.18507,0.25584 13.02836,15.7097 20.58203,22.51758 1.58468,1.42823 4.46555,3.68297 5.14453,3.80469 1.46379,0.26243 1.71438,-0.68018 1.44922,-1.47852 -0.21743,-0.65465 -2.42231,-3.39053 -3.83594,-4.91406 -6.94575,-7.48616 -22.39277,-20.45963 -22.67382,-20.60352 -0.22396,-0.11465 -0.3957,-0.15276 -0.52149,-0.14062 z M 893.25,462.22266 c -0.62491,-0.007 -0.47973,0.59448 -0.16797,0.85742 0.24136,0.20359 16.43623,12.10016 25.41016,16.88281 1.88264,1.00337 5.22383,2.49502 5.91211,2.44922 1.48379,-0.0987 1.49889,-1.07251 1.04882,-1.7832 -0.36905,-0.58278 -3.1705,-2.7066 -4.91015,-3.84375 -8.54776,-5.58766 -26.66908,-14.44774 -26.97656,-14.51954 -0.12251,-0.0286 -0.22714,-0.042 -0.31641,-0.043 z m -8.04297,20.27148 c -1.00514,0.0505 -0.66561,0.72742 -0.24023,0.91797 v -0.002 c 0.28816,0.1291 19.13694,7.09737 29.08203,9.21875 2.08639,0.44506 5.7085,0.95657 6.35742,0.72265 1.39897,-0.50426 1.14624,-1.44494 0.51758,-2.0039 -0.51551,-0.45835 -3.79344,-1.72676 -5.7793,-2.33985 -9.75754,-3.0127 -29.62215,-6.52947 -29.9375,-6.51367 z m 23.36133,20.03125 c -10.68698,0.0894 -26.10434,1.45197 -26.36719,1.53711 -0.9575,0.30998 -0.45441,0.87387 0.006,0.94727 0.31181,0.0498 20.32187,1.87798 30.47656,1.34179 2.13035,-0.11248 5.76424,-0.55858 6.33008,-0.95312 1.21982,-0.85051 0.72889,-1.692 -0.0234,-2.06836 -0.61692,-0.30863 -4.11249,-0.68191 -6.18945,-0.75781 -1.27565,-0.0467 -2.70571,-0.0597 -4.23242,-0.0469 z" /><path
+         id="path19-7"
+         style="opacity:1;fill:#ff914d;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:0.756028;paint-order:stroke markers fill"
+         d="m 963.03711,463.66602 c -0.91731,-0.0143 -1.79815,0.0266 -2.64453,0.041 -14.98914,0.25511 -34.87291,16.92084 -35.04492,35.4043 -0.024,2.57798 0.0126,4.67686 0.30468,7.33984 0.16678,1.52024 1.83952,1.21644 2.03711,0 0.37743,-2.32352 0.44345,-3.66291 0.90039,-7.33984 2.33379,-18.78098 19.43987,-30.61887 32.31055,-32.34961 2.41339,-0.32453 3.40294,-0.24861 5.11719,-0.27344 1.56933,-0.0227 2.36953,-1.99351 -0.11719,-2.52539 -0.99241,-0.21226 -1.94597,-0.28256 -2.86328,-0.29687 z m 1.59375,9.69336 c -0.71434,-0.0111 -1.39949,0.022 -2.05859,0.0332 -11.67261,0.19866 -27.15707,13.17656 -27.29102,27.57031 -0.0187,2.00757 0.0111,3.64108 0.23828,5.71484 0.12987,1.18386 1.87542,0.94728 2.0293,0 0.29392,-1.80941 0.34534,-2.85147 0.70117,-5.71484 1.81741,-14.62544 15.24905,-23.17802 24.77344,-24.80273 1.86931,-0.31888 2.64942,-0.19552 3.98437,-0.21485 1.22209,-0.0177 1.79002,-1.93931 -0.14648,-2.35351 -0.77284,-0.1653 -1.51613,-0.22128 -2.23047,-0.23242 z m 1.77734,11.40624 c -0.47556,-0.007 -0.9323,0.014 -1.37109,0.0215 -7.77091,0.13226 -18.0788,8.77299 -18.16797,18.35547 -0.0125,1.33652 0.007,2.4241 0.1582,3.80469 0.0865,0.78813 1.63389,0.63063 1.73633,0 0.19568,-1.2046 0.22991,-1.89843 0.4668,-3.80469 1.20992,-9.73673 9.46588,-14.76797 15.80664,-15.84961 1.24447,-0.21229 1.77512,5.5e-4 2.65234,-0.14258 1.09052,-0.17796 1.49234,-1.95472 0.20313,-2.23047 -0.51451,-0.11005 -1.00881,-0.14688 -1.48438,-0.1543 z m 0.10352,9.38868 c -0.14477,0.004 -0.27592,0.015 -0.5332,0.0195 -4.55646,0.0776 -10.60202,5.14305 -10.6543,10.76172 -0.008,0.78366 -0.0648,0.65699 0,1.46875 0.12903,1.61748 1.7952,1.07664 1.93359,0 0.0912,-0.70973 0.0779,-0.35102 0.2168,-1.46875 0.70944,-5.70913 4.78601,-8.18025 8.50391,-8.81446 0.72967,-0.12448 0.62227,-0.0915 1.14257,-0.12109 1.14857,-0.0652 1.4413,-1.72324 0,-1.82617 -0.30772,-0.022 -0.46461,-0.0239 -0.60937,-0.0195 z" /></g><path
+       id="path2-5"
+       style="color:#000000;-inkscape-font-specification:'Garet weight=850';fill:#000000;fill-opacity:1;stroke-width:2.86517;stroke-linecap:round;-inkscape-stroke:none;paint-order:stroke markers fill"
+       d="M 872.02635,57.853642 V 234.13961 h 20.1066 l 0.9232,-15.90389 c 11.35809,11.63992 27.29241,18.83621 45.90432,18.83621 37.69947,0 64.44953,-28.46632 64.44953,-66.02751 0,-37.56117 -26.76993,-65.80923 -64.44953,-65.80923 -17.85403,0 -33.24062,6.45564 -44.53316,17.26933 V 57.853642 Z m 157.77435,0 V 234.13961 h 4.6559 17.7451 V 57.853642 Z m 659.128,0 v 64.421418 c -11.289,-10.59962 -26.6603,-17.03987 -44.5332,-17.03987 -37.4686,0 -64.4493,28.22828 -64.4493,65.80923 0,37.58095 26.9607,66.02751 64.4493,66.02751 18.6531,0 34.6364,-7.1073 46.0104,-18.76905 l 1.0914,15.83673 h 19.8322 V 57.853642 Z M 824.28096,63.26499 c -9.45129,0 -16.61437,7.599402 -16.61437,16.390748 0,8.942042 7.16308,16.614609 16.61437,16.614609 9.4517,0 16.61478,-7.672567 16.61478,-16.614609 0,-8.791346 -7.16308,-16.390748 -16.61478,-16.390748 z m 275.66034,0 c -9.4515,0 -16.6147,7.599402 -16.6147,16.390748 0,8.942042 7.1632,16.614609 16.6147,16.614609 9.4515,0 16.6146,-7.672567 16.6146,-16.614609 0,-8.791346 -7.1631,-16.390748 -16.6146,-16.390748 z m 659.1334,0 c -9.4516,0 -16.6147,7.599295 -16.6147,16.390748 0,8.942117 7.1631,16.614609 16.6147,16.614609 9.4515,0 16.6143,-7.672492 16.6143,-16.614609 0,-8.791453 -7.1628,-16.390748 -16.6143,-16.390748 z M 663.42898,66.880025 V 234.13961 h 4.6559 62.50191 c 16.17683,0 29.81844,-4.35161 39.48562,-12.6918 9.66698,-8.34021 15.04206,-20.62817 15.04206,-35.0591 0,-17.39352 -8.89721,-31.03675 -23.22358,-38.64612 11.6082,-7.48947 18.70759,-19.95353 18.70759,-35.14303 0,-13.683695 -5.28741,-25.447946 -14.62788,-33.458669 -9.34068,-8.010692 -22.45463,-12.260866 -37.86294,-12.260866 z m 23.07794,22.171461 h 41.37707 c 9.9175,0 17.2555,2.547495 22.03717,6.659273 4.78166,4.111768 7.37549,9.850361 7.37549,17.789741 0,8.06558 -2.59239,13.78274 -7.38676,17.86254 -4.79416,4.07975 -12.20038,6.5921 -22.25531,6.5921 h -41.14766 z m 513.44648,16.183704 c -26.5136,0 -47.5385,15.04933 -53.6938,38.68532 l -1.5223,5.83103 h 22.6753 l 1.0745,-3.16732 c 4.0547,-11.97146 15.6817,-19.84913 31.69,-19.84913 9.9095,0 17.677,2.9109 22.9495,7.66097 5.2724,4.75005 8.2765,11.38403 8.2765,19.94983 v 3.69338 h -46.794 c -12.8082,0 -23.8711,3.50561 -31.83,10.23512 -7.9592,6.72957 -12.5408,16.70512 -12.5408,28.26551 0,11.94332 4.9501,22.23119 13.6207,29.07137 8.6708,6.84015 20.735,10.33589 35.0366,10.33584 17.5872,0 32.9167,-5.6662 44.1248,-15.7248 l 0.9402,13.9173 h 19.8378 v -80.47085 c 0,-14.17558 -5.6096,-26.53635 -15.238,-35.09826 -9.6282,-8.56194 -23.1024,-13.33533 -38.607,-13.33531 z m 154.8422,0 c -18.5819,0 -34.5349,7.06541 -45.9044,18.76907 l -0.9234,-15.83116 h -20.1066 v 171.09286 h 22.401 v -59.54171 c 11.2805,10.76085 26.6461,17.34768 44.5334,17.34768 37.6995,0 64.4495,-28.46628 64.4495,-66.02751 0,-37.56117 -26.7697,-65.80923 -64.4495,-65.80923 z m 145.1325,0 c -37.6173,0.002 -64.4437,27.61311 -64.4437,65.80923 0,19.19574 6.4373,35.80694 17.812,47.54943 10.4001,10.73655 24.9785,17.00878 41.7578,18.05278 v 0.4253 h 4.6559 c 27.8064,0 51.0024,-14.94364 60.728,-39.0155 l 2.5407,-6.29554 -24.3594,-0.37492 -1.321,2.59655 c -6.8847,13.56714 -20.0754,21.37127 -37.5881,21.37123 -22.0639,0 -36.5604,-13.04451 -40.3813,-34.24206 h 104.7241 l 0.1006,-4.54957 c 0.4729,-20.69859 -5.5187,-38.57531 -16.8216,-51.28756 -11.3027,-12.71105 -27.8685,-20.03795 -47.3982,-20.03937 z m 359.1584,0 c -26.5136,0 -47.5442,15.04931 -53.6991,38.68532 l -1.5166,5.83103 h 22.675 l 1.0689,-3.16732 c 4.0548,-11.97144 15.6877,-19.84913 31.6959,-19.84913 9.9095,0 17.6709,2.91088 22.944,7.66097 5.2726,4.75007 8.2766,11.38408 8.2766,19.94983 v 3.69338 h -46.7885 c -12.8081,0 -23.8772,3.50561 -31.8361,10.23512 -7.959,6.72957 -12.535,16.7051 -12.535,28.26551 0,11.94332 4.9502,22.23119 13.6212,29.07137 8.6704,6.84015 20.7347,10.33589 35.0364,10.33584 17.5854,0 32.9165,-5.66234 44.1245,-15.71921 l 0.9344,13.91171 h 19.8436 v -80.47085 c 0,-14.17558 -5.6153,-26.53635 -15.2436,-35.09826 -9.6281,-8.56194 -23.0972,-13.33533 -38.6016,-13.33531 z M 813.08345,108.1731 v 125.96651 h 4.6559 17.74505 V 108.1731 Z m 275.66035,0 v 125.96651 h 4.6559 17.7448 V 108.1731 Z m 659.1273,0 v 125.96651 h 4.656 17.7451 V 108.1731 Z m -247.9372,18.78586 c 21.6499,0 36.1213,12.30491 40.6549,33.3355 h -81.2149 c 3.8873,-20.49481 18.5275,-33.3355 40.56,-33.3355 z m -562.32759,0.22377 c 26.48127,0 43.40269,17.54913 43.40269,43.86163 0,26.55487 -16.92142,44.07989 -43.40269,44.07989 -26.48168,0 -43.63251,-17.54948 -43.63251,-44.07989 0,-26.28786 17.15083,-43.86163 43.63251,-43.86163 z m 415.83489,0 c 26.4813,0 43.4084,17.54913 43.4084,43.86163 0,26.55482 -16.9271,44.07989 -43.4084,44.07989 -26.4817,0 -43.6321,-17.54948 -43.6321,-44.07989 0,-26.28786 17.1504,-43.86163 43.6321,-43.86163 z m 292.5375,0 c 26.2383,0 43.4031,17.57375 43.4031,43.86163 0,26.53041 -17.1648,44.07989 -43.4031,44.07989 -26.4819,0 -43.6321,-17.54948 -43.6321,-44.07989 0,-26.28788 17.1502,-43.86163 43.6321,-43.86163 z m -959.47178,32.71994 h 42.95512 c 10.98734,0 19.09553,2.65189 24.32599,6.99505 5.23026,4.34314 8.02461,10.41774 8.02461,19.03767 0,8.49432 -2.80029,14.6085 -7.96889,18.98171 -5.16819,4.37318 -13.09325,7.05101 -23.70453,7.05101 h -43.6323 z m 498.55548,18.95377 h 46.5645 v 0.30777 c 0,20.8405 -17.1408,35.73622 -42.278,35.73622 -8.981,0 -15.8232,-2.12234 -20.1791,-5.3666 -4.356,-3.24421 -6.5306,-7.41564 -6.5306,-13.21781 0,-5.36755 2.0455,-9.38372 5.8085,-12.43438 3.7635,-3.05065 9.4569,-5.0252 16.6147,-5.0252 z m 659.1275,0 h 46.5647 v 0.30777 c 0,20.8405 -17.1408,35.73622 -42.2782,35.73622 -8.9805,0 -15.8175,-2.12234 -20.1735,-5.3666 -4.3559,-3.24421 -6.5305,-7.41564 -6.5305,-13.21781 0,-5.36753 2.0399,-9.38372 5.8031,-12.43438 3.7634,-3.05065 9.4566,-5.0252 16.6144,-5.0252 z" /><path
+       style="font-size:15.3958px;font-family:Intro;-inkscape-font-specification:Intro;text-align:center;letter-spacing:7.18px;word-spacing:-0.248045px;text-anchor:middle;fill:#ff914d;stroke-width:4.90129;stroke-linecap:round;stroke-opacity:0.756028;paint-order:stroke markers fill"
+       d="m 686.09131,339.57327 h 7.7192 v -1.14691 L 679.87149,308.2982 h -3.39657 l -13.89519,30.12816 v 1.14691 h 7.71962 l 1.80849,-3.88184 h 12.17458 z m -4.41133,-10.67498 h -6.96971 l 3.44081,-8.11653 z m -0.44121,-22.45275 v -0.7058 l -3.35254,-7.36663 -6.70466,2.2497 v 0.66168 l 4.54345,5.16105 z m 77.08984,2.24965 c -2.69092,0 -5.29334,0 -7.94022,0 v 30.87808 c 6.26385,0 12.79235,0 19.14449,0 0,-2.64672 0,-4.45527 0,-7.10196 h -11.20427 c 0,-13.14522 0,-7.80773 0,-23.77612 z m 58.19893,30.87808 h 7.71962 v -1.14691 L 810.30794,308.2982 h -3.39678 l -13.89518,30.12816 v 1.14691 h 7.71961 l 1.80848,-3.88184 h 12.17499 z m -4.41111,-10.67498 h -6.96951 l 3.44082,-8.11653 z m 80.39813,-20.2031 h -11.64548 v 30.87808 h 11.64548 c 20.11458,-0.0883 20.11458,-30.78985 0,-30.87808 z m -3.74951,7.1902 h 3.74951 c 9.83678,0 9.83678,16.4977 0,16.4977 h -3.74951 z m 64.6834,-7.1902 c -7.23435,0 -12.13053,0 -19.2766,0 0,10.23388 0,20.55597 0,30.87808 7.14607,0 12.43941,0 19.67357,0 0,-2.33792 0,-4.71994 0,-7.01373 -4.63173,0 -7.2784,0 -11.82184,0 0,-1.85267 0,-3.61717 0,-5.42572 h 10.4984 c 0,-2.3379 0,-4.67583 0,-7.01375 h -10.4984 v -4.36702 c 4.54344,0 6.83739,0 11.42487,0 0,-2.38201 0,-4.76405 0,-7.05786 z m -7.67537,-2.02913 4.54345,-5.16103 v -0.66167 l -6.70487,-2.2497 -3.35253,7.36664 v 0.70576 z m 33.58474,17.46818 c 0.043,10.49853 7.98427,15.79192 15.83603,15.74779 6.57265,0 13.49805,-3.44069 14.64505,-12.17477 -2.6907,0 -5.117,0 -7.7634,0 -0.8385,3.30838 -3.5292,4.98461 -6.88165,4.98461 -4.6756,-0.044 -7.67561,-4.01414 -7.67561,-8.55763 0,-5.11694 3.04402,-8.60176 7.67561,-8.60176 3.30845,0 5.64645,1.41159 6.74915,4.54351 2.6907,0 5.0729,0 7.7634,0 -1.191,-8.24887 -8.1164,-11.73367 -14.51255,-11.73367 -7.85176,0 -15.79199,5.29337 -15.83603,15.79192 z m 86.87148,0.044 c 0,-21.34999 -31.6721,-21.34999 -31.6721,0 0,21.39407 31.6721,21.39407 31.6721,0 z m -23.5558,0 c 0,-11.11611 15.4836,-11.11611 15.4836,0 0,11.20431 -15.4836,11.20431 -15.4836,0 z m 62.037,8.73408 c -2.294,0 -4.72,-1.23515 -4.72,-3.7495 v -20.4677 c -2.4701,0 -5.0729,0 -7.5432,0 v 20.60009 c 0,6.79316 5.9553,10.71909 12.2632,10.71909 6.3521,0 12.3071,-3.92593 12.3071,-10.71909 v -20.60009 c -2.4705,0 -5.117,0 -7.6315,0 v 20.46774 c 0,2.51435 -2.3819,3.7495 -4.6756,3.7495 z m 44.7449,-24.21725 h -7.5872 v 1.19104 l 13.2335,30.03992 h 3.3524 l 13.1012,-30.03992 v -1.19104 h -7.5872 l -7.0579,17.51226 h -0.2206 z m 66.536,0 c -7.2342,0 -12.1305,0 -19.2768,0 0,10.23389 0,20.55596 0,30.87807 7.1463,0 12.4398,0 19.674,0 0,-2.33792 0,-4.71993 0,-7.01373 -4.6318,0 -7.2784,0 -11.8221,0 0,-1.85267 0,-3.61716 0,-5.42571 h 10.4987 c 0,-2.3379 0,-4.67583 0,-7.01375 h -10.4987 v -4.36702 c 4.5437,0 6.8372,0 11.4249,0 0,-2.382 0,-4.76406 0,-7.05786 z m 47.7888,19.93841 c 7.8077,-5.29337 5.6023,-19.89427 -6.5287,-19.93841 -4.4992,0 -9.0869,0 -13.5422,0 0,10.3221 0,20.60009 0,30.87807 2.5586,0 5.2493,0 7.8961,0 v -9.08697 h 4.1025 l 5.2933,9.08697 h 8.822 v -1.14691 z m -6.5287,-5.24927 h -5.6461 c 0,-2.47024 0,-5.11693 0,-7.63128 1.8528,0 3.7935,-0.044 5.6461,0 4.4994,0.044 4.2788,7.63128 0,7.63128 z m 42.4512,-7.63128 v 23.82021 c 2.6026,0 5.2055,0 7.8079,0 v -23.82021 h 7.5431 c 0,-2.382 0,-4.71993 0,-7.05786 h -22.9381 c 0,2.33793 0,4.67586 0,7.05786 z m 60.0957,-7.05786 c -7.2339,0 -12.1305,0 -19.2766,0 0,10.23389 0,20.55596 0,30.87807 7.1461,0 12.4394,0 19.6736,0 0,-2.33792 0,-4.71993 0,-7.01373 -4.6315,0 -7.2784,0 -11.8217,0 0,-1.85267 0,-3.61716 0,-5.42571 h 10.4983 c 0,-2.3379 0,-4.67583 0,-7.01375 h -10.4983 v -4.36702 c 4.5433,0 6.8373,0 11.4247,0 0,-2.382 0,-4.76406 0,-7.05786 z m 71.3994,0 h -11.6454 v 30.87807 h 11.6454 c 20.1147,-0.0883 20.1147,-30.78985 0,-30.87807 z m -3.7495,7.1902 h 3.7495 c 9.8369,0 9.8369,16.49769 0,16.49769 h -3.7495 z m 49.7949,-9.82655 -0.9263,12.47099 h -2.9293 l -0.9261,-12.47099 z m 39.9843,26.8536 c -2.294,0 -4.7199,-1.23515 -4.7199,-3.7495 v -20.4677 c -2.4703,0 -5.0727,0 -7.543,0 v 20.60009 c 0,6.79316 5.9551,10.71909 12.2629,10.71909 6.3523,0 12.307,-3.92593 12.307,-10.71909 v -20.60009 c -2.4701,0 -5.117,0 -7.6311,0 v 20.46774 c 0,2.51435 -2.382,3.7495 -4.6759,3.7495 z m 64.1983,6.70494 h 2.8233 v -30.92214 c -2.691,0 -5.3819,0 -8.0724,0 v 15.13025 l -15.6154,-15.26258 h -2.8675 v 31.0104 c 2.6911,0 5.4259,0 8.1608,0 v -15.17437 z m 67.7823,-23.86433 v 23.82021 c 2.6027,0 5.2051,0 7.8079,0 v -23.82021 h 7.5431 c 0,-2.382 0,-4.71993 0,-7.05786 h -22.9383 c 0,2.33793 0,4.67586 0,7.05786 z m 60.8459,12.88055 c 7.8073,-5.29337 5.6017,-19.89427 -6.5289,-19.93841 -4.4995,0 -9.0868,0 -13.5424,0 0,10.3221 0,20.60009 0,30.87807 2.5586,0 5.2496,0 7.8959,0 v -9.08697 h 4.1024 l 5.2937,9.08697 h 8.8221 v -1.14691 z m -6.5289,-5.24927 h -5.6465 c 0,-2.47024 0,-5.11693 0,-7.63128 1.8528,0 3.7939,-0.044 5.6465,0 4.4998,0.044 4.2791,7.63128 0,7.63128 z m 57.1843,-14.68914 c -7.2339,0 -12.1305,0 -19.2766,0 0,10.23389 0,20.55596 0,30.87807 7.1461,0 12.4394,0 19.6738,0 0,-2.33792 0,-4.71993 0,-7.01373 -4.632,0 -7.2782,0 -11.8221,0 0,-1.85267 0,-3.61716 0,-5.42571 h 10.4987 c 0,-2.3379 0,-4.67583 0,-7.01375 h -10.4987 v -4.36702 c 4.5439,0 6.8379,0 11.4249,0 0,-2.382 0,-4.76406 0,-7.05786 z m -7.6751,-2.02913 4.5433,-5.16102 v -0.66168 l -6.7045,-2.24971 -3.3526,7.36664 v 0.70577 z m 40.907,23.46735 c -2.6906,0 -4.9845,0 -7.6308,0 -0.1782,13.58635 24.9667,13.23344 24.9667,0.26472 0,-7.71949 -5.9993,-8.51349 -12.1305,-9.17517 -2.7792,-0.30877 -5.0729,-0.79403 -4.8966,-3.13191 0.2636,-3.66125 8.5578,-4.01415 8.5578,0.0883 2.6905,0 4.7198,0 7.4991,0 0.1781,-13.32167 -23.8204,-13.32167 -23.5555,0 0.088,6.70495 4.4995,8.99874 11.2043,9.48398 3.0877,0.17657 5.6463,0.52931 5.6463,2.69079 0,3.61712 -9.6604,3.70538 -9.6604,-0.22063 z m 73.4617,-5.95505 c 0,-21.34999 -31.6722,-21.34999 -31.6722,0 0,21.39407 31.6722,21.39407 31.6722,0 z m -23.5554,0 c 0,-11.11611 15.4833,-11.11611 15.4833,0 0,11.20431 -15.4833,11.20431 -15.4833,0 z m 70.1089,4.45524 c 7.8082,-5.29337 5.6024,-19.89427 -6.5285,-19.93841 -4.4992,0 -9.0869,0 -13.5423,0 0,10.3221 0,20.60009 0,30.87807 2.5586,0 5.2493,0 7.896,0 v -9.08697 h 4.1027 l 5.2935,9.08697 H 1920 v -1.14691 z m -6.5285,-5.24927 h -5.6463 c 0,-2.47024 0,-5.11693 0,-7.63128 1.8528,0 3.7936,-0.044 5.6463,0 4.4994,0.044 4.2788,7.63128 0,7.63128 z"
+       id="text1-9"
+       aria-label="à la découverte d'un trésor" /></g></svg>

package/index.js

@@ -24,6 +24,7 @@ import Field from "./lib/display/Field.svelte";
 import Link from "./lib/display/Link.svelte";
 import ActionButton from "./lib/form/ActionButton.svelte";
 import MultiSelect from "./lib/form/MultiSelect.svelte";
+import PasswordInput from "./lib/inputs/PasswordInput.svelte"
 
 export {
     Button,
@@ -51,5 +52,6 @@ export {
     Link,
     ActionButton,
     MultiSelect,
+    PasswordInput,
     addNotification,
 };

package/lib/assets/icons/icon-hidden.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 32 32"
+   width="96px"
+   height="96px"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="icon-visible.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs8"><pattern
+       id="EMFhbasepattern"
+       patternUnits="userSpaceOnUse"
+       width="6"
+       height="6"
+       x="0"
+       y="0" /></defs><sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="false"
+     inkscape:zoom="8.4166668"
+     inkscape:cx="65.168316"
+     inkscape:cy="54.594059"
+     inkscape:window-width="2560"
+     inkscape:window-height="1369"
+     inkscape:window-x="1072"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:showpageshadow="0"
+     inkscape:deskcolor="#505050" /><path
+     style="fill:none;stroke:#000000;stroke-width:3.0523;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+     d="m 4.0922572,17.672613 c 1.8858257,-14.4893698 22.4884438,-14.3652452 23.6393348,0"
+     id="path1"
+     sodipodi:nodetypes="cc" /><circle
+     style="fill:#000000;stroke:none;stroke-width:1.08333;stroke-linecap:round;stroke-opacity:1;paint-order:stroke markers fill;fill-opacity:1"
+     id="path2"
+     cx="15.881187"
+     cy="18.498072"
+     r="4.2742047" /></svg>

package/lib/assets/icons/icon-visible.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 32 32"
+   width="96px"
+   height="96px"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="icon-visible.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs8"><pattern
+       id="EMFhbasepattern"
+       patternUnits="userSpaceOnUse"
+       width="6"
+       height="6"
+       x="0"
+       y="0" /></defs><sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="false"
+     inkscape:zoom="8.4166668"
+     inkscape:cx="65.168316"
+     inkscape:cy="54.594059"
+     inkscape:window-width="2560"
+     inkscape:window-height="1369"
+     inkscape:window-x="1072"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:showpageshadow="0"
+     inkscape:deskcolor="#505050" /><path
+     style="fill:none;stroke:#000000;stroke-width:3.0523;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+     d="m 4.0922572,17.672613 c 1.8858257,-14.4893698 22.4884438,-14.3652452 23.6393348,0"
+     id="path1"
+     sodipodi:nodetypes="cc" /><circle
+     style="fill:#000000;stroke:none;stroke-width:1.08333;stroke-linecap:round;stroke-opacity:1;paint-order:stroke markers fill;fill-opacity:1"
+     id="path2"
+     cx="15.881187"
+     cy="18.498072"
+     r="4.2742047" /></svg>

package/lib/display/Portal.svelte

@@ -0,0 +1,64 @@
+<script context="module">
+    import { tick } from "svelte";
+
+    /**
+     * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
+     *
+     * @param {HTMLElement} el
+     * @param {HTMLElement|string} target DOM Element or CSS Selector
+     */
+    export function portal(el, target = "body") {
+        let targetEl;
+        async function update(newTarget) {
+        target = newTarget;
+        if (typeof target === "string") {
+            targetEl = document.querySelector(target);
+            if (targetEl === null) {
+                await tick();
+                targetEl = document.querySelector(target);
+            }
+            if (targetEl === null) {
+                throw new Error(
+                    `No element found matching css selector: "${target}"`
+                );
+            }
+        } else if (target instanceof HTMLElement) {
+            targetEl = target;
+        } else {
+            throw new TypeError(
+            `Unknown portal target type: ${
+                target === null ? "null" : typeof target
+            }. Allowed types: string (CSS selector) or HTMLElement.`
+            );
+        }
+        targetEl.appendChild(el);
+            el.hidden = false;
+        }
+
+        function destroy() {
+            if (el.parentNode) {
+                el.parentNode.removeChild(el);
+            }
+        }
+
+        update(target);
+        return {
+            update,
+            destroy,
+        };
+    }
+</script>
+
+<script>
+    /**
+     * DOM Element or CSS Selector
+     * @type { HTMLElement|string}
+     */
+    export let target = "body";
+    export let position = "top: 0px; left: 0px"
+
+</script>
+
+<div use:portal={target} hidden style="position: absolute; right: 0px; {position}">
+    <slot />
+</div>

package/lib/form/ActionButton.svelte

@@ -1,28 +1,25 @@
 <script>
     // @ts-nocheck
     import { onMount } from 'svelte';
-    import Portal from 'svelte-portal';
     import { clickOutside } from './../utils/clickOutside.js';
     import detailsIcon from '../assets/icons/icon-details.svg?url';
+    import Portal from '../display/Portal.svelte';
 
     export let options = [];
     export let style = "classic";
 
     let open = false;
     let dropdownEl;
-    let y = 0;
-    let coords = { top: 0, left: 0, width: 0 };
+    let coords = { top: 0, right: 0, width: 0 };
 
     function openDropdown() {
         const rect = dropdownEl.getBoundingClientRect();
-        coords = { top: rect.bottom, left: rect.left, width: rect.width };
+        coords = { top: rect.bottom, left: rect.left, right: window.innerWidth - rect.right, width: rect.width };
         open = !open;
     }
 
 </script>
 
-<svelte:window bind:scrollY={y} />
-
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="dropdown {open ? 'open' : ''} {style == "icon" ? 'icon' : ''}"
@@ -36,8 +33,8 @@
 
     <!-- Liste déroulante -->
     {#if open}
-    <Portal target="body" >
-        <div class="list" style="position: absolute; top:{coords.top + 2 + y}px; left:{coords.left + coords.width - 200}px; width: {coords.width}px;" >
+    <Portal target="#main-container" position={"top: 0px; right: 0px"}>
+        <div class="list" style="position: absolute; top:{coords.top + 4}px; right:{coords.right - 14}px; width: {coords.width}px;" >
         <!-- Options -->
         {#each options as opt}
             <div class="option" on:click={opt.action}>
@@ -54,7 +51,7 @@
 .dropdown {
     position: relative;
     display: flex;
-    height: var(--theme-button-height, 40px);
+    height: 32px;
     flex: 1;
 }
 .dropdown.icon {
@@ -65,32 +62,34 @@
     border-bottom-right-radius: 0px;
 }
 .dropdown > div:first-of-type {
-    background-color: #ebebed;
-    height: 40px;
+    background-color: var(--theme-input-bg-highlight);
+    height: 32px;
     border: none;
     border-radius: 8px;
     cursor: pointer;
-    padding: 0px 16px;
+    padding: 0px 8px;
     font-size: 14px;
-    line-height: 40px;
+    line-height: 33px;
     font-weight: 600;
     font-family: var(--theme-text-font);
     color: #333;
     flex: 1;
     min-width: 76px;
-    background-size: 16px auto;
+    background-size: 14px auto;
     background-repeat: no-repeat;
-    background-position: center right 16px;
-    padding-left: 24px;
+    background-position: center right 14px;
+    padding-left: 20px;
+
+    transition: all ease-in-out 0.17s;
 }
 .dropdown > div:first-of-type:hover {
-    background-color: #ddd;
+    background-color: var(--theme-input-bg-hover);
 }
 .dropdown > div:first-of-type.icon {
     min-width: 1px;
     width: 32px;
     max-width: 32px;
-    background-size: 16px auto;
+    background-size: 14px auto;
     background-repeat: no-repeat;
     background-position: center center;
     padding: 0px;
@@ -100,13 +99,15 @@
     position: absolute;
     top: 100%;
     right: 0px;
-    background: var(--theme-input-bg-highlight, #ebebed);
+    background: #ffffff; /*var(--theme-input-bg-highlight, #ebebed);*/
     border-radius: 8px;
     padding: 8px 0px;
     max-height: 220px;
     overflow-y: auto;
     z-index: 9999;
     min-width: 200px;
+    border: 1px solid #00000012;
+    box-shadow: #00000012 0 0px 8px;
 }
 .option {
     display: flex;
@@ -117,7 +118,7 @@
 }
 .option > span {
     font-size: 14px;
-    line-height: 16px;
+    line-height: 18px;
     font-weight: 400;
     font-family: var(--theme-text-font);
     color: var(--theme-input-text-color);
@@ -126,6 +127,6 @@
     text-overflow: ellipsis;
 }
 .option:hover {
-    background: var(--theme-input-bg-hover);
+    background: var(--theme-input-bg-highlight);
 }
 </style>

package/lib/inputs/PasswordInput.svelte

@@ -0,0 +1,49 @@
+<script>
+    import Input from "../form/Input.svelte";
+    import visibleIcon from '../assets/icons/icon-visible.svg?url';
+
+    export let name;
+    export let value;
+    export let required = false;
+
+    let hidden = true;
+</script>
+
+<div class="wrapper">
+    <div>
+        <Input type="{hidden ? 'password' : 'text'}" name={name} bind:value={value} {required}/>
+    </div>
+
+    <div class="eyes" on:click={() => hidden = !hidden} style:background-image={`url("${visibleIcon}")`}></div>
+</div>
+
+<style>
+.wrapper {
+    position: relative;
+    display: flex;
+}
+.wrapper > div:first-of-type {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.eyes {
+    width: 28px;
+    height: 28px;
+    position: absolute;
+    right: 6px;
+    top: 6px;
+    border-radius: 30px;
+    background-size: 20px auto;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: all ease-in-out 0.17s;
+    cursor: pointer;
+    background-color: transparent;
+}
+.eyes:hover {
+    background-color: var(--theme-input-bg-hover);
+}
+
+</style>

package/lib/{user/UserSelect.svelte → inputs/SearchSelect.svelte}

@@ -1,19 +1,19 @@
 <script>
     // @ts-nocheck
     import { onMount } from 'svelte';
-    import Portal from 'svelte-portal';
-    import UserPicture from './UserPicture.svelte';
-    import {clickOutside} from './../utils/clickOutside.js';
+    import Portal from '../display/Portal.svelte';
+    import UserPicture from '../user/UserPicture.svelte';
+    import {clickOutside} from '../utils/clickOutside.js';
     import { createEventDispatcher } from 'svelte'
 
     const dispatch = createEventDispatcher()
 
-    export let uri = '/user';
+    export let uri = `?`;
     export let selected;
-    export let parentId = null;
-    export let userType = "*";
+    export let placehoder = "Rechercher..."
+    export let type = null;
 
-    let users = [];
+    let results = [];
     let waiting = false;
     let open = false;
     let search = "";
@@ -22,20 +22,16 @@
     let dropdownEl;
     let coords = { top: 0, left: 0, width: 0 };
 
-    uri = `${uri}?limit=50&page=1&userType=${userType}`
-    if (parentId)
-        uri = `${uri}&parentId=${parentId}`
-
     async function handleFilter() {
         waiting = true;
 
-        const response = await fetch(`${uri}&contains=${search}`,  {
+        const response = await fetch(`${uri}limit=50&page=1&contains=${search}`,  {
             method: 'GET',
             headers: { 'Content-Type': 'application/json' }
         });
 
         const resBody = await response.json();
-        users = resBody.data;
+        results = resBody.data;
 
         waiting = false;
     }
@@ -46,37 +42,39 @@
         open = !open;
     }
 
-    function selectUser(user) {
-        selected = user;
+    function selectResult(e) {
+        selected = e;
         open = false;
         search = "";
-        dispatch('selectUser', { user: user });
+        dispatch('selectResult', { el: e });
     }
 
 </script>
 
-<svelte:window bind:scrollY={y} />
-
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="dropdown {open ? 'open' : ''}" bind:this={dropdownEl} use:clickOutside on:click_outside={() => {open = false}}
     on:click|preventDefault|stopPropagation={openDropdown}>
-    <input on:keyup={handleFilter} bind:value={search}
-            class="search-input" type="text" placeholder="Rechercher un utilisateur..." />
+    <!-- Search field -->
+    <input on:keyup={handleFilter} bind:value={search} class="search-input" type="text" placeholder={placehoder} />
 
     <!-- Liste déroulante -->
     {#if open}
-    <Portal target="body" >
-        <div class="list" style="position: absolute; top:{coords.top + y}px; left:{coords.left}px; width: {coords.width}px;" >
-        <!-- Options -->
-        {#each users as user}
-            <div class="option" on:click={() => selectUser(user)}>
-                <UserPicture user={user} size={24}></UserPicture>
-                <span>{user.firstname} {user.lastname}</span>
-            </div>
-        {:else}
-            <div class="option"><span>Aucun résultat</span></div>
-        {/each}
+    <Portal target="#main-container">
+        <div class="list" style="position: absolute; top:{coords.top - 1}px; left:{coords.left - 85}px; width: {coords.width - 2}px;" >
+            <!-- Options -->
+            {#each results as r}
+                <div class="option" on:click={() => selectResult(r)}>
+                    {#if type == 'user'}
+                        <UserPicture user={r} size={24}></UserPicture>
+                        <span>{r.firstname} {r.lastname}</span>
+                    {:else}
+                        <span>{r.name}</span>
+                    {/if}
+                </div>
+            {:else}
+                <div class="option"><span>Aucun résultat</span></div>
+            {/each}
         </div>
     </Portal>
     {/if}
@@ -87,7 +85,7 @@
     position: relative;
     display: flex;
     background-color: var(--theme-input-bg-color, #ebebed);
-    height: var(--theme-input-height, 40px);
+    height: 38px;
     border: var(--theme-input-border, none);
     border-radius: 8px;
     padding: 0px 16px;
@@ -96,11 +94,14 @@
     font-weight: 400;
     font-family: var(--theme-text-font);
     color: var(--theme-input-text-font);
+    border: 1px solid var(--theme-input-bg-color, #ebebed);
     flex: 1;
 }
 .dropdown.open {
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
+    border: 1px solid #00000012;
+    box-shadow: #00000012 0 0px 8px;
 }
 .search-input {
     background-color: transparent;
@@ -117,13 +118,13 @@
     flex: 1;
     outline: none;
 }
-
 .list {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
-    background: var(--theme-input-bg-highlight, #ebebed);
+    background: var(--theme-input-bg-highlight);
+    background-color: #f9f9ff;
     border-radius: 8px;
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
@@ -131,6 +132,8 @@
     max-height: 220px;
     overflow-y: auto;
     z-index: 9999;
+    border: 1px solid #00000012;
+    box-shadow: #00000012 0 0px 8px;
 }
 
 .option {
@@ -141,9 +144,9 @@
     cursor: pointer;
 }
 .option > span {
-    font-size: 14px;
-    line-height: 16px;
-    font-weight: 400;
+    font-size: 13px;
+    line-height: 17px;
+    font-weight: 500;
     font-family: var(--theme-text-font);
     color: var(--theme-input-text-color);
     overflow: hidden;
@@ -151,6 +154,6 @@
     text-overflow: ellipsis;
 }
 .option:hover {
-    background: var(--theme-input-bg-hover);
+    background: var(--theme-input-bg-highlight);
 }
 </style>

package/lib/navigation/Button.svelte

@@ -5,6 +5,8 @@
     export let url;
     export let clickEvent;
     export let waiting = false;
+    export let style = null;
+    export let icon = null;
 </script>
 
 {#if waiting}
@@ -13,13 +15,13 @@
     </button>
 {:else}
     {#if clickEvent}
-    <button on:click|stopPropagation={clickEvent}>
-        {label}
-    </button>
+        <button on:click|stopPropagation={clickEvent} class="{style} {icon ? 'icon' : ''}" style:background-image={`url("${icon}")`}>
+            {label}
+        </button>
     {:else}
-    <a href={url} >
-        {label}
-    </a>
+        <a href={url} class="{style} {icon ? 'icon' : ''}" style:background-image={`url("${icon}")`}>
+            {label}
+        </a>
     {/if}
 {/if}
 
@@ -30,18 +32,19 @@ a, button {
     background-color: var(--theme-main-color);
     color: #ffffff !important;
     /*box-shadow: #000000a0 0px 1px 3px 0px !important;*/
+    border: 1px solid var(--theme-main-color);
     border-radius: 8px;
-    height: 34px;
-    line-height: 34px !important;
+    height: 30px;
+    line-height: 30px !important;
     font-size: 13px;
     text-decoration: none;
     text-align: center;
     font-family: var(--theme-main-font);
     font-weight: 700;
     text-transform: uppercase;
-    border: none;
     cursor: pointer;
     padding: 0px 20px;
+    transition: all ease-in-out 0.17s;
 }
 .waiting {
     background-repeat: no-repeat;
@@ -66,4 +69,30 @@ a:active {
 a:disabled {
     background-color: var(--disabled-background-color) !important;
 }
+.outline {
+    background-color: transparent;
+    color: var(--theme-main-color) !important;
+}
+.outline:hover {
+    background-color: var(--theme-main-color);
+    color: #ffffff !important;
+}
+.icon {
+    background-repeat: no-repeat;
+    background-position: 12px center;
+    background-size: 18px;
+    padding-left: 36px;
+}
+.disabled {
+    background-color: #eee;
+    color: #888 !important;
+    border: 1px solid #eee;
+    cursor: not-allowed;
+}
+.disabled:hover {
+    background-color: #eee;
+    color: #888 !important;
+    border: 1px solid #eee;
+    cursor: not-allowed;
+}
 </style>

package/lib/navigation/MainMenu.svelte

@@ -1,11 +1,20 @@
 <script>
     // @ts-nocheck
+    import { page } from '$app/stores';
+    import { afterUpdate } from 'svelte';
 
     import MenuItem from './MenuItem.svelte';
 
     export let isOpen = false;
     export let menu;
 
+    let current_url = $page.url.pathname.split('/');
+
+    afterUpdate(() => {
+        current_url = $page.url.pathname.split('/');
+        current_url = '/' + current_url[1];
+    });
+
 </script>
 
 <nav class="{isOpen ? 'menu-open' : ''}">
@@ -24,7 +33,8 @@
     <div class="main">
         <ul>
             {#each menu.main as item}
-                <MenuItem item={item} isOpen={isOpen}></MenuItem>
+                <link rel="preload" as="image" href={item.iconHover}>
+                <MenuItem item={item} isOpen={isOpen} selected={current_url == item.uri}></MenuItem>
             {/each}
         </ul>
     </div>
@@ -130,12 +140,18 @@
         width: 48px;
         height: 40px;
         min-height: 40px;
-        background-image: var(--logo-minimized);
-        background-size: contain;
+        background-image: var(--logo-large);
+        background-size: auto 32px;
         background-repeat: no-repeat;
-        background-position: center center;
+        background-position: 0px center;
         margin-bottom: 32px;
         margin-left: 17px;
+        transition: all ease-in-out 0.4s;
+    }
+    nav.menu-open > .logo {
+        width: 248px;
+        background-size: auto 32px;
+        background-position: 0px center;
     }
 
     nav > .main {

package/lib/navigation/MenuItem.svelte

@@ -1,16 +1,18 @@
 <script>
     export let item;
     export let isOpen = false;
+    export let selected = false;
+
     let isHover = false;
 </script>
 
 <li>
-    {#key item.selected}
-    <a aria-label="{item.name} tab menu" href="{item.uri}" class="menu-item {item.selected ? 'selected' : ''}"
+    {#key selected}
+    <a aria-label="{item.name} tab menu" href="{item.uri}" class="menu-item {selected ? 'selected' : ''}"
         on:mouseenter={() => isHover = true} on:mouseleave={() => isHover = false} data-sveltekit-preload-data="off">
         <div class="{isOpen ? 'menu-open' : ''}">
             <div><!-- Lateral Color Border --></div>
-            <div style="background-image: url({item.selected || isHover ? item.iconHover: item.icon})">
+            <div style="background-image: url({selected || isHover ? item.iconHover: item.icon})">
                 {item.name}
             </div>
         </div>

package/lib/user/SelectUserInput.svelte

@@ -1,7 +1,7 @@
 <script>
     // @ts-nocheck
-	import UserSelect from "./UserSelect.svelte";
 	import UserPicture from './UserPicture.svelte';
+    import SearchSelect from "../inputs/SearchSelect.svelte";
 
     export let name;
     export let value = null;
@@ -9,6 +9,10 @@
     export let parentId = null;
     export let userType = "*";
 
+    let uri = `/user?userType=${userType}`
+    if (parentId)
+        uri = `${uri}&parentId=${parentId}`
+
     if (multiple && !value)
         value = [];
 
@@ -20,7 +24,7 @@
     }
 
     function handleSelect(e) {
-        value.push(e.detail.user);
+        value.push(e.detail.el);
         value = value;
         console.log(value);
     }
@@ -43,13 +47,13 @@
             </div>
         {/each}
         <div>
-            <UserSelect uri={'/user'} on:selectUser={handleSelect} parentId={parentId} {userType}></UserSelect>
+            <SearchSelect uri={`${uri}&`} on:selectResult={handleSelect} type={'user'}></SearchSelect>
         </div>
     </div>
 {:else}
     <div id="single-select-wrapper" name={name} >
         {#if !value}
-            <UserSelect uri={'/user'} bind:selected={value} parentId={parentId} {userType}></UserSelect>
+            <SearchSelect uri={`${uri}&`} bind:selected={value} type={'user'}></SearchSelect>
         {:else}
             <div class="user-label">
                 <UserPicture size={24} user={value}></UserPicture>
@@ -118,7 +122,7 @@
     border-radius: 20px;
     font-weight: 600;
     text-align: center;
-    line-height: 16px;
+    line-height: 17px;
     color: #777;
     transform: rotate(45deg);
     transition: all ease-in-out 0.14s;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iconograph-ui",
-    "version": "1.6.13",
+    "version": "1.7.3",
     "description": "A Svelte Kit components library",
     "main": "./index.js",
     "svelte": "./index.js",