@dative-gpi/foundation-shared-components 1.0.128-fix-mobile → 1.0.128-mountain-alpha

package/components/FSInstantPicker.vue

@@ -0,0 +1,266 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :label="$props.label"
+  >
+    <FSRow
+      align="bottom-center"
+      gap="32px"
+    >
+      <FSTermField
+        width="430px"
+        :label="$tr('ui.instant-picker.analyze-period', 'Analyze Period')"
+        :startDate="$props.startDate"
+        :endDate="$props.endDate"
+        @update:startDate="$emit('update:startDate', $event)"
+        @update:endDate="$emit('update:endDate', $event)"
+      />
+      <FSRow
+        padding="0 0 2px 0"
+        align="center-center"
+      >
+        <FSCol
+          width="fill"
+        >
+          <FSSlider
+            minWidth='min(300px, 90vw)'
+            :color="ColorEnum.Light"
+            :thumbColor="ColorEnum.Primary"
+            :thumbSize="18"
+            :trackSize="8"
+            thumb-label="always"
+            :step="$props.stepTime"
+            :min="startTimestamp"
+            :max="endTimestamp"
+            :ticks="ticks"
+            showTicks="always"
+            :modelValue="$props.modelValue"
+            @update:modelValue="$emit('update:modelValue', $event)"
+          >
+            <template
+              #thumb-label="{ modelValue }"
+            >
+              <FSSpan
+                font="text-overline"
+              >
+                {{ epochToMonthShortTimeFormat(modelValue) }}
+              </FSSpan>
+            </template>
+            <template
+              #tick-label="{ tick, index }"
+            >
+              <FSRow
+                v-if="index % Math.trunc(ticks.length / maximumTickToShow) === 0 || ticks.length < maximumTickToShow"
+              >
+                <FSText
+                  :color="lightColors.dark"
+                  font="text-overline"
+                >
+                  {{ intervalTime <= 3600000
+                    ?
+                      epochToShortTimeOnlyFormat(tick.value)
+                    :
+                      epochToDayMonthShortOnly(tick.value)
+                  }}
+                </FSText>
+              </FSRow>
+            </template>
+          </FSSlider>
+        </FSCol>
+        <FSPlayButtons
+          v-if="$props.playable"
+          :modelValue="playing"
+          @click:backward="onClickBackward"
+          @click:forward="onClickForward"
+          @update:modelValue="onPlayingChange"
+        />
+      </FSRow>
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from "vue";
+
+import { useDateFormat, useTermFieldDate } from "@dative-gpi/foundation-shared-services/composables";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints, useColors } from '@dative-gpi/foundation-shared-components/composables';
+
+import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+import FSSlider from '@dative-gpi/foundation-shared-components/components/FSSlider.vue';
+import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
+import FSTermField from '@dative-gpi/foundation-shared-components/components/fields/FSTermField.vue';
+import FSPlayButtons from '@dative-gpi/foundation-shared-components/components/FSPlayButtons.vue';
+
+export default defineComponent({
+  name: "FSInstantPicker",
+  components: {
+    FSCol,
+    FSSpan,
+    FSText,
+    FSSlider,
+    FSTermField,
+    FSBaseField,
+    FSPlayButtons
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+    },
+    modelValue: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    startDate: {
+      type: String,
+      required: true
+    },
+    endDate: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    playable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    stepTime: {
+      type: Number,
+      required: false,
+      default: 60000
+    },
+    playingStepDuration: {
+      type: Number,
+      required: false,
+      default: 50
+    }
+  },
+  emits: ['update:modelValue', 'update:startDate', 'update:endDate'],
+  setup(props, { emit }) {
+    const { epochToShortTimeOnlyFormat, epochToShortDateFormat, epochToDayMonthShortOnly, epochToISO, epochToMonthShortTimeFormat } = useDateFormat();
+    const { convert : convertTermToEpoch } = useTermFieldDate();
+    const { isMobileSized, isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+    const playing = ref(false);
+    const playingInterval = ref();
+
+    const startTimestamp = computed(() => convertTermToEpoch(props.startDate));
+    const endTimestamp = computed(() => convertTermToEpoch(props.endDate));
+
+    const intervalTime = computed(() => {
+      const possibleIntervals = [60000, 3600000, 86400000];
+
+      const interval = possibleIntervals.find(interval => {
+        return (endTimestamp.value - startTimestamp.value) / interval < 100;
+      });
+
+      if (interval) {
+        return interval;
+      }
+      return 86400000;
+    });
+
+    const ticks = computed(() => {
+      const ticks: number[] = [];
+
+      const firstTick = Math.ceil(startTimestamp.value / intervalTime.value) * intervalTime.value;
+      for (let i = firstTick; i <= endTimestamp.value; i += intervalTime.value) {
+        ticks.push(i);
+      }
+      return ticks;
+    });
+
+    const maximumTickToShow = computed(() => {
+      if (isMobileSized.value) {
+        return 5;
+      }
+      if (isExtraSmall.value) {
+        return 4;
+      }
+      return 6;
+    });
+
+    const onPlayingChange = (value: boolean) => {
+      playing.value = value;
+    };
+
+    const onClickBackward = () => {
+      emit('update:modelValue', startTimestamp.value);
+    };
+
+    const onClickForward = () => {
+      emit('update:modelValue', endTimestamp.value);
+    };
+
+    watch(() => [props.startDate, props.endDate], () => {
+      if(props.modelValue < startTimestamp.value || props.modelValue > endTimestamp.value) {
+        emit('update:modelValue', endTimestamp.value);
+      }
+    }, { immediate: true });
+
+    watch(playing, (value) => {
+      if(!value && playingInterval.value) {
+        clearInterval(playingInterval.value);
+      } else {
+        playingInterval.value = setInterval(() => {
+          if(props.modelValue + props.stepTime <= endTimestamp.value) {
+            emit('update:modelValue', props.modelValue + props.stepTime);
+          } else {
+            emit('update:modelValue', endTimestamp.value);
+            playing.value = false;
+          }
+        }, props.playingStepDuration);
+      }
+    });
+
+    return {
+      ticks,
+      playing,
+      ColorEnum,
+      lightColors,
+      intervalTime,
+      endTimestamp,
+      startTimestamp,
+      maximumTickToShow,
+      epochToISO,
+      onPlayingChange,
+      onClickForward,
+      onClickBackward,
+      epochToShortDateFormat,
+      epochToShortTimeOnlyFormat,
+      epochToDayMonthShortOnly,
+      epochToMonthShortTimeFormat
+    };
+  },
+});
+</script>

