@qaecy/cue-ui 0.0.47 → 0.0.48

package/README.md

@@ -7,14 +7,13 @@ Drop them into any HTML page — no build step required.
 
 | Custom element                  | Description                                                                       |
 | ------------------------------- | --------------------------------------------------------------------------------- |
-| `<cue-logo>`                    | Animated QAECY logo                                                               |
+| `<cue-logo>`                    | Animated Cue logo                                                                 |
 | `<cue-document-viewer>`         | Document viewer with Cue SDK integration (PDF, BIM, CAD, images, spreadsheets, …) |
 | `<cue-document-list>`           | Lazy document list that fetches metadata from the Cue SDK                         |
 | `<cue-entity-list>`             | Lazy entity list that fetches entity data from the Cue SDK                        |
 | `<cue-entity-viewer>`           | Full entity detail view — info, relationships, documents, and optional map        |
+| `<cue-context-viewer>`          | Context document viewer — shows documents, entities, or both based on context     |
 | `<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   |
 
@@ -174,18 +173,6 @@ document.getElementById('list-host').appendChild(list);
 
 ---
 
-## `<cue-id-builder>`
-
-A self-contained interactive tool that converts a text string into a context-based GUID (used for IFC/SPARQL identifiers). No external inputs required — drop it in and it works standalone.
-
-```html
-<cue-id-builder></cue-id-builder>
-```
-
-> **Loader** — add `cue-id-builder` to `data-components` if you create it dynamically; otherwise it is detected automatically. See [CDN quickstart](#cdn-quickstart).
-
----
-
 ## `<cue-document-viewer>`
 
 Fetches and renders a Cue document. Automatically picks the best viewer based on the file type. Requires an authenticated `Cue` SDK instance.
@@ -446,41 +433,6 @@ charts.sdkState = { documents: myProjectDocs, availableContentCategories: myCate
 
 ---
 
-## `<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.
-
-| Property | Type                   | Required | Description                                                                                      |
-| -------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------------ |
-| `data`   | `ProjectDocumentsData` | ❌       | Document statistics payload. The component renders empty until set.                              |
-| `config` | `BlockConfig`          | ✅       | Block configuration including `projectId`, `handlers`, and privileges. **Set as a JS property.** |
-
-```js
-await customElements.whenDefined('cue-block-project-documents');
-
-const block = document.createElement('cue-block-project-documents');
-
-block.config = {
-    projectId: 'your-project-id',
-    graphIsSaturated: false,
-    privileges: { canEdit: false },
-    portalBaseURL: 'https://app.qaecy.com',
-    resourceBaseURL: 'https://cue.qaecy.com/r/',
-};
-
-block.data = {
-    documentsBySuffix: { pdf: { count: 12, size: 4096000 } },
-    documentsByContentCategory: { drawings: { count: 5, size: 1024000 } },
-    duplicateCount: 2,
-};
-
-document.getElementById('block-host').appendChild(block);
-```
-
-> **Loader** — add `cue-block-project-documents` to `data-components` if you create it dynamically; otherwise it is detected automatically. See [CDN quickstart](#cdn-quickstart).
-
----
-
 ## `<cue-entity-viewer>`
 
 Renders the full detail view for a single entity: an info panel (label + categories), a relationship graph, linked documents, and an optional location map.
@@ -527,6 +479,53 @@ document.getElementById('viewer-host').appendChild(viewer);
 
 ---
 
+## `<cue-context-viewer>`
+
+Fetches a context document from the Cue backend and renders its items as a lazy document list, an entity list, or a tabbed view combining both — depending on what item types the context contains.
+
+Requires an authenticated `Cue` SDK instance. Context documents are fetched via `cue.api.contexts.getContext()`. Document and entity metadata are loaded lazily as the user scrolls.
+
+| Property    | Type                 | Required | Description                                                                      |
+| ----------- | -------------------- | -------- | -------------------------------------------------------------------------------- |
+| `cue`       | `Cue` (SDK instance)                                                    | ✅       | Authenticated Cue SDK instance. **Set as a JS property**, not an HTML attribute.          |
+| `projectId` | `string`                                                                | ✅       | Cue project (space) ID the context belongs to.                                            |
+| `contextId` | `string`                                                                | ✅       | Context document UUID to display.                                                         |
+| `variant`   | `'none' \| 'default' \| 'primary' \| 'secondary' \| 'accent' \| 'fade'` | ❌       | Card styling variant passed to the inner document list. Default: `'none'`.                |
+| `showLogo`  | `boolean`                                                               | ❌       | Show the Cue logo link in the top-right corner. Default: `false`.                         |
+
+The component automatically determines which view to render:
+
+- **Documents only** — a lazy document table (same as `<cue-document-list>`)
+- **Entities only** — a lazy entity table with optional map (same as `<cue-entity-list>`)
+- **Both** — a tabbed view with a Documents tab and an Entities tab
+
+The component emits one event:
+
+| Event              | Payload     | Description                               |
+| ------------------ | ----------- | ----------------------------------------- |
+| `entityRowClicked` | `EntityRow` | Fires when the user clicks an entity row. |
+
+```js
+await customElements.whenDefined('cue-context-viewer');
+
+const viewer = document.createElement('cue-context-viewer');
+
+// Required: set as JS properties, not HTML attributes
+viewer.cue = cue;
+viewer.projectId = 'your-project-id';
+viewer.contextId = 'your-context-id';
+
+viewer.addEventListener('entityRowClicked', (e) => {
+    console.log('Entity clicked:', e.detail);
+});
+
+document.getElementById('viewer-host').appendChild(viewer);
+```
+
+> **Loader** — add `cue-context-viewer` to `data-components` if you create it dynamically; otherwise it is detected automatically. See [CDN quickstart](#cdn-quickstart).
+
+---
+
 ## `<cue-project-list>`
 
 Fetches all projects the authenticated user is a member of via `cue.projects.listProjects()` and renders them in a sortable, selectable ag-grid table. Projects that carry a `location` (WKT string) automatically show a **Map** tab alongside the **List** tab. Clicking a row emits the project's UUID.

package/common.js

@@ -1 +1 @@
-"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}}}]);
+"use strict";(self.webpackChunkcue_ui=self.webpackChunkcue_ui||[]).push([[76],{6034(v,p,o){o.d(p,{y:()=>_});var n=o(7705),u=o(7598),m=o(9769),a=o(5187),h=o(2271),e=o(5547);const C=["*"];let y=(()=>{class l{style=(0,n.hFB)("");gap=(0,n.hFB)("m");columns=(0,n.hFB)(1);getStyles=(0,h.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(i){return new(i||l)};static \u0275cmp=e.VBU({type:l,selectors:[["cue-grid"]],hostVars:2,hostBindings:function(i,t){2&i&&e.Aen(t.getStyles())},inputs:{style:[1,"style"],gap:[1,"gap"],columns:[1,"columns"]},ngContentSelectors:C,decls:1,vars:0,template:function(i,t){1&i&&(e.NAR(),e.SdG(0))},styles:["[_nghost-%COMP%]{display:grid}"]})}return l})();var g=o(2245),s=o(5381),c=o(29);const r=["*"];function b(l,M){if(1&l&&(e.j41(0,"cue-typography",2),e.EFF(1),e.k0s()),2&l){const d=e.XpG();e.R7$(),e.SpI(" ",d.label()," ")}}let _=(()=>{class l{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(d){d.stopPropagation(),d.stopImmediatePropagation(),this.clickedClose.emit()}static \u0275fac=function(i){return new(i||l)};static \u0275cmp=e.VBU({type:l,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(i,t){1&i&&(e.NAR(),e.j41(0,"cue-card",0)(1,"cue-typography")(2,"cue-grid")(3,"cue-flexcontainer",1),e.nVh(4,b,2,1,"cue-typography",2),e.nrm(5,"span",3),e.j41(6,"cue-svg-icon",4),e.bIt("click",function(f){return t.close(f)}),e.k0s()(),e.SdG(7),e.k0s()()()),2&i&&(e.xc7("top","top-left"===t.position()||"top-right"===t.position()?t.margin():"null")("bottom","bottom-left"===t.position()||"bottom-right"===t.position()?t.margin():"null")("left","top-left"===t.position()||"bottom-left"===t.position()?t.margin():"null")("right","top-right"===t.position()||"bottom-right"===t.position()?t.margin():"null"),e.Y8G("variant",t.variant())("shadow",t.shadow())("padded",t.padded()),e.R7$(3),e.xc7("padding",t.padded()?"0":"10px"),e.R7$(),e.vxM(t.label()&&"undefined"!==t.label()?4:-1))},dependencies:[m.MD,a.Z,y,g.Typography,s.n,c.A,u.T1],styles:[".panel[_ngcontent-%COMP%]{position:absolute;width:fit-content;z-index:100}"]})}return l})()},9134(v,p,o){o.d(p,{v:()=>h});var n=o(7705),u=o(6034),m=o(7517),a=o(5547);let h=(()=>{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(g){return new(g||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(g,s){1&g&&(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(r){return s.visibilityAll.emit(r)})("layerChange",function(r){return s.layerChange.emit(r)})("visibilityChange",function(r){return s.visibilityChange.emit(r)}),a.k0s()()()),2&g&&(a.Y8G("label",s.title())("padded",!1)("position",s.position()),a.R7$(2),a.Y8G("layers",s.layers()))},dependencies:[u.y,m.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})()}}]);