@mozaic-ds/web-components 0.1.0

package/public/bricoman/utilities/DataTableUtilities.ts

@@ -0,0 +1,449 @@
+import type {
+  CustomText,
+  HeadData,
+  CellValue,
+  Badge,
+  Image,
+  BodyData,
+  SortDirection,
+  CellsFormat,
+  Link,
+  SelectionParams,
+  ProgressBar,
+  Button,
+} from '../components/datatable/datatable.types';
+
+const customTextFormatter = (customText: CustomText): string => {
+  let customTextHtml = '';
+  customText.map(
+    (item) =>
+      (customTextHtml += `<div class="custom-text" ${
+        item.style ? `style="${item.style}"` : ''
+      }> ${item.text}</div>`),
+  );
+  return customTextHtml;
+};
+const imageFormatter = (image: Image): string =>
+  `<img style="${
+    image.style || 'width: 35px; height: 35px; margin-right: 8px;'
+  }" src="${image.src || '/assets/no-picture.svg'}"/>`;
+const badgeFormatter = (badge: Badge): string =>
+  `<div class="mc-badge mc-badge--${badge.theme || 'info'}">${
+    badge.content
+  }</div>`;
+const linkFormatter = (link: Link): string =>
+  `<a class="mc-link" href=${link.href} >${link.text}</a>`;
+const linkWithoutRedirectFormatter = (link: Link, id: string): string =>
+  `<a class="mc-link" id=cell-link-${id} href=${link.href} onclick="return false;">${link.text}</a>`;
+const progressBarFormatter = (progressBar: ProgressBar): string => {
+  if (progressBar.labelOnLeft) {
+    return `<div style="float: left;"><span>${progressBar.value}%</span></div> 
+    <div style="margin-top: 0.4em;margin-left: 2.7em;"><m-progressbar value=${progressBar.value} size='m'></m-progressbar></div>`;
+  }
+  return `<m-progressbar value=${progressBar.value} displaypercentage=${progressBar.displaypercentage} size='${progressBar.size}'></m-progressbar>`;
+};
+const progressBarFormatterBranded = (progressBar: ProgressBar): string => {
+  if (progressBar.labelOnLeft) {
+    return `<div style="float: left;"><span>${progressBar.value}%</span></div> 
+  <div style="margin-top: 0.4em;margin-left: 2.7em;"><m-progressbar value=${progressBar.value} size='m' branded=${progressBar.branded}></m-progressbar></div>`;
+  }
+  return `<m-progressbar value=${progressBar.value} displaypercentage=${progressBar.displaypercentage} size='${progressBar.size}' branded=${progressBar.branded}></m-progressbar>`;
+};
+const buttonFormatterBranded = (button: Button, id: string): string => {
+  let buttonText = `<m-button
+  id=cell-button-${id}
+  label="${button.label}"
+  theme=${button.theme}
+  iconname=${button.iconname}
+  iconmode=${button.iconmode}
+  size=${button.size} `;
+  if (button.bordered) {
+    buttonText += `bordered=${button.bordered} `;
+  }
+  if (button.disabled) {
+    buttonText += `disabled=${button.disabled}`;
+  }
+  buttonText += `></m-button>`;
+  return buttonText;
+};
+
+const getFormattedCell = (
+  headerFormat: string,
+  cellValue: CellValue,
+  id: string,
+): string => {
+  switch (headerFormat) {
+    case 'Text':
+      return cellValue as string;
+    case 'CustomText':
+      return customTextFormatter(cellValue as CustomText);
+    case 'Image':
+      return imageFormatter(cellValue as Image);
+    case 'Badge':
+      return badgeFormatter(cellValue as Badge);
+    case 'Link':
+      return linkFormatter(cellValue as Link);
+    case 'LinkWithoutRedirect':
+      return linkWithoutRedirectFormatter(cellValue as Link, id);
+    case 'ProgressBar':
+      if ((cellValue as ProgressBar).branded === true) {
+        return progressBarFormatterBranded(cellValue as ProgressBar);
+      }
+      return progressBarFormatter(cellValue as ProgressBar);
+    case 'Button':
+      return buttonFormatterBranded(cellValue as Button, id);
+    default:
+      return cellValue as string;
+  }
+};
+export const getCellContent = (
+  headData: HeadData,
+  bodyData: BodyData,
+): string => {
+  const cellValue = bodyData?.cells[headData.id];
+
+  return cellValue
+    ? getFormattedCell(headData.cellsFormat, cellValue, bodyData.id)
+    : '';
+};
+
+export const getDataAttribute = (
+  attributeSuffix: string | undefined,
+  value: string,
+): { [key: string]: string } => {
+  const key = `data-${attributeSuffix ? attributeSuffix : ''}`;
+  return attributeSuffix
+    ? {
+        [key]: value,
+      }
+    : {};
+};
+export const areAllItemsSelected = (items: BodyData[]): boolean => {
+  const selectedItems = items
+    .filter((item) => !item.disableSelection)
+    .filter((item) => item.selected === true);
+  return (
+    selectedItems.length ===
+      items.filter((item) => !item.disableSelection).length &&
+    items.filter((item) => !item.disableSelection).length > 0
+  );
+};
+export const checkSubRow = (items: BodyData[]): boolean => {
+  let result = false;
+  items.forEach((item) => {
+    if ('subRow' in item) {
+      result = true;
+    }
+  });
+  return result;
+};
+
+export const getSortDirection = (
+  initialSortDirection: SortDirection,
+): SortDirection => {
+  let sortDirection: SortDirection;
+  switch (initialSortDirection) {
+    case 'na':
+    case 'desc':
+    default:
+      sortDirection = 'asc';
+      break;
+    case 'asc':
+      sortDirection = 'desc';
+      break;
+  }
+  return sortDirection;
+};
+
+export const onePageSort = (
+  items: BodyData[],
+  columnId: string,
+  cellsFormat: CellsFormat,
+  sortDirection: SortDirection,
+): BodyData[] => {
+  let compareFunction;
+
+  switch (cellsFormat) {
+    default:
+    case 'Text':
+      if (sortDirection === 'asc') {
+        compareFunction = (a: BodyData, b: BodyData) =>
+          a.cells[columnId] > b.cells[columnId] ? 1 : -1;
+      } else if (sortDirection === 'desc') {
+        compareFunction = (a: BodyData, b: BodyData) =>
+          a.cells[columnId] > b.cells[columnId] ? -1 : 1;
+      }
+      break;
+    case 'Badge':
+      if (sortDirection === 'asc') {
+        compareFunction = (a: BodyData, b: BodyData) =>
+          ((a.cells[columnId] as Badge)?.content || '0') >
+          ((b.cells[columnId] as Badge)?.content || '0')
+            ? 1
+            : -1;
+      } else if (sortDirection === 'desc') {
+        compareFunction = (a: BodyData, b: BodyData) =>
+          ((a.cells[columnId] as Badge)?.content || '0') >
+          ((b.cells[columnId] as Badge)?.content || '0')
+            ? -1
+            : 1;
+      }
+      break;
+    case 'Link':
+      if (sortDirection === 'asc') {
+        compareFunction = (a: BodyData, b: BodyData) =>
+          ((a.cells[columnId] as Link)?.text || '0') >
+          ((b.cells[columnId] as Link)?.text || '0')
+            ? 1
+            : -1;
+      } else if (sortDirection === 'desc') {
+        compareFunction = (a: BodyData, b: BodyData) =>
+          ((a.cells[columnId] as Link)?.text || '0') >
+          ((b.cells[columnId] as Link)?.text || '0')
+            ? -1
+            : 1;
+      }
+      break;
+    case 'CustomText':
+      if (sortDirection === 'asc') {
+        compareFunction = (a: BodyData, b: BodyData) =>
+          ((a.cells[columnId] as CustomText)[0].text || '0') >
+          ((b.cells[columnId] as CustomText)[0].text || '0')
+            ? 1
+            : -1;
+      } else if (sortDirection === 'desc') {
+        compareFunction = (a: BodyData, b: BodyData) =>
+          ((a.cells[columnId] as CustomText)[0].text || '0') >
+          ((b.cells[columnId] as CustomText)[0].text || '0')
+            ? -1
+            : 1;
+      }
+      break;
+  }
+  const sortedItems = items.sort(compareFunction);
+  return sortedItems;
+};
+
+export const getPageSelectOptionsArray = (
+  totalPages: number,
+  currentPage: number,
+  showAllPages: boolean,
+): number[] => {
+  if (totalPages <= 10 || showAllPages) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  } else {
+    const pagesArray = [1, 2, 3];
+    if (!pagesArray.includes(currentPage - 1) && currentPage - 1 != 0) {
+      pagesArray.push(currentPage - 1);
+    }
+    if (!pagesArray.includes(currentPage)) {
+      pagesArray.push(currentPage);
+    }
+    if (!pagesArray.includes(currentPage + 1) && currentPage != totalPages) {
+      pagesArray.push(currentPage + 1);
+    }
+    pagesArray.push(totalPages - 2, totalPages - 1, totalPages);
+    const optionsArray = [...new Set(pagesArray)];
+    optionsArray.sort((a: number, b: number): number => a - b);
+    return optionsArray;
+  }
+};
+
+export const handleCountItemSelection = (
+  item: BodyData,
+  selectionParams: SelectionParams | undefined,
+  showSelectionCount: boolean,
+): SelectionParams | undefined => {
+  if (showSelectionCount && selectionParams != null) {
+    if (selectionParams.allSelected) {
+      if (!item.selected) {
+        selectionParams.excludedIdsFromSelection = [
+          ...selectionParams.excludedIdsFromSelection.filter(
+            (itemDeselected) => {
+              return itemDeselected !== item.id;
+            },
+          ),
+        ];
+      } else {
+        selectionParams.excludedIdsFromSelection = [
+          ...selectionParams.excludedIdsFromSelection,
+          item.id,
+        ];
+        if (
+          selectionParams.excludedIdsFromSelection.length ===
+          selectionParams.totalItems
+        ) {
+          selectionParams.excludedIdsFromSelection = [];
+          selectionParams.allSelected = false;
+        }
+      }
+    } else {
+      if (!item.selected) {
+        selectionParams.idsSelected = [...selectionParams.idsSelected, item.id];
+        if (selectionParams.idsSelected.length === selectionParams.totalItems) {
+          selectionParams.idsSelected = [];
+          selectionParams.allSelected = true;
+        }
+      } else {
+        selectionParams.idsSelected = [
+          ...selectionParams.idsSelected.filter((idSelected) => {
+            return idSelected !== item.id;
+          }),
+        ];
+      }
+    }
+  }
+  return selectionParams;
+};
+
+export const handleCountAllSelection = (
+  items: BodyData[],
+  selectionParams: SelectionParams | undefined,
+  showSelectionCount: boolean,
+  indeterminate: boolean,
+  allItems: boolean,
+): SelectionParams | undefined => {
+  if (showSelectionCount && selectionParams != undefined) {
+    if (selectionParams?.allSelected) {
+      if (indeterminate) {
+        items
+          .filter((item) => !item.disableSelection)
+          .filter(
+            (item) => !(selectionParams?.idsSelected || []).includes(item.id),
+          )
+          .forEach((item) => {
+            if (selectionParams != undefined) {
+              selectionParams.idsSelected = [
+                ...selectionParams.idsSelected,
+                item.id,
+              ];
+            }
+          });
+        items
+          .filter((item) => !item.disableSelection)
+          .forEach((item) => {
+            if (selectionParams != undefined) {
+              const index = selectionParams.excludedIdsFromSelection.indexOf(
+                item.id,
+                0,
+              );
+              if (index > -1) {
+                selectionParams.excludedIdsFromSelection.splice(index, 1);
+                selectionParams.excludedIdsFromSelection = [
+                  ...selectionParams.excludedIdsFromSelection,
+                ];
+              }
+            }
+          });
+        if (selectionParams.idsSelected.length === selectionParams.totalItems) {
+          selectionParams.allSelected = true;
+          selectionParams.idsSelected = [];
+        }
+      } else {
+        selectionParams.excludedIdsFromSelection = [
+          ...selectionParams.excludedIdsFromSelection,
+          ...items
+            .filter((item) => !item.disableSelection)
+            .map((item) => item.id),
+        ];
+        if (
+          selectionParams.excludedIdsFromSelection.length ===
+          selectionParams.totalItems
+        ) {
+          selectionParams.allSelected = false;
+          selectionParams.idsSelected = [];
+          selectionParams.excludedIdsFromSelection = [];
+        }
+      }
+    } else {
+      if (allItems) {
+        items
+          .filter((item) => !item.disableSelection)
+          .filter(
+            (item) => !(selectionParams?.idsSelected || []).includes(item.id),
+          )
+          .forEach((item) => {
+            if (selectionParams != undefined) {
+              selectionParams.idsSelected = [
+                ...selectionParams.idsSelected,
+                item.id,
+              ];
+            }
+          });
+        if (selectionParams.idsSelected.length === selectionParams.totalItems) {
+          selectionParams.allSelected = true;
+          selectionParams.idsSelected = [];
+        }
+      } else {
+        items
+          .filter((item) => !item.disableSelection)
+          .forEach((item) => {
+            if (selectionParams != undefined) {
+              selectionParams.idsSelected = [
+                ...selectionParams.idsSelected.filter((idSelected) => {
+                  return idSelected !== item.id;
+                }),
+              ];
+            }
+          });
+      }
+    }
+  }
+  return selectionParams;
+};
+
+export const clearSelection = (
+  selectionParams: SelectionParams | undefined,
+): SelectionParams | undefined => {
+  if (selectionParams != undefined) {
+    selectionParams.excludedIdsFromSelection = [];
+    selectionParams.idsSelected = [];
+    selectionParams.allSelected = false;
+  }
+  return selectionParams;
+};
+
+export const selectAll = (
+  selectionParams: SelectionParams | undefined,
+): SelectionParams | undefined => {
+  if (selectionParams != undefined) {
+    selectionParams.excludedIdsFromSelection = [];
+    selectionParams.idsSelected = [];
+    selectionParams.allSelected = true;
+  }
+  return selectionParams;
+};
+
+export const isHeaderSelectCheckboxIndeterminate = (
+  items: BodyData[],
+  selectionParams: SelectionParams | undefined,
+  indeterminate: boolean,
+): boolean => {
+  if (selectionParams != undefined && indeterminate != undefined) {
+    if (
+      (!selectionParams.allSelected &&
+        items
+          .filter((item) => !item.disableSelection)
+          .map((item) => {
+            return item.id;
+          })
+          .every((item) =>
+            (selectionParams?.idsSelected || []).includes(item),
+          )) ||
+      (!selectionParams.allSelected &&
+        selectionParams.idsSelected.length === 0) ||
+      (selectionParams.allSelected &&
+        !items
+          .map((item) => item.id)
+          .some((id) =>
+            (selectionParams?.excludedIdsFromSelection || []).includes(id),
+          )) ||
+      (selectionParams.allSelected &&
+        selectionParams.excludedIdsFromSelection.length === 0)
+    ) {
+      return false;
+    }
+    return true;
+  }
+  return false;
+};

