@humandialog/forms.svelte 1.7.28 → 1.8.1

package/components/list/internal/list.element.svelte

@@ -12,10 +12,10 @@ import {
 } from "../../../utils";
 import { showGridMenu, showMenu } from "../../menu";
 import { pushChanges, informModification } from "../../../updates";
-import Summary from "./list.element.summary.svelte";
-import Properties from "./list.element.props.svelte";
 import { isDeviceSmallerThan } from "../../../utils";
-import Icon from "../../icon.svelte";
+import Circle from "../../ricons/circle.svelte";
+import CircleCheck from "../../ricons/circle-check.svelte";
+import Ricon from "../../r.icon.svelte";
 import Spinner from "../../delayed.spinner.svelte";
 import { rList_definition, rList_property_type } from "../List";
 import { push, link } from "svelte-spa-router";
@@ -23,8 +23,8 @@ import { FaExternalLinkAlt, FaRegCircle, FaRegCheckCircle } from "svelte-icons/f
 import Tags from "../../tags.svelte";
 import { ext } from "../../../i18n";
 export let item;
-export let title = "";
-export let summary = "";
+export let element_title = "";
+export let list_properties = void 0;
 export let typename = void 0;
 export let toolbarOperations = void 0;
 export let contextMenu = void 0;
@@ -32,10 +32,13 @@ export let multiselectOperations = (items) => [];
 export let key = "";
 export let selectionKey = "props";
 export let multiselect = false;
+export let layout_demo_mode = false;
+export let show_prev_interface = false;
 let definition = getContext("rList-definition");
 let placeholder = "";
 let props_sm;
 let props_md;
+let summary = "";
 $:
   is_row_active = calculate_active(item, $contextItemsStore);
 $:
@@ -44,10 +47,12 @@ $:
   selected_class = is_row_selected ? "!border-blue-300 dark:!border-blue-300/50" : "";
 $:
   focused_class = is_row_active ? "bg-stone-200 dark:bg-stone-700" : "";
-$:
-  download = is_row_active && (definition.downloadable || (definition.downloadableFunc ? definition.downloadableFunc(item) : false));
 $:
   is_link_like = is_row_active && (!!definition.title_href || !!definition.title_href_func || download);
+$:
+  demo_element_class = is_row_active ? "pl-8 bg-stone-700" : "pl-8";
+$:
+  multiselect_class = is_row_active ? "pl-16 rounded bg-stone-600 outline outline-4 outline-stone-600 " : "pl-16";
 if (!typename) {
   if (item.$type)
     typename = item.$type;
@@ -56,25 +61,45 @@ if (!typename) {
     typename = s[1];
   }
 }
