@qaecy/cue-ui 0.0.38 → 0.0.39

package/README.md

@@ -15,6 +15,8 @@ Drop them into any HTML page — no build step required.
 | `<cue-project-list>`            | Lists all projects the authenticated user is a member of, with an optional map    |
 | `<cue-id-builder>`              | Interactive IFC/SPARQL ID builder                                                 |
 | `<cue-block-project-documents>` | Project documents content block with charts and statistics                        |
+| `<cue-document-charts>`         | Interactive document-statistics charts (by file type and/or content category)     |
+| `<cue-sparql-table>`            | Declarative, column-configurable SPARQL table with built-in Cue SDK integration   |
 
 ---
 
@@ -207,17 +209,20 @@ Supported file types: PDF, IFC/BIM, DXF/CAD, images (PNG, JPG, SVG, …), Markdo
 
 Renders a lazy-loaded document table. Pass a `projectId`, `uuids`, and `sdkState`; the component requests metadata and categories internally.
 
-| Property                         | Type                                                                  | Required | Description                                                                            |
-| -------------------------------- | --------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
-| `projectId`                      | `string`                                                              | ✅       | Cue project (space) ID.                                                                |
-| `uuids`                          | `string[]`                                                            | ✅       | Document UUIDs to display.                                                             |
-| `sdkState`                       | `{ cue?; view?; documents?; language?; availableContentCategories? }` | ✅       | SDK context. Provide at least one of `cue`, `view`, or `documents`.                    |
-| `simple`                         | `boolean`                                                             | ❌       | Renders a compact list + paginator instead of ag-grid/flip/settings. Default: `false`. |
-| `pageSize`                       | `number`                                                              | ❌       | Host-controlled page size used by both simple and non-simple modes. Default: `10`.     |
-| `prefetchPages`                  | `number`                                                              | ❌       | Lazy-load buffer size multiplier (`pageSize * prefetchPages`). Default: `3`.           |
-| `showOpenInDocumentViewerAction` | `boolean`                                                             | ❌       | Shows "Open in document viewer" menu item. Default: `false`.                           |
-| `showOpenInFileManagerAction`    | `boolean`                                                             | ❌       | Shows "Open in file manager" menu item. Default: `false`.                              |
-| `customMenuItems`                | `Array<{ label; icon?; action }>`                                     | ❌       | Custom context-menu entries appended after the standard menu items.                    |
+| Property                         | Type                                                                  | Required | Description                                                                                                                                         |
+| -------------------------------- | --------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `projectId`                      | `string`                                                              | ✅       | Cue project (space) ID.                                                                                                                             |
+| `uuids`                          | `string[]`                                                            | ✅       | Document UUIDs to display.                                                                                                                          |
+| `sdkState`                       | `{ cue?; view?; documents?; language?; availableContentCategories? }` | ✅       | SDK context. Provide at least one of `cue`, `view`, or `documents`.                                                                                 |
+| `suffixes`                       | `string[]`                                                            | ❌       | File extensions to filter by (e.g. `['.pdf', '.ifc']`). Auto-fetches matching UUIDs. Takes precedence over `uuids`.                                 |
+| `mimeTypes`                      | `string[]`                                                            | ❌       | MIME types to filter by (e.g. `['application/pdf']`). Auto-fetches matching UUIDs. Lower precedence than `suffixes`.                                |
+| `contentCategories`              | `string[]`                                                            | ❌       | Content-category IRIs to filter by. Auto-fetches matching UUIDs via `documentsByContentCategory()`. Lower precedence than `suffixes` / `mimeTypes`. |
+| `simple`                         | `boolean`                                                             | ❌       | Renders a compact list + paginator instead of ag-grid/flip/settings. Default: `false`.                                                              |
+| `pageSize`                       | `number`                                                              | ❌       | Host-controlled page size used by both simple and non-simple modes. Default: `10`.                                                                  |
+| `prefetchPages`                  | `number`                                                              | ❌       | Lazy-load buffer size multiplier (`pageSize * prefetchPages`). Default: `3`.                                                                        |
+| `showOpenInDocumentViewerAction` | `boolean`                                                             | ❌       | Shows "Open in document viewer" menu item. Default: `false`.                                                                                        |
+| `showOpenInFileManagerAction`    | `boolean`                                                             | ❌       | Shows "Open in file manager" menu item. Default: `false`.                                                                                           |
+| `customMenuItems`                | `Array<{ label; icon?; action }>`                                     | ❌       | Custom context-menu entries appended after the standard menu items.                                                                                 |
 
 By default, only the `Download` action is shown in the row context menu.
 