package/components/FSPlayButtons.vue

@@ -0,0 +1,72 @@
+<template>
+  <FSRow
+    width="hug"
+    gap="4px"
+  >
+    <FSClickable
+      variant="full"
+      :color="ColorEnum.Light"
+      borderRadius="50%"
+      padding="2px"
+      @click="$emit('click:backward')"
+    >
+      <FSIcon
+        size="18px"
+        icon="mdi-skip-backward"
+      />
+    </FSClickable>
+    <FSClickable
+      variant="full"
+      :color="ColorEnum.Light"
+      borderRadius="50%"
+      padding="2px"
+      @click="$emit('update:modelValue', !$props.modelValue)"
+    >
+      <FSIcon
+        size="18px"
+        :icon="$props.modelValue ? 'mdi-pause' : 'mdi-play'"
+      />
+    </FSClickable>
+    <FSClickable
+      variant="full"
+      :color="ColorEnum.Light"
+      borderRadius="50%"
+      padding="2px"
+      @click="$emit('click:forward')"
+    >
+      <FSIcon
+        size="18px"
+        icon="mdi-skip-forward"
+      />
+    </FSClickable>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+
+import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
+import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
+
+export default defineComponent({
+  name: "FSPlayButtons",
+  components: {
+    FSClickable,
+    FSIcon
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+    }
+  },
+  emits: ['update:modelValue', 'click:backward', 'click:forward'],
+  setup() {
+    return {
+      ColorEnum
+    };
+  },
+});
+</script>

package/components/FSProgressBar.vue