-if (!title)
-  title = definition.title;
-if (!summary)
-  summary = definition.summary;
-let [name_w, props_w] = calc_horz_division();
-function calc_horz_division() {
-  const props_no = definition.properties.length;
-  switch (props_no) {
-    case 0:
-      return ["w-full", ""];
-    case 1:
-      return ["w-2/3", "w-1/3"];
-    case 2:
-      return ["w-2/3", "w-1/3"];
-    case 3:
-      return ["w-1/2", "w-1/2"];
-    default:
-      return ["w-1/3", "w-2/3"];
+element_title = read_from_def("Title");
+summary = read_from_def("Summary");
+let href = read_from_def("href");
+let element_href = href ? item[href] : "";
+let element_open_handler = read_from_def("onOpen");
+let element_readonly = read_from_def("readonly");
+let title_readonly = read_from_def("readonlyTitle") ?? element_readonly;
+let summary_readonly = read_from_def("readonlySummary") ?? element_readonly;
+let download;
+const downloadableFunc = read_from_def("downloadableFunc");
+if (downloadableFunc)
+  download = downloadableFunc(item);
+else
+  download = read_from_def("downloadable");
+let element_icon = get_element_icon(list_properties, item);
+function get_element_icon(properties, item2) {
+  let element_icon2 = read_from_def("icon");
+  if (element_icon2) {
+    if (element_icon2[0] != "#")
+      element_icon2 = item2[element_icon2];
+    else
+      element_icon2 = element_icon2.substr(1);
   }
+  if (!element_icon2)
+    element_icon2 = "turtle";
+  return element_icon2;
+}
+function read_from_def(propName) {
+  if (!list_properties)
+    return void 0;
+  if (list_properties.context) {
+    const contextProps = list_properties.context[item.$type];
+    if (contextProps && contextProps.hasOwnProperty(propName))
+      return contextProps[propName];
+  }
+  const elementProps = list_properties.element;
+  if (elementProps && elementProps.hasOwnProperty(propName))
+    return elementProps[propName];
+  return void 0;
 }
 function calculate_active(...args) {
   const key2 = getItemKeyName(item);
@@ -107,23 +132,10 @@ function getItemKeyName(item2) {
       return "";
   }
 }
-async function change_name(text) {
-  if (definition.on_title_changed) {
-    definition.on_title_changed(item, text, title);
-  } else {
-    item[title] = text;
-    informModification(item, title, typename);
-    pushChanges();
-  }
-}
-async function change_summary(text) {
-  if (definition.on_summary_changed) {
-    definition.on_summary_changed(item, text, summary);
-  } else {
-    item[summary] = text;
-    informModification(item, summary, typename);
-    pushChanges();
-  }
+async function change_property(property_name, value) {
+  item[property_name] = value;
+  informModification(item, property_name, typename);
+  pushChanges();
 }
 function edit(e) {
   if (!is_row_active)
@@ -133,52 +145,6 @@ function edit(e) {
 export function activate() {
   activate_row(null, item);
 }
-function on_active_row_clicked(e, part) {
-  if (!is_row_active)
-    return;
-  let click_on_empty_space = true;
-  let n = e.target;
-  while (n) {
-    let is_in_cell = n.getAttribute("role") == "gridcell";
-    if (is_in_cell) {
-      click_on_empty_space = false;
-      break;
-    }
-    n = n.parentElement;
-  }
-  let can_show_context_menu = click_on_empty_space;
-  can_show_context_menu = false;
-  if (can_show_context_menu && contextMenu) {
-    const pt = new DOMPoint(e.clientX, e.clientY);
-    let context_operations = contextMenu(item);
-    if (context_operations !== null) {
-      if (typeof context_operations === "object") {
-        if (Array.isArray(context_operations))
-          showMenu(pt, context_operations);
-        else if (context_operations.grid)
-          showGridMenu(pt, context_operations.grid);
-      }
-    }
-  } else if (click_on_empty_space) {
-    if (definition.title_href || definition.title_href_func) {
-    } else {
-    }
-  } else {
-  }
-}
-function followDefinedHRef() {
-  let link2 = getHRef();
-  if (link2)
-    push(link2);
-}
-function getHRef() {
-  if (definition.title_href)
-    return definition.title_href;
-  else if (definition.title_href_func)
-    return definition.title_href_func(item);
-  else
-    return "";
-}
 function activate_row(e, item2) {
   const openable = !!definition.title_href || !!definition.title_href_func;
   if (toolbarOperations) {
@@ -210,7 +176,7 @@ function on_contextmenu(e) {
   e.preventDefault();
 }
 export function editProperty(field) {
-  if (field == title)
+  if (field == element_title)
     force_editing("Title");
   else if (field == summary)
     force_editing("Summary");
@@ -222,7 +188,7 @@ export function editProperty(field) {
   }
 }
 async function force_editing(field) {
-  let element_id = `__hd_list_ctrl_${getItemKey(item)}_${field}`;
+  let element_id = `__or_list_ctrl_${getItemKey(item)}_${field}`;
   let element_node = document.getElementById(element_id);
   if (!element_node) {
     placeholder = field;
@@ -234,19 +200,9 @@ async function force_editing(field) {
   if (!element_node.classList.contains("editable")) {
     return;
   }
-  if (field == "Title") {
-    if (is_link_like) {
-      startEditing(element_node, () => {
-        placeholder = "";
-      });
-    } else {
-      element_node.focus();
-      setSelectionAtEnd(element_node);
-    }
-  } else {
-    element_node.focus();
-    setSelectionAtEnd(element_node);
-  }
+  startEditing(element_node, () => {
+    placeholder = "";
+  });
 }
 function setSelectionAtEnd(element) {
   const textNode = element.childNodes[0];
@@ -283,200 +239,276 @@ async function onDownloadFile(e) {
   isDownloading = true;
   e.preventDefault();
   e.stopPropagation();
-  if (definition.onOpen)
-    await definition.onOpen(item);
+  if (element_open_handler)
+    await element_open_handler(item);
   isDownloading = false;
 }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-{#if item}
-{@const element_title = ext(item[title])}
+<!-- svelte-ignore a11y-structure -->
 
-<section    class="my-1 flex flex-row w-full  text-stone-900 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
-            role="menu"
-            tabindex="-1"
-            bind:this={rootElement}> <!--  on:contextmenu={on_contextmenu} -->
+{#if item}
+{@const translated_element_title = ext(item[element_title])}
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+{#if !is_row_active && !multiselect}
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!---- INACTIVE PURE LAYOUT ----------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<figure class="pl-8"
+        bind:this={rootElement}
+        use:selectable={item}
+        on:click={(e) => {activate_row(e, item)}}>
+    <!-- comming soon - top info --
+    <figcaption>
+        <div class="grid gap-4 grid-cols-3 grid-rows-1">
+            <span>OCT-254</span>
+            <span class="text-center"></span>
+            <span class="text-right">15 listopad 25</span>
+        </div>
+    </figcaption>
+    -------------------------------->
+    <!--@el------------------------->
+    <h4 class="-indent-8 sm:hover:cursor-default">
+        <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
+                text-stone-700 dark:text-stone-400 ">
+                <Ricon icon = {element_icon}/>
+        </div>{translated_element_title}
+    </h4>
+    <!-- comming soon - middle info --
+    <figcaption>
+        <div class="grid gap-4 grid-cols-3 grid-rows-1">
+            <span>Andrzej</span>
+            <span class="text-center"></span>
+            <span class="text-right">Specyfikacje</span>
+        </div>
+    </figcaption>
+    -------------------------------->
 
-    {#if multiselect}
-        {@const icon=is_row_active ? FaRegCheckCircle : FaRegCircle}
-         <Icon  component={icon} 
-                class="flex-none h-4 w-4 text-stone-500 dark:text-stone-400 cursor-pointer mt-1 ml-2 mr-3 "
-                on:click={onToggleMultiSelect}/>
+    {#if summary && item[summary]}
+    <figcaption>
+        {item[summary]}
+    </figcaption>
     {/if}
-    
-    {#if isDownloading}
-        <Spinner class="mt-0.5  ml-2  mr-1" size={5} delay={0}/>
-    {:else}
-        <slot name="left" element={item}/>
+</figure>
+
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+{:else if multiselect}
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------SPECIAL CASE - MULTISELECTION------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<div        bind:this={rootElement}
+            use:selectable={item}
+            on:click={onToggleMultiSelect}>
+<figure class={multiselect_class} bind:this={rootElement}>
+    <!-- comming soon - top info --
+    <figcaption>
+        <div class="grid gap-4 grid-cols-3 grid-rows-1">
+            <span>OCT-254</span>
+            <span class="text-center"></span>
+            <span class="text-right">15 listopad 25</span>
+        </div>
+    </figcaption>
+    -------------------------------->
+    <!--@el------------------------->
+    <h4 class="-indent-16 sm:hover:cursor-default"
+        >
+        <div class="inline-block w-4 h-4 ml-1 mr-1 py-0.5 align-baseline
+                text-stone-700 dark:text-stone-400 ">
+                {#if is_row_active}
+                <CircleCheck size = "s"/>
+                {:else}
+                <Circle size = "s"/>
+                {/if}
+        </div>
+        <div class="inline-block w-4 h-4 ml-0 mr-5 align-baseline
+                text-stone-700 dark:text-stone-400 ">
+                <!--Ricon icon={ClipboardMinus}/-->
+                <Ricon icon = {element_icon} />
+        </div>{translated_element_title}
+        <!--div class="inline-block  w-4 h-4 ml-1 mr-1 py-0.5 align-baseline"> <Circle size = "s"/></div-->
+    </h4>
+    <!-- comming soon - middle info --
+    <figcaption>
+        <div class="grid gap-4 grid-cols-3 grid-rows-1">
+            <span>Andrzej</span>
+            <span class="text-center"></span>
+            <span class="text-right">Specyfikacje</span>
+        </div>
+    </figcaption>
+    -------------------------------->
+
+    {#if summary && (item[summary] || placeholder=='Summary')}
+    <figcaption>
+        {item[summary]}
+    </figcaption>
     {/if}
-    
-    <i class="hidden sm:w-1/2 sm:w-2/3 sm:w-1/3"></i>   <!-- just to force tailwind classes including -->
-    
-    <div    class="ml-3 w-full py-0" 
-            use:selectable={item} 
-            on:click={(e) => {activate_row(e, item)}} 
-            role="row" 
-            tabindex="0">
-        <div class="block sm:flex sm:flex-row" on:click={(e) => on_active_row_clicked(e, 'top')}>
-           
-            {#if is_row_active}
-                {#key item[title]}      <!-- Wymusza pełne wyrenderowanie zwłasza po zmiane z pustego na tekst  -->
-                    {#if is_link_like}
-                        <p  class=" text-base font-semibold 
-                                   
-                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
-                                    id="__hd_list_ctrl_{getItemKey(item)}_Title"
-                                    use:editable={{
-                                        action: (text) => {change_name(text)},
-                                        active: false,
-                                        readonly: definition.title_readonly,
-                                        onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
-                                    }}
-                            >  <!--on:click|stopPropagation={followDefinedHRef}-->
-                            {#if download}
-                                <a  class="sm:hover:cursor-pointer underline" 
-                                    download
-                                    href={getHRef()}
-                                    on:click={onDownloadFile}>
-                                    {element_title}
-                                </a>
-                            {:else}
-                                <a  class="sm:hover:cursor-pointer underline" 
-                                    href={getHRef()} use:link>
-                                    {element_title}
-                                </a>
-                            {/if}
-                        </p>
-                    {:else if definition.onOpen}
-                        <p  class=" text-base font-semibold 
-                                    
-                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
-                            id="__hd_list_ctrl_{getItemKey(item)}_Title"
-                            use:editable={{
-                                action: (text) => {change_name(text)},
-                                active: true,
-                                readonly: definition.title_readonly,
-                            }}> 
-                                <span   class="sm:hover:cursor-pointer underline"
-                                        on:click|stopPropagation={(e) => definition.onOpen(item)}>
-                                    {element_title}
-                                </span>
+</figure>
+</div>
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+{:else}
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<!------------------------------------------------------------------------------------------------->
+<div        >
 
-                            <!--
-                            {#if definition.onOpen}
-                                <button class="ml-3 w-5 h-5 sm:w-3 sm:h-3"
-                                        on:click={(e) => definition.onOpen(item)}>
-                                    <FaExternalLinkAlt/>
-                                </button>
-                            {/if}
-                            -->
-                        </p>
-                    {:else}
-                        <p  class=" text-base font-semibold 
-                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
-                            id="__hd_list_ctrl_{getItemKey(item)}_Title"
-                            use:editable={{
-                                action: (text) => {change_name(text)},
-                                active: true,
-                                readonly: definition.title_readonly,
-                            }}> 
-                                <span>
-                                    {element_title}
-                                </span>
-                        </p>
-                    {/if}
-                {/key}
-            {:else}
-                <p  class=" text-base font-semibold 
-                             
-                            whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
-                    id="__hd_list_ctrl_{getItemKey(item)}_Title"> 
-                    {element_title}
-                </p>
-            {/if}
-           
+<figure class="pl-8
 
-            <section class="hidden sm:block w-full sm:flex-none sm:{props_w}">
-                <Properties {definition} {item} {placeholder} bind:this={props_md}/>
-            </section>
+        bg-stone-200 dark:bg-stone-700
+        outline outline-8
+        outline-stone-200 dark:outline-stone-700
+        ring-1 ring-offset-8
+        ring-stone-300 dark:ring-stone-700
+        "
+
+        bind:this={rootElement}
+        use:selectable={item}
+        on:click={(e) => {activate_row(e, item)}}
+        >
+    <!-- comming soon - top info --
+    <figcaption>
+        <div class="grid gap-4 grid-cols-3 grid-rows-1">
+            <span>OCT-254</span>
+            <span class="text-center"></span>
+            <span class="text-right">15 listopad 25</span>
         </div>
+    </figcaption> #active
+    -------------------------------->
+    <!--@el------------------------->
+    {#if download}
+        <a  class="sm:hover:cursor-pointer"
+            href={element_href}
+            on:click={onDownloadFile}>
 
-        <section class="block sm:hidden w-full">
-            <Properties {definition} {item} {placeholder} bind:this={props_sm}/>
-        </section>
+            <h4 class="-indent-8"
+                id="__or_list_ctrl_{getItemKey(item)}_Title"
+                use:editable={{
+                    action: (text) => {change_property(element_title, text)},
+                    active: false,
+                    readonly: title_readonly,
+                    onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
+                }}>
+                <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
+                        text-stone-700 dark:text-stone-400 ">
+                        <Ricon icon={isDownloading ? 'loader-circle' : element_icon} />
+                </div>{translated_element_title}
+            </h4>
+        </a>
+    {:else if element_href}
+        <a  class="sm:hover:cursor-pointer"
+            href={element_href} use:link>
 
-        {#if summary && (item[summary] || placeholder=='Summary')}
-            {@const summaryText = ext(item[summary])}
-            {@const element_id = `__hd_list_ctrl_${getItemKey(item)}_Summary`}
-            {#key summaryText }           
-                {#if is_row_active}
-                    <p  id={element_id} 
-                        class=" text-sm                              
-                                text-stone-600 dark:text-stone-400"
-                            use:editable={{
-                                action: (text) => {change_summary(text)},
-                                readonly: definition.summary_readonly,
-                                onFinish: (d) => {placeholder='';},
-                                active: true
-                            }}>
-                        {summaryText}
-                    </p>
-                {:else}
-                    <p  id={element_id} 
-                        class=" text-sm 
-                                    text-stone-600 dark:text-stone-400"
-                        on:click={(e) => on_active_row_clicked(e, 'bottom')}>
-                        {summaryText}
-                    </p>
-                {/if}
-            {/key}
-                
-        {/if}
+            <h4 class="-indent-8 "
+                id="__or_list_ctrl_{getItemKey(item)}_Title"
+                use:editable={{
+                    action: (text) => {change_property(element_title, text)},
+                    active: false,
+                    readonly: title_readonly,
+                    onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
+                }}>
+                <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
+                        text-stone-700 dark:text-stone-400 ">
+                        <Ricon icon={element_icon} />
+                </div>{translated_element_title}
+            </h4>
+        </a>
+    {:else if element_open_handler}
+        <a  class="sm:hover:cursor-pointer"
+            href="/#"
+            on:click|preventDefault={() => element_open_handler(item)}>
+
+            <h4 class="-indent-8"
+                id="__or_list_ctrl_{getItemKey(item)}_Title"
+                use:editable={{
+                    action: (text) => {change_property(element_title, text)},
+                    active: false,
+                    readonly: title_readonly,
+                    onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
+                }}>
+                <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
+                        text-stone-700 dark:text-stone-400 ">
+                        <Ricon icon={element_icon} />
+                </div>{translated_element_title}
+            </h4>
+        </a>
+    {:else}
+        <h4 class="-indent-8 "
+            id="__or_list_ctrl_{getItemKey(item)}_Title"
+            use:editable={{
+                action: (text) => {change_property(element_title, text)},
+                active: false,
+                readonly: title_readonly,
+                onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
+            }}>
+            <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
+                    text-stone-700 dark:text-stone-400 ">
+                    <Ricon icon={element_icon} />
+            </div>{translated_element_title}
+        </h4>
+    {/if}
 
-        {#if definition.tags}
-                <Tags
-                    class="mt-1 mb-1"
-                    compact
-                    inContext="props"
-                    self={item}
-                    a={definition.tags.a}
-                    getGlobalTags={definition.tags.getAllTags}
-                    s="sm"
-                    onSelect={definition.tags.onSelect}
-                    onUpdateAllTags={definition.tags.onUpdateAllTags}
-                    canChangeColor={definition.tags.canChangeColor}
-                    readOnly={definition.tags.readOnly}
-                />
-            {/if}
+    <!-- comming soon - middle info --
+    <figcaption>
+        <div class="grid gap-4 grid-cols-3 grid-rows-1">
+            <span>Andrzej</span>
+            <span class="text-center"></span>
+            <span class="text-right">Specyfikacje</span>
+        </div>
+    </figcaption>
+    -------------------------------->
 
-    </div>
-</section>
-{/if}
+    {#if summary && (item[summary])}
+        <figcaption id="__or_list_ctrl_{getItemKey(item)}_Summary" use:editable={{
+                    action: (text) => {change_property(summary, text)},
+                    readonly: summary_readonly,
+                    onFinish: (d) => {placeholder='';},
+                    active: true
+                }}>{item[summary]}
+        </figcaption>
 
-<style>
-    .grid-1
-    {
-        display: grid;
-        grid-template-columns: 100%;
-    }
+    {:else if placeholder=='Summary'}
+        <figcaption id="__or_list_ctrl_{getItemKey(item)}_Summary"
+                    use:editable={{
+                    action: (text) => {change_property(summary, text)},
+                    readonly: summary_readonly,
+                    onFinish: (d) => {placeholder='';},
+                    active: true
+                }}>&nbsp;
+        </figcaption>
+    {/if}
+</figure>
+</div>
 
-    .grid-2
-    {
-        display: grid;
-        grid-template-columns: 50% 50%;
-    }
 
-    .grid-3
-    {
-        display: grid;
-        grid-template-columns: 33% 33% 33%;
-    }
 
-    .grid-4
-    {
-        display: grid;
-        grid-template-columns: 25% 25% 25% 25%;
-    }
+{/if}
 
-</style>
+{/if}