@dative-gpi/foundation-shared-components 0.0.49 → 0.0.50

package/components/FSCalendar.vue

@@ -62,7 +62,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useTimeZone, useLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -103,8 +103,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { epochToPicker, pickerToEpoch, todayToEpoch } = useTimeZone();
-    const { languageCode } = useLanguageCode();
+    const { epochToPicker, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));

package/components/FSCalendarTwin.vue

@@ -102,7 +102,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, PropType, ref } from "vue";
 
-import { useTimeZone, useLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -143,8 +143,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useTimeZone();
-    const { languageCode } = useLanguageCode();
+    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));

package/components/FSClock.vue

@@ -73,7 +73,7 @@
 import { computed, defineComponent, PropType, ref, watch } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSlider from "./FSSlider.vue";
@@ -123,7 +123,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongDateFormat } = useTimeZone();
+    const { epochToLongDateFormat } = useAppTimeZone();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));

package/components/FSEditImage.vue

@@ -0,0 +1,128 @@
+<template>
+  <FSRow
+    width="fill"
+    gap="24px"
+  >
+    <FSCard
+      class="fs-edit-image"
+      :borderRadius="$props.borderRadius"
+      :padding="$props.padding"
+    >
+      <FSImage
+        :borderRadius="$props.borderRadius"
+        :aspectRatio="$props.aspectRatio"
+        :height="$props.height"
+        :imageB64="realSource"
+        :width="$props.width"
+      />
+    </FSCard>
+    <FSCol
+      height="fill"
+      align="bottom-left"
+    >
+      <FSText
+        v-if="fileSelected"
+        font="text-body"
+      >
+        {{ fileSelected.fileName }}
+      </FSText>
+      <FSRow>
+        <FSButtonFileIcon
+          accept="image/*"
+          :readFile="false"
+          @update:modelValue="onUpload"
+        />
+        <FSButtonRemoveIcon
+          @click="onRemove"
+        />
+      </FSRow>
+    </FSCol>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
+import { FileImage } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButtonRemoveIcon from "./buttons/FSButtonRemoveIcon.vue";
+import FSButtonFileIcon from "./buttons/FSButtonFileIcon.vue";
+import FSImage from "./FSImage.vue";
+import FSCard from "./FSCard.vue";
+import FSText from "./FSText.vue";
+
+export default defineComponent({
+  name: "FSEditImage",
+  components: {
+    FSButtonRemoveIcon,
+    FSButtonFileIcon,
+    FSImage,
+    FSCard,
+    FSText
+  },
+  props: {
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "8px"
+    },
+    width: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
+    height: {
+      type: [String, Number],
+      required: false,
+      default: null
+    },
+    aspectRatio: {
+      type: String,
+      required: false,
+      default: null
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    },
+    modelValue: {
+      type: String as PropType<string>,
+      required: false,
+      default: null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { read } = useFiles();
+
+    const fileSelected = ref<FileImage>({ fileName: "", fileContent: null });
+
+    const realSource = computed(() => {
+      return fileSelected.value && fileSelected.value.fileName ? fileSelected.value.fileContent : props.modelValue;
+    });
+
+    const onUpload = (payload: File) => {
+      read(payload, (content: string) => {
+        fileSelected.value.fileName = payload.name;
+        fileSelected.value.fileContent = content;
+        emit("update:modelValue", content);
+      });
+    };
+
+    const onRemove = () => {
+      fileSelected.value.fileName = "";
+      fileSelected.value.fileContent = null;
+      emit("update:modelValue", null);
+    };
+
+    return {
+      fileSelected,
+      realSource,
+      onUpload,
+      onRemove
+    };
+  }
+});
+</script>

package/components/FSImage.vue

