@holoviz/panel 0.14.4 → 1.0.0-a.2

package/dist/bundled/fast/js/fast_design.js

@@ -0,0 +1,87 @@
+import {
+  accentPalette,
+  baseLayerLuminance,
+  fillColor,
+  neutralPalette,
+  PaletteRGB,
+  SwatchRGB,
+  provideFASTDesignSystem,
+} from "../../@microsoft/fast-components@2.30.6/dist/fast-components.js";
+
+const hexRGBRegex = /^#((?:[0-9a-f]{6}|[0-9a-f]{3}))$/i;
+
+export function normalize(i, min, max) {
+    if (isNaN(i) || i <= min) {
+        return 0.0;
+    } else if (i >= max) {
+        return 1.0;
+    }
+    return i / (max - min);
+}
+
+function parseColorHexRGB(raw) {
+    const result = hexRGBRegex.exec(raw);
+
+    if (result === null) {
+        return null;
+    }
+
+    let digits = result[1];
+
+    if (digits.length === 3) {
+        const r = digits.charAt(0);
+        const g = digits.charAt(1);
+        const b = digits.charAt(2);
+
+        digits = r.concat(r, g, g, b, b);
+    }
+
+    const rawInt = parseInt(digits, 16);
+
+    if (isNaN(rawInt)) {
+        return null;
+    }
+
+    // Note the use of >>> rather than >> as we want JS to manipulate these as unsigned numbers
+    return SwatchRGB.create(
+        normalize((rawInt & 0xff0000) >>> 16, 0, 255),
+        normalize((rawInt & 0x00ff00) >>> 8, 0, 255),
+        normalize(rawInt & 0x0000ff, 0, 255),
+        1
+    );
+}
+
+
+class FastDesignProvider {
+  constructor(selector) {
+    if (typeof selector === 'string') {
+      this.provider = document.querySelector(selector);
+    } else {
+      this.provider = selector;
+    }
+    provideFASTDesignSystem(this.provider)
+  }
+
+  setAccentColor(value) {
+    accentPalette.setValueFor(this.provider, PaletteRGB.create(parseColorHexRGB(value)));
+  }
+
+  setNeutralColor(value) {
+    neutralPalette.setValueFor(this.provider, PaletteRGB.create(parseColorHexRGB(value)));
+  }
+
+  setBackgroundColor(value) {
+    fillColor.setValueFor(this.provider, parseColorHexRGB(value));
+    this.provider.style.setProperty("background-color", `var(${fillColor.cssCustomProperty})`);
+  }
+
+  setLuminance(value) {
+    baseLayerLuminance.withDefault(value);
+  }
+
+  setCornerRadius(value) {
+    this.provider.style.setProperty("--corner-radius", value);
+  }
+}
+
+window.fastDesignProvider = FastDesignProvider

package/dist/bundled/fastbasetemplate/fast.css

