@longline/aqua-ui 1.0.0

package/controls/ListView/Body.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { IListViewProps } from './IListViewProps';
+import { IColumnProps } from './Column';
+interface IProps extends IListViewProps {
+    columns: IColumnProps[];
+}
+declare const Body: (props: IProps) => React.JSX.Element;
+export { Body };

package/controls/ListView/Body.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Selector } from '../../inputs/Selector';
+var Body = function (props) {
+    return (React.createElement("tbody", null, props.data.map(function (row, index) {
+        return React.createElement("tr", { key: index, 
+            // Set classnames for tr; styles are in Table.
+            className: [
+                props.active == row ? 'active' : null,
+                (props.onClick || props.onDoubleClick) ? 'clickable' : null
+            ].join(' '), onClick: props.onClick, onDoubleClick: props.onDoubleClick },
+            props.onCheck && React.createElement("td", null,
+                React.createElement(Selector, { checked: !!row.checked, onChange: function () { return props.onCheck(index); } })),
+            props.columns.map(function (col, index) {
+                return React.createElement("td", { key: index, style: { justifyContent: (col.align == 'right' && !props.narrow) ? 'end' : 'start' } },
+                    index == 0 && props.decorator && props.decorator(row),
+                    React.createElement("span", { className: "label" }, props.narrow && col.name),
+                    React.createElement("span", { className: "content" },
+                        " ",
+                        col.children(row)));
+            }),
+            props.columnsEditable && React.createElement("td", null));
+    })));
+};
+export { Body };

package/controls/ListView/Column.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+interface IColumnProps {
+    /**
+     * Column name, e.g. "Number of Users"
+     */
+    name: string;
+    /**
+     * Column width. If a number, e.g. `1`, then it is the column's weight,
+     * relative to other columns. If it is a string, e.g. `50px`, then it is
+     * an exact width to be applied.
+     * @default 1
+     */
+    width?: number | string;
+    /**
+     * Optional sort key. If not specified, column is not sortable.
+     */
+    sort?: string;
+    /**
+     * If set, this is the default sort column. If not set, the first column will
+     * be the sort column.
+     */
+    defaultSort?: boolean;
+    /**
+     * If true, default sorting is reverse sort.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Cell content alignment. Defaults to `left`.
+     * @default let
+     */
+    align?: 'left' | 'right';
+    /**
+     * Function that takes a table row and returns cell content.
+     */
+    children: (item: any) => React.ReactNode;
+    /**
+     * If set, then this column cannot be removed from the ListView.
+     */
+    fixed?: boolean;
+    /**
+     * Is this column currently shown in the ListView?
+     */
+    active?: boolean;
+}
+/**
+ * TableColumn species a column name, and how to render content for that
+ * column.
+ * TableColumn itself doesn't render anything.
+ */
+declare const Column: {
+    (_: IColumnProps): null;
+    displayName: string;
+};
+export { Column, IColumnProps };

package/controls/ListView/Column.js

@@ -0,0 +1,8 @@
+/**
+ * TableColumn species a column name, and how to render content for that
+ * column.
+ * TableColumn itself doesn't render anything.
+ */
+var Column = function (_) { return null; };
+Column.displayName = "ListView.Column";
+export { Column };

package/controls/ListView/ColumnsManager/ColumnDraggable.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IColumnProps } from '../Column';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    column: IColumnProps;
+    onMove: (afterName: string) => void;
+    onRemove: () => void;
+}
+declare const ColumnDraggable: (props: IProps) => React.JSX.Element;
+export { ColumnDraggable };

package/controls/ListView/ColumnsManager/ColumnDraggable.js

