@dative-gpi/foundation-shared-components 0.0.206 → 0.0.208

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -3,6 +3,7 @@
     :bottomColor="ColorEnum.Primary"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <FSCol
@@ -17,10 +18,10 @@
       >
         <FSCol
           gap="12px"
+          :width="`calc(100% - ${imageSize}px - 24px)`"
         >
           <FSCol
             gap="6px"
-            :width="infoWidth"
           >
             <FSText
               font="text-button"
@@ -141,7 +142,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -190,13 +196,6 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.imageId) {
-        width -= imageSize.value;
-      }
-      return width;
-    });
 
     return {
       carouselDeviceStatuses,
@@ -205,7 +204,6 @@ export default defineComponent({
       singleModelStatuses,
       ColorEnum,
       imageSize,
-      infoWidth
     };
   }
 });

package/components/tiles/FSGroupTileUI.vue

@@ -3,6 +3,7 @@
     :bottomColor="ColorEnum.Error"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <FSCol
@@ -17,10 +18,10 @@
       >
         <FSCol
           gap="12px"
+          :width="`calc(100% - ${imageSize}px - 24px)`"
         >
           <FSCol
             gap="6px"
-            :width="infoWidth"
           >
             <FSText
               font="text-button"
@@ -158,7 +159,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -175,20 +181,11 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.imageId) {
-        width -= imageSize.value;
-      }
-      return width;
-    });
-
     return {
       ColorEnum,
       groupsLabel,
       deviceOrganisationsLabel,
-      imageSize,
-      infoWidth
+      imageSize
     };
   }
 });

package/components/tiles/FSSimpleTileUI.vue

@@ -3,6 +3,7 @@
     :bottomColor="$props.bottomColor"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <FSCol
@@ -17,6 +18,7 @@
       >
         <FSCol
           gap="6px"
+          :width="`calc(100% - ${imageSize}px - 24px)`"
         >
           <FSText
             font="text-button"
@@ -113,7 +115,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -126,19 +133,10 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.icon) {
-        width -= imageSize.value;
-      }
-      return width;
-    });
-
     return {
       iconBackgroundColor,
       ColorEnum,
-      imageSize,
-      infoWidth
+      imageSize
     };
   }
 });

package/components/tiles/FSTile.vue

@@ -5,7 +5,6 @@
     class="fs-tile"
     padding="12px"
     :height="height"
-    :width="width"
     :style="style"
     :href="$props.href"
     :to="$props.to"
@@ -33,7 +32,6 @@
     class="fs-tile"
     padding="12px"
     :style="style"
-    :width="width"
     :height="height"
     v-bind="$attrs"
   >
@@ -118,17 +116,12 @@ export default defineComponent({
       return {};
     });
 
-    const width = computed(() => {
-      return isMobileSized.value ? 336 : 352;
-    });
-
     const height = computed(() => {
       return isMobileSized.value ? 156 : 170;
     });
 
     return {
       height,
-      width,
       style
     };
   }

package/models/map.ts

@@ -5,6 +5,7 @@ import { type Address } from "@dative-gpi/foundation-shared-domain/models";
 export interface MapLayer {
   name : string;
   label: string;
+  image: string;
   layer: Layer;
 }
 
@@ -13,4 +14,5 @@ export interface FSLocation {
   label: string;
   icon: string;
   address: Address;
+  color: string;
 }

package/models/richTextVariable.ts

@@ -0,0 +1,5 @@
+export interface RichTextVariable {
+  code: string;
+  defaultValue: string;
+  typeName: string;
+}

package/models/variableNode.ts

