@brightspace-ui/core 3.242.0 → 3.243.0

package/components/page/page-main.js

@@ -0,0 +1,24 @@
+import { css, html, LitElement } from 'lit';
+import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js';
+
+/**
+ * Component to be placed in the main default slot of d2l-page, providing a panel with optional header
+ * @slot - The main content of the main page panel
+ * @slot header-start - Optional start content of the main page header
+ * @slot header-end - Optional end content of the main page header
+ */
+class PageMain extends PagePanelMixin(LitElement) {
+
+	static styles = [pagePanelStyles, css`
+		.panel-header {
+			top: var(--d2l-page-header-height, 0);
+		}
+	`];
+
+	render() {
+		return this._renderPanel(html`<slot></slot>`);
+	}
+
+}
+
+customElements.define('d2l-page-main', PageMain);

package/components/page/page-panel-mixin.js

@@ -0,0 +1,74 @@
+import '../colors/colors.js';
+import { css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+
+export const pagePanelStyles = css`
+	.panel-header:not([hidden]) {
+		align-items: center;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	.panel-header {
+		background-color: white;
+		border-bottom: 1px solid var(--d2l-color-mica);
+		height: 70px;
+		overflow: hidden;
+		padding: 0 30px;
+		position: sticky;
+		top: 0;
+		z-index: 14; /* To be over sticky content of our core components, but not over the header shadow */
+	}
+
+	.header-start,
+	.header-end {
+		display: flex;
+		gap: 6px;
+	}
+
+	.panel {
+		padding: 30px;
+	}
+`;
+
+export const PagePanelMixin = superclass => class extends superclass {
+
+	static properties = {
+		_hasHeader: { state: true },
+		_slotVisibility: { state: true }
+	};
+
+	constructor() {
+		super();
+		this._hasHeader = false;
+		this._slotVisibility = {};
+	}
+
+	_renderPanel(content) {
+		const panelClasses = {
+			'panel': true,
+			'header-sticky': this._hasHeader
+		};
+		const header = html`
+			<div ?hidden="${!this._hasHeader}" class="panel-header">
+				<div class="header-start"><slot name="header-start" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>
+				<div class="header-end"><slot name="header-end" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>
+			</div>`;
+
+		return html`
+			<div>
+				${header}
+				<div class="${classMap(panelClasses)}">${content}</div>
+			</div>
+		`;
+	}
+
+	#handleSlotVisibilityChange(e) {
+		const key = e.target.name;
+		const nodes = e.target.assignedNodes();
+		this._slotVisibility = { ...this._slotVisibility, [key]: nodes.length !== 0 };
+
+		this._hasHeader = this._slotVisibility['header-start'] || this._slotVisibility['header-end'];
+	}
+
+};

package/components/page/page-side-nav.js

@@ -0,0 +1,19 @@
+import { html, LitElement } from 'lit';
+import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js';
+
+/**
+ * Component to be placed in the side-nav slot of d2l-page, providing a panel with optional header
+ * @slot - The main content of the side-nav page panel
+ * @slot header-start - Optional start content of the side-nav page header
+ * @slot header-end - Optional end content of the side-nav page header
+ */
+class PageSideNav extends PagePanelMixin(LitElement) {
+
+	static styles = [pagePanelStyles];
+
+	render() {
+		return this._renderPanel(html`<slot></slot>`);
+	}
+}
+
+customElements.define('d2l-page-side-nav', PageSideNav);

package/components/page/page-supporting.js

@@ -0,0 +1,19 @@
+import { html, LitElement } from 'lit';
+import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js';
+
+/**
+ * Component to be placed in the supporting slot of d2l-page, providing a panel with optional header
+ * @slot - The main content of the supporting page panel
+ * @slot header-start - Optional start content of the supporting page header
+ * @slot header-end - Optional end content of the supporting page header
+ */
+class PageSupporting extends PagePanelMixin(LitElement) {
+
+	static styles = [pagePanelStyles];
+
+	render() {
+		return this._renderPanel(html`<slot></slot>`);
+	}
+}
+
+customElements.define('d2l-page-supporting', PageSupporting);