@@ -0,0 +1,83 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled, { useTheme } from 'styled-components';
+import { SVG } from '../../../svg';
+import { Icon } from '../../Icon';
+var ColumnDraggableBase = function (props) {
+    var theme = useTheme();
+    var wrapperRef = React.useRef(null);
+    var handleMouseDown = function () {
+        wrapperRef.current.draggable = true;
+    };
+    var handleMouseUp = function () {
+        wrapperRef.current.draggable = false;
+    };
+    var handleDragStart = function (ev) {
+        ev.dataTransfer.setData("text/plain", props.column.name);
+        ev.dataTransfer.effectAllowed = "move";
+    };
+    var handleDragOver = function (ev) {
+        ev.preventDefault();
+        ev.dataTransfer.dropEffect = "move";
+    };
+    var handleDrop = function (ev) {
+        ev.preventDefault();
+        var target = ev.target;
+        while (!target.classList.contains('dropzone')) {
+            if (!target.parentElement)
+                return;
+            target = target.parentElement;
+        }
+        target.classList.remove('drop');
+        props.onMove(ev.dataTransfer.getData("text/plain"));
+    };
+    // Is the target argument a dropzone, or a child of a dropzone?
+    var getDropzone = function (target) {
+        while (!target.classList.contains('dropzone')) {
+            if (!target.parentElement)
+                return null;
+            target = target.parentElement;
+        }
+        return target;
+    };
+    var handleDragEnter = function (ev) {
+        ev.preventDefault();
+        getDropzone(ev.target).classList.add('drop');
+    };
+    var handleDragLeave = function (ev) {
+        // If the destination is not a dropzone, remove my class.
+        if (!getDropzone(ev.relatedTarget)) {
+            getDropzone(ev.target).classList.remove('drop');
+            return;
+        }
+        // The destination is a dropzone. Is it the same as the current one?
+        var src_name = getDropzone(ev.target).getAttribute('x-name');
+        var dest_name = getDropzone(ev.relatedTarget).getAttribute('x-name');
+        if (src_name != dest_name) {
+            getDropzone(ev.target).classList.remove('drop');
+            return;
+        }
+    };
+    return (React.createElement("div", { className: "".concat(props.className, " dropzone"), "x-name": props.column.name, ref: wrapperRef, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop },
+        React.createElement(Handle, { className: "handle", onMouseDown: handleMouseDown, onMouseUp: handleMouseUp }, props.column.name),
+        !props.column.fixed && React.createElement(Icon, { color: theme.colors.primary[5], circle: true, url: SVG.Icons.Cross, onClick: props.onRemove })));
+};
+var Handle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  &:before {\n    position: absolute;\n    content: '';\n    left: 0;\n    top: calc(50% - 12px);\n    width: 16px;\n    height: 24px;\n    background-image: radial-gradient(circle at center, ", " 1px, transparent 1px, transparent 4px);\n    background-size: 6px 6px;\n  }\n  cursor: pointer;\n  padding-left: 24px;\n"], ["\n  position: relative;\n  &:before {\n    position: absolute;\n    content: '';\n    left: 0;\n    top: calc(50% - 12px);\n    width: 16px;\n    height: 24px;\n    background-image: radial-gradient(circle at center, ", " 1px, transparent 1px, transparent 4px);\n    background-size: 6px 6px;\n  }\n  cursor: pointer;\n  padding-left: 24px;\n"])), function (p) { return p.theme.colors.neutral[80]; });
+var ColumnDraggableStyled = styled(ColumnDraggableBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  user-select: none;\n  outline: none;\n  display: flex;\n  flex-direction: row;\n  height: 42px;\n  color: ", ";\n  background-color: ", ";\n  border-bottom: solid 1px ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px 0 16px;\n  &:hover {\n    background-color: ", ";\n  }\n  &.drop {\n    background-color: ", ";\n  }  \n"], ["\n  user-select: none;\n  outline: none;\n  display: flex;\n  flex-direction: row;\n  height: 42px;\n  color: ", ";\n  background-color: ", ";\n  border-bottom: solid 1px ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px 0 16px;\n  &:hover {\n    background-color: ", ";\n  }\n  &.drop {\n    background-color: ", ";\n  }  \n"])), function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.theme.colors.primary[1]; });
+var ColumnDraggable = function (props) { return React.createElement(ColumnDraggableStyled, __assign({}, props)); };
+export { ColumnDraggable };
+var templateObject_1, templateObject_2;

package/controls/ListView/ColumnsManager/ColumnsManager.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IColumnProps } from '../Column';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    columns: IColumnProps[];
+    onChange: (columns: IColumnProps[]) => void;
+    onClose: () => void;
+    onReset: () => void;
+}
+declare const ColumnsManager: (props: IProps) => React.JSX.Element;
+export { ColumnsManager };

