iconograph-ui 1.7.19 → 2.0.0

package/example/src/routes/{+page.svelte → basic/+page.svelte}

@@ -8,7 +8,7 @@
     import Input from "$lib/iconograph-ui/form/Input.svelte";
     import SexeChoiceInput from "$lib/iconograph-ui/form/SexeChoiceInput.svelte";
     import CustomInput from "$lib/components/CustomInput.svelte";
-    import CustomTable from "../lib/components/CustomTable.svelte";
+    import CustomTable from "../../lib/components/CustomTable.svelte";
     import Editor from "$lib/iconograph-ui/inputs/Editor.svelte";
     import SegmentedSwitchInput from "$lib/iconograph-ui/form/SegmentedSwitchInput.svelte"
     import Link from "$lib/iconograph-ui/display/Link.svelte";
@@ -47,6 +47,8 @@
         </table>
         <p></p>
     `;
+
+    inputs[7].value = true;
 </script>
 
 <HeadSection>

package/example/src/routes/{user → basic/user}/+page.svelte

@@ -67,10 +67,20 @@
                     <span class="margin-l-s" style="text-transform: uppercase; color: #888; font-weight: 600;"></span>
                 </div>
                 <div style="margin-right: 0px; display: flex; gap: 8px;">
-                    <ActionButton options={[{label: "Supprimer les derniers", action: () => {alert();}}]}></ActionButton>
+                    <ActionButton options={[{label: "Supprimer les derniers", icon: iconV, action: () => {alert();}}]} outline={true} ></ActionButton>
+                    <ActionButton options={[{label: "Supprimer les derniers", icon: iconV, 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>
+                    <Button label={''} style={"min"} icon={loaderIcon}></Button>
+                    <Button label={''} style={"outline min"} icon={iconV}></Button>
+                    <ActionButton style={"icon"} options={[
+                        {label: "Supprimer les derniers", icon: iconV, action: () => {alert();}},
+                        {label: "Supprimer les derniers", icon: iconV, action: () => {alert();}},
+                        {separator: true},
+                        {label: "Supprimer les derniers", icon: iconV, action: () => {alert();}},
+                        {label: "Supprimer les derniers", icon: iconV, action: () => {alert();}}
+                    ]}></ActionButton>
+                    <ActionButton style={"icon"} options={[{label: "Supprimer les derniers", action: () => {alert();}}]} outline={true}></ActionButton>
                 </div>
             </div>
         </div>

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

@@ -0,0 +1,111 @@
+<script>
+// @ts-nocheck
+
+    import NotificationWrapper from '$lib/iconograph-ui/notification/NotificationWrapper.svelte';
+    import MainMenu from "$lib/iconograph-ui/navigation/MainMenu.svelte";
+
+    let isMenuOpen = false;
+
+    let menu = {
+        logo: "",
+        main: [
+            { name: 'Dashboard', uri: '/parabole', icon: '/icons/icon-dashboard.svg', iconHover: '/icons/icon-dashboard.svg'},
+            { name: 'Projets', uri: '/user', icon: '/icons/icon-project.svg', iconHover: '/icons/icon-project.svg'},
+            { name: 'Bénéficiaires', uri: '/', icon: '/icons/icon-user.svg', iconHover: '/icons/icon-user.svg'},
+            { name: 'Home', uri: '/', icon: '/icons/icon-doc.svg', iconHover: '/icons/icon-doc.svg'},
+        ],
+        bottom: [
+            { name: 'Home', uri: '/', icon: '/icons/icon-doc.svg', iconHover: '/icons/icon-doc.svg'},
+        ]
+    };
+
+</script>
+
+<MainMenu menu={menu} bind:isOpen={isMenuOpen} ></MainMenu>
+
+<div id="main-container" class="{isMenuOpen ? 'menu-open' : ''}" >
+    <div style="display: contents">
+
+        <slot />
+
+    </div>
+</div>
+
+<NotificationWrapper></NotificationWrapper>
+
+<style>
+#main-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    left: 85px;
+    width: calc(100% - 85px);
+    transition: 0.3s all ease-in-out;
+    padding-bottom: 48px;
+}
+/* TODO: Integrate as a component
+#main-container.menu-open {
+    width: calc(100% - 285px);
+    left: 285px;
+}
+*/
+
+@media (max-width: 780px) {
+    #main-container {
+        left: 0px;
+        width: 100%;
+        margin-top: 0px;
+    }
+}
+
+:root {
+    --background-color: #fcfcfc;
+    --main-bg-color: #ffffff;
+    --main-border-color: #e4e4e4;
+    --main-border: 0px solid #e4e4e4;
+    --button-border-color: #e1e1e1;
+
+    --disabled-background-color: #555555;
+
+    /** Theme */
+    --theme-main-color: #0e2c12;
+    --theme-main-color-hover: #1e1e1e;
+    --theme-bg-color-light: #6046c511;
+    --theme-text-font: 'Montserrat';
+    --theme-title-font: 'Montserrat';
+    --theme-text-darkgrey: #555555;
+
+    /** Menu */
+    --main-menu-bg-color: #121212;
+    --main-menu-hb-color: #555;
+    --main-menu-fg-color: #ffffff;
+    --main-menu-bg-hover-color: #1e1e1e;
+    --main-menu-font-weight: 700;
+    --main-menu-font-size: 15px;
+
+    /** Inputs */
+    --theme-input-bg-color: #f7f7f9;
+    --theme-input-bg-highlight: #efeff5;
+    --theme-input-bg-hover: #f2f2f2;
+    --theme-input-border: none; /*2px solid ebebed*/
+    --theme-input-outline: 2px solid var(--theme-main-color);
+    --theme-input-outline-offset: 2px;
+    --theme-input-border-failure: 2px solid #f95959;
+    --theme-input-height: 40px;
+    --theme-input-text-color: #121212;
+
+    /** Icons */
+    --logo-minimized: url('/favicon.svg');
+    --logo-large: url('/logo.svg');
+
+    /** Shadows */
+    --button-box-shadow: #77777733 0px 0px 0px 0px !important;
+    --button-hover-box-shadow: #77777733 0px 0px 0px 0px !important;
+    --main-shadow: #00000012 0 0 8px;
+
+    /** Fonts */
+    --theme-main-font: 'Montserrat';
+}
+</style>
+

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

@@ -0,0 +1,112 @@
+<script>
+    import HeadSection from "$lib/iconograph-ui/layout/HeadSection.svelte";
+    import BodySection from "$lib/iconograph-ui/layout/BodySection.svelte";
+    import Card from "$lib/iconograph-ui/layout/Card.svelte";
+    import Modal from "$lib/iconograph-ui/layout/Modal.svelte";
+    import Form from "$lib/iconograph-ui/form/Form.svelte";
+    import FlexForm from "$lib/iconograph-ui/form/FlexForm.svelte";
+    import Input from "$lib/iconograph-ui/form/Input.svelte";
+    import SexeChoiceInput from "$lib/iconograph-ui/form/SexeChoiceInput.svelte";
+    import CustomInput from "$lib/components/CustomInput.svelte";
+    import CustomTable from "../../lib/components/CustomTable.svelte";
+    import Editor from "$lib/iconograph-ui/inputs/Editor.svelte";
+    import SegmentedSwitchInput from "$lib/iconograph-ui/form/SegmentedSwitchInput.svelte"
+    import Link from "$lib/iconograph-ui/display/Link.svelte";
+    import SelectUserInput from "$lib/iconograph-ui/user/SelectUserInput.svelte";
+    import MultiSelect from "$lib/iconograph-ui/form/MultiSelect.svelte";
+    import Checkbox from "$lib/iconograph-ui/form/Checkbox.svelte";
+
+    let options = [{ key: "Value" }]
+    let inputs = [
+        { component: Input, props: { type: "text", name: "title", label: "Titre" } },
+        { component: Input, props: { type: "select", name: "title", label: "Titre" } },
+        { component: Input, props: { type: "select", name: "custom", label: "Custom", options: options } },
+        { component: Input, props: { type: "email", name: "email", label: "Email"}, value: "test@example.com" },
+        { component: SexeChoiceInput, props: { name: "sexe", label: "Sexe" } },
+        { component: CustomInput, props: { name: "color", label: "Couleur" } },
+        { component: MultiSelect, props: { name: "multiselect", label: "Fruits", options: { APPLE: 'Pomme', BANANA: 'Banane' } }, },
+        { component: Checkbox, props: { type: "checkbox", name: "fields[email_auto_sending]", label: "Envoi Automatique de l'email", options: ["Envoi par défaut à 19h le jour de la séance"], stringify: true } },
+    ];
+
+    let button = {
+        label: "Enregistrer",
+    }
+
+    let open = false;
+    let section = 'Doc';
+
+    function onEditorChange(event) {
+      console.log("HTML:", event.detail.html);
+    }
+
+    let message = `
+        <p>Voici un tableau pré-rempli :</p>
+        <table border="1">
+            <tr><td>A1</td><td>B1</td></tr>
+            <tr><td>A2</td><td>B2</td></tr>
+        </table>
+        <p></p>
+    `;
+
+    inputs[7].value = true;
+</script>
+
+<HeadSection>
+
+    <h1 style="margin-top: 40px;">Welcome to SvelteKit</h1>
+    <p  style="margin-bottom: 24px;">Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+
+</HeadSection>
+
+<BodySection>
+
+    <Card padding={'0px'} >
+        <CustomTable></CustomTable>
+    </Card>
+
+    <Card>
+        <div on:click={() => open = true}>Open Modal</div>
+        <Link icon={"DOC"} uri={"/"} label={"CR Bibliapedia"}></Link>
+        <Link icon={"FOLDER"} uri={"/"} label={"CR Bibliapedia"}></Link>
+        <Link icon={"LINK"} uri={"/"} label={"CR Bibliapedia"}></Link>
+        <Link uri={"/"} label={"CR Bibliapedia"}></Link>
+    </Card>
+
+    <Card padding={'24px'}>
+        <h1>My Form</h1>
+
+        <Form inputs={inputs} uri={'/test'} button={button}>
+        </Form>
+
+    </Card>
+
+    <Card padding={'0px'}>
+        <Editor bind:content={message} ></Editor>
+    </Card>
+
+    <Card>
+
+        <SelectUserInput multiple={true}></SelectUserInput>
+
+    </Card>
+</BodySection>
+
+<Modal bind:open={open}>
+    <div style="padding: 24px; width: 80vw; height: 350px; margin-bottom: 24px;">
+        <FlexForm inputs={inputs} uri={'/test'} button={button}>
+            <SegmentedSwitchInput options={['Doc', 'Group', 'Entité']} bind:selected={section} ></SegmentedSwitchInput>
+            <p style="margin: 12px;">{section} is selected</p>
+
+            {#each inputs as input}
+                {#if !input.disabled }
+                    <div class="form-row">
+                        <div>
+                            <label for="{input.props.name}" class="mandatory">{input.props.label}</label>
+                            <svelte:component this={input.component} {...input.props} bind:value={input.value} />
+                        </div>
+                    </div>
+                {/if}
+            {/each}
+        </FlexForm>
+    </div>
+</Modal>

package/example/static/css/testapp.css

@@ -2,6 +2,7 @@
     --background-color: #fcfcfc;
     --main-bg-color: #ffffff;
     --main-border-color: #e4e4e4;
+    --button-border-color: #e1e1e1;
 
     --disabled-background-color: #555555;
 
@@ -13,20 +14,24 @@
     --theme-text-darkgrey: #555555;
 
     /** Inputs */
-    --theme-input-bg-color: #f5f5f9;
+    --theme-input-bg-color: #f7f7f9;
     --theme-input-bg-highlight: #efeff5;
-    --theme-input-bg-hover: #dfdfe4;
+    --theme-input-bg-hover: #f2f2f2;
     --theme-input-border: none; /*2px solid ebebed*/
     --theme-input-outline: 2px solid var(--theme-main-color);
     --theme-input-outline-offset: 2px;
     --theme-input-border-failure: 2px solid #f95959;
     --theme-input-height: 40px;
-    --theme-input-text-color: #222;
+    --theme-input-text-color: #121212;
 
     /** Icons */
     --logo-minimized: url('/favicon.svg');
     --logo-large: url('/logo.svg');
 
+    /** Shadows */
+    --button-box-shadow: #77777733 0px 0px 0px 0px !important;
+    --button-hover-box-shadow: #77777733 0px 0px 0px 0px !important;
+
     /** Fonts */
     --theme-main-font: 'Montserrat';
 }

package/example/static/icons/discord-logo-icon.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 566.93 566.93" style="enable-background:new 0 0 566.93 566.93;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FDFDFD;}
+</style>
+<path class="st0" d="M33.72,396.52c-0.09-0.99-0.17-1.99-0.26-2.98c-0.02-15.07-0.03-30.13-0.05-45.2
+	c3.25-78.94,28.88-150.57,72.77-215.55c12.02-17.8,35.78-16.26,54.07-23.73c9.38-3.83,20.11-4.45,29.35-8.52
+	c19.5-8.58,30.26-1.72,35.37,17.53c1.08,4.08,3.4,4.66,7.32,4.06c34.06-5.22,68.08-4.57,102.28-0.41
+	c12.06,1.47,9.79-12.47,14.4-18.97c3.79-5.34,6.38-7.24,12.92-5.73c30.64,7.1,60.72,16.01,90.02,27.36
+	c11.7,4.53,15.04,17.1,20.64,26.58c11,18.6,20.59,38.18,29.2,58.03c27.02,62.31,36.13,127.58,29.92,195.07
+	c-0.22,2.39-2.09,5.31-4.09,6.75c-27.32,19.74-56.55,36.11-87.81,48.81c-10.42,3.53-20.83,7.05-31.25,10.58
+	c-14.39-2.27-14.4-17.16-22.11-25.33c-11.68-12.39-7.43-19.68,8.02-23.65c5.8-1.49,11.13-5.06,16.46-8.07
+	c2.52-1.42,4.53-3.74,6.77-5.65c-4.29-2.31-5.92-8.64-13.8-4.76c-57.1,28.13-117.49,29.5-178.92,20.28
+	c-22.93-3.44-44.72-10.56-65.23-21.62c-4.57-2.46-6.67,2.88-9,5.46c-2.37,2.63,0.85,3.97,2.72,4.96c6.32,3.33,12.42,7.77,19.18,9.44
+	c17.38,4.3,16.62,11.59,7.4,24.62c-21.96,31.07-7.92,29.42-54.13,12.89c-31.52-11.28-59.93-28.9-87.27-48.14
+	c-4.68-3.29-3.13-8.25-4.32-12.49C34.1,397.59,33.91,397.05,33.72,396.52z M322.34,302.76c-0.05,26.59,19.8,48.63,43.9,48.77
+	c24.95,0.14,44.96-21.59,45.02-48.88c0.06-26.92-19.83-48.98-44.13-48.96C342.06,253.7,322.39,275.25,322.34,302.76z M244.43,302.94
+	c0.13-27.17-19.44-49.06-44.08-49.3c-24.41-0.24-44.63,21.54-44.81,48.26c-0.18,27.34,19.46,49.4,44.18,49.63
+	C224.17,351.77,244.31,329.88,244.43,302.94z"/>
+</svg>

package/example/static/icons/icon-add-w.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0,0,256,256"
+   width="52px"
+   height="52px"
+   version="1.1"
+   id="svg2"
+   sodipodi:docname="icon-add-w.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   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="defs2" />
+  <sodipodi:namedview
+     id="namedview2"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="4.8173077"
+     inkscape:cx="20.239521"
+     inkscape:cy="25.636727"
+     inkscape:window-width="1366"
+     inkscape:window-height="697"
+     inkscape:window-x="296"
+     inkscape:window-y="1072"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <path
+     id="path2"
+     style="fill:#ffffff;stroke:none;stroke-width:12.8;stroke-linecap:square"
+     d="M 128 12.778846 A 115.22555 115.22555 0 0 0 12.778846 128 A 115.22555 115.22555 0 0 0 128 243.22115 A 115.22555 115.22555 0 0 0 243.22115 128 A 115.22555 115.22555 0 0 0 128 12.778846 z M 110.78846 65.817308 L 144.90385 65.817308 L 144.90385 112.02885 L 190.18269 112.02885 L 190.18269 143.97115 L 144.90385 143.97115 L 144.90385 190.18269 L 110.78846 190.18269 L 110.78846 143.97115 L 65.817308 143.97115 L 65.817308 112.02885 L 110.78846 112.02885 L 110.78846 65.817308 z " />
+</svg>

package/example/static/icons/icon-archive-black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="96px" height="96px"><path d="M 5.75 3 A 1.0001 1.0001 0 0 0 4.8867188 3.4960938 L 3.1367188 6.4960938 A 1.0001 1.0001 0 0 0 3 7 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 7 A 1.0001 1.0001 0 0 0 20.863281 6.4960938 L 19.113281 3.4960938 A 1.0001 1.0001 0 0 0 18.25 3 L 5.75 3 z M 6.3242188 5 L 17.675781 5 L 18.841797 7 L 5.1582031 7 L 6.3242188 5 z M 5 9 L 19 9 L 19 19 L 5 19 L 5 9 z M 9 11 L 9 13 L 15 13 L 15 11 L 9 11 z"/></svg>

package/example/static/icons/icon-archive-grey.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 24 24"
+   width="96px"
+   height="96px"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="icon-archive-grey.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   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="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="12.21875"
+     inkscape:cx="48"
+     inkscape:cy="48"
+     inkscape:window-width="2560"
+     inkscape:window-height="1369"
+     inkscape:window-x="1072"
+     inkscape:window-y="-3"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="M 5.75 3 A 1.0001 1.0001 0 0 0 4.8867188 3.4960938 L 3.1367188 6.4960938 A 1.0001 1.0001 0 0 0 3 7 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 7 A 1.0001 1.0001 0 0 0 20.863281 6.4960938 L 19.113281 3.4960938 A 1.0001 1.0001 0 0 0 18.25 3 L 5.75 3 z M 6.3242188 5 L 17.675781 5 L 18.841797 7 L 5.1582031 7 L 6.3242188 5 z M 5 9 L 19 9 L 19 19 L 5 19 L 5 9 z M 9 11 L 9 13 L 15 13 L 15 11 L 9 11 z"
+     id="path1"
+     style="fill:#888888;fill-opacity:1" />
+</svg>

package/example/static/icons/icon-beneficiaire-small.svg

@@ -0,0 +1,50 @@
+<?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-beneficiaire-small.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   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" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="false"
+     inkscape:zoom="5.9514821"
+     inkscape:cx="39.738001"
+     inkscape:cy="40.242077"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:showpageshadow="0"
+     inkscape:deskcolor="#505050" />
+  <path
+     style="color:#000000;fill:#888888;stroke-linecap:square;-inkscape-stroke:none;paint-order:fill markers stroke;fill-opacity:1"
+     d="m 16.552734,2.9550781 c -1.888659,0 -3.441406,1.5507934 -3.441406,3.4394531 0,1.8886598 1.552747,3.4414063 3.441406,3.4414063 1.88866,0 3.441407,-1.5527465 3.441407,-3.4414063 0,-1.8886597 -1.552747,-3.4394531 -3.441407,-3.4394531 z m 0,2 c 0.807781,0 1.441407,0.6316726 1.441407,1.4394531 0,0.8077806 -0.633626,1.4414063 -1.441407,1.4414063 -0.80778,0 -1.441406,-0.6336257 -1.441406,-1.4414063 0,-0.8077805 0.633626,-1.4394531 1.441406,-1.4394531 z"
+     id="path9278" />
+  <path
+     id="path878"
+     style="color:#000000;fill:#888888;stroke-width:1;-inkscape-stroke:none;fill-opacity:1"
+     d="m 12.490234,18.463541 c -0.205605,0.0031 -0.41796,0.01961 -0.63802,0.05013 -0.586827,0.08137 -1.229278,0.26186 -1.9589848,0.546875 l -0.027343,0.0098 -3.3835585,1.547248 c -0.5904399,0.269999 -0.96071,0.841502 -0.961592,1.525959 l -0.00593,4.600492 c -0.0012,0.934133 0.8043537,1.02996 1.3671715,0.783974 l 2.5307869,-1.10611 c 0.7895051,-0.34502 1.0276061,-0.344304 1.7539051,0.05469 l 3.529297,1.939453 c 1.195837,0.656932 2.673491,0.668115 4.302734,-0.0332 l 6.529296,-2.810547 c 0.571767,-0.246125 1.091661,-0.665495 1.376954,-1.277344 0.285294,-0.61185 0.269192,-1.379912 -0.03516,-2.058594 -0.31735,-0.70768 -0.990865,-1.161836 -1.626953,-1.292968 -0.636088,-0.131131 -1.243479,-0.02988 -1.785156,0.179687 l -3.154948,1.222005 c -0.06035,-0.332047 -0.191043,-0.64998 -0.391927,-0.913411 -0.363962,-0.477279 -0.876014,-0.763289 -1.431641,-0.947266 L 16.17448,19.722696 c -0.983701,-0.48296 -1.729903,-0.952683 -2.703125,-1.164063 -0.313991,-0.0682 -0.638444,-0.100296 -0.98112,-0.09505 z m 0.002,1.992188 c 0.20164,-0.0024 0.380509,0.01997 0.555339,0.05794 0.561727,0.122005 1.230321,0.507752 2.34375,1.046875 l 0.05859,0.02734 2.400391,0.794922 c 0.305429,0.101133 0.438385,0.217385 0.470703,0.259765 0.03232,0.04238 0.04486,0.02313 0.01758,0.183594 -0.0272,0.159965 -0.05192,0.187171 -0.0918,0.228516 -0.03206,0.03325 -0.107657,0.09395 -0.289714,0.158203 -0.158088,0.0274 -0.28286,0.01486 -0.606771,-0.07813 l -3.179687,-0.912109 -0.552734,1.921875 3.179687,0.914062 c 0.533648,0.153191 1.055544,0.189365 1.526693,0.115886 l 0.0046,0.01693 c 0.05676,-0.01543 0.112624,-0.03192 0.167969,-0.04948 0.01484,-0.0033 0.0302,-0.0056 0.04492,-0.0091 0.525208,-0.124778 0.942668,-0.326788 1.546875,-0.560547 l 4.089844,-1.582032 c 0.243002,-0.09401 0.518242,-0.117549 0.662109,-0.08789 0.143867,0.02966 0.146613,0.02197 0.205078,0.152343 0.114196,0.254655 0.08117,0.320985 0.04687,0.394532 -0.03429,0.07355 -0.135212,0.190344 -0.355468,0.285156 l -6.529297,2.810547 c -1.296652,0.558155 -1.849988,0.50305 -2.548828,0.119141 L 12.129569,24.724609 C 11.016395,24.113095 9.7614012,24.085585 8.6119793,24.58789 l -1.09375,0.477865 0.00391,-2.723958 3.1074217,-1.419922 c 0.865015,-0.336777 1.419023,-0.460969 1.86263,-0.466146 z"
+     sodipodi:nodetypes="scccsssscccccsssccsccsssscccsssccccccccsccsscccccccccsss" />
+  <path
+     id="path867-3"
+     style="color:#000000;fill:#888888;fill-opacity:1;stroke-width:0.551331;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="m 16.499511,11.328785 c -1.502798,0.0074 -2.81178,0.211726 -3.811938,0.709624 -1.000156,0.497899 -1.695989,1.391385 -1.695989,2.519755 v 1.445451 c 0,0.648367 0.465058,1.137839 1.159375,1.137839 h 8.758485 c 0.632876,0 1.111994,-0.525562 1.111994,-1.081486 v -1.478112 c 0,-1.128948 -0.604426,-2.056389 -1.584,-2.564983 -0.979573,-0.508594 -2.294737,-0.696239 -3.937927,-0.688088 z m 0.03535,1.643671 c 1.971751,-0.0313 3.37458,0.442671 3.37458,1.6094 v 0.741772 h -6.785105 v -0.765464 c 0,-1.390782 1.921229,-1.562068 3.410527,-1.585708 z"
+     sodipodi:nodetypes="csssssssscssccss" />
+</svg>

package/example/static/icons/icon-beneficiaire.svg

@@ -0,0 +1,48 @@
+<?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-beneficiaire.svg"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   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" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="false"
+     inkscape:zoom="5.9514821"
+     inkscape:cx="-40.998191"
+     inkscape:cy="26.800047"
+     inkscape:window-width="3200"
+     inkscape:window-height="1721"
+     inkscape:window-x="2391"
+     inkscape:window-y="-993"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     style="color:#000000;fill:#ffffff;stroke-linecap:square;-inkscape-stroke:none;paint-order:fill markers stroke;fill-opacity:1"
+     d="m 16.552734,2.9550781 c -1.888659,0 -3.441406,1.5507934 -3.441406,3.4394531 0,1.8886598 1.552747,3.4414063 3.441406,3.4414063 1.88866,0 3.441407,-1.5527465 3.441407,-3.4414063 0,-1.8886597 -1.552747,-3.4394531 -3.441407,-3.4394531 z m 0,2 c 0.807781,0 1.441407,0.6316726 1.441407,1.4394531 0,0.8077806 -0.633626,1.4414063 -1.441407,1.4414063 -0.80778,0 -1.441406,-0.6336257 -1.441406,-1.4414063 0,-0.8077805 0.633626,-1.4394531 1.441406,-1.4394531 z"
+     id="path9278" />
+  <path
+     id="path878"
+     style="color:#000000;fill:#ffffff;stroke-width:1;-inkscape-stroke:none;fill-opacity:1"
+     d="m 12.490234,18.463541 c -0.205605,0.0031 -0.41796,0.01961 -0.63802,0.05013 -0.586827,0.08137 -1.229278,0.26186 -1.9589848,0.546875 l -0.027343,0.0098 -3.3835585,1.547248 c -0.5904399,0.269999 -0.96071,0.841502 -0.961592,1.525959 l -0.00593,4.600492 c -0.0012,0.934133 0.8043537,1.02996 1.3671715,0.783974 l 2.5307869,-1.10611 c 0.7895051,-0.34502 1.0276061,-0.344304 1.7539051,0.05469 l 3.529297,1.939453 c 1.195837,0.656932 2.673491,0.668115 4.302734,-0.0332 l 6.529296,-2.810547 c 0.571767,-0.246125 1.091661,-0.665495 1.376954,-1.277344 0.285294,-0.61185 0.269192,-1.379912 -0.03516,-2.058594 -0.31735,-0.70768 -0.990865,-1.161836 -1.626953,-1.292968 -0.636088,-0.131131 -1.243479,-0.02988 -1.785156,0.179687 l -3.154948,1.222005 c -0.06035,-0.332047 -0.191043,-0.64998 -0.391927,-0.913411 -0.363962,-0.477279 -0.876014,-0.763289 -1.431641,-0.947266 L 16.17448,19.722696 c -0.983701,-0.48296 -1.729903,-0.952683 -2.703125,-1.164063 -0.313991,-0.0682 -0.638444,-0.100296 -0.98112,-0.09505 z m 0.002,1.992188 c 0.20164,-0.0024 0.380509,0.01997 0.555339,0.05794 0.561727,0.122005 1.230321,0.507752 2.34375,1.046875 l 0.05859,0.02734 2.400391,0.794922 c 0.305429,0.101133 0.438385,0.217385 0.470703,0.259765 0.03232,0.04238 0.04486,0.02313 0.01758,0.183594 -0.0272,0.159965 -0.05192,0.187171 -0.0918,0.228516 -0.03206,0.03325 -0.107657,0.09395 -0.289714,0.158203 -0.158088,0.0274 -0.28286,0.01486 -0.606771,-0.07813 l -3.179687,-0.912109 -0.552734,1.921875 3.179687,0.914062 c 0.533648,0.153191 1.055544,0.189365 1.526693,0.115886 l 0.0046,0.01693 c 0.05676,-0.01543 0.112624,-0.03192 0.167969,-0.04948 0.01484,-0.0033 0.0302,-0.0056 0.04492,-0.0091 0.525208,-0.124778 0.942668,-0.326788 1.546875,-0.560547 l 4.089844,-1.582032 c 0.243002,-0.09401 0.518242,-0.117549 0.662109,-0.08789 0.143867,0.02966 0.146613,0.02197 0.205078,0.152343 0.114196,0.254655 0.08117,0.320985 0.04687,0.394532 -0.03429,0.07355 -0.135212,0.190344 -0.355468,0.285156 l -6.529297,2.810547 c -1.296652,0.558155 -1.849988,0.50305 -2.548828,0.119141 L 12.129569,24.724609 C 11.016395,24.113095 9.7614012,24.085585 8.6119793,24.58789 l -1.09375,0.477865 0.00391,-2.723958 3.1074217,-1.419922 c 0.865015,-0.336777 1.419023,-0.460969 1.86263,-0.466146 z"
+     sodipodi:nodetypes="scccsssscccccsssccsccsssscccsssccccccccsccsscccccccccsss" />
+  <path
+     id="path867-3"
+     style="color:#000000;fill:#ffffff;fill-opacity:1;stroke-width:0.551331;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="m 16.499511,11.328785 c -1.502798,0.0074 -2.81178,0.211726 -3.811938,0.709624 -1.000156,0.497899 -1.695989,1.391385 -1.695989,2.519755 v 1.445451 c 0,0.648367 0.465058,1.137839 1.159375,1.137839 h 8.758485 c 0.632876,0 1.111994,-0.525562 1.111994,-1.081486 v -1.478112 c 0,-1.128948 -0.604426,-2.056389 -1.584,-2.564983 -0.979573,-0.508594 -2.294737,-0.696239 -3.937927,-0.688088 z m 0.03535,1.643671 c 1.971751,-0.0313 3.37458,0.442671 3.37458,1.6094 v 0.741772 h -6.785105 v -0.765464 c 0,-1.390782 1.921229,-1.562068 3.410527,-1.585708 z"
+     sodipodi:nodetypes="csssssssscssccss" />
+</svg>

package/example/static/icons/icon-cardlist-black.svg

@@ -0,0 +1,56 @@
+<?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-cardlist-black.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   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" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="false"
+     inkscape:zoom="4.2083334"
+     inkscape:cx="37.900989"
+     inkscape:cy="42.178217"
+     inkscape:window-width="1366"
+     inkscape:window-height="697"
+     inkscape:window-x="296"
+     inkscape:window-y="1072"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:showpageshadow="0"
+     inkscape:deskcolor="#505050" />
+  <path
+     id="rect855-4-9-3"
+     style="color:#000000;fill:#121212;fill-opacity:1;stroke-width:0.943628;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="M 6.054452,3.9999997 C 4.932642,3.9999997 4,4.8577097 4,5.8893877 v 6.8861243 c 0,1.031678 0.932642,1.891155 2.054452,1.891155 h 6.55584 c 1.12181,0 2.056375,-0.859477 2.056375,-1.891155 V 5.8893877 c 0,-1.031678 -0.934565,-1.889388 -2.056375,-1.889388 z m 5.966382,2.666667 -0.02083,5.3333343 H 6.666667 l 0.02083,-5.3333346 z"
+     sodipodi:nodetypes="sssssssssccccc" />
+  <path
+     id="rect855-4-9-3-1"
+     style="color:#000000;fill:#121212;fill-opacity:1;stroke-width:0.943628;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="m 19.370525,4.000646 c -1.12181,0 -2.054452,0.85771 -2.054452,1.889388 v 6.886125 c 0,1.031678 0.932642,1.891155 2.054452,1.891155 h 6.55584 c 1.12181,0 2.056375,-0.859477 2.056375,-1.891155 V 5.890034 c 0,-1.031678 -0.934565,-1.889388 -2.056375,-1.889388 z m 5.966382,2.666667 -0.02083,5.333335 H 19.98274 l 0.02083,-5.3333353 z"
+     sodipodi:nodetypes="sssssssssccccc" />
+  <path
+     id="rect855-4-9-3-8"
+     style="color:#000000;fill:#121212;fill-opacity:1;stroke-width:0.943628;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="m 5.9596846,17.332687 c -1.12181,0 -2.054452,0.85771 -2.054452,1.889388 v 6.886124 c 0,1.031678 0.932642,1.891155 2.054452,1.891155 h 6.5558394 c 1.12181,0 2.056375,-0.859477 2.056375,-1.891155 v -6.886124 c 0,-1.031678 -0.934565,-1.889388 -2.056375,-1.889388 z m 5.9663814,2.666667 -0.02083,5.333334 H 6.5718996 l 0.02083,-5.333335 z"
+     sodipodi:nodetypes="sssssssssccccc" />
+  <path
+     id="rect855-4-9-3-8-0"
+     style="color:#000000;fill:#121212;fill-opacity:1;stroke-width:0.943628;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="m 19.275758,17.333334 c -1.12181,0 -2.054452,0.85771 -2.054452,1.889388 v 6.886124 c 0,1.031678 0.932642,1.891155 2.054452,1.891155 h 6.555839 c 1.12181,0 2.056375,-0.859477 2.056375,-1.891155 v -6.886124 c 0,-1.031678 -0.934565,-1.889388 -2.056375,-1.889388 z m 5.966381,2.666667 -0.02083,5.333334 H 19.887973 L 19.908803,20 Z"
+     sodipodi:nodetypes="sssssssssccccc" />
+</svg>

package/example/static/icons/icon-cardlist-grey.svg

@@ -0,0 +1,56 @@
+<?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-cardlist.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   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" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="false"
+     inkscape:zoom="5.9514822"
+     inkscape:cx="26.379983"
+     inkscape:cy="37.21762"
+     inkscape:window-width="1366"
+     inkscape:window-height="697"
+     inkscape:window-x="296"
+     inkscape:window-y="1072"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:showpageshadow="0"
+     inkscape:deskcolor="#505050" />
+  <path
+     id="rect855-4-9-3"
+     style="color:#000000;fill:#888888;fill-opacity:1;stroke-width:0.943628;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="M 6.054452,3.9999997 C 4.932642,3.9999997 4,4.8577097 4,5.8893877 v 6.8861243 c 0,1.031678 0.932642,1.891155 2.054452,1.891155 h 6.55584 c 1.12181,0 2.056375,-0.859477 2.056375,-1.891155 V 5.8893877 c 0,-1.031678 -0.934565,-1.889388 -2.056375,-1.889388 z m 5.966382,2.666667 -0.02083,5.3333343 H 6.666667 l 0.02083,-5.3333346 z"
+     sodipodi:nodetypes="sssssssssccccc" />
+  <path
+     id="rect855-4-9-3-1"
+     style="color:#000000;fill:#888888;fill-opacity:1;stroke-width:0.943628;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="m 19.370525,4.000646 c -1.12181,0 -2.054452,0.85771 -2.054452,1.889388 v 6.886125 c 0,1.031678 0.932642,1.891155 2.054452,1.891155 h 6.55584 c 1.12181,0 2.056375,-0.859477 2.056375,-1.891155 V 5.890034 c 0,-1.031678 -0.934565,-1.889388 -2.056375,-1.889388 z m 5.966382,2.666667 -0.02083,5.333335 H 19.98274 l 0.02083,-5.3333353 z"
+     sodipodi:nodetypes="sssssssssccccc" />
+  <path
+     id="rect855-4-9-3-8"
+     style="color:#000000;fill:#888888;fill-opacity:1;stroke-width:0.943628;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="m 5.9596846,17.332687 c -1.12181,0 -2.054452,0.85771 -2.054452,1.889388 v 6.886124 c 0,1.031678 0.932642,1.891155 2.054452,1.891155 h 6.5558394 c 1.12181,0 2.056375,-0.859477 2.056375,-1.891155 v -6.886124 c 0,-1.031678 -0.934565,-1.889388 -2.056375,-1.889388 z m 5.9663814,2.666667 -0.02083,5.333334 H 6.5718996 l 0.02083,-5.333335 z"
+     sodipodi:nodetypes="sssssssssccccc" />
+  <path
+     id="rect855-4-9-3-8-0"
+     style="color:#000000;fill:#888888;fill-opacity:1;stroke-width:0.943628;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="m 19.275758,17.333334 c -1.12181,0 -2.054452,0.85771 -2.054452,1.889388 v 6.886124 c 0,1.031678 0.932642,1.891155 2.054452,1.891155 h 6.555839 c 1.12181,0 2.056375,-0.859477 2.056375,-1.891155 v -6.886124 c 0,-1.031678 -0.934565,-1.889388 -2.056375,-1.889388 z m 5.966381,2.666667 -0.02083,5.333334 H 19.887973 L 19.908803,20 Z"
+     sodipodi:nodetypes="sssssssssccccc" />
+</svg>