@mozaic-ds/web-components 0.7.0 → 0.9.0-beta

package/public/utilities/DataTableUtilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableUtilities.d.ts","sourceRoot":"","sources":["../../src/utilities/DataTableUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,QAAQ,EAIR,QAAQ,EACR,aAAa,EACb,WAAW,EAEX,eAAe,EAGhB,MAAM,yCAAyC,CAAC;AAqFjD,eAAO,MAAM,cAAc,aACf,QAAQ,YACR,QAAQ,KACjB,MAMF,CAAC;AAEF,eAAO,MAAM,gBAAgB,oBACV,MAAM,GAAG,SAAS,SAC5B,MAAM;;CAQd,CAAC;AACF,eAAO,MAAM,mBAAmB,UAAW,QAAQ,EAAE,KAAG,OASvD,CAAC;AACF,eAAO,MAAM,WAAW,UAAW,QAAQ,EAAE,KAAG,OAQ/C,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBACL,aAAa,KAClC,aAaF,CAAC;AAEF,eAAO,MAAM,WAAW,UACf,QAAQ,EAAE,YACP,MAAM,eACH,WAAW,iBACT,aAAa,KAC3B,QAAQ,EA8DV,CAAC;AAEF,eAAO,MAAM,yBAAyB,eACxB,MAAM,eACL,MAAM,gBACL,OAAO,KACpB,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,wBAAwB,SAC7B,QAAQ,mBACG,eAAe,GAAG,SAAS,sBACxB,OAAO,KAC1B,eAAe,GAAG,SAyCpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,UAC3B,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,sBACxB,OAAO,iBACZ,OAAO,YACZ,OAAO,KAChB,eAAe,GAAG,SAwFpB,CAAC;AAEF,eAAO,MAAM,cAAc,oBACR,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBACH,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,mCAAmC,UACvC,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,iBAC7B,OAAO,KACrB,OA4BF,CAAC;AAEF,oBAAY,aAAa;IACvB,KAAK,UAAU;CAChB"}
+{"version":3,"file":"DataTableUtilities.d.ts","sourceRoot":"","sources":["../../src/utilities/DataTableUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,QAAQ,EAIR,QAAQ,EACR,aAAa,EACb,WAAW,EAEX,eAAe,EAIhB,MAAM,yCAAyC,CAAC;AAwGjD,eAAO,MAAM,cAAc,aACf,QAAQ,YACR,QAAQ,KACjB,MAMF,CAAC;AAEF,eAAO,MAAM,gBAAgB,oBACV,MAAM,GAAG,SAAS,SAC5B,MAAM;;CAQd,CAAC;AACF,eAAO,MAAM,mBAAmB,UAAW,QAAQ,EAAE,KAAG,OASvD,CAAC;AACF,eAAO,MAAM,WAAW,UAAW,QAAQ,EAAE,KAAG,OAQ/C,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBACL,aAAa,KAClC,aAaF,CAAC;AAEF,eAAO,MAAM,WAAW,UACf,QAAQ,EAAE,YACP,MAAM,eACH,WAAW,iBACT,aAAa,KAC3B,QAAQ,EA8DV,CAAC;AAEF,eAAO,MAAM,yBAAyB,eACxB,MAAM,eACL,MAAM,gBACL,OAAO,KACpB,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,wBAAwB,SAC7B,QAAQ,mBACG,eAAe,GAAG,SAAS,sBACxB,OAAO,KAC1B,eAAe,GAAG,SAyCpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,UAC3B,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,sBACxB,OAAO,iBACZ,OAAO,YACZ,OAAO,KAChB,eAAe,GAAG,SAwFpB,CAAC;AAEF,eAAO,MAAM,cAAc,oBACR,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBACH,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,mCAAmC,UACvC,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,iBAC7B,OAAO,KACrB,OA4BF,CAAC;AAEF,oBAAY,aAAa;IACvB,KAAK,UAAU;CAChB"}

package/public/utilities/DataTableUtilities.ts

@@ -11,6 +11,7 @@ import type {
   SelectionParams,
   ProgressBar,
   Button,
+  FileFormat,
 } from '../components/datatable/datatable.types';
 
 const customTextFormatter = (customText: CustomText): string => {
@@ -23,6 +24,13 @@ const customTextFormatter = (customText: CustomText): string => {
   );
   return customTextHtml;
 };
+const customNumberFormatter = (number: Number): string => {
+  return number !== null && number !== undefined
+    ? `<span style="display: flex; justify-content: end;"> ${Number(
+        number,
+      )} </span>`
+    : '';
+};
 const imageFormatter = (image: Image): string =>
   `<img style="${
     image.style || 'width: 35px; height: 35px; margin-right: 8px;'
@@ -33,6 +41,14 @@ const badgeFormatter = (badge: Badge): string =>
   }</div>`;
 const linkFormatter = (link: Link): string =>
   `<a class="mc-link" href=${link.href} >${link.text}</a>`;
+
+const fileFormatter = (file: FileFormat, id: string): string =>
+  `<div class="mc-tooltip mc-tooltip--top">
+      <span id="tooltipTop" class="mc-tooltip__content" role="tooltip">
+        ${file.documentNameTooltip}
+      </span>
+      <span class="mc-link" id=cell-file-${id} style="${file.style}"> ${file.documentName}</span>
+  </div>`;
 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 => {
@@ -77,12 +93,16 @@ const getFormattedCell = (
       return cellValue as string;
     case 'CustomText':
       return customTextFormatter(cellValue as CustomText);
+    case 'Number':
+      return customNumberFormatter(cellValue as Number);
     case 'Image':
       return imageFormatter(cellValue as Image);
     case 'Badge':
       return badgeFormatter(cellValue as Badge);
     case 'Link':
       return linkFormatter(cellValue as Link);
+    case 'FileFormat':
+      return fileFormatter(cellValue as FileFormat, id);
     case 'LinkWithoutRedirect':
       return linkWithoutRedirectFormatter(cellValue as Link, id);
     case 'ProgressBar':
@@ -102,7 +122,7 @@ export const getCellContent = (
 ): string => {
   const cellValue = bodyData?.cells[headData.id];
 
-  return cellValue
+  return cellValue || Number(cellValue) === 0
     ? getFormattedCell(headData.cellsFormat, cellValue, bodyData.id)
     : '';
 };
@@ -165,7 +185,7 @@ export const onePageSort = (
 
   switch (cellsFormat) {
     default:
-    case 'Text':
+    case 'Text' || 'Number':
       if (sortDirection === 'asc') {
         compareFunction = (a: BodyData, b: BodyData) =>
           a.cells[columnId] > b.cells[columnId] ? 1 : -1;

package/public/utilities/EventForward.js

@@ -1,2 +1,137 @@
-function t(t,e,n,o){return t.addEventListener(e,n,o),()=>t.removeEventListener(e,n,o)}const e=new RegExp("^[^!]+(?:!(?:preventDefault|stopPropagation|passive|nonpassive|capture|once|self))+$");function n(n,o=[]){let s;const c=[];function r(t){!function(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach((t=>t.call(this,e)))}(n,t)}return n.$on=(t,e)=>{const r=t;let i=()=>{};for(const t of o){if("string"==typeof t&&t===r){const t=n.$$.callbacks[r]||(n.$$.callbacks[r]=[]);return t.push(e),()=>{const n=t.indexOf(e);-1!==n&&t.splice(n,1)}}if("object"==typeof t&&t.name===r){const n=e;e=(...e)=>{"object"==typeof t&&t.shouldExclude()||n(...e)}}}return s?i=s(r,e):c.push([r,e]),()=>{i()}},n=>{const o=[],i={};s=(s,c)=>{let a=s,p=c,l=!1;if(a.match(e)){const t=a.split("!");a=t[0];const e=Object.fromEntries(t.slice(1).map((t=>[t,!0])));e.passive&&(l=l||{},l.passive=!0),e.nonpassive&&(l=l||{},l.passive=!1),e.capture&&(l=l||{},l.capture=!0),e.once&&(l=l||{},l.once=!0),e.preventDefault&&(f=p,p=function(t){return t.preventDefault(),f.call(this,t)}),e.stopPropagation&&(p=function(t){return function(e){return e.stopPropagation(),t.call(this,e)}}(p))}var f;const u=t(n,a,p,l),v=()=>{u();const t=o.indexOf(v);t>-1&&o.splice(t,1)};return o.push(v),a in i||(i[a]=t(n,a,r)),v};for(let t=0;t<c.length;t++)s(c[t][0],c[t][1]);return{destroy:()=>{for(let t=0;t<o.length;t++)o[t]();for(const t of Object.entries(i))t[1]()}}}}export{n as createEventForwarder};
+function listen(node, event, handler, options) {
+    node.addEventListener(event, handler, options);
+    return () => node.removeEventListener(event, handler, options);
+}
+function prevent_default(fn) {
+    return function (event) {
+        event.preventDefault();
+        // @ts-ignore
+        return fn.call(this, event);
+    };
+}
+function stop_propagation(fn) {
+    return function (event) {
+        event.stopPropagation();
+        // @ts-ignore
+        return fn.call(this, event);
+    };
+}
+// TODO figure out if we still want to support
+// shorthand events, or if we want to implement
+// a real bubbling mechanism
+function bubble(component, event) {
+    const callbacks = component.$$.callbacks[event.type];
+    if (callbacks) {
+        // @ts-ignore
+        callbacks.slice().forEach(fn => fn.call(this, event));
+    }
+}
+
+const MODIFIER_DIVIDER = '!';
+const modifierRegex = new RegExp(`^[^${MODIFIER_DIVIDER}]+(?:${MODIFIER_DIVIDER}(?:preventDefault|stopPropagation|passive|nonpassive|capture|once|self))+$`);
+function createEventForwarder(component, except = []) {
+    let $on;
+    const events = [];
+    component.$on = (fullEventType, callback) => {
+        const eventType = fullEventType;
+        let destructor = () => { };
+        for (const exception of except) {
+            if (typeof exception === 'string' && exception === eventType) {
+                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) {
+            destructor = $on(eventType, callback);
+        }
+        else {
+            events.push([eventType, callback]);
+        }
+        return () => {
+            destructor();
+        };
+    };
+    function forward(e) {
+        bubble(component, e);
+    }
+    return (node) => {
+        const destructors = [];
+        const forwardDestructors = {};
+        $on = (fullEventType, callback) => {
+            let eventType = fullEventType;
+            let handler = callback;
+            let options = false;
+            const modifierMatch = eventType.match(modifierRegex);
+            if (modifierMatch) {
+                const parts = eventType.split(MODIFIER_DIVIDER);
+                eventType = parts[0];
+                const eventOptions = Object.fromEntries(parts.slice(1).map((mod) => [mod, true]));
+                if (eventOptions.passive) {
+                    options = options || {};
+                    options.passive = true;
+                }
+                if (eventOptions.nonpassive) {
+                    options = options || {};
+                    options.passive = false;
+                }
+                if (eventOptions.capture) {
+                    options = options || {};
+                    options.capture = true;
+                }
+                if (eventOptions.once) {
+                    options = options || {};
+                    options.once = true;
+                }
+                if (eventOptions.preventDefault) {
+                    handler = prevent_default(handler);
+                }
+                if (eventOptions.stopPropagation) {
+                    handler = stop_propagation(handler);
+                }
+            }
+            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);
+            if (!(eventType in forwardDestructors)) {
+                forwardDestructors[eventType] = listen(node, eventType, forward);
+            }
+            return destructor;
+        };
+        for (let i = 0; i < events.length; i++) {
+            $on(events[i][0], events[i][1]);
+        }
+        return {
+            destroy: () => {
+                for (let i = 0; i < destructors.length; i++) {
+                    destructors[i]();
+                }
+                for (const entry of Object.entries(forwardDestructors)) {
+                    entry[1]();
+                }
+            },
+        };
+    };
+}
+
+export { createEventForwarder };
 //# sourceMappingURL=EventForward.js.map