package/controls/ListView/ColumnsManager/ColumnsManager.js

@@ -0,0 +1,63 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { GlassPane } from '../../../containers/GlassPane';
+import { SourceColumns } from './SourceColumns';
+import { OrderColumns } from './OrderColumns';
+import { SecondaryButton } from '../../SecondaryButton';
+import { SVG } from '../../../svg';
+var ColumnsManagerBase = function (props) {
+    var wrapperRef = React.useRef(null);
+    // A mousedown event listener is attached to the document. When the document
+    // is clicked anywhere but this panel, the panel closes.
+    React.useEffect(function () {
+        // Listen for document-wide mousedown/keydown events when panel mounts.
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleKeyDown);
+        return function () {
+            // Clean up document-wide mousedown/keydown events when panel unmounts.
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    var handleKeyDown = function (e) {
+        if (e.key == 'Escape')
+            props.onClose();
+    };
+    // Handle document-wide mousedown event by closing the panel.
+    var handleClickOutside = function (event) {
+        var elem = event.target;
+        if (wrapperRef.current && !wrapperRef.current.contains(elem)) {
+            props.onClose();
+        }
+    };
+    return (React.createElement("div", { className: props.className, ref: wrapperRef },
+        React.createElement(GlassPane, { animated: true, bordered: true },
+            React.createElement(Content, null,
+                React.createElement(Header, null, "Available columns"),
+                React.createElement(Header, null,
+                    "Selected columns ",
+                    React.createElement(SecondaryButton, { icon: SVG.Icons.Reset, onClick: props.onReset })),
+                React.createElement(SourceColumns, { columns: props.columns, onChange: props.onChange }),
+                React.createElement(OrderColumns, { columns: props.columns, onChange: props.onChange, onReset: props.onReset })))));
+};
+var Header = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font: ", ";\n  text-transform: lowercase;\n  color: ", ";\n  padding-left: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  font: ", ";\n  text-transform: lowercase;\n  color: ", ";\n  padding-left: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])), function (p) { return p.theme.font.labelCaps; }, function (p) { return p.theme.colors.neutral[100]; });
+var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 500px;\n  padding: 0 16px 16px 16px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: 48px 1fr;\n  column-gap: 16px;\n"], ["\n  width: 500px;\n  padding: 0 16px 16px 16px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: 48px 1fr;\n  column-gap: 16px;\n"])));
+var ColumnsManagerStyled = styled(ColumnsManagerBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1000;\n  border-radius: ", "px;\n  overflow: hidden;\n  font: ", ";\n"], ["\n  position: relative;\n  z-index: 1000;\n  border-radius: ", "px;\n  overflow: hidden;\n  font: ", ";\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.bodyMedium; });
+var ColumnsManager = function (props) { return React.createElement(ColumnsManagerStyled, __assign({}, props)); };
+export { ColumnsManager };
+var templateObject_1, templateObject_2, templateObject_3;

package/controls/ListView/ColumnsManager/OrderColumns.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IColumnProps } from '../Column';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    columns: IColumnProps[];
+    onChange: (columns: IColumnProps[]) => void;
+    onReset: () => void;
+}
+declare const OrderColumns: (props: IProps) => React.JSX.Element;
+export { OrderColumns };

package/controls/ListView/ColumnsManager/OrderColumns.js

