@furystack/shades-common-components 3.0.3 → 3.1.1

package/dist/components/data-grid/selection-cell.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionCell = void 0;
+const shades_1 = require("@furystack/shades");
+exports.SelectionCell = (0, shades_1.Shade)({
+    shadowDomName: 'shades-data-grid-selection-cell',
+    resources: ({ props, element }) => [
+        props.service.selection.subscribe((selection) => {
+            if (selection.includes(props.entry)) {
+                ;
+                element.firstChild.checked = true;
+            }
+            else {
+                ;
+                element.firstChild.checked = false;
+            }
+        }),
+    ],
+    render: ({ props }) => {
+        return ((0, shades_1.createComponent)("input", { onchange: (ev) => {
+                if (ev.target.checked) {
+                    props.service.selection.setValue([...props.service.selection.getValue(), props.entry]);
+                }
+                else {
+                    props.service.selection.setValue([
+                        ...props.service.selection.getValue().filter((entry) => entry !== props.entry),
+                    ]);
+                }
+            }, type: "checkbox", checked: props.service.selection.getValue().includes(props.entry) ? true : false }));
+    },
+});
+//# sourceMappingURL=selection-cell.js.map

package/dist/components/data-grid/selection-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-cell.js","sourceRoot":"","sources":["../../../src/components/data-grid/selection-cell.tsx"],"names":[],"mappings":";;;AAAA,8CAA0D;AAG7C,QAAA,aAAa,GAAG,IAAA,cAAK,EAAkD;IAClF,aAAa,EAAE,iCAAiC;IAChD,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;QACjC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,EAAE;YAC9C,IAAI,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;gBACnC,CAAC;gBAAC,OAAO,CAAC,UAA+B,CAAC,OAAO,GAAG,IAAI,CAAA;aACzD;iBAAM;gBACL,CAAC;gBAAC,OAAO,CAAC,UAA+B,CAAC,OAAO,GAAG,KAAK,CAAA;aAC1D;QACH,CAAC,CAAC;KACH;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;QACpB,OAAO,CACL,yCACE,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;gBACf,IAAK,EAAE,CAAC,MAA2B,CAAC,OAAO,EAAE;oBAC3C,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;iBACvF;qBAAM;oBACL,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC;wBAC/B,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC;qBAC/E,CAAC,CAAA;iBACH;YACH,CAAC,EACD,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GAChF,CACH,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/dist/components/grid.js