@@ -0,0 +1,90 @@
+<template>
+  <FSRow
+    align="center-center"
+    :style="style"
+    gap="8px"
+  >
+    <div
+      class="fs-progress-bar-gradient"
+    >
+      <div></div>
+    </div>
+    <FSText
+      v-if="$props.showValue"
+      font="text-button"
+    >
+      {{ fixedRate }}%
+    </FSText>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type StyleValue } from "vue";
+
+import { useColors } from '@dative-gpi/foundation-shared-components/composables';
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+export default defineComponent({
+  name: "FSProgressBar",
+  props: {
+    modelValue: {
+      type: Number,
+      required: true
+    },
+    startColor: {
+      type: String,
+      required: false
+    },
+    endColor: {
+      type: String,
+      required: false
+    },
+    showValue: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  components: {
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+    const successColors = getColors(ColorEnum.Success);
+    const errorColors = getColors(ColorEnum.Error);
+ 
+    const fixedRate = computed(() => {
+      return (props.modelValue * 100).toFixed(0);
+    });
+
+    const relativeWidth = computed(() => {
+      return props.modelValue ? 100 / props.modelValue : 0;
+    });
+    
+    const startColor = computed(() => {
+      return props.startColor ?? errorColors.base;
+    });
+
+    const endColor = computed(() => {
+      return props.endColor ?? successColors.base;
+    });
+
+    const style = computed((): StyleValue => {
+      return {
+        '--progress-bar-background-color': lightColors.dark,
+        '--progress-bar-gradient-start-color': startColor.value,
+        '--progress-bar-gradient-end-color': endColor.value,
+        '--progress-bar-gradient-width': `min(100%, ${fixedRate.value}%)`,
+        '--progress-bar-total-relative-width': `${relativeWidth.value}%`
+      };
+    });
+
+    return {
+      style,
+      fixedRate
+    }
+  },
+});
+</script>

package/components/tiles/FSChartTile.vue

@@ -0,0 +1,73 @@
+<template>
+  <FSChartTileUI
+    v-if="chart"
+    :label="chart.label"
+    :icon="chart.icon"
+    :type="chart.chartType"
+    :imageId="chart.imageId"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, computed } from "vue";
+import type { PropType } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
+
+import { useChartOrganisation, useChartOrganisationType } from "@dative-gpi/foundation-core-services/composables";
+
+import { ApplicationScope } from "@dative-gpi/foundation-shared-domain/enums";
+import FSChartTileUI from "./FSChartTileUI.vue";
+
+export default defineComponent({
+  name: "FSChartTile",
+  components: {
+    FSChartTileUI
+  },
+  props: {
+    chartId: {
+      type: String,
+      required: true
+    },
+    scope: {
+      type: Object as PropType<ApplicationScope | number>,
+      required : true
+    }
+  },
+  setup(props) {
+
+    const {get : fetchChartOrganisation, entity : chartOrganisation } = useChartOrganisation();
+    const {get : fetchChartOrganisationType, entity : chartOrganisationType } = useChartOrganisationType();
+
+    const chart = computed(() =>{
+      if(props.scope == ApplicationScope.Organisation){
+        return chartOrganisation.value;
+      }
+      else if(props.scope == ApplicationScope.OrganisationType){
+        return chartOrganisationType.value;
+      }
+      else{
+        return null
+      }
+    })
+
+    watch(() => [props.chartId, props.scope], () =>{
+      if(props.scope == ApplicationScope.Organisation){
+        fetchChartOrganisation(props.chartId);
+      }
+      else if(props.scope == ApplicationScope.OrganisationType)
+      {
+        fetchChartOrganisationType(props.chartId)
+      }
+    }, {immediate : true})
+
+    return {
+      ColorEnum,
+      chart,
+      chartIcon
+    };
+  }
+});
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.128-fix-mobile",
+  "version": "1.0.128-mountain-alpha",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile",
-    "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile"
+    "@dative-gpi/foundation-shared-domain": "1.0.128-mountain-alpha",
+    "@dative-gpi/foundation-shared-services": "1.0.128-mountain-alpha"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "099789bb7c9a4134f9ee0aba08d805b673cbb977"
+  "gitHead": "37cef6036141cc79839c97f8ffc124c024e5486a"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -7,10 +7,8 @@
         color: var(--fs-breadcrumbs-disabled-color) !important;
     }
 