@@ -0,0 +1,62 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { ColumnDraggable } from './ColumnDraggable';
+import { List } from '../../../containers/List';
+var OrderColumnsBase = function (props) {
+    var _a = React.useState(""), q = _a[0], setQ = _a[1];
+    var handleQ = function (value) {
+        setQ(value);
+    };
+    var handleRemove = function (name) {
+        var newColumns = props.columns.map(function (c) {
+            return __assign(__assign({}, c), { active: c.name === name ? false : c.active });
+        });
+        props.onChange(newColumns);
+    };
+    var handleMove = function (name, afterName) {
+        // Find moved column.
+        var column = props.columns.find(function (c) { return c.name === name; });
+        if (!column)
+            return;
+        // Remove moved column.
+        var newColumns = props.columns.filter(function (c) { return c.name !== name; });
+        // Find index of "after" column.
+        var idx = props.columns.findIndex(function (c) { return c.name === afterName; });
+        if (idx == -1)
+            return;
+        // Insert column:
+        props.onChange(__spreadArray(__spreadArray(__spreadArray([], newColumns.slice(0, idx + 1), true), [column], false), newColumns.slice(idx + 1), true));
+    };
+    return (React.createElement("div", { className: props.className },
+        React.createElement(List, { maxItems: 6, placeholder: "Search...", search: q, onSearch: handleQ }, props.columns.filter(function (c) { return c.active; }).filter(function (c) { return !q || c.name.toLowerCase().includes(q); }).map(function (c, idx) {
+            return React.createElement(ColumnDraggable, { key: c.name, column: c, onRemove: function () { return handleRemove(c.name); }, onMove: function (afterName) { return handleMove(afterName, c.name); } });
+        }))));
+};
+var OrderColumnsStyled = styled(OrderColumnsBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  font: ", ";\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  font: ", ";\n"])), function (p) { return p.theme.font.bodyMedium; });
+var OrderColumns = function (props) { return React.createElement(OrderColumnsStyled, __assign({}, props)); };
+export { OrderColumns };
+var templateObject_1;

package/controls/ListView/ColumnsManager/SourceColumns.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IColumnProps } from '../Column';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    columns: IColumnProps[];
+    onChange: (columns: IColumnProps[]) => void;
+}
+declare const SourceColumns: (props: IProps) => React.JSX.Element;
+export { SourceColumns };

package/controls/ListView/ColumnsManager/SourceColumns.js

@@ -0,0 +1,45 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { Selector } from '../../../inputs/Selector';
+import { Highlight } from '../../../formatters/Highlight';
+import { List } from '../../../containers/List';
+var SourceColumnsBase = function (props) {
+    var _a = React.useState(""), q = _a[0], setQ = _a[1];
+    var handleChange = function (name) {
+        var columns = props.columns.map(function (c, idx) {
+            if (c.name == name)
+                return __assign(__assign({}, c), { active: !c.active });
+            return c;
+        });
+        props.onChange(columns);
+    };
+    var handleQ = function (value) {
+        setQ(value);
+    };
+    return (React.createElement("div", { className: props.className },
+        React.createElement(List, { maxItems: 6, search: q, placeholder: "Search...", onSearch: handleQ }, props.columns.filter(function (c) { return !q || c.name.toLowerCase().includes(q); }).sort(function (a, b) { return a.name.localeCompare(b.name); }).map(function (c, idx) {
+            return React.createElement(Entry, { key: c.name },
+                React.createElement(Selector, { disabled: c.fixed, checked: !!c.active, onChange: function () { return handleChange(c.name); } }),
+                React.createElement(Highlight, { value: c.name, q: q }));
+        }))));
+};
+var Entry = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n  padding-left: 16px;\n  padding-right: 16px;\n"], ["\n  display: flex;\n  align-items: center;\n  color: ", ";\n  padding-left: 16px;\n  padding-right: 16px;\n"])), function (p) { return p.theme.colors.primary[5]; });
+var SourceColumnsStyled = styled(SourceColumnsBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font: ", ";\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"], ["\n  font: ", ";\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"])), function (p) { return p.theme.font.bodyMedium; });
+var SourceColumns = function (props) { return React.createElement(SourceColumnsStyled, __assign({}, props)); };
+export { SourceColumns };
+var templateObject_1, templateObject_2;

package/controls/ListView/Ghost.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IListViewProps } from './IListViewProps';
+import { IColumnProps } from './Column';
+interface IProps extends IListViewProps {
+    className?: string;
+    columns: IColumnProps[];
+}
+declare const Ghost: (props: IProps) => React.JSX.Element;
+export { Ghost };