@@ -54,6 +54,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    imageB64: {
+      type: String,
+      required: false,
+      default: null
+    },
     cover: {
       type: Boolean,
       required: false,
@@ -86,6 +91,14 @@ export default defineComponent({
     const imageRef = ref(null);
     const canvasRef = ref(null);
 
+    const signatures = ref<{ [key: string]: string }>({
+      JVBERi0    : "application/pdf",
+      R0lGODdh   : "image/gif",
+      R0lGODlh   : "image/gif",
+      iVBORw0KGgo: "image/png",
+      "/9j/"     : "image/jpg",
+    });
+
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {
         "--fs-image-border-radius"   : sizeToVar(props.borderRadius),
@@ -98,7 +111,7 @@ export default defineComponent({
         return props.height;
       }
       if (props.width) {
-        if (typeof(props.width) === "string") {
+        if (typeof (props.width) === "string") {
           return undefined;
         }
         if (props.aspectRatio) {
@@ -117,7 +130,7 @@ export default defineComponent({
         return props.width;
       }
       if (props.height) {
-        if (typeof(props.height) === "string") {
+        if (typeof (props.height) === "string") {
           return undefined;
         }
         if (props.aspectRatio) {
@@ -135,12 +148,38 @@ export default defineComponent({
       if (props.imageId) {
         return IMAGE_RAW_URL(props.imageId);
       }
+      else if (props.imageB64) {
+        if (imageType.value && imageData.value) {
+          return `${imageType.value},${imageData.value}`;
+        }
+      }
       return null;
     });
 
+    const imageData = computed((): string => {
+      if (props.imageB64 && props.imageB64.includes(",")) {
+        return props.imageB64.split(",")[1];
+      }
+      return props.imageB64;
+    });
+
+    const imageType = computed((): string => {
+      if (props.imageB64 && props.imageB64.includes(",")) {
+        return props.imageB64.split(",")[0];
+      }
+      if (props.imageB64) {
+        for (const s in signatures.value) {
+          if (props.imageB64.startsWith(s)) {
+            return `data:${signatures.value[s]};base64`;
+          }
+        }
+      }
+      return "";
+    });
+
     const onError = (): void => {
       if (props.imageId) {
-        fetchBlurHash(props.imageId);   
+        fetchBlurHash(props.imageId);
       }
     };
 

package/components/buttons/FSButtonFile.vue

@@ -22,6 +22,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -44,7 +45,9 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
+  setup(props, { emit }) {
+    const { read } = useFiles();
+    
     const input = ref(null);
 
     const clear = () => {
@@ -65,12 +68,9 @@ export default defineComponent({
         clear();
       }
       else {
-        const reader = new FileReader();
-        reader.addEventListener("load", (fileEv) => {
-          emit("update:modelValue", fileEv.target && fileEv.target.result);
-          clear();
+        read(file, (content: string) => {
+          emit("update:modelValue", content);
         });
-        reader.readAsDataURL(file);
       }
     };
 

package/components/buttons/FSButtonFileIcon.vue

@@ -22,6 +22,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -44,7 +45,9 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
+  setup(props, { emit }) {
+    const { read } = useFiles();
+
     const input = ref(null);
 
     const clear = () => {
@@ -65,12 +68,9 @@ export default defineComponent({
         clear();
       }
       else {
-        const reader = new FileReader();
-        reader.addEventListener("load", (fileEv) => {
-          emit("update:modelValue", fileEv.target && fileEv.target.result);
-          clear();
+        read(file, (content: string) => {
+          emit("update:modelValue", content);
         });
-        reader.readAsDataURL(file);
       }
     };
 

package/components/buttons/FSButtonFileLabel.vue

@@ -21,6 +21,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -43,7 +44,9 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
+  setup(props, { emit }) {
+    const { read } = useFiles();
+    
     const input = ref(null);
 
     const clear = () => {
@@ -64,12 +67,9 @@ export default defineComponent({
         clear();
       }
       else {
-        const reader = new FileReader();
-        reader.addEventListener("load", (fileEv) => {
-          emit("update:modelValue", fileEv.target && fileEv.target.result);
-          clear();
+        read(file, (content: string) => {
+          emit("update:modelValue", content);
         });
-        reader.readAsDataURL(file);
       }
     };
 

package/components/buttons/FSButtonFileMini.vue

@@ -21,6 +21,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
+import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -43,7 +44,9 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
+  setup(props, { emit }) {
+    const { read } = useFiles();
+    
     const input = ref(null);
 
     const clear = () => {
@@ -64,12 +67,9 @@ export default defineComponent({
         clear();
       }
       else {
-        const reader = new FileReader();
-        reader.addEventListener("load", (fileEv) => {
-          emit("update:modelValue", fileEv.target && fileEv.target.result);
-          clear();
+        read(file, (content: string) => {
+          emit("update:modelValue", content);
         });
-        reader.readAsDataURL(file);
       }
     };
 

package/components/deviceOrganisations/FSConnectivityCard.vue

@@ -44,7 +44,7 @@ import { computed, defineComponent, PropType } from "vue";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
@@ -70,7 +70,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { epochToLongTimeFormat } = useTimeZone();
+    const { epochToLongTimeFormat } = useAppTimeZone();
     const { $tr } = useTranslationsProvider();
 
     const connectivityLabel = computed((): string => {

package/components/deviceOrganisations/FSStatusCard.vue

@@ -54,7 +54,7 @@
 import { computed, defineComponent, PropType } from "vue";
 
 import { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
@@ -84,7 +84,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { epochToLongTimeFormat } = useTimeZone();
+    const { epochToLongTimeFormat } = useAppTimeZone();
 
     const deviceTimestamp = computed((): string => {
       if (props.statusGroup.sourceTimestamp) {

package/components/deviceOrganisations/FSWorstAlertCard.vue

@@ -43,7 +43,7 @@ import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
@@ -71,7 +71,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { epochToLongTimeFormat } = useTimeZone();
+    const { epochToLongTimeFormat } = useAppTimeZone();
     const { $tr } = useTranslationsProvider();
 
     const criticityColor = computed(() => {

package/components/fields/FSDateField.vue

@@ -64,7 +64,7 @@ import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSTextField from "./FSTextField.vue";
 import FSCalendar from "../FSCalendar.vue";
@@ -126,7 +126,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const {validateOn, blurred, getMessages} = useRules();
-    const { epochToLongDateFormat } = useTimeZone();
+    const { epochToLongDateFormat } = useAppTimeZone();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);

package/components/fields/FSDateRangeField.vue

@@ -51,7 +51,7 @@ import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSSubmitDialog from "../FSSubmitDialog.vue";
 import FSCalendarTwin from "../FSCalendarTwin.vue";
@@ -111,7 +111,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { validateOn, blurred, getMessages } = useRules();
-    const { epochToShortDateFormat } = useTimeZone();
+    const { epochToShortDateFormat } = useAppTimeZone();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);

package/components/fields/FSDateTimeField.vue

@@ -88,7 +88,7 @@ import { computed, defineComponent, PropType, ref, watch } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSTextField from "./FSTextField.vue";
 import FSCalendar from "../FSCalendar.vue";
@@ -153,7 +153,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { getUserOffsetMillis, epochToLongTimeFormat } = useTimeZone();
+    const { getUserOffsetMillis, epochToLongTimeFormat } = useAppTimeZone();
     const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
 

package/components/fields/FSDateTimeRangeField.vue

@@ -77,7 +77,7 @@ import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSSubmitDialog from "../FSSubmitDialog.vue";
 import FSCalendarTwin from "../FSCalendarTwin.vue";
@@ -142,7 +142,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { getUserOffsetMillis, epochToShortTimeFormat } = useTimeZone();
+    const { getUserOffsetMillis, epochToShortTimeFormat } = useAppTimeZone();
     const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
 

package/components/lists/FSDataTableUI.vue

@@ -5,16 +5,18 @@
     <FSRow
       align="bottom-center"
     >
-      <FSSearchField
-        prependInnerIcon="mdi-magnify"
-        :hideHeader="true"
-        v-model="innerSearch"
-      />
-      <FSButton
-        prependIcon="mdi-filter-variant"
-        :variant="showFilters ? 'full' : 'standard'"
-        @click="showFilters = !showFilters"
-      />
+      <template v-if="$props.showSearch">
+        <FSSearchField
+          prependInnerIcon="mdi-magnify"
+          :hideHeader="true"
+          v-model="innerSearch"
+        />
+        <FSButton
+          prependIcon="mdi-filter-variant"
+          :variant="showFilters ? 'full' : 'standard'"
+          @click="showFilters = !showFilters"
+        />
+      </template>
       <slot name="toolbar" />
       <v-spacer />
       <FSOptionGroup
@@ -25,7 +27,7 @@
       />
     </FSRow>
     <FSRow
-      v-if="(showFilters && filterableHeaders.length > 0) || hiddenHeaders.length > 0"
+      v-if="showFiltersRow"
     >
       <template v-if="showFilters">
         <FSFilterButton
@@ -628,6 +630,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    showSearch: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     singleSelect: {
       type: Boolean,
       required: false,
@@ -703,6 +710,10 @@ export default defineComponent({
       { id: -1, label: $tr("ui.data-table.all-rows", "All") }
     ];
 
+    const showFiltersRow = computed((): boolean => {
+      return (props.showSearch && showFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
+    });
+
     const innerSlots = computed((): { [label: string]: Slot<any> } => {
       const slots = { ...useSlots().slots };
       delete slots["toolbar"];
@@ -1203,6 +1214,7 @@ export default defineComponent({
       innerPage,
       pageOptions,
       showFilters,
+      showFiltersRow,
       extraHeaders,
       innerHeaders,
       hiddenHeaders,

package/components/selects/FSSelectTimeZone.vue

@@ -1,19 +1,15 @@
 <template>
-  <FSSelectField
-    itemTitle="id"
+  <FSSelectField itemTitle="id"
     :items="timeZones"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  >
+    v-bind="$attrs">
     <template #append-inner>
       <slot name="append-inner">
-        <FSChip
-          v-if="offset"
+        <FSChip v-if="offset"
           variant="standard"
           :color="ColorEnum.Dark"
-          :label="offset"
-        />
+          :label="offset" />
       </slot>
     </template>
   </FSSelectField>
@@ -45,7 +41,7 @@ export default defineComponent({
   setup(props) {
     const { getMany: getTimeZones, entities: timeZones } = useTimeZones();
 
-    const offset = computed((): string => {
+    const offset = computed((): string | undefined => {
       return timeZones.value.find((entity) => entity.id === props.modelValue)?.offset;
     });
 

package/composables/index.ts

@@ -1,5 +1,6 @@
 export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
+export * from "./useFiles";
 export * from "./useRules";
 export * from "./useSlots";

package/composables/useFiles.ts

@@ -0,0 +1,13 @@
+export const useFiles = () => {
+    const read = (file: File, callback: Function): void => {
+        const reader = new FileReader();
+        reader.addEventListener("load", (fileEv) => {
+          callback(fileEv.target && fileEv.target.result);
+        });
+        reader.readAsDataURL(file);
+    };
+
+    return {
+        read
+    };
+}

package/models/images.ts

@@ -0,0 +1,4 @@
+export interface FileImage {
+    fileName: string;
+    fileContent: string | ArrayBuffer | null;
+}

package/models/index.ts

@@ -5,6 +5,7 @@ export * from "./deviceConnectivities";
 export * from "./deviceStatuses";
 export * from "./errors";
 export * from "./grids";
+export * from "./images";
 export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";

package/models/rules.ts

@@ -1,9 +1,9 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import { getTimeBestString } from "../utils";
 
-const { epochToLongDateFormat } = useTimeZone()!;
+const { epochToLongDateFormat } = useAppTimeZone()!;
 const { $tr } = useTranslationsProvider();
 
 export const TextRules = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.49",
+  "version": "0.0.50",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.49",
-    "@dative-gpi/foundation-shared-services": "0.0.49",
+    "@dative-gpi/foundation-shared-domain": "0.0.50",
+    "@dative-gpi/foundation-shared-services": "0.0.50",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "cf285c38be7fcc0f02f813f2cb3693867d277003"
+  "gitHead": "be18a14ae47c91c1f3ccd22a196593050f06aae8"
 }

package/styles/components/fs_edit_image.scss

@@ -0,0 +1,3 @@
+.fs-edit-image {
+    border-style: dashed;
+}

package/styles/components/index.scss

@@ -19,6 +19,7 @@
 @import "fs_dialog.scss";
 @import "fs_divider.scss";
 @import "fs_draggable.scss";
+@import "fs_edit_image.scss";
 @import "fs_error_toast.scss";
 @import "fs_fade_out.scss";
 @import "fs_filter_button.scss";