-    @include clickscreen {
-        &:hover {
-            text-decoration: underline;
-        }
+    &:hover {
+        text-decoration: underline;
     }
 
     &:active {

package/styles/components/fs_button.scss

@@ -2,6 +2,11 @@
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;
 
+    &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
+        color: var(--fs-button-hover-color) !important;
+        cursor: pointer !important;
+    }
+
     &.fs-button-disabled,
     &:has(.fs-button-load) {
         cursor: default !important;
@@ -11,11 +16,4 @@
         color: inherit;
         text-decoration: none;
     }
-
-    @include clickscreen {
-        &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
-            color: var(--fs-button-hover-color) !important;
-            cursor: pointer !important;
-        }
-    }
 }

package/styles/components/fs_chip.scss

@@ -12,17 +12,15 @@
 .fs-chip-editable {
     cursor: pointer !important;
 
+    &:hover {
+        background-color: var(--fs-chip-hover-background-color) !important;
+        border-color: var(--fs-chip-hover-border-color) !important;
+        color: var(--fs-chip-hover-color) !important;
+    }
+
     &:active {
         background-color: var(--fs-chip-active-background-color) !important;
         border-color: var(--fs-chip-active-border-color) !important;
         color: var(--fs-chip-active-color) !important;
     }
-
-    @include clickscreen {
-        &:hover {
-            background-color: var(--fs-chip-hover-background-color) !important;
-            border-color: var(--fs-chip-hover-border-color) !important;
-            color: var(--fs-chip-hover-color) !important;
-        }
-    }
 }

package/styles/components/fs_clickable.scss

@@ -11,7 +11,18 @@
     &.fs-clickable-disabled {
         cursor: default;
     }
-    
+
+    &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
+        background-color: var(--fs-clickable-hover-background-color) !important;
+        border-color: var(--fs-clickable-hover-border-color) !important;
+        color: var(--fs-clickable-hover-color) !important;
+
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+            background-color: var(--fs-clickable-hover-background-color);
+        }
+    }
+
     &:not(.fs-clickable-disabled):active:not(:has( .fs-stopclick:hover)) {
         background-color: var(--fs-clickable-active-background-color) !important;
         border-color: var(--fs-clickable-active-border-color) !important;
@@ -22,19 +33,6 @@
             background-color: var(--fs-clickable-active-background-color);
         }
     }
-
-    @include clickscreen {
-        &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
-            background-color: var(--fs-clickable-hover-background-color) !important;
-            border-color: var(--fs-clickable-hover-border-color) !important;
-            color: var(--fs-clickable-hover-color) !important;
-    
-            & .fs-card-clickable {
-                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-                background-color: var(--fs-clickable-hover-background-color);
-            }
-        }
-    }
 }
 
 a:has(.fs-clickable) {

package/styles/components/fs_data_iterator_item.scss

@@ -8,18 +8,16 @@
         padding-right: 32px;
     }
 
-    @include clickscreen {
-        &:hover::after {
-            content: "";
-            background-color: black;
-            pointer-events: none;
-            position: absolute;
-            opacity: 0.04;
-            height: 100%;
-            width: 100%;
-            left: 0;
-            top: 0;
-        }
+    &:hover::after {
+        content: "";
+        background-color: black;
+        pointer-events: none;
+        position: absolute;
+        opacity: 0.04;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
     }
 }
 

package/styles/components/fs_image_card.scss

@@ -11,10 +11,8 @@
   }
 }
 