package/controls/ListView/Ghost.js

@@ -0,0 +1,52 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled, { css, keyframes } from 'styled-components';
+var GhostBase = function (props) {
+    return (React.createElement("div", { className: props.className },
+        React.createElement("div", { className: "mask1" }),
+        React.createElement("div", { className: "mask2" }),
+        props.onCheck && React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": false }),
+        props.columns.filter(function (c) { return c.active; }).map(function (c, idx) { return React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": true, key: idx }); }),
+        props.columnsEditable && React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": false })));
+};
+var Pulse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    background-position-x: 0px;\n  }\n  100% {\n    background-position-x: 250px;\n  }\n"], ["\n  0% {\n    background-position-x: 0px;\n  }\n  100% {\n    background-position-x: 250px;\n  }\n"])));
+var Pulse2 = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    background-position-x: 125px;\n  }\n  50% {\n    background-position-x: 250px; \n  }\n  50.1% {\n    background-position-x: 0px; \n  }  \n  100% {\n    background-position-x: 125px;\n  }\n"], ["\n  0% {\n    background-position-x: 125px;\n  }\n  50% {\n    background-position-x: 250px; \n  }\n  50.1% {\n    background-position-x: 0px; \n  }  \n  100% {\n    background-position-x: 125px;\n  }\n"])));
+var Cell = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  border-bottom: solid 1px ", ";\n  z-index: 1;\n\n  &:after {\n    position: absolute;\n    content: '';\n    background: ", ";\n    left: 16px;\n    top: calc(50% - 7px);\n    height: 14px;\n    border-radius: 7px;\n    ", "\n  }\n\n  &:last-child:after {\n    right: 16px;\n  }\n  // Header shadow:\n  ", "  \n"], ["\n  position: relative;\n  background-color: ", ";\n  border-bottom: solid 1px ", ";\n  z-index: 1;\n\n  &:after {\n    position: absolute;\n    content: '';\n    background: ", ";\n    left: 16px;\n    top: calc(50% - 7px);\n    height: 14px;\n    border-radius: 7px;\n    ", "\n  }\n\n  &:last-child:after {\n    right: 16px;\n  }\n  // Header shadow:\n  ", "  \n"])), function (p) { return p.$dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.$dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.$dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[80]; }, function (p) { return p.$content ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["right: 0;"], ["right: 0;"]))) : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["width:14px"], ["width:14px"]))); }, function (p) { return p.$shadow && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &:before {\n      position: absolute;\n      pointer-events: none;\n      content: '';\n      z-index: 1;\n      top: calc(100%);\n      left: 0;\n      right: 0;\n      height: 8px;\n      background: linear-gradient(rgba(0,0,0,0.1), transparent);\n    }\n  "], ["\n    &:before {\n      position: absolute;\n      pointer-events: none;\n      content: '';\n      z-index: 1;\n      top: calc(100%);\n      left: 0;\n      right: 0;\n      height: 8px;\n      background: linear-gradient(rgba(0,0,0,0.1), transparent);\n    }\n  "]))); });
+var GhostStyled = styled(GhostBase).attrs(function (p) {
+    return {
+        fg: p.dark ? p.theme.colors.primary[1] : p.theme.colors.primary[1],
+        bg: p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]
+    };
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  // Size and position. A table fills its container.\n  position:    relative;\n  width:       100%;\n  height:      100%;\n  background: ", ";\n\n  display: grid;\n  // Convert column widths a string suitable for grid template:\n  grid-template-columns: ", ";\n\n  grid-template-rows: 48px;\n\n  div.mask1 {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    background: repeat-x 0 0/250px 100% linear-gradient(to right, ", ", ", ", ", ");\n    mask: linear-gradient(to bottom, transparent 0, transparent 47px, black 47px, transparent 48px, transparent 100%) repeat-y 0 0/100% 96px;\n    animation: ", " 0.8s linear infinite;\n  }\n\n  div.mask2 {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    background: repeat-x 0 0/250px 100% linear-gradient(to right, ", ", ", ", ", ");\n    mask: linear-gradient(to bottom, transparent 0, transparent 95px, black 100%) repeat-y 0 0/100% 96px;\n    animation: ", " 0.8s linear infinite;\n  }\n"], ["\n  // Size and position. A table fills its container.\n  position:    relative;\n  width:       100%;\n  height:      100%;\n  background: ", ";\n\n  display: grid;\n  // Convert column widths a string suitable for grid template:\n  grid-template-columns: ", ";\n\n  grid-template-rows: 48px;\n\n  div.mask1 {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    background: repeat-x 0 0/250px 100% linear-gradient(to right, ", ", ", ", ", ");\n    mask: linear-gradient(to bottom, transparent 0, transparent 47px, black 47px, transparent 48px, transparent 100%) repeat-y 0 0/100% 96px;\n    animation: ", " 0.8s linear infinite;\n  }\n\n  div.mask2 {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    background: repeat-x 0 0/250px 100% linear-gradient(to right, ", ", ", ", ", ");\n    mask: linear-gradient(to bottom, transparent 0, transparent 95px, black 100%) repeat-y 0 0/100% 96px;\n    animation: ", " 0.8s linear infinite;\n  }\n"])), function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) {
+    // Prefix a check column?
+    return (p.onCheck ? ['48px'] : []).concat(
+    // Actual columns:
+    p.columns.filter(function (c) { return c.active; }).map(function (col) {
+        var _a;
+        var width = (_a = col.width) !== null && _a !== void 0 ? _a : 1;
+        // Numeric width? 
+        if (typeof width === 'number' && !isNaN(width))
+            return "minmax(0, ".concat(width, "fr)");
+        return "minmax(0, ".concat(width, ")");
+    }))
+        // Postfix an columns management column?
+        .concat(p.columnsEditable ? ['48px'] : [])
+        .join(" ");
+}, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, Pulse, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, Pulse2);
+var Ghost = function (props) { return React.createElement(GhostStyled, __assign({}, props)); };
+export { Ghost };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/controls/ListView/Header.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IListViewProps } from './IListViewProps';
+import { IColumnProps } from './Column';
+interface IProps extends IListViewProps {
+    columns: IColumnProps[];
+    sort: string;
+    reverse: boolean;
+    onSortClick: (column: IColumnProps) => void;
+    onOpenColumns: () => void;
+}
+declare const Header: (props: IProps) => React.JSX.Element;
+export { Header };