package/components/page/page.js

@@ -44,10 +44,14 @@ class Page extends LocalizeCoreElement(LitElement) {
 			--d2l-page-footer-max-width: 100%;
 		}
 
+		.header {
+			position: relative;
+			z-index: 15; /* To be over sticky content of our core components */
+		}
+
 		.page.header-sticky .header {
 			position: sticky;
 			top: 0;
-			z-index: 15; /* To be over sticky content of our core components */
 		}
 
 		.content {

package/custom-elements.json

@@ -12270,8 +12270,8 @@
       "properties": [
         {
           "name": "properties",
-          "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasSideNavPanel: { type: BooleanConstructor; attribute: string; }; hasSupportingPanel: { ...; }; navType: { ...; }; widthType: { ...; }; _allowThreePanels: { ...; }; }",
-          "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasSideNavPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-panel\"},\"hasSupportingPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-panel\"},\"navType\":{\"type\":\"String\",\"attribute\":\"nav-type\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_allowThreePanels\":{\"state\":true}}"
+          "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasMainHeader: { type: BooleanConstructor; attribute: string; }; ... 7 more ...; _demoDialogOpened: { ...; }; }",
+          "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasMainHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-main-header\"},\"hasSideNavHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-header\"},\"hasSideNavPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-panel\"},\"hasSupportingHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-header\"},\"hasSupportingPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-panel\"},\"navType\":{\"type\":\"String\",\"attribute\":\"nav-type\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_allowThreePanels\":{\"state\":true},\"_demoDialogOpened\":{\"state\":true}}"
         },
         {
           "name": "styles",
@@ -12288,11 +12288,26 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "hasMainHeader",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hasSideNavHeader",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "hasSideNavPanel",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "hasSupportingHeader",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "hasSupportingPanel",
           "type": "boolean",
@@ -12310,6 +12325,99 @@
         }
       ]
     },
+    {
+      "name": "d2l-page-main",
+      "path": "./components/page/page-main.js",
+      "description": "Component to be placed in the main default slot of d2l-page, providing a panel with optional header",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"pagePanelStyles\",null]"
+        },
+        {
+          "name": "properties",
+          "type": "{ _hasHeader: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
+          "default": "{\"_hasHeader\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "The main content of the main page panel"
+        },
+        {
+          "name": "header-start",
+          "description": "Optional start content of the main page header"
+        },
+        {
+          "name": "header-end",
+          "description": "Optional end content of the main page header"
+        }
+      ]
+    },
+    {
+      "name": "d2l-page-side-nav",
+      "path": "./components/page/page-side-nav.js",
+      "description": "Component to be placed in the side-nav slot of d2l-page, providing a panel with optional header",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"pagePanelStyles\"]"
+        },
+        {
+          "name": "properties",
+          "type": "{ _hasHeader: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
+          "default": "{\"_hasHeader\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "The main content of the side-nav page panel"
+        },
+        {
+          "name": "header-start",
+          "description": "Optional start content of the side-nav page header"
+        },
+        {
+          "name": "header-end",
+          "description": "Optional end content of the side-nav page header"
+        }
+      ]
+    },
+    {
+      "name": "d2l-page-supporting",
+      "path": "./components/page/page-supporting.js",
+      "description": "Component to be placed in the supporting slot of d2l-page, providing a panel with optional header",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"pagePanelStyles\"]"
+        },
+        {
+          "name": "properties",
+          "type": "{ _hasHeader: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
+          "default": "{\"_hasHeader\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "The main content of the supporting page panel"
+        },
+        {
+          "name": "header-start",
+          "description": "Optional start content of the supporting page header"
+        },
+        {
+          "name": "header-end",
+          "description": "Optional end content of the supporting page header"
+        }
+      ]
+    },
     {
       "name": "d2l-page",
       "path": "./components/page/page.js",
@@ -12323,7 +12431,7 @@
         {
           "name": "styles",
           "type": "CSSResult",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding: 0.75rem 0;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding: 0.75rem 0;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "widthType",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.242.0",
+  "version": "3.243.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",