django-unfold 0.64.2__py3-none-any.whl → 0.66.0__py3-none-any.whl

unfold/static/unfold/js/app.js

@@ -68,7 +68,7 @@ function searchDropdown() {
       }
     },
     prevItem() {
-      if (this.currentIndex > 0) {
+      if (this.currentIndex > 1) {
         this.currentIndex--;
       }
     },
@@ -93,6 +93,7 @@ function searchCommand() {
     hasResults: false,
     openCommandResults: false,
     currentIndex: 0,
+    totalItems: 0,
     commandHistory: JSON.parse(localStorage.getItem("commandHistory") || "[]"),
     handleOpen() {
       this.openCommandResults = true;
@@ -102,6 +103,7 @@ function searchCommand() {
       }, 20);
 
       this.items = document.querySelectorAll("#command-history li");
+      this.totalItems = this.items.length;
     },
     handleShortcut(event) {
       if (
@@ -121,21 +123,46 @@ function searchCommand() {
         this.openCommandResults = false;
         this.el.innerHTML = "";
         this.items = undefined;
+        this.totalItems = 0;
         this.currentIndex = 0;
       } else {
         this.$refs.searchInputCommand.value = "";
       }
     },
     handleContentLoaded(event) {
-      this.items = event.target.querySelectorAll("li");
-      this.currentIndex = 0;
-      this.hasResults = this.items.length > 0;
+      if (
+        event.target.id !== "command-results" &&
+        event.target.id !== "command-results-list"
+      ) {
+        return;
+      }
+
+      const commandResultsList = document.getElementById(
+        "command-results-list"
+      );
+      if (commandResultsList) {
+        this.items = commandResultsList.querySelectorAll("li");
+        this.totalItems = this.items.length;
+      } else {
+        this.items = undefined;
+        this.totalItems = 0;
+      }
+
+      if (event.target.id === "command-results") {
+        this.currentIndex = 0;
+
+        if (this.items) {
+          this.totalItems = this.items.length;
+        } else {
+          this.totalItems = 0;
+        }
+      }
+
+      this.hasResults = this.totalItems > 0;
 
       if (!this.hasResults) {
         this.items = document.querySelectorAll("#command-history li");
       }
-
-      new SimpleBar(event.target);
     },
     handleOutsideClick() {
       this.$refs.searchInputCommand.value = "";
@@ -158,7 +185,7 @@ function searchCommand() {
       }
     },
     nextItem() {
-      if (this.currentIndex < this.items.length) {
+      if (this.currentIndex < this.totalItems) {
         this.currentIndex++;
         this.scrollToActiveItem();
       }
@@ -417,6 +444,11 @@ const DEFAULT_CHART_OPTIONS = {
       ticks: {
         color: "#9ca3af",
         display: true,
+        maxTicksLimit: function (context) {
+          return context.chart.data.datasets.find(
+            (dataset) => dataset.maxTicksXLimit
+          )?.maxTicksXLimit;
+        },
       },
       grid: {
         display: true,
@@ -430,9 +462,22 @@ const DEFAULT_CHART_OPTIONS = {
         width: 0,
       },
       ticks: {
-        display: false,
-        font: {
-          size: 13,
+        color: "#9ca3af",
+        display: function (context) {
+          return context.chart.data.datasets.some((dataset) => {
+            return (
+              dataset.hasOwnProperty("displayYAxis") && dataset.displayYAxis
+            );
+          });
+        },
+        callback: function (value) {
+          const suffix = this.chart.data.datasets.find(
+            (dataset) => dataset.suffixYAxis
+          )?.suffixYAxis;
+          if (suffix) {
+            return `${value} ${suffix}`;
+          }
+          return value;
         },
       },
       grid: {
@@ -505,7 +550,7 @@ const renderCharts = () => {
       new Chart(ctx, {
         type: type || "bar",
         data: parsedData,
-        options: options ? JSON.parse(options) : DEFAULT_CHART_OPTIONS,
+        options: options ? JSON.parse(options) : { ...DEFAULT_CHART_OPTIONS },
       })
     );
   }

unfold/styles.css

@@ -9,19 +9,20 @@
   }
 }
 
-@source inline("bg-white/[.06] border-white/40 h-3 w-3 h-[64px] w-[65px]! left-[65px] {dark:,}text-base-{50,{100..900},950} dark:hover:bg-white/[.06] translate-x-1/4 -translate-y-1/4");
-@source inline("{-,}{top,bottom,left,right}-{0..6}");
+@source inline("aspect-square bg-white/[.06] border-white/40 h-3 w-3 h-[64px] w-[65px]! left-[65px] {dark:,}text-base-{50,{100..900},950} dark:hover:bg-white/[.06] {-,}translate-{x,y}-{1/2}");
+@source inline("{-,}{top,bottom,left,right}-{1/2,0..6} {!,}leading-[38px] text-{default,subtle,important}");
+@source inline("bg-linear-to-{{t,r,b,l,tl,tr,bl,br}} {dark:,}{from, to}-{{{base,primary}-{50,{100..900..100},950}},white}");
 @source inline("rounded rounded-{t,r,b,l} rounded-{t,r,b,l}-default");
 @source inline("{md:,lg:,2xl:,}relative {md:,lg:,2xl:,}flex {md:,lg:,2xl:,}absolute {md:,lg:,2xl:,}sticky");
-@source inline("{-,}m{t,r,b,l,x,y,}-{0..6} {-,}p{t,r,b,l,x,y,}-{0..6}");
+@source inline("{-,}{lg:,}m{t,r,b,l,x,y,}-{0..24} {-,}{lg:,}p{t,r,b,l,x,y,}-{0..24}");
 @source inline("{md:,lg:,}border-{0,2} {md:,lg:,}border-{t,r,b,l}-{0,2}");
 @source inline("{hover:,dark:,}bg-primary-{50,{100..900..100},950}");
 @source inline("{hover:,dark:,}border-base-{50,{100..900..100},950} {hover:,dark:,}border-transparent");
 @source inline("{hover:,dark:,}bg-base-{50,{100..900..100},950}");
-@source inline("{md:,lg:,}w-{1/2,1/3,2/3,1/4,2/4,3/4,1/5,2/5,3/5,4/5,1/6,2/6,3/6,4/6,5/6,1/7,2/7,3/7,4/7,5/7,6/7}");
-@source inline("{md:,lg:,}gap-{0.5,{1..12}}");
-@source inline("{md:,lg:,}grid-cols-{1..12}");
-@source inline("{md:,lg:,}col-span-{1..12}");
+@source inline("{md:,lg:,}{min-h,h,min-w,w}-{1..8} {md:,lg:,}w-{1/2,1/3,2/3,1/4,2/4,3/4,1/5,2/5,3/5,4/5,1/6,2/6,3/6,4/6,5/6,1/7,2/7,3/7,4/7,5/7,6/7}");
+@source inline("{md:,lg:,xl:,}gap-{0.5,{1..16}}");
+@source inline("{md:,lg:,xl:,}grid-cols-{1..16}");
+@source inline("{md:,lg:,xl:,}col-span-{1..16}");
 
 @layer base {
   *,
@@ -29,7 +30,7 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+    border-color: var(--color-base-200, currentColor);
   }
 }
 
@@ -74,6 +75,19 @@
   --color-font-important-dark: var(--color-font-important-dark);
 }
 
+
+@utility text-important {
+ @apply text-font-important-light dark:text-font-important-dark;
+}
+
+@utility text-default {
+  @apply text-font-default-light dark:text-font-default-dark;
+}
+
+@utility text-subtle {
+  @apply text-font-subtle-light dark:text-font-subtle-dark;
+}
+
 @utility field-sizing-content {
   field-sizing: content;
 }
@@ -99,7 +113,7 @@
 }
 
 @utility scrollable-top {
-  @apply after:absolute after:content-[''] after:bg-linear-to-t after:from-gray-100 after:h-4 after:left-0 after:right-0 after:-top-px after:-translate-y-full dark:after:bg-none;
+  @apply after:absolute after:content-[''] after:bg-linear-to-t after:from-base-100 after:h-4 after:left-0 after:right-0 after:-top-px after:-translate-y-full dark:after:bg-none;
 }
 
 @utility md-16 {
@@ -264,7 +278,7 @@ table tr.selected th {
 
 .selector-chooseall,
 .selector-clearall {
-  @apply block border-t border-base-200 py-2 text-center text-sm text-primary-500 dark:border-base-700;
+  @apply block border-t border-base-200 cursor-pointer py-2 text-center text-sm text-default;
 }
 
 .selector-clearall {

unfold/templates/admin/change_form.html

@@ -52,8 +52,12 @@
                     <input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">
                 {% endif %}
 
-                {% include "unfold/helpers/messages/errornote.html" with errors=errors %}
-                {% include "unfold/helpers/messages/error.html" with errors=adminform.form.non_field_errors %}
+                {% if errors or adminform.form.non_field_errors %}
+                    <div class="flex flex-col gap-4 *:mb-0">
+                        {% include "unfold/helpers/messages/errornote.html" with errors=errors %}
+                        {% include "unfold/helpers/messages/error.html" with errors=adminform.form.non_field_errors %}
+                    </div>
+                {% endif %}
 
                 {% block field_sets %}
                     {% with has_conditional_display=adminform.model_admin.conditional_fields %}

unfold/templates/admin/nav_sidebar.html

@@ -2,7 +2,7 @@
 
 <div class="relative z-50">
     <div class="fixed hidden xl:relative xl:block w-[288px] {% element_classes 'navigation_wrapper' %}" x-bind:class="{'xl:hidden!': !sidebarDesktopOpen, 'block!': sidebarMobileOpen}">
-        <div class="bg-gray-50 relative z-30 dark:bg-gray-900">
+        <div class="bg-base-50 relative z-30 dark:bg-base-900">
             <div id="nav-sidebar" class="bg-base-50 border-r border-base-200 bottom-0 fixed max-h-screen top-0 w-[288px] dark:border-base-800 dark:bg-base-900 {% element_classes 'navigation' %}">
                 {% if templates.navigation %}
                     {% include templates.navigation %}

unfold/templates/unfold/components/button.html

@@ -3,7 +3,7 @@ class="font-medium flex group items-center gap-2 px-3 py-2 rounded-default justi
 {% if variant == "default" %}
     border border-base-200 bg-white text-font-important-light dark:border-base-700 dark:bg-transparent dark:text-font-important-dark
 {% elif variant == "secondary" %}
-    bg-gray-100 border border-transparent dark:bg-base-800
+    bg-base-100 border border-transparent dark:bg-base-800
 {% elif variant == "ghost" %}
     bg-transparent text-font-important-light dark:text-font-important-dark
 {% else %}

unfold/templates/unfold/components/card.html

@@ -1,11 +1,11 @@
-<{% if href %}a href="{{ href }}"{% else %}div{% endif %} class="bg-white block border border-base-200 flex flex-col grow overflow-hidden p-6 relative rounded-default shadow-xs dark:bg-base-900 dark:border-base-800 {% if href %}cursor-pointer transition-all hover:border-base-300 hover:shadow-md hover:shadow-base-200 dark:hover:border-base-700 dark:hover:shadow-base-800/50 {% endif %}{% if class %} {{ class }}{% endif %}">
+<{% if href %}a href="{{ href }}"{% else %}div{% endif %} class="bg-white block flex flex-col grow overflow-hidden p-6 relative rounded-default shadow-xs dark:bg-base-900 dark:border-base-800 {% if not disable_border %}border border-base-200 {% else %}shadow-base-500/20{% endif %} {% if href %}cursor-pointer transition-all hover:border-base-300 hover:shadow-md dark:hover:border-base-700 dark:hover:shadow-base-800/50 {% endif %}{% if class %} {{ class }}{% endif %}">
 {% if title %}
     <h2 class="border-b border-base-200 font-semibold mb-6 -mt-6 -mx-6 py-4 px-6 text-[15px] text-font-important-light dark:text-font-important-dark dark:border-base-800">
         {{ title }}
     </h2>
 {% endif %}
 
-<div class="grow relative {% if icon %} pl-6{% endif %}">
+<div class="grow relative{% if icon %} pl-8{% endif %}">
     {{ children }}
 
     {% if label %}
@@ -15,7 +15,7 @@
     {% endif %}
 
     {% if icon %}
-        <span class="material-symbols-outlined absolute -left-6 text-base-300 top-1/2 -translate-x-1/3 -translate-y-1/2 text-6xl! dark:text-base-500">{{ icon }}</span>
+        <span class="material-symbols-outlined absolute -left-6 text-base-300 top-1/2 -translate-x-1/3 -translate-y-1/2 text-6xl! dark:text-base-500 {{ icon_class }}">{{ icon }}</span>
     {% endif %}
 </div>
 

unfold/templates/unfold/components/layer.html

@@ -0,0 +1 @@
+{{ children }}

unfold/templates/unfold/components/progress.html

@@ -1,5 +1,5 @@
-<div class="{% if class %}{{ class }}{% endif %}">
-    <div class="flex flex-col gap-2 relative">
+<div class="flex flex-col gap-2 relative w-full {% if class %}{{ class }}{% endif %}">
+    {% if title or description %}
         <div class="flex flex-row relative z-20">
             {% if title %}
                 <h3 class="text-font-important-light dark:text-font-important-dark text-sm">
@@ -13,11 +13,11 @@
                 </strong>
             {% endif %}
         </div>
+    {% endif %}
 
-        {% if value %}
-            <div class="bg-gray-100 overflow-hidden rounded-default dark:bg-base-800">
-                <div class="h-1.5 bg-primary-600 rounded-default z-10 dark:bg-primary-500" title="{{ value }}%" style="width: {{ value }}%"></div>
-            </div>
-        {% endif %}
-    </div>
+    {% if value %}
+        <div class="bg-base-100 overflow-hidden rounded-default dark:bg-base-800">
+            <div class="h-1.5 bg-primary-600 rounded-default z-10 dark:bg-primary-500 {{ progress_class }}" title="{{ value }}%" style="width: {{ value }}%"></div>
+        </div>
+    {% endif %}
 </div>

unfold/templates/unfold/components/tracker.html

@@ -1,4 +1,4 @@
-<ul class="flex flex-row gap-0.5 overflow-hidden rounded-default">
+<ul class="flex flex-row gap-0.5 overflow-hidden rounded-default {% if class %}{{ class }}{% endif %}">
     {% for item in data %}
         <li class="h-8 px-px size-full {% if item.color %}{{ item.color }}{% else %}bg-base-300 dark:bg-base-400{% endif %} hover:opacity-50" title="{{ item.tooltip }}"></li>
     {% endfor %}

unfold/templates/unfold/helpers/app_list.html

@@ -72,7 +72,7 @@
             <div class="absolute bottom-0 left-0 right-0 top-0 z-50 md:left-72" x-cloak x-show="openAllApplications">
                 <div class="absolute bg-base-900/80 backdrop-blur-xs bottom-0 left-0 right-0 top-0 z-10 w-screen"></div>
 
-                <div class="bg-white flex flex-col h-full overflow-x-hidden overflow-y-auto py-5 px-8 relative text-sm w-80 z-20 dark:bg-base-900 dark:border-r dark:border-base-800" x-on:click.outside="openAllApplications = false" x-on:keydown.escape.window="openAllApplications = false">
+                <div class="bg-white flex flex-col h-full overflow-x-hidden overflow-y-auto py-5 px-8 relative text-sm w-80 z-20 dark:bg-base-900 dark:border-r dark:border-base-800" x-on:click.outside="openAllApplications = false" x-on:keydown.escape.window="openAllApplications = false" data-simplebar>
                     {% for app in app_list %}
                         <div class="mb-6 last:mb-0">
                             <h2 class="mb-4 font-semibold text-font-important-light truncate dark:text-font-important-dark">

unfold/templates/unfold/helpers/boolean.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="inline-flex font-semibold items-center justify-center leading-normal h-6 w-6 rounded-full uppercase whitespace-nowrap {% if value == '' or value == None %}bg-base-100 text-base-700 dark:bg-base-500/20 dark:text-base-200{% elif value %}bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400{% else %}bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400{% endif %}"
+<div class="inline-flex font-semibold items-center justify-center leading-normal h-6 w-6 !rounded-full uppercase whitespace-nowrap {% if value == '' or value == None %}bg-base-100 text-base-700 dark:bg-base-500/20 dark:text-base-200{% elif value %}bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400{% else %}bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400{% endif %}"
      title="{% if value == '' or value == None %}{% trans "Unknown" %}{% elif value %}{% trans "True" %}{% else %}{% trans "False" %}{% endif %}">
 
     <span class="material-symbols-outlined">

unfold/templates/unfold/helpers/command.html

@@ -30,7 +30,7 @@
                     x-on:keydown.escape.prevent="handleEscape()"
                     x-on:keydown.arrow-down.prevent="nextItem()"
                     x-on:keydown.arrow-up.prevent="prevItem()"
-                    x-on:keydown.enter.prevent="selectItem()"
+                    x-on:keydown.enter.prevent="selectItem({% if command_show_history %}true{% else %}false{% endif %})"
                     hx-get="{% url "admin:search" %}?extended=1"
                     hx-trigger="keyup changed delay:500ms"
                     hx-select="#command-results-list"

unfold/templates/unfold/helpers/command_results.html

@@ -1,12 +1,20 @@
-{% load i18n %}
+{% load i18n unfold %}
 
 {% if results %}
     <ul id="command-results-list" class="flex flex-col gap-1.5 p-4">
         {% for item in results %}
             <li class="group"
-                x-bind:class="{'active': currentIndex === {{ forloop.counter }}}"
-                x-on:mouseenter="currentIndex = {{ forloop.counter }}">
-                <a class="bg-base-100 flex items-center rounded-default px-3.5 py-3 transition-colors group-[.active]:bg-primary-600 group-[.active]:text-white dark:bg-white/[.04] dark:text-base-200 dark:group-[.active]:bg-primary-600 dark:group-[.active]:text-white"
+                {% if forloop.last and results.next_page_number %}
+                    hx-get="{% url "admin:search" %}{% unfold_querystring extended=1 page=results.next_page_number %}"
+                    hx-trigger="intersect once threshold:0.5"
+                    hx-swap="beforeend"
+                    hx-select="#command-results-list > *"
+                    hx-target="#command-results-list"
+                    hx-indicator="#command-results-loading"
+                {% endif %}
+                x-bind:class="{'active': currentIndex === {{ page_counter|add:forloop.counter }}}"
+                x-on:mouseenter="currentIndex = {{ page_counter|add:forloop.counter }}">
+                <a class="bg-base-100 flex items-center rounded-default px-3.5 py-3 group-[.active]:bg-primary-600 group-[.active]:text-white dark:bg-white/[.04] dark:text-base-200 dark:group-[.active]:bg-primary-600 dark:group-[.active]:text-white"
                    href="{{ item.link }}"
                    data-title="{{ item.title }}"
                    data-description="{{ item.description }}"
@@ -25,26 +33,37 @@
                         <span class="text-font-subtle-light dark:text-font-subtle-dark group-[.active]:text-white">{{ item.description|capfirst }}</span>
                     </span>
 
-                    <span class="material-symbols-outlined ml-auto text-sm transition-all group-[.active]:text-white group-[.active]:-mr-1">arrow_forward</span>
+                    <span class="material-symbols-outlined ml-auto text-sm transition-transform group-[.active]:text-white group-[.active]:-translate-x-[2px]">arrow_forward</span>
                 </a>
             </li>
         {% endfor %}
     </ul>
 {% else %}
-    <ul id="command-results-list" class="px-4 py-8 flex items-center justify-center">
+    <ul class="px-4 py-8 flex items-center justify-center">
         <li class="text-lg">
             {% trans "No results matching your query" %}
         </li>
     </ul>
 {% endif %}
 
-
 <div id="command-results-note" x-show="hasResults">
     <div class="border-t border-base-200 px-4 py-3 flex items-center justify-center text-xs dark:border-base-700">
-        {% blocktranslate count counter=results|length with time=execution_time|floatformat:2 %}
-            Found {{ counter }} result in {{ time }} seconds
-        {% plural %}
-            Found {{ counter }} results in {{ time }} seconds
-        {% endblocktranslate %}
+        <div id="command-results-loading" class="hidden flex-row gap-2 grow h-[16px] items-center justify-center w-[16px] w-full [&.htmx-request]:flex [&.htmx-request+div]:hidden">
+            <span class="material-symbols-outlined animate-spin text-sm">
+                progress_activity
+            </span>
+
+            <span>
+                {% trans "Loading more results..." %}
+            </span>
+        </div>
+
+        <div>
+            {% blocktranslate count counter=page_obj.count with time=execution_time|floatformat:2 %}
+                Found {{ counter }} result in {{ time }} seconds
+            {% plural %}
+                Found {{ counter }} results in {{ time }} seconds
+            {% endblocktranslate %}
+        </div>
     </div>
 </div>

unfold/templates/unfold/helpers/header_back_button.html

@@ -2,7 +2,7 @@
 
 {% if show_back_button %}
     {% if object %}
-        {% url object|admin_object_app_url:"changelist" as changelist_url %}
+        {% admin_object_app_url object "changelist" as changelist_url %}
 
         <a href="{{ changelist_url }}" class="block h-[18px] mr-3" title="{% trans "Go back" %}">
             <span class="material-symbols-outlined">

unfold/templates/unfold/helpers/pagination_infinite.html

@@ -5,7 +5,7 @@
         {% trans "Previous" %}
     </a>
 
-    <a {% if cl.result_list|length %}href="{% infinite_paginator_url cl cl.page_num|add:1 %}"{% endif %} class="{% if cl.result_list|length %}hover:text-primary-600 dark:hover:text-primary-500{% endif %}">
+    <a {% if cl.result_list|length == cl.paginator.per_page %}href="{% infinite_paginator_url cl cl.page_num|add:1 %}"{% endif %} class="{% if cl.result_list|length and cl.result_list|length == cl.paginator.per_page %}hover:text-primary-600 dark:hover:text-primary-500{% endif %}">
         {% trans "Next" %}
     </a>
 </div>

unfold/templates/unfold/helpers/search.html

@@ -27,6 +27,7 @@
                        name="s"
                        x-ref="searchInput"
                        x-on:focus="openSearchResults = true; currentIndex = 0"
+                       x-on:keydown="openSearchResults = true;"
                        x-on:keydown.arrow-down.prevent="nextItem()"
                        x-on:keydown.arrow-up.prevent="prevItem()"
                        x-on:keydown.escape.prevent="openSearchResults = false; if ($refs.searchInput.value === '') { $refs.searchInput.blur() } else { $refs.searchInput.value = '' }"

unfold/templates/unfold/helpers/site_dropdown.html

@@ -3,7 +3,7 @@
 {% if site_dropdown %}
     <div class="absolute bg-white border border-base-200 flex flex-col left-3 py-1 rounded-default shadow-lg top-[73px] w-[264px] z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openDropdown" x-transition x-on:click.outside="openDropdown = false">
         {% for item in site_dropdown %}
-            <a href="{{ item.link }}" class="flex flex-row items-center gap-3 max-h-[30px] mx-1 px-2 py-2 rounded-default text-font-default-light dark:text-font-default-dark hover:bg-base-100 hover:text-font-important-light dark:hover:bg-base-700 dark:hover:text-font-important-dark">
+            <a href="{{ item.link }}" class="flex flex-row items-center gap-3 max-h-[30px] mx-1 px-2 py-2 rounded-default text-font-default-light dark:text-font-default-dark hover:bg-base-100 hover:text-font-important-light dark:hover:bg-base-700 dark:hover:text-font-important-dark" {% include "unfold/helpers/attrs.html" with attrs=item.attrs %}>
                 {% if item.icon %}
                     <span class="material-symbols-outlined">
                         {{ item.icon }}

unfold/templates/unfold/widgets/clearable_file_input_small.html

@@ -3,7 +3,7 @@
 <div class="flex flex-row">
     <div class="{{ widget.file_wrapper_class }}">
         {% if widget.is_initial and not widget.required %}
-            <div class="bg-base-50 border-r border-base-200 flex flex-none items-center self-stretch px-3 dark:bg-base-900 dark:border-r-gray-700">
+            <div class="bg-base-50 border-r border-base-200 flex flex-none items-center self-stretch px-3 dark:bg-base-900 dark:border-r-base-700">
                 <label for="{{ widget.checkbox_id }}" class="flex items-center">
                     <input type="checkbox"{% if widget.class %} class="{{ widget.class }}"{% endif %} name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}" />