package/controls/ListView/Header.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { HeaderCell } from './HeaderCell';
+import { Selector } from '../../inputs/Selector';
+import { SVG } from '../../svg';
+import { useTheme } from 'styled-components';
+import { HeaderButton } from './HeaderButton';
+var Header = function (props) {
+    var theme = useTheme();
+    // Are ALL items checked?
+    var allChecked = props.data.map(function (x) { return !!x.checked; }).reduce(function (acc, cur) { return acc && !!cur; }, true) == true;
+    // Are NO items checked?
+    var noneChecked = props.data.map(function (x) { return !!x.checked; }).reduce(function (acc, cur) { return acc || !!cur; }, false) == false;
+    var indeterminate = !allChecked && !noneChecked;
+    return (React.createElement("thead", null,
+        React.createElement("tr", null,
+            props.onCheck &&
+                React.createElement("th", null,
+                    React.createElement(Selector, { indeterminate: indeterminate, checked: allChecked, onChange: function () { return props.onCheck(allChecked ? false : true); } })),
+            props.columns.map(function (col, index) { return React.createElement(HeaderCell, __assign({ key: index, column: col }, props)); }),
+            props.columnsEditable &&
+                React.createElement("th", null,
+                    React.createElement(HeaderButton, { dark: props.dark, url: SVG.Icons.Columns, onClick: props.onOpenColumns })))));
+};
+export { Header };