-@include clickscreen {
-  .fs-image-card:hover {
-    > .fs-card {
-      background-size: 105%;
-    }
+.fs-image-card:hover {
+  > .fs-card {
+    background-size: 105%;
   }
 }

package/styles/components/fs_map.scss

@@ -92,13 +92,11 @@
     align-items: center;
     justify-content: center;
 
-    @include clickscreen {
-      &:hover {
-        filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
-  
-        > * {
-          transform: scale(1.15);
-        }
+    &:hover {
+      filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
+
+      > * {
+        transform: scale(1.15);
       }
     }
   }
@@ -130,10 +128,8 @@
     opacity: 0.6;
     transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    @include clickscreen {
-      &:hover {
-        opacity: 1;
-      }
+    &:hover {
+      opacity: 1;
     }
   }
 }

package/styles/components/fs_password_field.scss

@@ -4,9 +4,7 @@
     color: var(--fs-password-field-color) !important;
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    @include clickscreen {
-        &:hover {
-            color: var(--fs-password-field-hover-color) !important;
-        }
+    &:hover {
+        color: var(--fs-password-field-hover-color) !important;
     }
 }

package/styles/components/fs_progress_bar.scss

@@ -0,0 +1,14 @@
+.fs-progress-bar-gradient {
+    flex: 1;
+    background-color: var(--progress-bar-background-color);
+    height: 8px;
+    border-radius: 4px;
+
+    div {
+        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+        height: 100%;
+        background: linear-gradient(to right, var(--progress-bar-gradient-start-color) 0%, var(--progress-bar-gradient-end-color) var(--progress-bar-total-relative-width));
+        width: var(--progress-bar-gradient-width);
+        border-radius: 4px;
+    }
+}

package/styles/components/fs_tabs.scss

@@ -23,11 +23,9 @@
         @extend .text-button;
     }
 
-    @include clickscreen {
-        &:hover {
-            border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
-            color: var(--fs-group-hover-color) !important;
-        }
+    &:hover {
+        border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
+        color: var(--fs-group-hover-color) !important;
     }
 }
 
@@ -36,10 +34,8 @@
     color: var(--fs-group-hover-color) !important;
     border-bottom: 0 !important;
 
-    @include clickscreen {
-        &:hover {
-            border-bottom: 0 !important;
-        }
+    &:hover {
+        border-bottom: 0 !important;
     }
 }
 

package/styles/components/fs_tag.scss

@@ -13,19 +13,17 @@
     background-color: var(--fs-tag-background-color) !important;
     color: var(--fs-tag-color) !important;
 
-    min-width: 20px !important;
-    width: 20px !important;
-    height: 20px !important;
+    &:hover {
+        background-color: var(--fs-tag-hover-background-color) !important;
+        color: var(--fs-tag-hover-color) !important;
+    }
 
     &:active {
         background-color: var(--fs-tag-active-background-color) !important;
         color: var(--fs-tag-active-color) !important;
     }
 
-    @include clickscreen {
-        &:hover {
-            background-color: var(--fs-tag-hover-background-color) !important;
-            color: var(--fs-tag-hover-color) !important;
-        }
-    }
+    min-width: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
 }

package/styles/components/index.scss

@@ -47,6 +47,7 @@
 @import "fs_option_group.scss";
 @import "fs_pagination.scss";
 @import "fs_password_field.scss";
+@import "fs_progress_bar.scss";
 @import "fs_radio.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";

package/styles/globals/overrides.scss

@@ -137,16 +137,11 @@
     }
 }
 
+// Ellipsis on input of all fields
 input {
-    // Ellipsis on all fields
     text-overflow: ellipsis;
 }
 
-input, select, textarea {
-    // No zoom on focus for user of a certain version of Chrome, and who ask their mobile to zoom if font-size < 16px
-    touch-action: none;
-}
-
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -192,11 +187,9 @@ $nthOverlay: 25;
 }
 
 // Change color on arrows when hovered
-@include clickscreen {
-    .v-slide-group__prev:hover,
-    .v-slide-group__next:hover {
-        color: var(--fs-group-hover-color);
-    }
+.v-slide-group__prev:hover,
+.v-slide-group__next:hover {
+    color: var(--fs-group-hover-color);
 }
 
 /***************************************************************************/

package/styles/globals/scrollbars.scss

@@ -47,19 +47,9 @@
 @include touchscreen {
   .fs-hide-x-scrollbar {
     overflow-x: scroll;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    scrollbar-width: none;
   }
 
   .fs-hide-y-scrollbar {
     overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    scrollbar-width: none;
   }
 }