@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/less/config-selector.less

@@ -1,363 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
-
-:host {
-    #top_panel.dragdrop-highlight {
-        .psp-text-field {
-            border-bottom-color: var(--icon--color) !important;
-        }
-
-        .pivot-column-border {
-            border-color: var(--icon--color) !important;
-        }
-    }
-
-    #top_panel {
-        display: flex;
-        flex-direction: column;
-        justify-content: stretch;
-        padding: 0px 0px 12px 0px;
-        max-width: 1000px;
-        z-index: 1;
-
-        .row_close {
-            margin: 0 6.5px 4px 6.5px;
-            cursor: pointer;
-            height: 14px;
-        }
-
-        .row_close:before {
-            height: 14px;
-            width: 14px;
-            background-repeat: no-repeat;
-            background-color: var(--icon--color);
-            content: "";
-            -webkit-mask-size: cover;
-            mask-size: cover;
-            display: inline-block;
-            -webkit-mask-image: var(--column-checkbox-on--mask-image);
-            mask-image: var(--column-checkbox-on--mask-image);
-        }
-
-        .row_close:hover:before {
-            -webkit-mask-image: var(--column-checkbox-hover--mask-image);
-            mask-image: var(--column-checkbox-hover--mask-image);
-        }
-
-        .pivot-column {
-            display: inline-flex;
-            align-items: center;
-            min-height: 28px;
-            position: relative;
-
-            .pivot-column-border {
-                flex: 1 1 auto;
-                overflow: hidden;
-                background-color: var(--plugin--background);
-                border: 1px solid var(--inactive--color, #ababab);
-                border-radius: 2px;
-                display: flex;
-                align-items: center;
-                position: relative;
-                padding-right: 8px;
-
-                .column_name {
-                    display: block;
-                }
-
-                .input-sizer {
-                    flex: 1 100000 auto;
-                }
-            }
-
-            &:hover .pivot-column-border {
-                border-color: var(--icon--color);
-            }
-
-            .pivot-column-draggable {
-                position: relative;
-                width: calc(100% - 27px);
-                min-height: 28px;
-                padding-bottom: 4px;
-                display: flex;
-                align-items: stretch;
-                cursor: move;
-            }
-
-            &:not(.column-empty) .pivot-column-border:before {
-                flex: 0 0 auto;
-                height: 12px;
-                width: 5px;
-                -webkit-mask-image: var(--column-drag-handle--mask-image);
-                mask-image: var(--column-drag-handle--mask-image);
-                margin: 0px 0 0 6px;
-                background-repeat: no-repeat;
-                background-color: var(--icon--color);
-                content: "";
-                display: inline-block;
-                -webkit-mask-size: cover;
-                mask-size: cover;
-            }
-
-            span {
-                white-space: nowrap;
-            }
-
-            span:first-child {
-                text-overflow: ellipsis;
-                // max-width: 250px;
-                overflow: hidden;
-            }
-
-            // Column is being dragged-over, e.g. this is the drop indicator.
-            & .config-drop {
-                background-color: #8b868045;
-                margin-right: 7px;
-                margin-bottom: 4px;
-                border: 1px solid var(--icon--color);
-                border-radius: 2px;
-                overflow: visible;
-                flex: 1 1 auto;
-                align-self: stretch;
-                position: relative;
-                &:before {
-                    content: " ";
-                    position: absolute;
-                    z-index: -1;
-                    top: 5px;
-                    left: 5px;
-                    right: 5px;
-                    bottom: 5px;
-                    border-radius: 2px;
-                    background-color: var(--icon--color);
-                    opacity: 0.3;
-                }
-
-                & > * {
-                    color: transparent;
-                }
-            }
-        }
-
-        label.pivot-selector-label {
-            pointer-events: none;
-        }
-
-        #group_by label.pivot-selector-label:before {
-            content: var(--group-by-label--content, "Group By");
-        }
-
-        #split_by label.pivot-selector-label:before {
-            content: var(--split-by-label--content, "Split By");
-        }
-
-        #sort label.pivot-selector-label:before {
-            content: var(--sort-label--content, "Order By");
-        }
-
-        #filter label.pivot-selector-label:before {
-            content: var(--filter-label--content, "Where");
-        }
-
-        .highlight-drop {
-            background-color: rgba(0, 0, 0, 0.5);
-        }
-
-        .rrow {
-            display: flex;
-            min-height: 24px;
-            align-items: center;
-            list-style: none;
-            padding: 24px 0px 12px 0px;
-
-            span[draggable] {
-                cursor: move;
-            }
-        }
-
-        .rrow > div {
-            display: flex;
-            min-height: 24px;
-            flex-direction: column;
-            justify-content: flex-end;
-        }
-
-        .rrow > * {
-            width: 100%;
-            padding: 0;
-            margin: 0px 0px -12px 0px;
-        }
-
-        .psp-text-field ul {
-            min-height: 20px;
-        }
-
-        .psp-text-field {
-            position: relative;
-            border-width: 0;
-            border-style: solid;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            min-height: 24px;
-            background-size: 100% 200%;
-        }
-
-        .psp-text-field > .psp-text-field__input {
-            flex-direction: column;
-            justify-content: stretch;
-            border: 0px;
-            line-height: 20px;
-            vertical-align: bottom;
-            padding-bottom: 0px;
-            display: none;
-            margin: 0;
-            padding: 0 0 0 0;
-            min-height: 26px;
-            // margin-bottom: -1px;
-
-            // // Comma separators
-            // &> :not(.config-drop):after {
-            //     width: 0px;
-            //     content: ",";
-            // }
-
-            // &> :last-child:after {
-            //     display: none;
-            //     content: "" !important;
-            // }
-        }
-
-        .psp-text-field__input + label {
-            width: 0px;
-            height: 20px;
-            line-height: 17px;
-            box-sizing: border-box;
-            // color: var(--inactive--color);
-            white-space: nowrap;
-            padding: var(--column-drop-container--padding, 0px);
-            font-size: var(--label--font-size, 0.75em);
-            display: inline-block;
-        }
-
-        .psp-text-field__input {
-            display: flex !important;
-        }
-
-        .psp-text-field__input + label {
-            position: absolute;
-            top: 0px;
-            margin: var(--column-drop-label--margin, -16px 0px 0px 0px);
-            font-size: var(--label--font-size, 0.75em);
-            display: inline-block;
-        }
-
-        #transpose_button {
-            cursor: pointer;
-            flex-grow: 0;
-            font-family: inherit;
-            font-size: var(--label--font-size, 0.75em);
-            user-select: none;
-            padding: 0;
-            align-self: center;
-            margin-bottom: -23px;
-            margin-top: 11.5px;
-            align-self: flex-end;
-            z-index: 1;
-            min-height: 0px;
-            margin-right: 30px;
-
-            &:hover:before {
-                color: var(--icon--color, inherit);
-            }
-
-            &:before {
-                font-family: var(--button--font-family, inherit);
-                color: var(--inactive--color, #666);
-                content: var(--transpose-button--content, "Swap");
-            }
-        }
-    }
-
-    .sort-icon {
-        display: inline-flex;
-        margin-left: auto;
-        // margin-right: 8px;
-        cursor: pointer;
-        font-family: var(--button--font-family, inherit);
-
-        &:hover {
-            opacity: 1;
-            color: var(--active--color, inherit);
-        }
-
-        &:before {
-            @include icon;
-            width: 16px;
-            height: 16px;
-        }
-
-        &.desc:before {
-            -webkit-mask-image: var(--sort-desc-icon--mask-image);
-            mask-image: var(--sort-desc-icon--mask-image);
-        }
-
-        &.asc:before {
-            -webkit-mask-image: var(--sort-asc-icon--mask-image);
-            mask-image: var(--sort-asc-icon--mask-image);
-        }
-
-        &.none:before {
-            -webkit-mask-image: var(--sort-none-icon--mask-image);
-            mask-image: var(--sort-none-icon--mask-image);
-        }
-
-        &.asc.abs:before {
-            -webkit-mask-image: var(--sort-abs-asc-icon--mask-image);
-            mask-image: var(--sort-abs-asc-icon--mask-image);
-        }
-
-        &.desc.abs:before {
-            -webkit-mask-image: var(--sort-abs-desc-icon--mask-image);
-            mask-image: var(--sort-abs-desc-icon--mask-image);
-        }
-
-        &.col.asc:before {
-            -webkit-mask-image: var(--sort-col-asc-icon--mask-image);
-            mask-image: var(--sort-col-asc-icon--mask-image);
-        }
-
-        &.col.desc:before {
-            -webkit-mask-image: var(--sort-col-desc-icon--mask-image);
-            mask-image: var(--sort-col-desc-icon--mask-image);
-        }
-
-        &.col.asc.abs:before {
-            -webkit-mask-image: var(--sort-abs-col-asc-icon--mask-image);
-            mask-image: var(--sort-abs-col-asc-icon--mask-image);
-        }
-
-        &.col.desc.abs:before {
-            -webkit-mask-image: var(--sort-abs-col-desc-icon--mask-image);
-            mask-image: var(--sort-abs-col-desc-icon--mask-image);
-        }
-    }
-}