package/controls/ListView/HeaderButton.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    onClick: () => void;
+    url: string;
+    dark: boolean;
+}
+declare const HeaderButton: (props: IProps) => React.JSX.Element;
+export { HeaderButton };

package/controls/ListView/HeaderButton.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { useTheme } from 'styled-components';
+import { Icon } from '../Icon';
+var HeaderButton = function (props) {
+    var theme = useTheme();
+    return (React.createElement(Icon, { url: props.url, onClick: props.onClick, color: props.dark ? theme.colors.neutral[100] : theme.colors.neutral[10] }));
+};
+export { HeaderButton };

package/controls/ListView/HeaderCell.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { IColumnProps } from './Column';
+import { IListViewProps } from './IListViewProps';
+interface IProps extends IListViewProps {
+    /** @ignore */
+    className?: string;
+    /** Column properties */
+    column: IColumnProps;
+    sort: string;
+    reverse: boolean;
+    /** Fired when column is clicked. */
+    onSortClick: (column: IColumnProps) => void;
+}
+/**
+ * `HeaderCell` wraps a <th>. It shows the column label, and a sort icon if
+ * the column is sortable. In order to avoid creating many styled-components
+ * classes, styling is mostly left to `Table`.
+ */
+declare const HeaderCell: (props: IProps) => React.JSX.Element;
+export { HeaderCell };

package/controls/ListView/HeaderCell.js

@@ -0,0 +1,47 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { SortButton } from './SortButton';
+var HeaderCellBase = function (props) {
+    var sorted = props.sort == props.column.sort;
+    return (React.createElement("th", { 
+        // Sorted column gets .sorted class:
+        className: "".concat(props.className, " ").concat(sorted ? 'sort' : ''), style: {
+            // Sortable column has pointer cursor:
+            cursor: props.column.sort ? 'pointer' : 'auto'
+        }, onClick: (props.column.sort && props.onSortClick) ? function () { return props.onSortClick(props.column); } : null },
+        React.createElement("span", null, props.column.name),
+        React.createElement(SortButton, { dark: props.dark, active: sorted, 
+            // If currently sorted, show sort direction.
+            // If not currently sorted, show default sort direction.
+            reverse: sorted ? props.reverse : props.column.reverse })));
+};
+var HeaderCellStyled = styled(HeaderCellBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &:hover {\n    ", " {\n      opacity: 1 !important;  \n      path {\n        animation-duration: 1000ms;\n      }\n    }       \n  }\n"], ["\n  &:hover {\n    ", " {\n      opacity: 1 !important;  \n      path {\n        animation-duration: 1000ms;\n      }\n    }       \n  }\n"
+    /**
+     * `HeaderCell` wraps a <th>. It shows the column label, and a sort icon if
+     * the column is sortable. In order to avoid creating many styled-components
+     * classes, styling is mostly left to `Table`.
+     */
+])), SortButton);
+/**
+ * `HeaderCell` wraps a <th>. It shows the column label, and a sort icon if
+ * the column is sortable. In order to avoid creating many styled-components
+ * classes, styling is mostly left to `Table`.
+ */
+var HeaderCell = function (props) { return React.createElement(HeaderCellStyled, __assign({}, props)); };
+export { HeaderCell };
+var templateObject_1;