@@ -225,6 +230,28 @@ Set `simple = true` for a narrow sidebar-style document list (no ag-grid, no col
 
 The component emits the same row click outputs as the internal document list (`clickedDocument`, `clickedDownloadDocument`, `clickedOpen`, `clickedOpenInDir`).
 
+### Wiring charts to the document list
+
+`<cue-document-charts>` emits a `selected` event with `{ filterBy, values, label }`. Map it directly to the matching `<cue-document-list>` filter input:
+
+```js
+charts.addEventListener('selected', (e) => {
+    const { filterBy, values } = e.detail;
+    if (filterBy === 'suffix') {
+        list.suffixes = values; // e.g. ['.pdf', '.ifc']
+        list.contentCategories = undefined;
+    } else {
+        list.contentCategories = values; // content-category IRIs
+        list.suffixes = undefined;
+    }
+});
+
+charts.addEventListener('selectionCleared', () => {
+    list.suffixes = undefined;
+    list.contentCategories = undefined;
+});
+```
+
 Custom menu items are appended after the standard ones:
 
 ```js
@@ -252,6 +279,163 @@ list.customMenuItems = [
 
 ---
 
+## `<cue-sparql-table>`
+
+A fully interactive SPARQL table with declarative, serialisable column definitions and built-in Cue SDK integration. Each column is a SPARQL `SELECT` query whose bindings are reduced to a single cell value using a configurable **strategy** (`first`, `join`, `count`, `sum`, …). No imperative formatter functions are needed.
+
+The component also supports an optional **row definition** — a SPARQL `SELECT` that returns all `?subject` IRIs for the table rows. When set, the table is automatically paginated and only the current page's rows are fetched per batch (VALUES-clause injection).
+
+| Property        | Type                                          | Required | Description                                                                                                         |
+| --------------- | --------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
+| `sdkState`      | `{ cue: Cue; projectId: string; graphType? }` | ✅       | Authenticated Cue instance + project ID. Wires up query and row-definition handlers automatically.                  |
+| `columns`       | `ColumnDefSPARQL[]`                           | ✅       | Column definitions. Two-way bindable — edits made in the built-in column-settings panel propagate back to the host. |
+| `rowDefinition` | `string`                                      | ❌       | SPARQL SELECT returning `?subject` IRIs. Enables pagination. Pass `''` to disable (load all rows at once).          |
+| `pageSize`      | `number`                                      | ❌       | Rows per page when a row definition is set. Default: `10`.                                                          |
+| `bufferFactor`  | `number`                                      | ❌       | Pages to batch-fetch in one go (`pageSize × bufferFactor` subjects per request). Default: `5`.                      |
+| `graphType`     | `'fuseki' \| 'qlever'`                        | ❌       | SPARQL engine to query against (inside `sdkState`). Default: `'fuseki'`.                                            |
+
+The component emits two events:
+
+| Event          | Payload    | Description                                              |
+| -------------- | ---------- | -------------------------------------------------------- |
+| `visibleRows`  | `any[]`    | Fires whenever the set of visible ag-grid rows changes.  |
+| `columnDefsAG` | `ColDef[]` | Fires when ag-grid column definitions are (re-)computed. |
+
+```js
+await customElements.whenDefined('cue-sparql-table');
+
+const table = document.createElement('cue-sparql-table');
+
+// sdkState must be set as a JS property
+table.sdkState = { cue, projectId: 'your-project-id' };
+
+// Define columns — each has a SPARQL SELECT query and a reduction strategy
+table.columns = [
+    {
+        field: 'label',
+        headerName: 'Label',
+        query: `PREFIX qcy: <https://dev.qaecy.com/ont#>
+SELECT ?subject ?val
+WHERE { ?subject qcy:hasProperty [ qcy:label "LongName" ; qcy:value ?val ] }`,
+        strategy: { type: 'first' },
+    },
+    {
+        field: 'storey',
+        headerName: 'Storey',
+        query: `PREFIX qcy: <https://dev.qaecy.com/ont#>
+PREFIX qcy-e: <https://dev.qaecy.com/enum#>
+SELECT ?subject ?val
+WHERE { ?lvl qcy:entityCategory qcy-e:Storey ; qcy:containsSpace ?subject ; qcy:hasProperty [ qcy:label "LongName" ; qcy:value ?val ] }`,
+        strategy: { type: 'first' },
+    },
+];
+
+// Optional: paginate over a specific set of subjects
+table.rowDefinition = `PREFIX qcy: <https://dev.qaecy.com/ont#>
+PREFIX qcy-e: <https://dev.qaecy.com/enum#>
+SELECT ?subject WHERE { ?subject qcy:entityCategory qcy-e:Space }`;
+
+table.pageSize = 20;
+
+// Respond to row visibility changes
+table.addEventListener('visibleRows', (e) => console.log('Visible rows:', e.detail));
+
+document.getElementById('table-host').appendChild(table);
+```
+
+### Column strategies
+
+Each column definition may include a `strategy` object that controls how multiple SPARQL bindings for the same `?subject` are collapsed into a single cell:
+
+| Strategy | Description                                            |
+| -------- | ------------------------------------------------------ |
+| `first`  | Use the first binding value (default)                  |
+| `join`   | Concatenate all values with a configurable `separator` |
+| `count`  | Number of distinct bindings                            |
+| `sum`    | Numeric sum of all bindings                            |
+| `min`    | Minimum value                                          |
+| `max`    | Maximum value                                          |
+
+Columns also support an optional `postProcess` step (e.g. `{ type: 'formula', expression: 'ROUND(?val, 2) * 1000' }`) for lightweight value transformations after the strategy is applied.
+
+The built-in **column-settings panel** (opened via the gear icon) lets users add, remove, reorder, and edit any column's query, strategy, and post-processing at runtime — no page reload needed.
+
+> **Loader** — add `cue-sparql-table` to `data-components` if you create it dynamically; otherwise it is detected automatically. See [CDN quickstart](#cdn-quickstart).
+
+---
+
+## `<cue-document-charts>`
+
+Visualises project document statistics as interactive pie / doughnut charts. Connects directly to the Cue SDK — pass a `cue` instance (or a pre-built `view` / `documents`) and the component fetches the overview automatically.
+
+Two charts are available and can be shown together or individually:
+
+- **suffix** — documents grouped by MIME category (PDF, CAD, BIM, …). Click a category to drill down to individual file extensions.
+- **content-category** — documents grouped by their semantic content category. Builds a nested tree when category metadata is available.
+
+| Property      | Type                                                                  | Required | Description                                                                                           |
+| ------------- | --------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
+| `projectId`   | `string`                                                              | ✅       | Cue project (space) ID. Required when passing `cue` in `sdkState`.                                    |
+| `sdkState`    | `{ cue?; view?; documents?; language?; availableContentCategories? }` | ✅       | SDK context. Provide at least one of `cue`, `view`, or `documents`.                                   |
+| `mode`        | `'both' \| 'suffix' \| 'content-category'`                            | ❌       | Which chart(s) to show. Default: `'both'`.                                                            |
+| `stackCharts` | `boolean`                                                             | ❌       | Stack charts vertically instead of side-by-side (only relevant when `mode='both'`). Default: `false`. |
+
+The component emits two events:
+
+| Event              | Payload                                         | Description                                                          |
+| ------------------ | ----------------------------------------------- | -------------------------------------------------------------------- |
+| `selected`         | `{ filterBy; values: string[]; label: string }` | Fires when the user clicks a chart segment.                          |
+| `selectionCleared` | `{ chart: 'suffix' \| 'content-category' }`     | Fires when the canvas background is clicked, clearing the selection. |
+
+`filterBy` is `'suffix'` (resolved dot-extensions, e.g. `['.pdf', '.xlsx']`) or `'content-category'` (category IRIs). Pass `values` directly to `<cue-document-list>`'s `suffixes` or the `requestDocumentsByFilter` handler of your own document list.
+
+```js
+await customElements.whenDefined('cue-document-charts');
+
+const charts = document.createElement('cue-document-charts');
+
+// Required: set as JS properties, not HTML attributes
+charts.projectId = 'your-project-id';
+charts.sdkState = { cue }; // component creates its own CueProjectView internally
+
+// Optional
+charts.mode = 'both'; // 'both' | 'suffix' | 'content-category'
+charts.stackCharts = false; // true = column layout
+
+// React to segment clicks
+charts.addEventListener('selected', (e) => {
+    const { filterBy, values, label } = e.detail;
+    console.log(`Selected "${label}" (${filterBy}):`, values);
+
+    // Example: wire to a document list on the same page
+    const list = document.querySelector('cue-document-list');
+    if (filterBy === 'suffix') {
+        list.suffixes = values;
+    }
+});
+
+charts.addEventListener('selectionCleared', () => {
+    const list = document.querySelector('cue-document-list');
+    list.suffixes = undefined;
+});
+
+document.getElementById('charts-host').appendChild(charts);
+```
+
+If you already have a `CueProjectView` or `CueProjectDocuments` instance, pass it directly to avoid creating a second SDK object:
+
+```js
+// Reuse an existing view
+charts.sdkState = { view: myProjectView };
+
+// Or a standalone documents instance
+charts.sdkState = { documents: myProjectDocs, availableContentCategories: myCategories };
+```
+
+> **Loader** — add `cue-document-charts` to `data-components` if you create it dynamically; otherwise it is detected automatically. See [CDN quickstart](#cdn-quickstart).
+
+---
+
 ## `<cue-block-project-documents>`
 
 A content block that visualises project document statistics — documents by content category, by file type, total size, and duplicates — using interactive pie charts.

package/common.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkcue_ui=self.webpackChunkcue_ui||[]).push([[76],{2014(b,f,s){s.d(f,{z:()=>m});var a=s(7705),u=s(2271),i=s(5547);const d=["*"];let m=(()=>{class o{justify=(0,a.hFB)("start");size=(0,a.hFB)("l");widthStyle=(0,u.EW)(()=>`var(--cue-button-label-padding-${this.size()}-x)`);static \u0275fac=function(e){return new(e||o)};static \u0275cmp=i.VBU({type:o,selectors:[["cue-button-padder"]],inputs:{justify:[1,"justify"],size:[1,"size"]},ngContentSelectors:d,decls:2,vars:4,template:function(e,n){1&e&&(i.NAR(),i.rj2(0,"div"),i.SdG(1),i.eux()),2&e&&i.xc7("justify-content",n.justify())("min-width",n.widthStyle())},styles:["div[_ngcontent-%COMP%]{display:flex;align-items:center;min-height:1px}"]})}return o})()},6034(b,f,s){s.d(f,{y:()=>h});var a=s(7705),u=s(7598),i=s(9769),d=s(5187),m=s(2271),o=s(5547);const v=["*"];let _=(()=>{class c{style=(0,a.hFB)("");gap=(0,a.hFB)("m");columns=(0,a.hFB)(1);getStyles=(0,m.EW)(()=>`\n        grid-template-columns: repeat(${this.columns()}, minmax(0, 1fr));\n        gap: var(--cue-grid-gap-${this.gap()});\n        ${this.style()}\n    `);static \u0275fac=function(y){return new(y||c)};static \u0275cmp=o.VBU({type:c,selectors:[["cue-grid"]],hostVars:2,hostBindings:function(y,p){2&y&&o.Aen(p.getStyles())},inputs:{style:[1,"style"],gap:[1,"gap"],columns:[1,"columns"]},ngContentSelectors:v,decls:1,vars:0,template:function(y,p){1&y&&(o.NAR(),o.SdG(0))},styles:["[_nghost-%COMP%]{display:grid}"]})}return c})();var e=s(2245),n=s(5381),t=s(29);const r=["*"];function g(c,D){if(1&c&&(o.j41(0,"cue-typography",2),o.EFF(1),o.k0s()),2&c){const M=o.XpG();o.R7$(),o.SpI(" ",M.label()," ")}}let h=(()=>{class c{label=(0,a.hFB)("");variant=(0,a.hFB)("default");shadow=(0,a.hFB)(!1);padded=(0,a.hFB)(!0);showCloseBtn=(0,a.hFB)(!0);position=(0,a.hFB)("top-left");clickedClose=(0,a.CGW)();margin=(0,a.hFB)("0.5rem");close(M){M.stopPropagation(),M.stopImmediatePropagation(),this.clickedClose.emit()}static \u0275fac=function(y){return new(y||c)};static \u0275cmp=o.VBU({type:c,selectors:[["cue-draggable-card"]],inputs:{label:[1,"label"],variant:[1,"variant"],shadow:[1,"shadow"],padded:[1,"padded"],showCloseBtn:[1,"showCloseBtn"],position:[1,"position"],margin:[1,"margin"]},outputs:{clickedClose:"clickedClose"},ngContentSelectors:r,decls:8,vars:14,consts:[["cdkDrag","",1,"panel",3,"variant","shadow","padded"],["justify","end"],["size","l"],[2,"width","100%"],["name","close",2,"cursor","pointer",3,"click"]],template:function(y,p){1&y&&(o.NAR(),o.j41(0,"cue-card",0)(1,"cue-typography")(2,"cue-grid")(3,"cue-flexcontainer",1),o.nVh(4,g,2,1,"cue-typography",2),o.nrm(5,"span",3),o.j41(6,"cue-svg-icon",4),o.bIt("click",function(C){return p.close(C)}),o.k0s()(),o.SdG(7),o.k0s()()()),2&y&&(o.xc7("top","top-left"===p.position()||"top-right"===p.position()?p.margin():"null")("bottom","bottom-left"===p.position()||"bottom-right"===p.position()?p.margin():"null")("left","top-left"===p.position()||"bottom-left"===p.position()?p.margin():"null")("right","top-right"===p.position()||"bottom-right"===p.position()?p.margin():"null"),o.Y8G("variant",p.variant())("shadow",p.shadow())("padded",p.padded()),o.R7$(3),o.xc7("padding",p.padded()?"0":"10px"),o.R7$(),o.vxM(p.label()&&"undefined"!==p.label()?4:-1))},dependencies:[i.MD,d.Z,_,e.Typography,n.n,t.A,u.T1],styles:[".panel[_ngcontent-%COMP%]{position:absolute;width:fit-content}"]})}return c})()},9134(b,f,s){s.d(f,{v:()=>m});var a=s(7705),u=s(6034),i=s(7517),d=s(5547);let m=(()=>{class o{title=(0,a.hFB)("Legend");layers=(0,a.hFB)([]);position=(0,a.hFB)("top-left");close=(0,a.CGW)();visibilityChange=(0,a.CGW)();layerChange=(0,a.CGW)();visibilityAll=(0,a.CGW)();static \u0275fac=function(e){return new(e||o)};static \u0275cmp=d.VBU({type:o,selectors:[["cue-color-legend-panel"]],inputs:{title:[1,"title"],layers:[1,"layers"],position:[1,"position"]},outputs:{close:"close",visibilityChange:"visibilityChange",layerChange:"layerChange",visibilityAll:"visibilityAll"},decls:3,vars:4,consts:[[3,"clickedClose","label","padded","position"],[1,"content"],[3,"visibilityAll","layerChange","visibilityChange","layers"]],template:function(e,n){1&e&&(d.j41(0,"cue-draggable-card",0),d.bIt("clickedClose",function(){return n.close.emit()}),d.j41(1,"div",1)(2,"cue-layer-legend",2),d.bIt("visibilityAll",function(r){return n.visibilityAll.emit(r)})("layerChange",function(r){return n.layerChange.emit(r)})("visibilityChange",function(r){return n.visibilityChange.emit(r)}),d.k0s()()()),2&e&&(d.Y8G("label",n.title())("padded",!1)("position",n.position()),d.R7$(2),d.Y8G("layers",n.layers()))},dependencies:[u.y,i.P],styles:[".content[_ngcontent-%COMP%]{padding-left:10px;padding-right:10px;margin-bottom:30px;font-size:.8em;max-height:200px;max-width:180px;overflow:auto}"]})}return o})()},4613(b,f,s){s.d(f,{Logo:()=>o});var a=s(7705),u=s(5802),i=s(5547),d=s(2271),m=s(6170);let o=(()=>{class v{size=(0,a.hFB)("m");sizeMap={xs:"40px",s:"80px",m:"160px",l:"222px"};active=(0,a.hFB)(!0,{transform:a.L39});continuous=(0,a.hFB)(!1,{transform:a.L39});mode=(0,a.hFB)("default");isDarkMode=(0,a.geq)(!1);handleDarkModeChange(e){this.isDarkMode.set(e),-1===this.raf&&this.animate()}colorA=(0,d.EW)(()=>this.isDarkMode()?[221,246,18]:[18,28,43]);colorB=[0,202,204];paths=[];raf=-1;appearTime=0;disappearTime=0;tip=0;toe=0;mix=[0,0,0];norm=0;animate=e=>{if(void 0!==e){const n=5e-4*(e-this.appearTime);"glow"===this.mode()?this.tip=n%1:(this.tip=Math.min(1,n),this.active()||(this.toe=Math.min(1,6e-4*(e-this.disappearTime))))}if("glow"===this.mode()){const n=.06666666666666667,t=this.rgbToSvg(this.colorA());return this.paths.forEach((r,g)=>{this.norm=1/this.paths.length*g;let l=this.tip-this.norm;if(l<-(1-n)&&(l+=1),l>=0&&l<n){const h=1-l/n;r.setAttribute("stroke",this.rgbToSvg(this.colorB)),r.setAttribute("stroke-opacity",h.toFixed(3))}else r.setAttribute("stroke",t),r.setAttribute("stroke-opacity","0.005")}),void(this.raf=requestAnimationFrame(this.animate))}if(this.paths.forEach((n,t)=>{this.norm=1/this.paths.length*t,this.mix=this.mixRgb(this.colorA(),this.colorB,Math.max(0,Math.min(1,15*(this.tip-this.norm)))),n.setAttribute("stroke",this.tip*this.paths.length>t&&(this.active()||this.toe*this.paths.length<t)?this.rgbToSvg(this.mix):"transparent")}),this.tip>=1&&(this.active()||this.toe>=1))return this.continuous()?void setTimeout(()=>{this.appearTime=performance.now(),this.tip=0,this.toe=0,this.raf=requestAnimationFrame(this.animate)},500):void(this.raf=-1);this.raf=requestAnimationFrame(this.animate)};activate(){this.appearTime=performance.now(),this.animate(this.appearTime)}deactivate(){this.disappearTime=performance.now(),-1===this.raf&&this.animate(this.disappearTime)}mixChannel(e,n,t){return parseInt((e*t+n*(1-t)).toFixed())}mixRgb(e,n,t){return[this.mixChannel(e[0],n[0],t),this.mixChannel(e[1],n[1],t),this.mixChannel(e[2],n[2],t)]}rgbToSvg(e){return`rgb(${e[0]},${e[1]},${e[2]})`}constructor(){(0,u.QZP)(()=>{"glow"===this.mode()||this.active()?this.activate():this.deactivate()}),(0,u.QZP)(()=>{this.isDarkMode(),this.animate()});const e=(0,u.WQX)(i.aKT);(0,i.mal)({read:()=>{if(this.paths.length)return;const n=e.nativeElement.querySelector("svg"),t=e.nativeElement.querySelector("#original-path");if(!t)return;const r=t.getTotalLength(),l=[];for(let h=0;h<400;h++){const c=t.getPointAtLength(r/400*h);l.push({x:parseFloat(c.x.toFixed(2)),y:parseFloat(c.y.toFixed(2))})}l.push(t.getPointAtLength(r)),l.reverse(),l.forEach((h,c)=>{if(0===c||1===c)return;const D=document.createElementNS("http://www.w3.org/2000/svg","path");D.setAttribute("d",`M${l[c-2].x},${l[c-2].y}L${l[c-1].x},${l[c-1].y}L${h.x},${h.y}`),D.setAttribute("fill","none"),D.setAttribute("stroke","transparent"),D.setAttribute("stroke-width",t?.getAttribute("stroke-width")||"1"),D.setAttribute("stroke-miterlimit",t?.getAttribute("stroke-miterlimit")||"1"),n.appendChild(D),this.paths.push(D)})}})}ngOnDestroy(){this.paths=[],cancelAnimationFrame(this.raf),this.raf=-1}static \u0275fac=function(n){return new(n||v)};static \u0275cmp=i.VBU({type:v,selectors:[["cue-logo"]],hostVars:2,hostBindings:function(n,t){2&n&&i.xc7("width",t.sizeMap[t.size()])},inputs:{size:[1,"size"],active:[1,"active"],continuous:[1,"continuous"],mode:[1,"mode"],isDarkMode:[1,"isDarkMode"]},outputs:{isDarkMode:"isDarkModeChange"},decls:2,vars:0,consts:[["cueDarkMode","","xmlns","http://www.w3.org/2000/svg","viewBox","0 0 221.545 86.191","width","222","height","86","overflow","visible",3,"darkModeChange"],["id","original-path","fill","none","stroke","transparent","stroke-miterlimit","10","stroke-width","12","d","M216.046 56.638s-10.561 24.201-36.192 22.991c-25.631-1.21-22.771-24.751-20.351-37.622 2.42-12.871 10.451-20.351 16.831-18.041 6.283 2.275 8.03 9.68 2.09 21.891-5.94 12.211-21.341 37.567-35.862 33.992-12.413-3.056-13.281-23.162-13.281-23.162V29.762v26.925c0 14.471-12.47 23.212-24.672 23.212s-24.672-8.301-24.672-23.212V29.829l-.006.105v13.031c0 20.416-16.55 36.966-36.966 36.966S6 63.381 6 42.966 22.55 6 42.966 6c6.91 0 13.377 1.896 18.91 5.196"]],template:function(n,t){1&n&&(u.qSk(),i.j41(0,"svg",0),i.bIt("darkModeChange",function(g){return t.handleDarkModeChange(g)}),i.nrm(1,"path",1),i.k0s())},dependencies:[m.R],styles:["[_nghost-%COMP%]{display:block}svg[_ngcontent-%COMP%]{flex:1;display:block;width:100%;height:auto}"]})}return v})()},6103(b,f,s){s.d(f,{N:()=>d});var a=s(2306),u=s(140),i=s(58);function d({entityData:m,availableEntityRelationships:o}){const v=g=>o.find(l=>l.iri===g)?.label??g.split("#").pop()??g,_=[],e={};for(const[g,l]of Object.entries(m)){for(const h of l.directMapGeometries??[])_.push({iri:g,wkt:h.wkt});for(const h of l.indirectMapGeometries??[]){e[h.rel]||(e[h.rel]=[]);for(const c of h.geometries)e[h.rel].push({iri:h.entityUUID,wkt:c.wkt})}}const n=(g,l,h)=>{if(!l.length)return null;const c=new a.ux(g,g);return c.category=h,c.collection=new u.o(l.flatMap(({iri:D,wkt:M})=>{const y=(0,i.S)(M);return y?[{type:"Feature",geometry:(0,i.n)(y),properties:{iri:D}}]:[]})),c},t=[],r=n("direct",_,"Direct");r&&t.push(r);for(const[g,l]of Object.entries(e)){const h=v(g),c=n(h,l,h);c&&t.push(c)}return t}},7851(b,f,s){s.d(f,{k:()=>_});var a=s(7705),u=s(5802),i=s(5547),d=s(4613),m=s(2245);function o(e,n){if(1&e&&(i.j41(0,"cue-typography",1),i.EFF(1),i.k0s()),2&e){const t=i.XpG();i.R7$(),i.JRh(t.message)}}let v=(()=>{class e{message="";static \u0275fac=function(r){return new(r||e)};static \u0275cmp=i.VBU({type:e,selectors:[["cue-logo-loader-overlay"]],decls:2,vars:1,consts:[["size","m","mode","glow"],["size","s",1,"message"]],template:function(r,g){1&r&&(i.nrm(0,"cue-logo",0),i.nVh(1,o,2,1,"cue-typography",1)),2&r&&(i.R7$(),i.vxM(g.message?1:-1))},dependencies:[d.Logo,m.Typography],styles:["[_nghost-%COMP%]{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;z-index:1000}.message[_ngcontent-%COMP%]{color:var(--color-text-secondary)}"],changeDetection:0})}return e})(),_=(()=>{class e{cueLogoLoader=(0,a.hFB)(!1);cueLogoLoaderMessage=(0,a.hFB)("");el=(0,u.WQX)(i.aKT);appRef=(0,u.WQX)(i.o8S);envInjector=(0,u.WQX)(u.uvJ);renderer=(0,u.WQX)(i.sFG);overlayRef;constructor(){(0,u.QZP)(()=>{const t=this.cueLogoLoader(),r=this.cueLogoLoaderMessage();t?(this.overlayRef||this.createOverlay(),this.overlayRef&&(this.overlayRef.instance.message=r,this.overlayRef.changeDetectorRef.markForCheck())):this.destroyOverlay()})}createOverlay(){this.overlayRef=(0,a.a0P)(v,{environmentInjector:this.envInjector}),this.appRef.attachView(this.overlayRef.hostView),this.renderer.appendChild(this.el.nativeElement,this.overlayRef.hostView.rootNodes[0])}destroyOverlay(){this.overlayRef&&(this.appRef.detachView(this.overlayRef.hostView),this.overlayRef.destroy(),this.overlayRef=void 0)}ngOnDestroy(){this.destroyOverlay()}static \u0275fac=function(r){return new(r||e)};static \u0275dir=i.FsC({type:e,selectors:[["","cueLogoLoader",""]],hostVars:2,hostBindings:function(r,g){2&r&&i.xc7("position","relative")},inputs:{cueLogoLoader:[1,"cueLogoLoader"],cueLogoLoaderMessage:[1,"cueLogoLoaderMessage"]}})}return e})()},7106(b,f,s){function a(u,i){this.v=u,this.k=i}s.d(f,{A:()=>a})},600(b,f,s){s.d(f,{A:()=>u});var a=s(7106);function u(d){return function(){return new i(d.apply(this,arguments))}}function i(d){var m,o;function v(e,n){try{var t=d[e](n),r=t.value,g=r instanceof a.A;Promise.resolve(g?r.v:r).then(function(l){if(g){var h="return"===e?"return":"next";if(!r.k||l.done)return v(h,l);l=d[h](l).value}_(t.done?"return":"normal",l)},function(l){v("throw",l)})}catch(l){_("throw",l)}}function _(e,n){switch(e){case"return":m.resolve({value:n,done:!0});break;case"throw":m.reject(n);break;default:m.resolve({value:n,done:!1})}(m=m.next)?v(m.key,m.arg):o=null}this._invoke=function(e,n){return new Promise(function(t,r){var g={key:e,arg:n,resolve:t,reject:r,next:null};o?o=o.next=g:(m=o=g,v(e,n))})},"function"!=typeof d.return&&(this.return=void 0)}i.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},i.prototype.next=function(d){return this._invoke("next",d)},i.prototype.throw=function(d){return this._invoke("throw",d)},i.prototype.return=function(d){return this._invoke("return",d)}}}]);
+"use strict";(self.webpackChunkcue_ui=self.webpackChunkcue_ui||[]).push([[76],{2014(C,_,t){t.d(_,{z:()=>v});var n=t(7705),f=t(2271),d=t(5547);const a=["*"];let v=(()=>{class e{justify=(0,n.hFB)("start");size=(0,n.hFB)("l");widthStyle=(0,f.EW)(()=>`var(--cue-button-label-padding-${this.size()}-x)`);static \u0275fac=function(l){return new(l||e)};static \u0275cmp=d.VBU({type:e,selectors:[["cue-button-padder"]],inputs:{justify:[1,"justify"],size:[1,"size"]},ngContentSelectors:a,decls:2,vars:4,template:function(l,s){1&l&&(d.NAR(),d.rj2(0,"div"),d.SdG(1),d.eux()),2&l&&d.xc7("justify-content",s.justify())("min-width",s.widthStyle())},styles:["div[_ngcontent-%COMP%]{display:flex;align-items:center;min-height:1px}"]})}return e})()},6034(C,_,t){t.d(_,{y:()=>r});var n=t(7705),f=t(7598),d=t(9769),a=t(5187),v=t(2271),e=t(5547);const b=["*"];let h=(()=>{class i{style=(0,n.hFB)("");gap=(0,n.hFB)("m");columns=(0,n.hFB)(1);getStyles=(0,v.EW)(()=>`\n        grid-template-columns: repeat(${this.columns()}, minmax(0, 1fr));\n        gap: var(--cue-grid-gap-${this.gap()});\n        ${this.style()}\n    `);static \u0275fac=function(c){return new(c||i)};static \u0275cmp=e.VBU({type:i,selectors:[["cue-grid"]],hostVars:2,hostBindings:function(c,o){2&c&&e.Aen(o.getStyles())},inputs:{style:[1,"style"],gap:[1,"gap"],columns:[1,"columns"]},ngContentSelectors:b,decls:1,vars:0,template:function(c,o){1&c&&(e.NAR(),e.SdG(0))},styles:["[_nghost-%COMP%]{display:grid}"]})}return i})();var l=t(2245),s=t(5381),y=t(29);const p=["*"];function g(i,M){if(1&i&&(e.j41(0,"cue-typography",2),e.EFF(1),e.k0s()),2&i){const u=e.XpG();e.R7$(),e.SpI(" ",u.label()," ")}}let r=(()=>{class i{label=(0,n.hFB)("");variant=(0,n.hFB)("default");shadow=(0,n.hFB)(!1);padded=(0,n.hFB)(!0);showCloseBtn=(0,n.hFB)(!0);position=(0,n.hFB)("top-left");clickedClose=(0,n.CGW)();margin=(0,n.hFB)("0.5rem");close(u){u.stopPropagation(),u.stopImmediatePropagation(),this.clickedClose.emit()}static \u0275fac=function(c){return new(c||i)};static \u0275cmp=e.VBU({type:i,selectors:[["cue-draggable-card"]],inputs:{label:[1,"label"],variant:[1,"variant"],shadow:[1,"shadow"],padded:[1,"padded"],showCloseBtn:[1,"showCloseBtn"],position:[1,"position"],margin:[1,"margin"]},outputs:{clickedClose:"clickedClose"},ngContentSelectors:p,decls:8,vars:14,consts:[["cdkDrag","",1,"panel",3,"variant","shadow","padded"],["justify","end"],["size","l"],[2,"width","100%"],["name","close",2,"cursor","pointer",3,"click"]],template:function(c,o){1&c&&(e.NAR(),e.j41(0,"cue-card",0)(1,"cue-typography")(2,"cue-grid")(3,"cue-flexcontainer",1),e.nVh(4,g,2,1,"cue-typography",2),e.nrm(5,"span",3),e.j41(6,"cue-svg-icon",4),e.bIt("click",function(D){return o.close(D)}),e.k0s()(),e.SdG(7),e.k0s()()()),2&c&&(e.xc7("top","top-left"===o.position()||"top-right"===o.position()?o.margin():"null")("bottom","bottom-left"===o.position()||"bottom-right"===o.position()?o.margin():"null")("left","top-left"===o.position()||"bottom-left"===o.position()?o.margin():"null")("right","top-right"===o.position()||"bottom-right"===o.position()?o.margin():"null"),e.Y8G("variant",o.variant())("shadow",o.shadow())("padded",o.padded()),e.R7$(3),e.xc7("padding",o.padded()?"0":"10px"),e.R7$(),e.vxM(o.label()&&"undefined"!==o.label()?4:-1))},dependencies:[d.MD,a.Z,h,l.Typography,s.n,y.A,f.T1],styles:[".panel[_ngcontent-%COMP%]{position:absolute;width:fit-content}"]})}return i})()},9134(C,_,t){t.d(_,{v:()=>v});var n=t(7705),f=t(6034),d=t(7517),a=t(5547);let v=(()=>{class e{title=(0,n.hFB)("Legend");layers=(0,n.hFB)([]);position=(0,n.hFB)("top-left");close=(0,n.CGW)();visibilityChange=(0,n.CGW)();layerChange=(0,n.CGW)();visibilityAll=(0,n.CGW)();static \u0275fac=function(l){return new(l||e)};static \u0275cmp=a.VBU({type:e,selectors:[["cue-color-legend-panel"]],inputs:{title:[1,"title"],layers:[1,"layers"],position:[1,"position"]},outputs:{close:"close",visibilityChange:"visibilityChange",layerChange:"layerChange",visibilityAll:"visibilityAll"},decls:3,vars:4,consts:[[3,"clickedClose","label","padded","position"],[1,"content"],[3,"visibilityAll","layerChange","visibilityChange","layers"]],template:function(l,s){1&l&&(a.j41(0,"cue-draggable-card",0),a.bIt("clickedClose",function(){return s.close.emit()}),a.j41(1,"div",1)(2,"cue-layer-legend",2),a.bIt("visibilityAll",function(p){return s.visibilityAll.emit(p)})("layerChange",function(p){return s.layerChange.emit(p)})("visibilityChange",function(p){return s.visibilityChange.emit(p)}),a.k0s()()()),2&l&&(a.Y8G("label",s.title())("padded",!1)("position",s.position()),a.R7$(2),a.Y8G("layers",s.layers()))},dependencies:[f.y,d.P],styles:[".content[_ngcontent-%COMP%]{padding-left:10px;padding-right:10px;margin-bottom:30px;font-size:.8em;max-height:200px;max-width:180px;overflow:auto}"]})}return e})()},6103(C,_,t){t.d(_,{N:()=>a});var n=t(2306),f=t(140),d=t(58);function a({entityData:v,availableEntityRelationships:e}){const b=g=>e.find(m=>m.iri===g)?.label??g.split("#").pop()??g,h=[],l={};for(const[g,m]of Object.entries(v)){for(const r of m.directMapGeometries??[])h.push({iri:g,wkt:r.wkt});for(const r of m.indirectMapGeometries??[]){l[r.rel]||(l[r.rel]=[]);for(const i of r.geometries)l[r.rel].push({iri:r.entityUUID,wkt:i.wkt})}}const s=(g,m,r)=>{if(!m.length)return null;const i=new n.ux(g,g);return i.category=r,i.collection=new f.o(m.flatMap(({iri:M,wkt:u})=>{const c=(0,d.S)(u);return c?[{type:"Feature",geometry:(0,d.n)(c),properties:{iri:M}}]:[]})),i},y=[],p=s("direct",h,"Direct");p&&y.push(p);for(const[g,m]of Object.entries(l)){const r=b(g),i=s(r,m,r);i&&y.push(i)}return y}}}]);