package/public/bricoman/utilities/EventForward.d.ts

@@ -0,0 +1,10 @@
+import type { SvelteComponent } from 'svelte';
+type ForwardException = string | {
+    name: string;
+    shouldExclude: () => boolean;
+};
+export declare function createEventForwarder(component: SvelteComponent, except?: ForwardException[]): (node: HTMLElement | SVGElement) => {
+    destroy: () => void;
+};
+export {};
+//# sourceMappingURL=EventForward.d.ts.map

package/public/bricoman/utilities/EventForward.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventForward.d.ts","sourceRoot":"","sources":["../../../src/utilities/EventForward.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAa9C,KAAK,gBAAgB,GAAG,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,OAAO,CAAA;CAAE,CAAC;AAQhF,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,eAAe,EAC1B,MAAM,GAAE,gBAAgB,EAAO,UAmDjB,WAAW,GAAG,UAAU;;EA+FvC"}

package/public/bricoman/utilities/EventForward.ts

@@ -0,0 +1,173 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { SvelteComponent } from 'svelte';
+import {
+  bubble,
+  listen,
+  prevent_default,
+  stop_propagation,
+} from 'svelte/internal';
+
+/*
+ * Adapted from rgossiaux/svelte-headlessui
+ *
+ **/
+
+type ForwardException = string | { name: string; shouldExclude: () => boolean };
+
+const MODIFIER_DIVIDER = '!';
+const modifierRegex = new RegExp(
+  `^[^${MODIFIER_DIVIDER}]+(?:${MODIFIER_DIVIDER}(?:preventDefault|stopPropagation|passive|nonpassive|capture|once|self))+$`,
+);
+
+/** Function for forwarding DOM events to the component's declaration */
+export function createEventForwarder(
+  component: SvelteComponent,
+  except: ForwardException[] = [],
+) {
+  // This is our pseudo $on function. It is defined on component mount.
+  let $on: (eventType: string, callback: (event: any) => void) => () => void;
+  // This is a list of events bound before mount.
+  const events: [string, (event: any) => void][] = [];
+
+  // And we override the $on function to forward all bound events.
+  component.$on = (fullEventType: string, callback: (event: any) => void) => {
+    const eventType = fullEventType;
+    let destructor = () => {};
+    for (const exception of except) {
+      if (typeof exception === 'string' && exception === eventType) {
+        // Bail out of the event forwarding and run the normal Svelte $on() code
+        const callbacks =
+          component.$$.callbacks[eventType] ||
+          (component.$$.callbacks[eventType] = []);
+        callbacks.push(callback);
+        return () => {
+          const index = callbacks.indexOf(callback);
+          if (index !== -1) callbacks.splice(index, 1);
+        };
+      }
+      if (typeof exception === 'object' && exception['name'] === eventType) {
+        const oldCallback = callback;
+        callback = (...props) => {
+          if (
+            !(typeof exception === 'object' && exception['shouldExclude']())
+          ) {
+            oldCallback(...props);
+          }
+        };
+      }
+    }
+    if ($on) {
+      // The event was bound programmatically.
+      destructor = $on(eventType, callback);
+    } else {
+      // The event was bound before mount by Svelte.
+      events.push([eventType, callback]);
+    }
+    return () => {
+      destructor();
+    };
+  };
+
+  function forward(e: Event) {
+    // Internally bubble the event up from Svelte components.
+    bubble(component, e);
+  }
+
+  return (node: HTMLElement | SVGElement) => {
+    const destructors: (() => void)[] = [];
+    const forwardDestructors: { [k: string]: () => void } = {};
+
+    // This function is responsible for listening and forwarding
+    // all bound events.
+    $on = (fullEventType, callback) => {
+      let eventType = fullEventType;
+      let handler = callback;
+      // DOM addEventListener options argument.
+      let options: boolean | AddEventListenerOptions = false;
+      const modifierMatch = eventType.match(modifierRegex);
+      if (modifierMatch) {
+        // Parse the event modifiers.
+        // Supported modifiers:
+        // - preventDefault
+        // - stopPropagation
+        // - passive
+        // - nonpassive
+        // - capture
+        // - once
+        const parts = eventType.split(MODIFIER_DIVIDER);
+        eventType = parts[0];
+        const eventOptions: {
+          passive?: true;
+          nonpassive?: true;
+          capture?: true;
+          once?: true;
+          preventDefault?: true;
+          stopPropagation?: true;
+        } = Object.fromEntries(parts.slice(1).map((mod) => [mod, true]));
+        if (eventOptions.passive) {
+          options = options || ({} as AddEventListenerOptions);
+          options.passive = true;
+        }
+        if (eventOptions.nonpassive) {
+          options = options || ({} as AddEventListenerOptions);
+          options.passive = false;
+        }
+        if (eventOptions.capture) {
+          options = options || ({} as AddEventListenerOptions);
+          options.capture = true;
+        }
+        if (eventOptions.once) {
+          options = options || ({} as AddEventListenerOptions);
+          options.once = true;
+        }
+        if (eventOptions.preventDefault) {
+          handler = prevent_default(handler);
+        }
+        if (eventOptions.stopPropagation) {
+          handler = stop_propagation(handler);
+        }
+      }
+
+      // Listen for the event directly, with the given options.
+      const off = listen(node, eventType, handler, options);
+      const destructor = () => {
+        off();
+        const idx = destructors.indexOf(destructor);
+        if (idx > -1) {
+          destructors.splice(idx, 1);
+        }
+      };
+
+      destructors.push(destructor);
+
+      // Forward the event from Svelte.
+      if (!(eventType in forwardDestructors)) {
+        forwardDestructors[eventType] = listen(node, eventType, forward);
+      }
+
+      return destructor;
+    };
+
+    for (let i = 0; i < events.length; i++) {
+      // Listen to all the events added before mount.
+      console.log(events[i][0]);
+      $on(events[i][0], events[i][1]);
+    }
+
+    return {
+      destroy: () => {
+        // Remove all event listeners.
+        for (let i = 0; i < destructors.length; i++) {
+          destructors[i]();
+        }
+
+        // Remove all event forwarders.
+        for (const entry of Object.entries(forwardDestructors)) {
+          entry[1]();
+        }
+      },
+    };
+  };
+}