@@ -0,0 +1,105 @@
+import { type LexicalNode, DecoratorNode, type SerializedLexicalNode, type Spread, type EditorConfig, type LexicalEditor } from "lexical";
+import type { RichTextVariable } from "./richTextVariable";
+
+export type SerializedVariableNode = Spread<
+  {
+    type: "variable";
+    code: string;
+    defaultValue: string;
+    typeName: string;
+  },
+  SerializedLexicalNode
+>;
+
+export class VariableNode extends DecoratorNode<Element> {
+  __code: string;
+  __defaultValue: string;
+  __typeName: string;
+  readonlyMode: boolean;
+
+  static getType() {
+    return "variable";
+  }
+
+  static clone(node: VariableNode) {
+    return new VariableNode(node.__code, node.__defaultValue, node.__typeName, node.__key);
+  }
+
+  constructor(code: string, defaultValue: string, typeName: string, key?: string) {
+    super(key);
+    this.__code = code;
+    this.__defaultValue = defaultValue;
+    this.__typeName = typeName;
+    this.readonlyMode = false;
+  }
+
+  getValue(editorElement: HTMLElement): any {
+    const variableValues = editorElement.dataset.variableValues;
+    if (!variableValues) { return this.__defaultValue; }
+    const values = JSON.parse(variableValues);
+    return values[this.__code] ?? this.__defaultValue;
+  }
+
+  createDOM(_config: EditorConfig, _editor: LexicalEditor) {
+    const readonlyMode = _editor._rootElement?.dataset.readonly === "true" || false;
+
+    const container = document.createElement("span");
+    container.classList.add("fs-richtextfield-node-variable");
+
+    const content = document.createElement("span");
+    if (readonlyMode) {
+      content.classList.add("fs-rich-text-field-node-variable-value");
+      if (_editor._rootElement) {
+        content.textContent = this.getValue(_editor._rootElement);
+      } else {
+        content.textContent = this.__defaultValue;
+      }
+    } else {
+      content.classList.add("fs-rich-text-field-node-variable-code");
+      content.textContent = `{${this.__code}}`
+    }
+    container.appendChild(content);
+    return container;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  exportJSON(): SerializedVariableNode {
+    return {
+      type: "variable",
+      version: 1,
+      code: this.__code,
+      defaultValue: this.__defaultValue,
+      typeName: this.__typeName,
+    };
+  }
+
+  decorate(editor: LexicalEditor, config: EditorConfig): Element {
+    return this.createDOM(config, editor);
+  }
+
+  static importJSON(serializedNode: SerializedVariableNode): VariableNode {
+    return new VariableNode(
+      serializedNode.code,
+      serializedNode.defaultValue,
+      serializedNode.typeName
+    );
+  }
+}
+
+export function $createVariableNode(code: string, defaultValue: string, typeName: string): VariableNode {
+  return new VariableNode(code, defaultValue, typeName);
+}
+
+export function $modifyVariableNode(node: VariableNode, newValue: RichTextVariable): VariableNode {
+  node.__code = newValue.code;
+  node.__defaultValue = newValue.defaultValue;
+  node.__typeName = newValue.typeName;
+  return node;
+}
+
+export function $isVariableNode(node: LexicalNode | null | undefined): node is VariableNode {
+  return node instanceof VariableNode;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.206",
+  "version": "0.0.208",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.206",
-    "@dative-gpi/foundation-shared-services": "0.0.206"
+    "@dative-gpi/foundation-shared-domain": "0.0.208",
+    "@dative-gpi/foundation-shared-services": "0.0.208"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "7ef1a1b0b6a291c09cb136bd597e4f1837415e71"
+  "gitHead": "0b82703929b6f4f0992f85ea0d6f1674e0ad0082"
 }

package/styles/components/fs_image_card.scss

@@ -0,0 +1,18 @@
+.fs-image-card {
+  > .fs-card {
+    background-image: var(--fs-image-card-background);
+    background-size: 100%;
+    background-position: center;
+  }
+
+  .fs-image-card-label {
+    background-color: #0000009d;
+    color: white;
+  }
+}
+
+.fs-image-card:hover {
+  > .fs-card {
+    background-size: 105%;
+  }
+}

package/styles/components/fs_map.scss

@@ -9,21 +9,12 @@
     filter: grayscale(var(--fs-map-container-grayscale));
   }
 