package/src/less/dom/checkbox.less

@@ -1,100 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
-
-:host {
-    input[type="checkbox"].alternate {
-        appearance: none;
-        height: 14px;
-        width: 14px;
-        padding: 0px;
-        cursor: pointer;
-        outline: none;
-        margin: 0 5px;
-
-        &:before {
-            @include icon;
-            width: 14px;
-            height: 14px;
-            font-family: var(--button--font-family, inherit);
-            background-color: var(--icon--color, #ccc);
-            -webkit-mask-image: var(--inactive-column-selector--content, none);
-            mask-image: var(--inactive-column-selector--content, none);
-        }
-
-        &:hover {
-            border-radius: 2px;
-            outline: 1px solid var(--icon--color);
-        }
-
-        &:checked:hover {
-            background-color: var(--icon--color, #ccc);
-            &:before {
-                background-color: var(--plugin--background, #ccc);
-            }
-        }
-
-        &:checked:before {
-            -webkit-mask-image: var(--active-column-selector--content, none);
-            mask-image: var(--active-column-selector--content, none);
-        }
-    }
-
-    input[type="checkbox"] {
-        float: left;
-        appearance: none;
-        height: 14px;
-        width: 14px;
-        padding: 0px;
-        cursor: pointer;
-        outline: none;
-        margin: 0 5px 0 0;
-
-        &:checked:before {
-            -webkit-mask-image: var(--column-checkbox-on--mask-image);
-            mask-image: var(--column-checkbox-on--mask-image);
-        }
-
-        &[disabled]:before {
-            opacity: 0.2s;
-        }
-
-        &:before {
-            @include icon;
-            height: 13px;
-            width: 13px;
-            -webkit-mask-image: var(--column-checkbox-off--mask-image);
-            mask-image: var(--column-checkbox-off--mask-image);
-        }
-
-        &:hover {
-            background-color: transparent;
-        }
-
-        &:hover:before {
-            -webkit-mask-image: var(--column-checkbox-hover--mask-image);
-            mask-image: var(--column-checkbox-hover--mask-image);
-        }
-    }
-
-    input[type="checkbox"]:not(:disabled) {
-        cursor: pointer;
-    }
-}

package/src/less/plugin-selector.less

@@ -1,183 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@import "dom/scrollbar.less";
-
-:host {
-    #settings_panel {
-        #plugin_selector_container.open ~ * {
-            opacity: 0;
-        }
-
-        #plugin_selector_container {
-            min-height: var(
-                --plugin-selector--height,
-                var(--status-bar--height, 48px)
-            );
-            display: flex;
-            white-space: nowrap;
-            flex-direction: column;
-            flex: 0 0 auto;
-
-            // Overflow the padding bounds of the container
-            // TODO these bounds exist to protext the resizer and scrollbar (left &
-            // right resp) but we really should find a way to remove it and delegate
-            // to sub-containers.
-            margin: 0 0px 0 -9px;
-
-            #plugin_selector_border {
-                height: 2px;
-                min-height: 2px;
-                width: 100%;
-                background-color: var(--inactive--color, #6e6e6e);
-                margin-top: 2px;
-            }
-
-            .plugin-selector-options {
-                overflow-y: auto;
-                @include scrollbar;
-            }
-
-            &.open {
-                position: absolute;
-                margin: 0;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-
-                // This element is first in the container but visually "overlaps"
-                // when expanded
-                z-index: 3;
-                color: var(--icon--color, #042121);
-                // background: var(--plugin--background);
-
-                .plugin-select-item {
-                    padding-left: 8px;
-                }
-            }
-
-            .plugin-select-item-name {
-                padding-left: 10px;
-                font-size: 1.33333em;
-            }
-
-            .plugin-select-item-name:before {
-                // This value is set in a `style` tag from Yew!
-                content: var(--default-column-title);
-            }
-
-            .plugin-select-item {
-                // width: 48px;
-                padding-left: 9px;
-                height: var(
-                    --plugin-selector--height,
-                    var(--status-bar--height, 48px)
-                );
-                min-height: var(
-                    --plugin-selector--height,
-                    var(--status-bar--height, 48px)
-                );
-                display: flex;
-                align-items: center;
-                border-bottom: 1px solid transparent;
-                box-shadow: 0px 1px var(--inactive--color, #6e6e6e);
-                cursor: pointer;
-            }
-
-            // Hadn't seen this technique before, makes sizing/positioning these
-            // trivial.  There's some indication this doesn't work on non-chrome
-            // https://stackoverflow.com/questions/36259410/how-to-set-size-of-svg-image-in-before-pseudo-class
-            // https://stackoverflow.com/questions/21509982/change-svg-fill-color-in-before-or-after-css
-            .plugin-select-item:before {
-                content: "";
-                display: inline-block;
-                height: 35px;
-                width: 40px;
-                -webkit-mask-size: cover;
-                mask-size: cover;
-                background-repeat: no-repeat;
-                background-color: var(--icon--color);
-            }
-
-            .plugin-select-item:hover {
-                background-color: var(--icon--color, #042121);
-                color: var(--plugin--background, #fdfffd);
-            }
-
-            .plugin-select-item:hover:before {
-                background-color: var(--plugin--background, #fdfffd);
-            }
-
-            .plugin-select-item[data-plugin="Candlestick"]:before {
-                // mask-image: var(--plugin-selector-candlestick--content);
-                -webkit-mask-image: var(--plugin-selector-candlestick--content);
-            }
-
-            .plugin-select-item[data-plugin="Heatmap"]:before {
-                -webkit-mask-image: var(--plugin-selector-heatmap--content);
-            }
-
-            .plugin-select-item[data-plugin="Map Scatter"]:before {
-                -webkit-mask-image: var(--plugin-selector-map-scatter--content);
-            }
-
-            .plugin-select-item[data-plugin="OHLC"]:before {
-                -webkit-mask-image: var(--plugin-selector-ohlc--content);
-            }
-
-            .plugin-select-item[data-plugin="Sunburst"]:before {
-                -webkit-mask-image: var(--plugin-selector-sunburst--content);
-            }
-
-            .plugin-select-item[data-plugin="Treemap"]:before {
-                -webkit-mask-image: var(--plugin-selector-treemap--content);
-            }
-
-            .plugin-select-item[data-plugin="X Bar"]:before {
-                -webkit-mask-image: var(--plugin-selector-x-bar--content);
-            }
-
-            .plugin-select-item[data-plugin="X/Y Line"]:before {
-                -webkit-mask-image: var(--plugin-selector-x-y-line--content);
-            }
-
-            .plugin-select-item[data-plugin="X/Y Scatter"]:before {
-                -webkit-mask-image: var(--plugin-selector-x-y-scatter--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Area"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-area--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Bar"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-bar--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Line"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-line--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Scatter"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-scatter--content);
-            }
-
-            .plugin-select-item[data-plugin="Datagrid"]:before {
-                -webkit-mask-image: var(--plugin-selector-datagrid--content);
-            }
-        }
-
-        #plugin_selector {
-            flex-grow: 1;
-        }
-    }
-}