package/public/bricoman/utilities/EventHandler.d.ts

@@ -0,0 +1,7 @@
+export declare class EventHandler {
+    private component;
+    private svelteDispatch;
+    constructor();
+    dispatch(name: string, detail: CustomEvent['detail']): void;
+}
+//# sourceMappingURL=EventHandler.d.ts.map

package/public/bricoman/utilities/EventHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventHandler.d.ts","sourceRoot":"","sources":["../../../src/utilities/EventHandler.ts"],"names":[],"mappings":"AAEA,qBAAa,YAAY;IACvB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,cAAc,CAGZ;;IAOV,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI;CAM5D"}

package/public/bricoman/utilities/EventHandler.ts

@@ -0,0 +1,21 @@
+import { get_current_component, createEventDispatcher } from 'svelte/internal';
+
+export class EventHandler {
+  private component: HTMLElement;
+  private svelteDispatch: <EventKey extends string>(
+    type: EventKey,
+    detail?: any,
+  ) => void;
+
+  constructor() {
+    this.component = get_current_component() as unknown as HTMLElement;
+    this.svelteDispatch = createEventDispatcher();
+  }
+
+  dispatch(name: string, detail: CustomEvent['detail']): void {
+    this.svelteDispatch(name, detail);
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment */
+    this.component.dispatchEvent &&
+      this.component.dispatchEvent(new CustomEvent(name, { detail: detail }));
+  }
+}

package/public/bricoman/utilities/additional-svelte-jsx.d.ts

@@ -0,0 +1,9 @@
+// This file is based on the following documenations:
+// => https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-using-an-attributeevent-on-a-dom-element-and-it-throws-a-type-error
+// => https://github.com/sveltejs/language-tools/issues/431
+
+declare namespace svelte.JSX {
+  interface HTMLAttributes<T> {
+    onoutclick?: (event: CustomEvent<any> & { target: EventTarget & T }) => any;
+  }
+}