-  .fs-map-overlay-layer-choice {
+  .fs-map-overlay-left {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 950;
-    margin: 8px;
-
-    >* {
-      opacity: 0.7;
-      transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    >*:hover {
-      opacity: 1;
-    }
+    margin: 4px;
   }
 
   .fs-map-overlay-edit-button {
@@ -34,10 +25,17 @@
     margin: 8px;
   }
 
-  .fs-map-overlay-container {
+  .fs-map-overlay-right-top {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 4px 8px;
+  }
+
+  .fs-map-overlay-right-bottom {
     position: absolute;
     bottom: 0;
-    left: 0;
+    right: 0;
     z-index: 1000;
     margin: 4px 8px;
     width: calc(100% - 16px);
@@ -61,14 +59,11 @@
         border-top-right-radius: 0 !important;
 
         border-top: solid 1px var(--fs-card-border-color) !important;
-
-
       }
     }
   }
 
   .fs-map-mylocation {
-    background-color: var(--fs-map-location-pin-color);
     border: 3px solid white;
     border-radius: 100%;
     animation: fs-map-shadow 1.4s linear infinite;
@@ -88,8 +83,9 @@
     }
   }
 
-  .fs-map-location {
+  .fs-map-location > div {
     display: flex;
+    height: 100%;
     color: var(--fs-map-location-pin-color);
     border-radius: 50%;
     background-color: white;
@@ -97,19 +93,6 @@
     align-items: center;
     justify-content: center;
 
-    &.fs-map-location-full {
-      background-color: var(--fs-map-location-pin-color);
-      color: white;
-    }
-
-    >* {
-      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .mdi-loading {
-      animation: spin 1s linear infinite;
-    }
-
     &:hover {
       filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
 
@@ -118,32 +101,27 @@
         transform: scale(1.15);
       }
     }
+  }
+
+  .fs-map-location-full > div {
+    background-color: var(--fs-map-location-pin-color);
+    color: white;
+  }
 
-    @keyframes spin {
+  .fs-map-location-selected > div {
+    animation: fs-map-shadow 1.4s linear infinite;
+
+    @keyframes fs-map-shadow {
       0% {
-        transform: rotate(0deg);
+        box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
       }
 
-      100% {
-        transform: rotate(360deg);
+      50% {
+        box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
       }
-    }
 
-    &.fs-map-location-selected {
-      animation: fs-map-shadow 1.4s linear infinite;
-
-      @keyframes fs-map-shadow {
-        0% {
-          box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
-        }
-
-        50% {
-          box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
-        }
-
-        100% {
-          box-shadow: 0 0 0px 20px transparent;
-        }
+      100% {
+        box-shadow: 0 0 0px 20px transparent;
       }
     }
   }

package/styles/components/fs_rich_text_field.scss

@@ -1,19 +1,31 @@
 .fs-rich-text-field {
     width: 100%;
     min-width: 120px;
-    outline: none !important;
     border: 1px solid var(--fs-rich-text-field-border-color) !important;
     border-radius: 4px !important;
 
-    min-height: var(--fs-rich-text-field-min-height);
-    color: var(--fs-rich-text-field-color);
+
     margin: 2px 2px 2px 0 !important;
 
+    .fs-rich-text-field-content {
+        color: var(--fs-rich-text-field-color);
+        width: 100%;
+        min-height: var(--fs-rich-text-field-min-height);
+        outline: none !important;
+    }
+
+    .fs-richtextfield-node-variable {
+        .fs-rich-text-field-node-variable-code {
+            background-color: var(--fs-rich-text-field-variable-backgroundcolor);
+            color: var(--fs-rich-text-field-variable-color);
+            border-radius: 4px;
+        }
+    }
 
     &:focus-within {
         border-color: var(--fs-rich-text-field-active-border-color) !important;
     }
-        
+
     @include web {
         padding: 10px 12px !important;
     }

package/styles/components/index.scss

@@ -31,6 +31,7 @@
 @import "fs_icon_field.scss";
 @import "fs_icon.scss";
 @import "fs_image.scss";
+@import "fs_image_card.scss";
 @import "fs_label.scss";
 @import "fs_link.scss";
 @import "fs_load_data_table.scss";

package/utils/lexical.ts

@@ -1,6 +1,8 @@
 import type { ElementNode, LexicalNode, RangeSelection, TextNode } from "lexical";
 import { $isAtNodeEnd } from "@lexical/selection";
 
+export const emptyLexicalState = "{\"root\":{\"children\":[{\"children\":[],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}";
+
 export const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
   const anchor = selection.anchor;
   const focus = selection.focus;