@bryntum/demo-resources 7.1.1

package/README.md

@@ -0,0 +1,78 @@
+# @bryntum/demo-resources
+
+This package contains fonts, images, and SCSS files used by Bryntum demos for styling headers and providing
+resources. It is not needed in the final end-user application; however, it can serve as a model or basis for the
+application's actual resources.
+
+## Installation
+
+If you ever need it, run the installation command in the root of your application folder.
+The specific command depends on the package manager used by your application.
+
+The following commands are most frequently used:
+
+Install using `npm`:
+```
+
+npm install @bryntum/demo-resources
+```
+
+Install using `yarn`:
+```
+
+yarn add @bryntum/demo-resources
+```
+
+## Importing in your application
+
+For Angular:
+
+```scss
+@import '@bryntum/demo-resources/scss/example-webpack.scss';
+```
+
+For React + Vite or Vue 3 + Vite:
+
+```scss
+@import '@bryntum/demo-resources/scss/example.scss';
+```
+
+## License and copyright
+
+### Images
+
+Images are from https://randomuser.me/photos.
+
+*A copy of their copyright notice:*
+
+**Copyright Notice**
+
+All randomly generated photos were hand-picked from the authorized section of UI Faces. Please visit the UI Faces FAQ for
+more information regarding how you can use these faces.
+
+*From the UI Faces FAQ:*
+
+**What can I use these faces for?**
+
+Only mockups. Unless they're listed in the authorized section, those awesome folks allow their faces to be used on live
+products.
+
+### Fonts
+
+[Poppins font license](https://fonts.google.com/specimen/Poppins/about):
+
+These fonts are licensed under the
+[Open Font License](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL).
+
+You can use them freely in your products and projects - print or digital, commercial or otherwise. However, you can't sell
+the fonts on their own.
+
+This isn't legal advice; please consider consulting a lawyer and see the full license for all details.
+
+### Styles (SCSS files)
+
+These files are part of commercial software that requires a paid license.
+Please visit [Bryntum Licensing](https://bryntum.com/licensing/) for the full text of the license.
+
+Copyright © 2009-2026, Bryntum
+All rights reserved.

package/fonts/_poppins-webpack.scss

@@ -0,0 +1,77 @@
+/**
+ * SCSS file for Poppins font
+ * The ~ symbol in url is specific to certain module bundlers like Webpack
+ */
+
+/* poppins-100 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 100;
+    src: local(''),
+    url('~@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-100.woff2') format('woff2')
+}
+/* poppins-200 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 200;
+    src: local(''),
+    url('~@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-200.woff2') format('woff2')
+}
+/* poppins-300 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    src: local(''),
+    url('~@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-300.woff2') format('woff2')
+}
+/* poppins-regular - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    src: local(''),
+    url('~@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-regular.woff2') format('woff2')
+}
+/* poppins-500 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    src: local(''),
+    url('~@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-500.woff2') format('woff2')
+}
+/* poppins-600 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: local(''),
+    url('~@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-600.woff2') format('woff2')
+}
+/* poppins-700 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 700;
+    src: local(''),
+    url('~@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-700.woff2') format('woff2')
+}
+/* poppins-800 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 800;
+    src: local(''),
+    url('~@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-800.woff2') format('woff2')
+}
+/* poppins-900 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 900;
+    src: local(''),
+    url('~@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-900.woff2') format('woff2')
+}

package/fonts/_poppins.scss

@@ -0,0 +1,76 @@
+/**
+ * SCSS file for Poppins font
+ */
+
+/* poppins-100 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 100;
+    src: local(''),
+    url('@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-100.woff2') format('woff2')
+}
+/* poppins-200 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 200;
+    src: local(''),
+    url('@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-200.woff2') format('woff2')
+}
+/* poppins-300 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    src: local(''),
+    url('@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-300.woff2') format('woff2')
+}
+/* poppins-regular - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    src: local(''),
+    url('@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-regular.woff2') format('woff2')
+}
+/* poppins-500 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    src: local(''),
+    url('@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-500.woff2') format('woff2')
+}
+/* poppins-600 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 600;
+    src: local(''),
+    url('@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-600.woff2') format('woff2')
+}
+/* poppins-700 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 700;
+    src: local(''),
+    url('@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-700.woff2') format('woff2')
+}
+/* poppins-800 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 800;
+    src: local(''),
+    url('@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-800.woff2') format('woff2')
+}
+/* poppins-900 - latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 900;
+    src: local(''),
+    url('@bryntum/demo-resources/fonts/poppins/poppins-v20-latin-900.woff2') format('woff2')
+}

package/images/bryntum-symbol-blue.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 354.9 144.52" xmlns="http://www.w3.org/2000/svg"><g fill="#0076f8"><path d="m305.63 144.52c-12.47 0-23.53-4.83-31.58-13.28v11.06h-25.54v-142.3h26.75v48.58c7.84-7.64 18.5-12.07 30.37-12.07 27.15 0 49.28 23.33 49.28 54.1s-22.12 53.9-49.28 53.9zm-3.82-83.47c-14.68 0-26.55 13.27-26.55 29.77s11.87 29.16 26.55 29.16 26.55-12.67 26.55-29.16-11.87-29.77-26.55-29.77z"/><path d="m148.02 0h74.01v29.78h-74.01z"/><path d="m0 56.26h222.03v29.78h-222.03z"/><path d="m74.01 112.52h148.02v29.6h-148.02z"/></g></svg>

package/images/bryntum-symbol-white.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 354.9 144.52" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m305.63 144.52c-12.47 0-23.53-4.83-31.58-13.28v11.06h-25.54v-142.3h26.75v48.58c7.84-7.64 18.5-12.07 30.37-12.07 27.15 0 49.28 23.33 49.28 54.1s-22.12 53.9-49.28 53.9zm-3.82-83.47c-14.68 0-26.55 13.27-26.55 29.77s11.87 29.16 26.55 29.16 26.55-12.67 26.55-29.16-11.87-29.77-26.55-29.77z"/><path d="m148.02 0h74.01v29.78h-74.01z"/><path d="m0 56.26h222.03v29.78h-222.03z"/><path d="m74.01 112.52h148.02v29.6h-148.02z"/></g></svg>

package/images/transparent-users/license.md

@@ -0,0 +1,3 @@
+Avatars from unsplash.com and pexels.com, their licenses can be found at:
+https://unsplash.com/license
+https://www.pexels.com/license/

package/index.js

@@ -0,0 +1,3 @@
+/**
+ * Blank for now
+ */

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@bryntum/demo-resources",
+  "version": "7.1.1",
+  "description": "The resources used by Bryntum examples",
+  "keywords": [
+    "bryntum",
+    "gantt",
+    "project",
+    "grid",
+    "scheduler",
+    "demo",
+    "example",
+    "resource"
+  ],
+  "author": {
+    "name": "Bryntum",
+    "url": "https://bryntum.com",
+    "email": "info@bryntum.com"
+  },
+  "license": "Commercial",
+  "homepage": "https://bryntum.com/products/grid/examples",
+  "bugs": "https://github.com/bryntum/support/issues",
+  "main": "index.js",
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "types": ""
+}

package/scss/_common.scss

@@ -0,0 +1,145 @@
+/**
+ * Common example scss file
+ */
+
+// global styling
+html,
+body {
+    height   : 100%;
+    width    : 100%;
+    overflow : hidden;
+}
+
+@keyframes background-animation {
+    0% {
+        background-position : bottom, right, bottom right;
+        background-size     : 50% 50%, 75% 75%, 100% 100%;
+    }
+    50% {
+        background-position : top, left, bottom right;
+        background-size     : 70% 70%, 40% 40%, 100% 100%;
+    }
+    100% {
+        background-position : bottom, right, bottom right;
+        background-size     : 50% 50%, 75% 75%, 100% 100%;
+    }
+}
+
+body {
+    margin              : 0;
+    padding             : 0;
+    font-size           : 14px;
+    font-family         : Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
+    display             : flex;
+    flex-flow           : column nowrap;
+    align-items         : stretch;
+
+    background-color    : var(--b-neutral-97);
+    background-image    : radial-gradient(circle, rgba(108, 207, 250, .3), transparent 70%, transparent 100%), radial-gradient(circle, rgba(78, 34, 191, .1), transparent 70%, transparent 100%), radial-gradient(circle at right bottom, color-mix(in srgb, var(--b-primary, #1e88e5), transparent 90%), transparent 70%, transparent 100%);
+    background-position : bottom, right, bottom right;
+    background-size     : 50% 50%, 75% 75%, 100% 100%;
+    background-repeat   : repeat repeat;
+    //animation           : background-animation 90s ease-in-out infinite;
+
+    /* Space around component, except in thumbs */
+    &:where(:not(.b-screenshot, .b-hide-header)) {
+        #container, #app, app-root, #root {
+            .demo-app,
+            > .b-split-container,
+            > .b-container.b-outer:where(:not(.no-demo-app-style, .b-demo-code-editor)) {
+                margin        : 0 1em 1em;
+                box-shadow    : 0.2rem 0.2rem 1.2rem rgb(0 0 0 / 5%);
+                overflow      : clip;
+                transition    : background var(--b-default-transition-duration), border var(--b-default-transition-duration), max-width var(--b-default-transition-duration);
+
+                background    : var(--b-neutral-100);
+                border-radius : var(--b-widget-border-radius-large);
+
+                .b-theme-visby-dark &,
+                .b-theme-visby-light & {
+                    border : 1px solid var(--app-border-color, var(--b-grid-cell-border-color, var(--b-neutral-80)));
+                }
+
+                .b-theme-high-contrast-dark &,
+                .b-theme-high-contrast-light & {
+                    border : 1px solid var(--b-border-1);
+                }
+            }
+
+            .demo-header {
+                margin-inline : 1em;
+                border-bottom : none;
+            }
+        }
+
+        @media screen and (min-width : 1000px) {
+            #container, #app, app-root, #root {
+                .demo-app,
+                > .b-split-container,
+                > .b-container.b-outer:where(:not(.no-demo-app-style, .b-demo-code-editor)) {
+                    margin        : 1em 4em 4em;
+
+                    &:where(:first-of-type:not(:last-child)):has(~ .b-container) {
+                        margin-top    : 1em;
+                        margin-bottom : 2em;
+                    }
+
+                    &:where(:not(:first-of-type)):has(~ .b-container) {
+                        margin-top    : 2em;
+                    }
+                }
+
+                .demo-header {
+                    margin-top    : 1em;
+                    margin-inline : 4em;
+                }
+            }
+        }
+    }
+}
+
+/* For Angular using web component ViewEncapsulation.ShadowDom */
+:host {
+    @media screen and (height > 768px) and (min-width : 800px) {
+        .demo-header {
+            margin-top    : 1em;
+            margin-inline : 4em;
+            border-bottom : none;
+        }
+
+        .demo-app {
+            display        : flex;
+            flex-direction : column;
+
+            margin         : 1em 4em 4em;
+            box-shadow     : 0.2rem 0.2rem 1.2rem rgb(0 0 0 / 5%);
+            overflow       : clip;
+            transition     : background var(--b-default-transition-duration, .2s), border var(--b-default-transition-duration, .2s), max-width var(--b-default-transition-duration, .2s);
+
+            background     : var(--b-neutral-100, #fff);
+            border-radius  : var(--b-widget-border-radius-large, 2em);
+        }
+    }
+}
+
+#container, #app, #root {
+    position       : relative;
+    flex           : 1 1 100%;
+    min-height     : 0;
+    display        : flex;
+    flex-direction : column;
+    align-items    : stretch;
+    transform      : translate(0, 0);
+    top            : 0;
+    left           : 0;
+}
+
+.b-react-scheduler-container,
+.b-vue-scheduler-container,
+.b-angular-scheduler-container {
+    flex : 1;
+}
+
+.demo-app {
+    flex : 1;
+}

package/scss/_header.scss

@@ -0,0 +1,91 @@
+/**
+ * common styles for header
+ */
+
+@media (max-width : 800px) {
+    #trial-button {
+        display : none;
+    }
+}
+
+.demo-header {
+    display                    : flex;
+    padding-inline             : 0.7em 0;
+    padding-block              : 0;
+
+    transition                 : background-color var(--b-default-transition-duration), padding var(--b-default-transition-duration), font-size .1s;
+    border-bottom              : 1px solid var(--b-border-7);
+
+    /* DemoHeader.js gets this from being a widget, match here */
+    &, * {
+        box-sizing : border-box;
+    }
+
+    a {
+        text-decoration : none;
+    }
+
+    .b-icon {
+        font-size : 1.1em;
+    }
+
+    .title {
+        margin-inline-end : auto;
+        display           : flex;
+        align-items       : center;
+        white-space       : nowrap;
+        color             : var(--b-text-1);
+
+        &:focus-visible {
+            outline-offset : var(--b-button-focus-outline-offset);
+            outline        : var(--b-button-focus-outline-width) solid var(--b-widget-focus-outline-color);
+            border-radius  : var(--b-widget-border-radius);
+        }
+
+        h1 {
+            display     : flex;
+            align-items : center;
+            margin      : 0;
+            font-weight : 600;
+            font-size   : 1.1em;
+        }
+
+        svg {
+            margin-inline-end  : .75em;
+            height             : 2em;
+            width              : 2em;
+            background         : #0076f8;
+            padding-inline-end : .2em;
+            border-radius      : 5px;
+
+            g {
+                fill : #fff;
+            }
+        }
+    }
+
+    .b-toolbar {
+        font-size              : .9em;
+
+        --b-toolbar-padding    : 0.7em;
+        --b-toolbar-background : transparent;
+    }
+
+    #tools {
+        display          : flex;
+        align-items      : center;
+        background-color : transparent;
+        font-size        : .9em;
+        gap              : 0.5em;
+        padding          : 0.7em;
+    }
+
+    .b-button-text {
+        --b-button-type-text-hover-background : var(--b-neutral-100);
+    }
+
+    #trial-button,
+    .b-button-filled {
+        margin-inline-end : 1em;
+    }
+}

package/scss/_toolbar.scss

@@ -0,0 +1,28 @@
+/**
+ * Toolbar sass file
+ */
+.demo-toolbar {
+    display          : flex;
+    align-items      : center;
+
+    border-bottom    : 1px solid var(--b-border-7);
+    background-color : var(--b-grid-background);
+    color            : var(--b-neutral-30);
+    padding          : var(--b-toolbar-padding);
+
+    .spacer {
+        flex : 1;
+    }
+
+    &.align-right {
+        justify-content : flex-end;
+    }
+
+    &.align-justify {
+        justify-content : space-between;
+    }
+
+    > *:not(:first-child) {
+        margin-left : 0.6em;
+    }
+}

package/scss/example-webpack.scss

@@ -0,0 +1,7 @@
+/**
+ * Shared scss file
+ */
+@import '../fonts/poppins-webpack';
+@import 'header';
+@import 'toolbar';
+@import 'common';

package/scss/example.scss

@@ -0,0 +1,7 @@
+/**
+ * Shared scss file
+ */
+@import '../fonts/poppins';
+@import 'header';
+@import 'toolbar';
+@import 'common';