@@ -38,9 +38,7 @@ exports.Grid = (0, shades_1.Shade)({
                 (0, shades_1.createComponent)("thead", null,
                     (0, shades_1.createComponent)("tr", null, props.columns.map((column) => {
                         var _a, _b, _c, _d;
-                        return ((0, shades_1.createComponent)("th", { style: headerStyle },
-                            ((_b = (_a = props.headerComponents) === null || _a === void 0 ? void 0 : _a[column]) === null || _b === void 0 ? void 0 : _b.call(_a, column)) || ((_d = (_c = props.headerComponents) === null || _c === void 0 ? void 0 : _c.default) === null || _d === void 0 ? void 0 : _d.call(_c, column)) || ((0, shades_1.createComponent)("span", null, column)),
-                            ' '));
+                        return ((0, shades_1.createComponent)("th", { style: headerStyle }, ((_b = (_a = props.headerComponents) === null || _a === void 0 ? void 0 : _a[column]) === null || _b === void 0 ? void 0 : _b.call(_a, column)) || ((_d = (_c = props.headerComponents) === null || _c === void 0 ? void 0 : _c.default) === null || _d === void 0 ? void 0 : _d.call(_c, column)) || ((0, shades_1.createComponent)("span", null, column))));
                     }))),
                 (0, shades_1.createComponent)("tbody", null, props.entries.map((entry) => ((0, shades_1.createComponent)("tr", null, props.columns.map((column) => {
                     var _a, _b, _c, _d, _e;

package/dist/components/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/components/grid.tsx"],"names":[],"mappings":";;;AAAA,8CAAwE;AACxE,0CAAkD;AAuBrC,QAAA,IAAI,GAA8E,IAAA,cAAK,EAAC;IACnG,aAAa,EAAE,YAAY;IAC3B,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;QACpC,QAAQ,CAAC,WAAW,CAAC,+BAAoB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;YAC/D,MAAM,OAAO,GAAG,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAA;YAC9C,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;gBACzB,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAA;gBACrC,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC,KAAK,CAAA;YAC9C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC;KACH;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;;QAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,+BAAoB,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAA;QACzE,MAAM,WAAW,GAAiC;YAChD,OAAO,EAAE,UAAU;YACnB,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK;YACvC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS;YAC3B,YAAY,EAAE,KAAK;YACnB,GAAG,EAAE,GAAG;YACR,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,iBAAiB;YAC9B,GAAG,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM;SACxB,CAAA;QACD,OAAO,CACL,uCACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE;gBACL,GAAG,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO;gBACxB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,QAAQ,EAAE,MAAM;aACjB;YAED,yCAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE;gBACnD;oBACE,0CACG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;;wBAC5B,OAAO,CACL,sCAAI,KAAK,EAAE,WAAW;4BACnB,CAAA,MAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAG,MAAM,CAAC,mDAAG,MAAM,CAAC,MAAI,MAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,OAAO,mDAAG,MAAM,CAAC,CAAA,IAAI,CAC1F,4CAAO,MAAM,CAAQ,CACtB;4BAAE,GAAG,CACH,CACN,CAAA;oBACH,CAAC,CAAC,CACC,CACC;gBACR,6CACG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5B,0CACG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;;oBAAC,OAAA,CAC7B,sCAAI,KAAK,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,IAC1B,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAG,MAAM,CAAC,mDAAG,KAAK,CAAC,MAAI,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,OAAO,mDAAG,KAAK,CAAC,CAAA,IAAI,CAClF,4CAAO,KAAK,CAAC,MAAM,CAAC,CAAQ,CAC7B,CACE,CACN,CAAA;iBAAA,CAAC,CACC,CACN,CAAC,CACI,CACF,CACJ,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/components/grid.tsx"],"names":[],"mappings":";;;AAAA,8CAAwE;AACxE,0CAAkD;AAuBrC,QAAA,IAAI,GAA8E,IAAA,cAAK,EAAC;IACnG,aAAa,EAAE,YAAY;IAC3B,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;QACpC,QAAQ,CAAC,WAAW,CAAC,+BAAoB,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;YAC/D,MAAM,OAAO,GAAG,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAA;YAC9C,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;gBACzB,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAA;gBACrC,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,UAAU,CAAC,KAAK,CAAA;YAC9C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC;KACH;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;;QAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,+BAAoB,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAA;QACzE,MAAM,WAAW,GAAiC;YAChD,OAAO,EAAE,UAAU;YACnB,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK;YACvC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS;YAC3B,YAAY,EAAE,KAAK;YACnB,GAAG,EAAE,GAAG;YACR,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,iBAAiB;YAC9B,GAAG,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM;SACxB,CAAA;QACD,OAAO,CACL,uCACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE;gBACL,GAAG,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO;gBACxB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,QAAQ,EAAE,MAAM;aACjB;YAED,yCAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE;gBACnD;oBACE,0CACG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;;wBAC5B,OAAO,CACL,sCAAI,KAAK,EAAE,WAAW,IACnB,CAAA,MAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAG,MAAM,CAAC,mDAAG,MAAM,CAAC,MAAI,MAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,OAAO,mDAAG,MAAM,CAAC,CAAA,IAAI,CAC1F,4CAAO,MAAM,CAAQ,CACtB,CACE,CACN,CAAA;oBACH,CAAC,CAAC,CACC,CACC;gBACR,6CACG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5B,0CACG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;;oBAAC,OAAA,CAC7B,sCAAI,KAAK,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,IAC1B,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAG,MAAM,CAAC,mDAAG,KAAK,CAAC,MAAI,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,OAAO,mDAAG,KAAK,CAAC,CAAA,IAAI,CAClF,4CAAO,KAAK,CAAC,MAAM,CAAC,CAAQ,CAC7B,CACE,CACN,CAAA;iBAAA,CAAC,CACC,CACN,CAAC,CACI,CACF,CACJ,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/dist/components/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./animations"), exports);
 tslib_1.__exportStar(require("./app-bar"), exports);
+tslib_1.__exportStar(require("./app-bar-link"), exports);
 tslib_1.__exportStar(require("./autocomplete"), exports);
 tslib_1.__exportStar(require("./avatar"), exports);
 tslib_1.__exportStar(require("./button"), exports);

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,uDAA4B;AAC5B,oDAAyB;AACzB,yDAA8B;AAC9B,mDAAwB;AACxB,mDAAwB;AACxB,sDAA2B;AAC3B,gDAAqB;AACrB,iDAAsB;AACtB,kDAAuB;AACvB,kDAAuB;AACvB,sDAA2B;AAC3B,kDAAuB;AACvB,mDAAwB;AACxB,oDAAyB;AACzB,iDAAsB;AACtB,mDAAwB;AACxB,4DAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,uDAA4B;AAC5B,oDAAyB;AACzB,yDAA8B;AAC9B,yDAA8B;AAC9B,mDAAwB;AACxB,mDAAwB;AACxB,sDAA2B;AAC3B,gDAAqB;AACrB,iDAAsB;AACtB,kDAAuB;AACvB,kDAAuB;AACvB,sDAA2B;AAC3B,kDAAuB;AACvB,mDAAwB;AACxB,oDAAyB;AACzB,iDAAsB;AACtB,mDAAwB;AACxB,4DAAiC"}

package/dist/components/paper.js

@@ -24,7 +24,7 @@ exports.Paper = (0, shades_1.Shade)({
                 color: themeProvider.theme.getValue().text.secondary,
                 margin: '8px',
                 padding: '6px 16px',
-                ...(props ? props.style : {}),
+                ...props === null || props === void 0 ? void 0 : props.style,
             } }, children));
     },
 });

package/dist/components/paper.js.map

@@ -1 +1 @@
-{"version":3,"file":"paper.js","sourceRoot":"","sources":["../../src/components/paper.tsx"],"names":[],"mappings":";;;AAAA,8CAA0E;AAC1E,+EAAyE;AAE5D,QAAA,KAAK,GAAG,IAAA,cAAK,EAA6D;IACrF,aAAa,EAAE,aAAa;IAC5B,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;QACnC,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,6CAAoB,CAAC,CAAA;QAChE,OAAO;YACL,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACzC,CAAC;gBAAC,OAAO,CAAC,UAA6B,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,CACnF;gBAAC,OAAO,CAAC,UAA6B,CAAC,KAAK,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,CAAA;YACrG,CAAC,CAAC;SACH,CAAA;IACH,CAAC;IACD,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QACxC,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,6CAAoB,CAAC,CAAA;QAChE,OAAO,CACL,0CACM,KAAK,EACT,KAAK,EAAE;gBACL,YAAY,EAAE,KAAK;gBACnB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,SAAS,MAAM,KAAK,CAAC,SAAS,oBAAoB,CAAC,CAAC,CAAC,EAAE;gBACjG,eAAe,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAC,KAAK;gBAChE,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS;gBACpD,MAAM,EAAE,KAAK;gBACb,OAAO,EAAE,UAAU;gBACnB,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;aAC9B,IAEA,QAAQ,CACL,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"paper.js","sourceRoot":"","sources":["../../src/components/paper.tsx"],"names":[],"mappings":";;;AAAA,8CAA0E;AAC1E,+EAAyE;AAE5D,QAAA,KAAK,GAAG,IAAA,cAAK,EAA6D;IACrF,aAAa,EAAE,aAAa;IAC5B,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;QACnC,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,6CAAoB,CAAC,CAAA;QAChE,OAAO;YACL,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACzC,CAAC;gBAAC,OAAO,CAAC,UAA6B,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,CACnF;gBAAC,OAAO,CAAC,UAA6B,CAAC,KAAK,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,CAAA;YACrG,CAAC,CAAC;SACH,CAAA;IACH,CAAC;IACD,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QACxC,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,6CAAoB,CAAC,CAAA;QAChE,OAAO,CACL,0CACM,KAAK,EACT,KAAK,EAAE;gBACL,YAAY,EAAE,KAAK;gBACnB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,SAAS,MAAM,KAAK,CAAC,SAAS,oBAAoB,CAAC,CAAC,CAAC,EAAE;gBACjG,eAAe,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAC,KAAK;gBAChE,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS;gBACpD,MAAM,EAAE,KAAK;gBACb,OAAO,EAAE,UAAU;gBACnB,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK;aAChB,IAEA,QAAQ,CACL,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/dist/services/click-away-service.js

@@ -13,7 +13,7 @@ class ClickAwayService {
         window.addEventListener('click', this.clickOutsideListener, true);
     }
     dispose() {
-        window.removeEventListener('click', this.clickOutsideListener);
+        window.removeEventListener('click', this.clickOutsideListener, true);
     }
 }
 exports.ClickAwayService = ClickAwayService;

package/dist/services/click-away-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"click-away-service.js","sourceRoot":"","sources":["../../src/services/click-away-service.ts"],"names":[],"mappings":";;;AAAA,MAAa,gBAAgB;IAW3B,YAA6B,OAAU,EAAmB,WAAuB;QAApD,YAAO,GAAP,OAAO,CAAG;QAAmB,gBAAW,GAAX,WAAW,CAAY;QAN1E,yBAAoB,GAAG,CAAC,CAAC,EAAc,EAAE,EAAE;YAChD,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAqB,CAAC,EAAE;gBACjE,IAAI,CAAC,WAAW,EAAE,CAAA;aACnB;QACH,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAGX,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAA;IACnE,CAAC;IAZM,OAAO;QACZ,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAA;IAChE,CAAC;CAWF;AAdD,4CAcC"}
+{"version":3,"file":"click-away-service.js","sourceRoot":"","sources":["../../src/services/click-away-service.ts"],"names":[],"mappings":";;;AAAA,MAAa,gBAAgB;IAW3B,YAA6B,OAAU,EAAmB,WAAuB;QAApD,YAAO,GAAP,OAAO,CAAG;QAAmB,gBAAW,GAAX,WAAW,CAAY;QAN1E,yBAAoB,GAAG,CAAC,CAAC,EAAc,EAAE,EAAE;YAChD,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAqB,CAAC,EAAE;gBACjE,IAAI,CAAC,WAAW,EAAE,CAAA;aACnB;QACH,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAGX,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAA;IACnE,CAAC;IAZM,OAAO;QACZ,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAA;IACtE,CAAC;CAWF;AAdD,4CAcC"}

package/dist/services/collection-service.js

@@ -10,16 +10,18 @@ class CollectionService {
         this.data = new utils_1.ObservableValue({ count: 0, entries: [] });
         this.error = new utils_1.ObservableValue(undefined);
         this.isLoading = new utils_1.ObservableValue(false);
-        this.focus = new utils_1.ObservableValue();
+        this.focusedEntry = new utils_1.ObservableValue();
         this.selection = new utils_1.ObservableValue([]);
+        this.searchTerm = new utils_1.ObservableValue('');
+        this.hasFocus = new utils_1.ObservableValue(false);
         this.querySettings = new utils_1.ObservableValue(defaultSettings);
         this.getEntries = (0, utils_1.debounce)(async (options) => {
             await this.loadLock.acquire();
             try {
+                this.error.setValue(undefined);
                 this.isLoading.setValue(true);
                 const result = await fetch(options);
                 this.data.setValue(result);
-                this.error.setValue(undefined);
                 return result;
             }
             catch (error) {
@@ -39,6 +41,82 @@ class CollectionService {
         this.error.dispose();
         this.isLoading.dispose();
     }
+    handleKeyDown(ev) {
+        const { entries } = this.data.getValue();
+        const hasFocus = this.hasFocus.getValue();
+        const selectedEntries = this.selection.getValue();
+        const focusedEntry = this.focusedEntry.getValue();
+        const searchTerm = this.searchTerm.getValue();
+        switch (ev.key) {
+            case ' ':
+                ev.preventDefault();
+                focusedEntry &&
+                    this.selection.setValue(selectedEntries.includes(focusedEntry)
+                        ? selectedEntries.filter((e) => e !== focusedEntry)
+                        : [...selectedEntries, focusedEntry]);
+                break;
+            case '*':
+                this.selection.setValue(entries.filter((e) => !selectedEntries.includes(e)));
+                break;
+            case '+':
+                this.selection.setValue(entries);
+                break;
+            case '-':
+                this.selection.setValue([]);
+                break;
+            case 'Insert':
+                focusedEntry &&
+                    (this.selection.getValue().includes(focusedEntry)
+                        ? this.selection.setValue([...this.selection.getValue().filter((e) => e !== focusedEntry)])
+                        : this.selection.setValue([...this.selection.getValue(), focusedEntry]));
+                this.focusedEntry.setValue(entries[entries.findIndex((e) => e === this.focusedEntry.getValue()) + 1]);
+                break;
+            case 'ArrowUp':
+                ev.preventDefault();
+                this.focusedEntry.setValue(entries[Math.max(0, entries.findIndex((e) => e === focusedEntry) - 1)]);
+                break;
+            case 'ArrowDown':
+                ev.preventDefault();
+                this.focusedEntry.setValue(entries[Math.min(entries.length - 1, entries.findIndex((e) => e === focusedEntry) + 1)]);
+                break;
+            case 'Home': {
+                this.focusedEntry.setValue(entries[0]);
+                break;
+            }
+            case 'End': {
+                this.focusedEntry.setValue(entries[entries.length - 1]);
+                break;
+            }
+            case 'Enter': {
+                // this.activate(focusedEntry)
+                break;
+            }
+            case 'Backspace': {
+                // this.currentWorkDir.goUp()
+                break;
+            }
+            case 'Tab': {
+                this.hasFocus.setValue(!hasFocus);
+                break;
+            }
+            case 'Escape': {
+                this.searchTerm.setValue('');
+                this.selection.setValue([]);
+                break;
+            }
+            default:
+                if (ev.key.length === 1 && new RegExp(/[a-zA-z0-9]/).test(ev.key)) {
+                    const newSearchExpression = searchTerm + ev.key;
+                    // TODO: implement search
+                    // const newFocusedEntry = entries.find((e) => e.name.startsWith(newSearchExpression))
+                    // this.focus.setValue(newFocusedEntry)
+                    this.searchTerm.setValue(newSearchExpression);
+                }
+                else {
+                    console.log(`Handler for '${ev.key}' not registered`);
+                }
+        }
+    }
 }
 exports.CollectionService = CollectionService;
 //# sourceMappingURL=collection-service.js.map

package/dist/services/collection-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection-service.js","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":";;;;AACA,0FAA6C;AAC7C,4CAAwE;AAWxE,MAAa,iBAAiB;IAwB5B,YAAY,KAAqB,EAAE,eAA+C;QAhBjE,aAAQ,GAAG,IAAI,+BAAS,CAAC,CAAC,CAAC,CAAA;QAIrC,SAAI,GAAG,IAAI,uBAAe,CAAoB,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;QAExE,UAAK,GAAG,IAAI,uBAAe,CAAsB,SAAS,CAAC,CAAA;QAE3D,cAAS,GAAG,IAAI,uBAAe,CAAU,KAAK,CAAC,CAAA;QAI/C,UAAK,GAAG,IAAI,uBAAe,EAAiB,CAAA;QAE5C,cAAS,GAAG,IAAI,uBAAe,CAAM,EAAE,CAAC,CAAA;QAG7C,IAAI,CAAC,aAAa,GAAG,IAAI,uBAAe,CAAiC,eAAe,CAAC,CAAA;QACzF,IAAI,CAAC,UAAU,GAAG,IAAA,gBAAQ,EAAC,KAAK,EAAE,OAAO,EAAE,EAAE;YAC3C,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;YAC7B,IAAI;gBACF,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;gBAC7B,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,CAAA;gBACnC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;gBAC1B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;gBAC9B,OAAO,MAAM,CAAA;aACd;YAAC,OAAO,KAAK,EAAE;gBACd,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAC1B,MAAM,KAAK,CAAA;aACZ;oBAAS;gBACR,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;gBACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aAC/B;QACH,CAAC,EAAE,GAAG,CAAC,CAAA;QACP,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAA;IACnE,CAAC;IA1CM,OAAO;QACZ,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAA;QAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;QACpB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAA;IAC1B,CAAC;CAsCF;AA5CD,8CA4CC"}
+{"version":3,"file":"collection-service.js","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "3.0.3",
+  "version": "3.1.1",
   "description": "",
   "keywords": [
     "FuryStack",
@@ -17,13 +17,14 @@
   "author": "gallay.lajos@gmail.com",
   "license": "GPL-2.0",
   "devDependencies": {
-    "typescript": "^4.6.4"
+    "typescript": "4.7.4"
   },
   "dependencies": {
-    "@furystack/core": "^11.0.3",
-    "@furystack/inject": "^6.0.3",
-    "@furystack/shades": "^5.0.3",
-    "@furystack/utils": "^3.0.3",
+    "@furystack/core": "^11.0.4",
+    "@furystack/inject": "^7.0.0",
+    "@furystack/shades": "^6.0.0",
+    "@furystack/utils": "^3.0.4",
+    "path-to-regexp": "^6.2.1",
     "semaphore-async-await": "^1.5.1",
     "tslib": "^2.4.0"
   },

package/src/components/app-bar-link.tsx

@@ -0,0 +1,44 @@
+import { createComponent, LocationService, RouteLink, RouteLinkProps, Shade } from '@furystack/shades'
+import { match } from 'path-to-regexp'
+import { ThemeProviderService } from '../services'
+
+export const AppBarLink = Shade<RouteLinkProps, { isActive: boolean }>({
+  getInitialState: () => ({ isActive: false }),
+  resources: ({ injector, props, updateState, element, getState }) => {
+    const updateColor = () => {
+      const { isActive } = getState()
+      const themeProviderService = injector.getInstance(ThemeProviderService)
+      const theme = themeProviderService.theme.getValue()
+      const el = element.querySelector('a') as HTMLElement
+      const backgroundColor = isActive ? theme.button.active : 'rgba(128, 128, 128, 0.05)'
+
+      el.style.backgroundColor = backgroundColor
+      el.style.color = themeProviderService.getTextColor(backgroundColor)
+    }
+    return [
+      injector.getInstance(LocationService).onLocationChanged.subscribe(async (currentUrl) => {
+        const isActive = !!match(props.href as string)(currentUrl)
+        updateState({ isActive }, false)
+        updateColor()
+      }, true),
+    ]
+  },
+  shadowDomName: 'shade-app-bar-link',
+  render: ({ children, props }) => {
+    return (
+      <RouteLink
+        style={{
+          display: 'flex',
+          height: '100%',
+          textDecoration: 'none',
+          alignItems: 'center',
+          padding: '0 8px',
+          ...props.style,
+        }}
+        {...props}
+      >
+        {children}
+      </RouteLink>
+    )
+  },
+})

package/src/components/app-bar.tsx

@@ -11,7 +11,7 @@ export const AppBar = Shade({
   constructed: ({ element }) => {
     const container = element.children[0] as HTMLElement
     requestAnimationFrame(() => {
-      container.style.padding = '8px 8px'
+      // container.style.padding = '8px 8px'
       container.style.opacity = '1'
     })
   },
@@ -28,7 +28,6 @@ export const AppBar = Shade({
           boxShadow: '0 0 12px rgba(0,0,0,0.6)',
           transition:
             'opacity .35s cubic-bezier(0.550, 0.085, 0.680, 0.530), padding .2s cubic-bezier(0.550, 0.085, 0.680, 0.530)',
-          padding: '6px 16px',
           opacity: '0',
           position: 'fixed',
           zIndex: '1',

package/src/components/command-palette/command-palette-manager.ts

@@ -1,6 +1,5 @@
 import { Injector, Injectable } from '@furystack/inject'
 import { debounce, ObservableValue } from '@furystack/utils'
-import { ClickAwayService } from '../../services/click-away-service'
 import { CommandProvider, CommandPaletteSuggestionResult } from './command-provider'
 
 @Injectable({ lifetime: 'singleton' })
@@ -21,8 +20,6 @@ export class CommandPaletteManager {
     }
   }).bind(this)
 
-  public element?: HTMLElement
-
   public dispose() {
     window.removeEventListener('keyup', this.keyPressListener)
     this.isOpened.dispose()
@@ -30,7 +27,6 @@ export class CommandPaletteManager {
     this.term.dispose()
     this.selectedIndex.dispose()
     this.currentSuggestions.dispose()
-    this.clickAwayListener?.dispose()
   }
 
   public selectSuggestion(injector: Injector, index: number = this.selectedIndex.getValue()) {
@@ -62,8 +58,6 @@ export class CommandPaletteManager {
     }
   }, 250)
 
-  public clickAwayListener?: ClickAwayService<any>
-
   constructor(private readonly commandProviders: CommandProvider[]) {
     window.addEventListener('keyup', this.keyPressListener, true)
   }

package/src/components/command-palette/index.tsx

@@ -28,64 +28,66 @@ export const CommandPalette = Shade<CommandPaletteProps, CommandPaletteState>({
   getInitialState: ({ props }) => ({
     manager: new CommandPaletteManager(props.commandProviders),
   }),
-  constructed: ({ element: el, getState }) => {
+  resources: ({ getState, element: rootElement }) => {
     const { manager } = getState()
-    const element = el.querySelector('.input-container') as HTMLDivElement
-    manager.element = el
-    manager.clickAwayListener = new ClickAwayService(el, () => manager.isOpened.setValue(false))
-    manager.isOpened.subscribe((isOpened) => {
-      const suggestions = el.querySelector('.close-suggestions')
-      const postControls = el.querySelector('.post-controls')
-      if (isOpened) {
-        promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
-          duration: 500,
-          fill: 'forwards',
-        })
+    const element = rootElement.querySelector('.input-container') as HTMLDivElement
+    const clickAwayListener = new ClickAwayService(rootElement, () => manager.isOpened.setValue(false))
+    return [
+      manager.isOpened.subscribe((isOpened) => {
+        const suggestions = rootElement.querySelector('.close-suggestions')
+        const postControls = rootElement.querySelector('.post-controls')
+        if (isOpened) {
+          promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
+            duration: 500,
+            fill: 'forwards',
+          })
 
-        promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
-          duration: 100,
-          fill: 'forwards',
-        })
+          promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
+            duration: 100,
+            fill: 'forwards',
+          })
 
-        promisifyAnimation(element, [{ background: 'transparent' }, { background: 'rgba(128,128,128,0.1)' }], {
-          duration: 500,
-          fill: 'forwards',
-          easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
-        })
-      } else {
-        promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
-          duration: 500,
-          fill: 'forwards',
-        })
+          promisifyAnimation(element, [{ background: 'transparent' }, { background: 'rgba(128,128,128,0.1)' }], {
+            duration: 500,
+            fill: 'forwards',
+            easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
+          })
+        } else {
+          promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
+            duration: 500,
+            fill: 'forwards',
+          })
 
-        promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
-          duration: 500,
-          fill: 'forwards',
-          delay: 300,
-        })
+          promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
+            duration: 500,
+            fill: 'forwards',
+            delay: 300,
+          })
 
-        promisifyAnimation(element, [{ background: 'rgba(128,128,128,0.1)' }, { background: 'transparent' }], {
-          duration: 300,
-          fill: 'forwards',
-          easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
-        })
-      }
-    })
-    manager.isLoading.subscribe(async (isLoading) => {
-      const loader = el.querySelector('.loader-container')
-      if (isLoading) {
-        promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-      } else {
-        promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-      }
-    })
-    return () => manager.dispose()
+          promisifyAnimation(element, [{ background: 'rgba(128,128,128,0.1)' }, { background: 'transparent' }], {
+            duration: 300,
+            fill: 'forwards',
+            easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
+          })
+        }
+      }),
+      manager.isLoading.subscribe(async (isLoading) => {
+        const loader = rootElement.querySelector('.loader-container')
+        if (isLoading) {
+          promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
+            duration: 100,
+            fill: 'forwards',
+          })
+        } else {
+          promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
+            duration: 100,
+            fill: 'forwards',
+          })
+        }
+      }),
+      clickAwayListener,
+      manager,
+    ]
   },
   render: ({ props, injector, element, getState }) => {
     element.style.flexGrow = '1'

package/src/components/data-grid/body.tsx

@@ -1,7 +1,8 @@
 import { CollectionService } from '../../services/collection-service'
-import { ChildrenList, Shade, createComponent } from '@furystack/shades'
+import { ChildrenList, Shade, createComponent, createFragment } from '@furystack/shades'
 import { DataRowCells } from './data-grid'
 import { Loader } from '../loader'
+import { DataGridRow } from './data-grid-row'
 
 export interface DataGridBodyProps<T> {
   service: CollectionService<T>
@@ -13,8 +14,6 @@ export interface DataGridBodyProps<T> {
 
 export interface DataGridBodyState<T> {
   data: T[]
-  selection: T[]
-  focus: T | undefined
   isLoading: boolean
 }
 
@@ -24,19 +23,12 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
 >({
   getInitialState: ({ props }) => ({
     data: props.service.data.getValue().entries,
-    selection: props.service.selection.getValue(),
-    focus: props.service.focus.getValue(),
     isLoading: props.service.isLoading.getValue(),
   }),
-  constructed: ({ props, updateState }) => {
-    const disposables = [
-      props.service.data.subscribe((data) => updateState({ data: data.entries })),
-      props.service.focus.subscribe((focus) => updateState({ focus })),
-      props.service.selection.subscribe((selection) => updateState({ selection })),
-      props.service.isLoading.subscribe((isLoading) => updateState({ isLoading })),
-    ]
-    return () => disposables.map((d) => d.dispose())
-  },
+  resources: ({ props, updateState }) => [
+    props.service.data.subscribe((data) => updateState({ data: data.entries })),
+    props.service.isLoading.subscribe((isLoading) => updateState({ isLoading })),
+  ],
   shadowDomName: 'shade-data-grid-body',
   render: ({ getState, props, element }) => {
     element.style.display = 'table-row-group'
@@ -45,6 +37,7 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
     if (state.isLoading) {
       return (
         <div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
+          {/* TODO: Skeleton */}
           <Loader style={{ height: '128px', width: '128px' }} />
         </div>
       )
@@ -55,34 +48,16 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
     }
 
     return (
-      <div style={{ display: 'contents' }}>
+      <>
         {state.data.map((entry) => (
-          <tr
-            style={{
-              background: state.selection.includes(entry) ? 'rgba(128,128,128,0.3)' : 'transparent',
-              filter: state.focus === entry ? 'brightness(1.5)' : 'brightness(1)',
-              cursor: 'default',
-              boxShadow: '2px 1px 0px rgba(255,255,255,0.07)',
-              fontSize: '0.8em',
-            }}
-            onclick={() => {
-              if (getState().focus !== entry) {
-                props.service.focus.setValue(entry)
-                props.service.selection.setValue([entry])
-              }
-            }}
-            ondblclick={() => props.onDoubleClick?.(entry)}
-          >
-            {props.columns.map((column: any) => (
-              <td style={{ padding: '0.5em', ...props.style }}>
-                {props.rowComponents?.[column]?.(entry, state) || props.rowComponents?.default?.(entry, state) || (
-                  <span>{entry[column]}</span>
-                )}
-              </td>
-            ))}
-          </tr>
+          <DataGridRow<any>
+            columns={props.columns}
+            entry={entry}
+            service={props.service}
+            rowComponents={props.rowComponents}
+          ></DataGridRow>
         ))}
-      </div>
+      </>
     )
   },
 })