@brightspace-ui/core 3.20.0 → 3.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
|
|
6
|
+
<meta charset="UTF-8">
|
|
7
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
8
|
+
<script type="module">
|
|
9
|
+
import '../../button/button-subtle.js';
|
|
10
|
+
import '../../demo/demo-page.js';
|
|
11
|
+
import '../test/popover.js';
|
|
12
|
+
</script>
|
|
13
|
+
</head>
|
|
14
|
+
|
|
15
|
+
<body unresolved>
|
|
16
|
+
|
|
17
|
+
<d2l-demo-page page-title="d2l-popover">
|
|
18
|
+
|
|
19
|
+
<h2>Popover</h2>
|
|
20
|
+
<d2l-demo-snippet>
|
|
21
|
+
<template>
|
|
22
|
+
<d2l-button-subtle id="open1" text="Open"></d2l-button-subtle>
|
|
23
|
+
<d2l-test-popover id="popover1" style="max-width: 400px;">
|
|
24
|
+
<div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
|
|
25
|
+
<d2l-button-subtle id="close1" text="Close"></d2l-button-subtle>
|
|
26
|
+
</d2l-test-popover>
|
|
27
|
+
<script>
|
|
28
|
+
const popover = document.querySelector('#popover1');
|
|
29
|
+
document.querySelector('#open1').addEventListener('click', () => popover.opened = true);
|
|
30
|
+
document.querySelector('#close1').addEventListener('click', () => popover.opened = false);
|
|
31
|
+
</script>
|
|
32
|
+
</template>
|
|
33
|
+
</d2l-demo-snippet>
|
|
34
|
+
|
|
35
|
+
<script>
|
|
36
|
+
document.addEventListener('d2l-popover-open', e => console.log(e.type, e));
|
|
37
|
+
document.addEventListener('d2l-popover-close', e => console.log(e.type, e));
|
|
38
|
+
</script>
|
|
39
|
+
</body>
|
|
40
|
+
|
|
41
|
+
</html>
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import '../colors/colors.js';
|
|
2
|
+
import { css, html } from 'lit';
|
|
3
|
+
|
|
4
|
+
const isSupported = ('popover' in HTMLElement.prototype);
|
|
5
|
+
|
|
6
|
+
// eslint-disable-next-line no-console
|
|
7
|
+
console.log('Popover', isSupported);
|
|
8
|
+
|
|
9
|
+
export const PopoverMixin = superclass => class extends superclass {
|
|
10
|
+
|
|
11
|
+
static get properties() {
|
|
12
|
+
return {
|
|
13
|
+
/**
|
|
14
|
+
* Whether the popover is open or not
|
|
15
|
+
* @type {boolean}
|
|
16
|
+
*/
|
|
17
|
+
opened: { type: Boolean, reflect: true },
|
|
18
|
+
_useNativePopover: { type: Boolean, reflect: true, attribute: 'popover' }
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
static get styles() {
|
|
23
|
+
return css`
|
|
24
|
+
:host {
|
|
25
|
+
--d2l-popover-default-background-color: #ffffff;
|
|
26
|
+
--d2l-popover-default-border-color: var(--d2l-color-mica);
|
|
27
|
+
--d2l-popover-default-border-radius: 0.3rem;
|
|
28
|
+
--d2l-popover-default-foreground-color: var(--d2l-color-ferrite);
|
|
29
|
+
--d2l-popover-default-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
|
|
30
|
+
background-color: transparent;
|
|
31
|
+
border: none;
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
color: var(--d2l-popover-foreground-color, var(--d2l-popover-default-foreground-color));
|
|
34
|
+
display: none;
|
|
35
|
+
height: fit-content;
|
|
36
|
+
inset: 0;
|
|
37
|
+
margin: auto;
|
|
38
|
+
overflow: visible;
|
|
39
|
+
padding: 0;
|
|
40
|
+
position: fixed;
|
|
41
|
+
width: fit-content;
|
|
42
|
+
}
|
|
43
|
+
:host([hidden]) {
|
|
44
|
+
display: none;
|
|
45
|
+
}
|
|
46
|
+
:host(:not([popover])) {
|
|
47
|
+
z-index: 998; /* position on top of floating buttons */
|
|
48
|
+
}
|
|
49
|
+
:host([opened]) {
|
|
50
|
+
display: inline-block;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.content {
|
|
54
|
+
background-color: var(--d2l-popover-background-color, var(--d2l-popover-default-background-color));
|
|
55
|
+
border: 1px solid var(--d2l-popover-border-color, var(--d2l-popover-default-border-color));
|
|
56
|
+
border-radius: var(--d2l-popover-border-radius, var(--d2l-popover-default-border-radius));
|
|
57
|
+
box-shadow: var(--d2l-popover-shadow, var(--d2l-popover-default-shadow));
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
}
|
|
60
|
+
`;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
constructor() {
|
|
64
|
+
super();
|
|
65
|
+
this.opened = false;
|
|
66
|
+
this._useNativePopover = isSupported;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
connectedCallback() {
|
|
70
|
+
super.connectedCallback();
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
disconnectedCallback() {
|
|
74
|
+
super.disconnectedCallback();
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
updated(changedProperties) {
|
|
78
|
+
super.updated(changedProperties);
|
|
79
|
+
if (changedProperties.has('opened')) {
|
|
80
|
+
|
|
81
|
+
if (this.opened) {
|
|
82
|
+
this.dispatchEvent(new CustomEvent('d2l-popover-open', { bubbles: true, composed: true }));
|
|
83
|
+
} else if (changedProperties.get('opened') !== undefined) {
|
|
84
|
+
this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
if (this._useNativePopover) {
|
|
88
|
+
if (this.opened) this.showPopover();
|
|
89
|
+
else this.hidePopover();
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
_renderPopover() {
|
|
96
|
+
return html`<div class="content"><slot></slot></div>`;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
};
|
package/custom-elements.json
CHANGED
|
@@ -10713,6 +10713,35 @@
|
|
|
10713
10713
|
}
|
|
10714
10714
|
]
|
|
10715
10715
|
},
|
|
10716
|
+
{
|
|
10717
|
+
"name": "d2l-test-popover",
|
|
10718
|
+
"path": "./components/popover/test/popover.js",
|
|
10719
|
+
"attributes": [
|
|
10720
|
+
{
|
|
10721
|
+
"name": "opened",
|
|
10722
|
+
"description": "Whether the popover is open or not",
|
|
10723
|
+
"type": "boolean",
|
|
10724
|
+
"default": "false"
|
|
10725
|
+
}
|
|
10726
|
+
],
|
|
10727
|
+
"properties": [
|
|
10728
|
+
{
|
|
10729
|
+
"name": "opened",
|
|
10730
|
+
"attribute": "opened",
|
|
10731
|
+
"description": "Whether the popover is open or not",
|
|
10732
|
+
"type": "boolean",
|
|
10733
|
+
"default": "false"
|
|
10734
|
+
}
|
|
10735
|
+
],
|
|
10736
|
+
"events": [
|
|
10737
|
+
{
|
|
10738
|
+
"name": "d2l-popover-open"
|
|
10739
|
+
},
|
|
10740
|
+
{
|
|
10741
|
+
"name": "d2l-popover-close"
|
|
10742
|
+
}
|
|
10743
|
+
]
|
|
10744
|
+
},
|
|
10716
10745
|
{
|
|
10717
10746
|
"name": "d2l-test-scroll-wrapper",
|
|
10718
10747
|
"path": "./components/scroll-wrapper/demo/scroll-wrapper-test.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.21.0",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|