@@ -0,0 +1,335 @@
+:root {
+    --track-width: 2;
+}
+
+html {
+    scrollbar-face-color: var(--neutral-fill-rest);
+    scrollbar-base-color: var(--neutral-fill-rest);
+    scrollbar-3dlight-color: var(--neutral-fill-rest);
+    scrollbar-highlight-color: var(--neutral-fill-rest);
+    scrollbar-track-color: var(--background-color);
+    scrollbar-arrow-color: var(--background-color);
+    scrollbar-shadow-color: var(--neutral-fill-rest);
+}
+
+::-webkit-scrollbar-button {
+    background-color: var(--neutral-fill-rest);
+}
+
+::-webkit-scrollbar-track {
+    background-color: var(--neutral-fill-rest);
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: var(--background-color);
+}
+
+::-webkit-scrollbar-thumb {
+    height: 50px;
+    background-color: var(--neutral-fill-rest);
+    border-radius: var(--corner-radius);
+}
+
+::-webkit-scrollbar-corner {
+    background-color: var(--neutral-fill-rest);
+}
+
+::-webkit-resizer {
+    background-color: var(--neutral-fill-rest);
+}
+
+body {
+    margin: 0px;
+    overflow: hidden;
+}
+
+#container {
+    padding: 0px;
+    width: 100vw;
+}
+
+#header{
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    height: 44px;
+}
+
+#header-items {
+    color: var(--neutral-foreground-rest);
+    overflow: hidden;
+    padding-left: 10px;
+    width: 100%;
+}
+
+.theme-toggle-icon {
+    height: 25px;
+    width: 25px;
+    margin-top: 5px;
+}
+
+#sidebar-button {
+    font-size: 30px;
+    cursor: pointer;
+    opacity: 0.9;
+}
+
+#sidebar-button:hover {
+    opacity: 1.0;
+}
+
+a.navbar-brand {
+    padding-left: 10px;
+    padding-right: 10px;
+    display: flex;
+    align-items: center;
+    font-size: 1.5em;
+}
+
+.app-header {
+    display: contents;
+    padding-left: 10px;
+    white-space: nowrap;
+}
+
+.title {
+    text-decoration: none;
+    text-decoration-line: none;
+    text-decoration-style: initial;
+    text-decoration-color: initial;
+    font-weight: 400;
+    font-size: var(--type-ramp-plus-3-font-size);
+    line-height: var(--type-ramp-plus-3-line-height);
+    white-space: nowrap;
+    margin-left: 0.5em;
+}
+
+img.app-logo {
+    font-size: 28px;
+    height: 30px;
+    max-width: inherit;
+}
+
+
+.bk-root .bk.loader.light::after {
+    background-color: var(--neutral-foreground-rest);
+}
+
+.pn-bar {
+    width: 20px;
+    height: 2px;
+    background-color: var(--neutral-foreground-rest);
+    margin: 4px 0;
+}
+
+#content {
+    height: calc(100vh - 64px);
+    margin: 0px;
+    width: 100vw;
+    display: flex;
+}
+
+#sidebar-button {
+    margin-left: 10px;
+    margin-right:  10px;
+}
+
+#sidebar {
+    transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
+    transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
+    height: calc(100vh - 76px);
+    overflow-y: scroll;
+    padding-left: 5px;
+    padding-right: 10px;
+    margin-right: 12px;
+}
+
+#main {
+    height: 100%;
+    overflow-y: scroll;
+    padding-right: 15px;
+    transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
+    width: 100%;
+}
+
+#sidebarCollapse {
+    background: none;
+    border: none;
+}
+
+.sidenav {
+    padding-top: 15px;
+    position: absolute;
+    overflow-y: scroll;
+}
+
+.sidenav fast-menu {
+    width: 100%;
+}
+
+.sidenav fast-menu a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    color: var(--neutral-foreground-rest);
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+    display: block;
+    transition: 0.3s;
+}
+
+.sidenav fast-menu a:hover {
+    color: #f1f1f1;
+}
+
+.sidenav fast-menu {
+    background-color: var(--background-color);
+    box-shadow: none;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+    .sidenav {padding-top: 15px;}
+    .sidenav a {font-size: 18px;}
+}
+
+.nav.flex-column {
+    padding-inline-start: 0px;
+    margin-block-start: 0;
+    margin-block-end: 0;
+}
+
+.pn-modal-close {
+    position: absolute;
+    right: 10%;
+    z-index: 100;
+}
+
+.pn-modal-close:hover,
+.pn-modal-close:focus {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.pn-busy-container {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    margin-left: auto;
+}
+
+.fullscreen-button {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 24px;
+    height: 24px;
+    z-index: 10000;
+    opacity: 0;
+    transition-delay: 0.5s;
+    transition: 0.5s;
+    cursor: pointer;
+}
+
+.fullscreen-button:hover {
+    transition: 0.5s;
+    opacity: 1;
+}
+
+.fullscreen-button:focus {
+    opacity: 1;
+}
+
+#header.shadow {
+    box-shadow: 2px 2px 10px silver;
+}
+
+#sidebar.shadow {
+    box-shadow: 2px 2px 10px silver;
+}
+
+#menu * {
+    width: 100%;
+}
+
+#menu ul {
+    padding-left: 0px;
+    padding-right: 35px;
+}
+
+#menu li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+#menu a {
+    border-radius: calc(var(--corner-radius) * 1px);
+    padding-left: 16px;
+    width: 100%;
+}
+
+#menu a:hover {
+    background: var(--accent-fill-hover);
+    border-radius: calc(var(--corner-radius) * 1px);
+}
+
+#menu a:active {
+    background: var(--accent-fill-checked);
+    border-radius: calc(var(--corner-radius) * 1px);
+}
+
+#menu a[disabled=""] {
+    pointer-events: none;
+    color: var(--neutral-stroke-rest)
+}
+
+h1, h2, h3, h4, h5, h6 {
+    line-height: 1.5em;
+}
+
+::-webkit-scrollbar { width: 12px; height: 12px;}
+#menu .menu-item-active a {
+    background: var(--accent-fill-active);
+    color: var(--accent-foreground-cut-rest);
+}
+
+.main-margin {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.main .card-margin.stretch_both, .main .card-margin.stretch_height {
+    height: calc(100% - 2em);
+}
+
+.main .card-margin {
+    margin: 1em 0;
+}
+
+.main a, .sidenav a {
+    color: var(--accent-foreground-rest);
+    text-decoration: underline;
+}
+
+.main a:hover, .sidenav a:hover {
+    color: var(--accent-foreground-hover);
+}
+
+fast-card {
+    margin: 0px;
+    overflow: auto;
+    padding: 1em;
+}
+
+#pn-Modal {
+    --dialog-width: 80%;
+    --dialog-height: auto;
+    --background-color: var(--neutral-layer-floating);
+}