@brightspace-ui/core 3.155.10 → 3.156.1
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.
- package/components/progress/README.md +23 -0
- package/components/progress/demo/progress.html +87 -0
- package/components/progress/progress.js +126 -0
- package/components/typography/styles.js +6 -0
- package/custom-elements.json +70 -0
- package/package.json +1 -1
- package/templates/primary-secondary/primary-secondary.js +27 -55
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# Progress Bar
|
|
2
|
+
A progress bar communicates information relating to the progress of completion of a process or workflow.
|
|
3
|
+
|
|
4
|
+
## Progress Bar [d2l-progress]
|
|
5
|
+
|
|
6
|
+
<!-- docs: demo code properties name:d2l-progress sandboxTitle:'Progress Bar' autoSize:false -->
|
|
7
|
+
```html
|
|
8
|
+
<script type="module">
|
|
9
|
+
import '@brightspace-ui/core/components/progress/progress.js';
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<d2l-progress label="Progress" value="8" max="10"></d2l-progress>
|
|
13
|
+
```
|
|
14
|
+
<!-- docs: start hidden content -->
|
|
15
|
+
### Properties
|
|
16
|
+
|
|
17
|
+
| Property | Type | Description |
|
|
18
|
+
|---|---|---|
|
|
19
|
+
| `max` | Number | The maximum value of the progress bar |
|
|
20
|
+
| `value` | Number | The current value of the progress bar |
|
|
21
|
+
| `label` | String | Label for the progress bar |
|
|
22
|
+
| `label-hidden` | Boolean | Hide the bar's label |
|
|
23
|
+
| `value-hidden` | Boolean | Hide the bar's value |
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
|
+
<script type="module">
|
|
8
|
+
import '../../demo/demo-page.js';
|
|
9
|
+
|
|
10
|
+
import '../progress.js';
|
|
11
|
+
</script>
|
|
12
|
+
</head>
|
|
13
|
+
<body unresolved>
|
|
14
|
+
<d2l-demo-page page-title="d2l-progress">
|
|
15
|
+
|
|
16
|
+
<h2>Basic</h2>
|
|
17
|
+
|
|
18
|
+
<d2l-demo-snippet>
|
|
19
|
+
<template>
|
|
20
|
+
<d2l-progress label="Progress" value="8" max="10"></d2l-progress>
|
|
21
|
+
</template>
|
|
22
|
+
</d2l-demo-snippet>
|
|
23
|
+
|
|
24
|
+
<h2>Small</h2>
|
|
25
|
+
|
|
26
|
+
<d2l-demo-snippet>
|
|
27
|
+
<template>
|
|
28
|
+
<d2l-progress small label="Progress(small)" value="8" max="10"></d2l-progress>
|
|
29
|
+
</template>
|
|
30
|
+
</d2l-demo-snippet>
|
|
31
|
+
|
|
32
|
+
<h2>Complete</h2>
|
|
33
|
+
|
|
34
|
+
<d2l-demo-snippet>
|
|
35
|
+
<template>
|
|
36
|
+
<d2l-progress label="Progress" value="10" max="10"></d2l-progress>
|
|
37
|
+
</template>
|
|
38
|
+
</d2l-demo-snippet>
|
|
39
|
+
|
|
40
|
+
<h2>Label Hidden</h2>
|
|
41
|
+
|
|
42
|
+
<d2l-demo-snippet>
|
|
43
|
+
<template>
|
|
44
|
+
<d2l-progress label="Progress" label-hidden value="50"></d2l-progress>
|
|
45
|
+
</template>
|
|
46
|
+
</d2l-demo-snippet>
|
|
47
|
+
|
|
48
|
+
<h2>Value Hidden</h2>
|
|
49
|
+
|
|
50
|
+
<d2l-demo-snippet>
|
|
51
|
+
<template>
|
|
52
|
+
<d2l-progress label="Progress" value-hidden value="50"></d2l-progress>
|
|
53
|
+
</template>
|
|
54
|
+
</d2l-demo-snippet>
|
|
55
|
+
|
|
56
|
+
<h2>Both Hidden</h2>
|
|
57
|
+
|
|
58
|
+
<d2l-demo-snippet>
|
|
59
|
+
<template>
|
|
60
|
+
<d2l-progress label="Progress" value-hidden label-hidden small value="50"></d2l-progress>
|
|
61
|
+
</template>
|
|
62
|
+
</d2l-demo-snippet>
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
<h2>Animation</h2>
|
|
66
|
+
|
|
67
|
+
<d2l-demo-snippet>
|
|
68
|
+
<template>
|
|
69
|
+
<button>Start Animation</button>
|
|
70
|
+
<d2l-progress label="Progress"></d2l-progress>
|
|
71
|
+
<script data-demo-hide>
|
|
72
|
+
(demo => {
|
|
73
|
+
const button = demo.querySelector('button');
|
|
74
|
+
const progress = demo.querySelector('d2l-progress');
|
|
75
|
+
button.addEventListener('click', () => {
|
|
76
|
+
for (let i = 0; i < 5; i++) {
|
|
77
|
+
setTimeout(() => progress.value = i * 25, i * 500);
|
|
78
|
+
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
})(document.currentScript.parentNode);
|
|
82
|
+
</script>
|
|
83
|
+
</template>
|
|
84
|
+
</d2l-demo-snippet>
|
|
85
|
+
</d2l-demo-page>
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import '../../components/colors/colors.js';
|
|
2
|
+
import { bodyCompactStyles, bodySmallStyles } from '../typography/styles.js';
|
|
3
|
+
import { css, html, LitElement, unsafeCSS } from 'lit';
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
+
import { formatPercent } from '@brightspace-ui/intl';
|
|
6
|
+
import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
|
|
7
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
8
|
+
|
|
9
|
+
class Progress extends LitElement {
|
|
10
|
+
|
|
11
|
+
static get properties() {
|
|
12
|
+
return {
|
|
13
|
+
max: { type: Number, attribute: 'max' },
|
|
14
|
+
value: { type: Number },
|
|
15
|
+
label: { type: String },
|
|
16
|
+
labelHidden: { type: Boolean, attribute: 'label-hidden' },
|
|
17
|
+
valueHidden: { type: Boolean, attribute: 'value-hidden' },
|
|
18
|
+
small: { type: Boolean, reflect: true }
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
static get styles() {
|
|
23
|
+
return [bodySmallStyles, bodyCompactStyles, css`
|
|
24
|
+
:host {
|
|
25
|
+
display: block;
|
|
26
|
+
min-width: 6rem;
|
|
27
|
+
}
|
|
28
|
+
:host([hidden]) {
|
|
29
|
+
display: none;
|
|
30
|
+
}
|
|
31
|
+
.text {
|
|
32
|
+
display: flex;
|
|
33
|
+
justify-content: space-between;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
progress {
|
|
37
|
+
--d2l-progress-color: var(--d2l-color-celestine);
|
|
38
|
+
-moz-appearance: none;
|
|
39
|
+
-webkit-appearance: none;
|
|
40
|
+
appearance: none;
|
|
41
|
+
background-color: var(--d2l-color-gypsum);
|
|
42
|
+
border: none;
|
|
43
|
+
border-radius: 0.9rem;
|
|
44
|
+
box-shadow: inset 0 2px var(--d2l-color-mica);
|
|
45
|
+
display: block;
|
|
46
|
+
height: 0.9rem;
|
|
47
|
+
width: 100%;
|
|
48
|
+
}
|
|
49
|
+
:host([small]) progress {
|
|
50
|
+
height: 0.6rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
progress.complete {
|
|
54
|
+
--d2l-progress-color: var(--d2l-color-olivine);
|
|
55
|
+
}
|
|
56
|
+
/* this is necessary to avoid white bleed over rounded corners in chrome and safari */
|
|
57
|
+
progress::-webkit-progress-bar {
|
|
58
|
+
background-color: transparent;
|
|
59
|
+
}
|
|
60
|
+
`,
|
|
61
|
+
/* comma separating the selectors for these pseudo-elements causes them to break */
|
|
62
|
+
/* note: unable to get firefox to animate the width... seems animation is not implemented for progress in FF */
|
|
63
|
+
...['-webkit-progress-value', '-moz-progress-bar'].map(selector => css`
|
|
64
|
+
progress::${unsafeCSS(selector)} {
|
|
65
|
+
background-color: var(--d2l-progress-color);
|
|
66
|
+
border: 1px solid transparent;
|
|
67
|
+
border-radius: 0.9rem;
|
|
68
|
+
transition: width 0.25s ease-out;
|
|
69
|
+
}
|
|
70
|
+
progress.complete::${unsafeCSS(selector)} {
|
|
71
|
+
transition: none;
|
|
72
|
+
}
|
|
73
|
+
/* these are necessary to avoid showing border when value is 0 */
|
|
74
|
+
progress[value="0"]::${unsafeCSS(selector)} {
|
|
75
|
+
border: none;
|
|
76
|
+
}
|
|
77
|
+
@media (prefers-reduced-motion: reduce) {
|
|
78
|
+
progress::${unsafeCSS(selector)} {
|
|
79
|
+
transition: none;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
`)
|
|
83
|
+
];
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
constructor() {
|
|
87
|
+
super();
|
|
88
|
+
this.labelHidden = false;
|
|
89
|
+
this.max = 100;
|
|
90
|
+
this.value = 0;
|
|
91
|
+
this.valueHidden = false;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
render() {
|
|
95
|
+
const classes = {
|
|
96
|
+
'complete': this.value === this.max
|
|
97
|
+
};
|
|
98
|
+
const textClasses = {
|
|
99
|
+
'text': true,
|
|
100
|
+
'd2l-body-small': this.small,
|
|
101
|
+
'd2l-body-compact': !this.small
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
const percentage = Math.floor(100 * this.value / this.max) / 100;
|
|
105
|
+
const perecentageText = formatPercent(percentage);
|
|
106
|
+
|
|
107
|
+
return html`
|
|
108
|
+
<div class=${classMap(textClasses)} >
|
|
109
|
+
<span ?hidden=${this.labelHidden} id="label">${this.label}</span>
|
|
110
|
+
<span style="font-size: 0;">${getSeparator({ nonBreaking: true })}</span>
|
|
111
|
+
<span ?hidden=${this.valueHidden}>${perecentageText}</span>
|
|
112
|
+
</div>
|
|
113
|
+
<progress
|
|
114
|
+
aria-labelledby="${ifDefined(this.labelHidden ? undefined : 'label')}"
|
|
115
|
+
aria-label="${ifDefined(this.labelHidden ? this.label : undefined)}"
|
|
116
|
+
aria-valuetext="${perecentageText}"
|
|
117
|
+
class="${classMap(classes)}"
|
|
118
|
+
value="${this.value}"
|
|
119
|
+
max="${this.max}">
|
|
120
|
+
</progress>
|
|
121
|
+
`;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
customElements.define('d2l-progress', Progress);
|
|
@@ -504,15 +504,21 @@ export const fontFacesCss = `@font-face {
|
|
|
504
504
|
export const baseTypographyStyles = css`
|
|
505
505
|
${unsafeCSS(fontFacesCss)}
|
|
506
506
|
html {
|
|
507
|
+
--d2l-cursor-resize-inline-end: e-resize;
|
|
508
|
+
--d2l-cursor-resize-inline-start: w-resize;
|
|
507
509
|
--d2l-document-direction: ltr;
|
|
508
510
|
--d2l-inline-end: right;
|
|
509
511
|
--d2l-inline-start: left;
|
|
512
|
+
--d2l-length-factor: 1;
|
|
510
513
|
--d2l-mirror-transform: none;
|
|
511
514
|
}
|
|
512
515
|
html[dir="rtl"] {
|
|
516
|
+
--d2l-cursor-resize-inline-end: w-resize;
|
|
517
|
+
--d2l-cursor-resize-inline-start: e-resize;
|
|
513
518
|
--d2l-document-direction: rtl;
|
|
514
519
|
--d2l-inline-end: left;
|
|
515
520
|
--d2l-inline-start: right;
|
|
521
|
+
--d2l-length-factor: -1;
|
|
516
522
|
--d2l-mirror-transform: scale(-1, 1);
|
|
517
523
|
}
|
|
518
524
|
|
package/custom-elements.json
CHANGED
|
@@ -11749,6 +11749,76 @@
|
|
|
11749
11749
|
}
|
|
11750
11750
|
]
|
|
11751
11751
|
},
|
|
11752
|
+
{
|
|
11753
|
+
"name": "d2l-progress",
|
|
11754
|
+
"path": "./components/progress/progress.js",
|
|
11755
|
+
"attributes": [
|
|
11756
|
+
{
|
|
11757
|
+
"name": "label",
|
|
11758
|
+
"type": "string"
|
|
11759
|
+
},
|
|
11760
|
+
{
|
|
11761
|
+
"name": "small",
|
|
11762
|
+
"type": "boolean"
|
|
11763
|
+
},
|
|
11764
|
+
{
|
|
11765
|
+
"name": "label-hidden",
|
|
11766
|
+
"type": "boolean",
|
|
11767
|
+
"default": "false"
|
|
11768
|
+
},
|
|
11769
|
+
{
|
|
11770
|
+
"name": "max",
|
|
11771
|
+
"type": "number",
|
|
11772
|
+
"default": "100"
|
|
11773
|
+
},
|
|
11774
|
+
{
|
|
11775
|
+
"name": "value",
|
|
11776
|
+
"type": "number",
|
|
11777
|
+
"default": "0"
|
|
11778
|
+
},
|
|
11779
|
+
{
|
|
11780
|
+
"name": "value-hidden",
|
|
11781
|
+
"type": "boolean",
|
|
11782
|
+
"default": "false"
|
|
11783
|
+
}
|
|
11784
|
+
],
|
|
11785
|
+
"properties": [
|
|
11786
|
+
{
|
|
11787
|
+
"name": "label",
|
|
11788
|
+
"attribute": "label",
|
|
11789
|
+
"type": "string"
|
|
11790
|
+
},
|
|
11791
|
+
{
|
|
11792
|
+
"name": "small",
|
|
11793
|
+
"attribute": "small",
|
|
11794
|
+
"type": "boolean"
|
|
11795
|
+
},
|
|
11796
|
+
{
|
|
11797
|
+
"name": "labelHidden",
|
|
11798
|
+
"attribute": "label-hidden",
|
|
11799
|
+
"type": "boolean",
|
|
11800
|
+
"default": "false"
|
|
11801
|
+
},
|
|
11802
|
+
{
|
|
11803
|
+
"name": "max",
|
|
11804
|
+
"attribute": "max",
|
|
11805
|
+
"type": "number",
|
|
11806
|
+
"default": "100"
|
|
11807
|
+
},
|
|
11808
|
+
{
|
|
11809
|
+
"name": "value",
|
|
11810
|
+
"attribute": "value",
|
|
11811
|
+
"type": "number",
|
|
11812
|
+
"default": "0"
|
|
11813
|
+
},
|
|
11814
|
+
{
|
|
11815
|
+
"name": "valueHidden",
|
|
11816
|
+
"attribute": "value-hidden",
|
|
11817
|
+
"type": "boolean",
|
|
11818
|
+
"default": "false"
|
|
11819
|
+
}
|
|
11820
|
+
]
|
|
11821
|
+
},
|
|
11752
11822
|
{
|
|
11753
11823
|
"name": "d2l-test-scroll-wrapper",
|
|
11754
11824
|
"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.156.1",
|
|
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",
|
|
@@ -8,7 +8,6 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
8
8
|
import { formatPercent } from '@brightspace-ui/intl';
|
|
9
9
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
10
10
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
11
|
-
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
12
11
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
13
12
|
|
|
14
13
|
const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
@@ -28,6 +27,10 @@ const keyCodes = Object.freeze({
|
|
|
28
27
|
SPACE: 32
|
|
29
28
|
});
|
|
30
29
|
|
|
30
|
+
function isRtl() {
|
|
31
|
+
return document.documentElement.getAttribute('dir') === 'rtl';
|
|
32
|
+
}
|
|
33
|
+
|
|
31
34
|
function isMobile() {
|
|
32
35
|
return matchMedia('only screen and (max-width: 767px)').matches;
|
|
33
36
|
}
|
|
@@ -49,7 +52,6 @@ class Resizer {
|
|
|
49
52
|
this.contentBounds = null;
|
|
50
53
|
this.isCollapsed = false;
|
|
51
54
|
this.isMobile = false;
|
|
52
|
-
this.isRtl = false;
|
|
53
55
|
this.panelSize = 0;
|
|
54
56
|
this.secondaryFirst = false;
|
|
55
57
|
this._wasCollapsed = false;
|
|
@@ -126,7 +128,7 @@ class DesktopKeyboardResizer extends Resizer {
|
|
|
126
128
|
e.preventDefault();
|
|
127
129
|
|
|
128
130
|
// The direction of the container is flipped if exactly one of isRtl and secondaryFirst is true
|
|
129
|
-
const isFlipped =
|
|
131
|
+
const isFlipped = isRtl() ^ this.secondaryFirst;
|
|
130
132
|
const direction = e.keyCode === keyCodes.LEFT && !isFlipped
|
|
131
133
|
|| e.keyCode === keyCodes.RIGHT && isFlipped ? 1 : -1;
|
|
132
134
|
let secondaryWidth;
|
|
@@ -196,7 +198,7 @@ class DesktopMouseResizer extends Resizer {
|
|
|
196
198
|
_computeContentX(clientX) {
|
|
197
199
|
const x = clientX - this.contentRect.left;
|
|
198
200
|
// The direction of the container is flipped if exactly one of isRtl and secondaryFirst is true
|
|
199
|
-
return
|
|
201
|
+
return isRtl() ^ this.secondaryFirst ? x : this.contentRect.width - x;
|
|
200
202
|
}
|
|
201
203
|
|
|
202
204
|
_onMouseDown(e) {
|
|
@@ -546,7 +548,7 @@ class MobileTouchResizer extends Resizer {
|
|
|
546
548
|
* @fires d2l-template-primary-secondary-resize-start - Dispatched when a user begins moving the divider.
|
|
547
549
|
* @fires d2l-template-primary-secondary-resize-end - Dispatched when a user finishes moving the divider.
|
|
548
550
|
*/
|
|
549
|
-
class TemplatePrimarySecondary extends
|
|
551
|
+
class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
|
|
550
552
|
|
|
551
553
|
static get properties() {
|
|
552
554
|
return {
|
|
@@ -673,13 +675,8 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
|
|
|
673
675
|
:host([resizable]) [data-is-collapsed] aside {
|
|
674
676
|
visibility: hidden;
|
|
675
677
|
}
|
|
676
|
-
:host([resizable]:not([
|
|
677
|
-
|
|
678
|
-
float: left;
|
|
679
|
-
}
|
|
680
|
-
:host([resizable][dir="rtl"]:not([secondary-first])) aside,
|
|
681
|
-
:host([resizable]:not([dir="rtl"])[secondary-first]) aside {
|
|
682
|
-
float: right;
|
|
678
|
+
:host([resizable]:not([secondary-first])) aside {
|
|
679
|
+
float: inline-start;
|
|
683
680
|
}
|
|
684
681
|
.d2l-template-primary-secondary-divider,
|
|
685
682
|
.d2l-template-primary-secondary-divider-not-resizable {
|
|
@@ -701,26 +698,22 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
|
|
|
701
698
|
cursor: ew-resize;
|
|
702
699
|
width: 0.45rem;
|
|
703
700
|
}
|
|
704
|
-
:host([resizable]) [data-is-
|
|
705
|
-
|
|
706
|
-
cursor: w-resize;
|
|
701
|
+
:host([resizable]) [data-is-expanded] .d2l-template-primary-secondary-divider {
|
|
702
|
+
cursor: var(--d2l-cursor-resize-inline-end, e-resize);
|
|
707
703
|
}
|
|
708
|
-
:host([resizable]) [data-is-
|
|
709
|
-
|
|
710
|
-
cursor: e-resize;
|
|
704
|
+
:host([resizable]) [data-is-collapsed] .d2l-template-primary-secondary-divider {
|
|
705
|
+
cursor: var(--d2l-cursor-resize-inline-start, w-resize);
|
|
711
706
|
}
|
|
712
707
|
:host([resizable]) .d2l-template-primary-secondary-divider-handle {
|
|
713
708
|
align-items: center;
|
|
714
709
|
display: flex;
|
|
715
710
|
justify-content: center;
|
|
716
711
|
}
|
|
717
|
-
:host([resizable]) [data-background-shading="secondary"] .d2l-template-primary-secondary-divider
|
|
718
|
-
|
|
719
|
-
box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.15);
|
|
712
|
+
:host([resizable]) [data-background-shading="secondary"] .d2l-template-primary-secondary-divider {
|
|
713
|
+
box-shadow: calc(1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);
|
|
720
714
|
}
|
|
721
|
-
:host([resizable]) [data-background-shading="primary"] .d2l-template-primary-secondary-divider
|
|
722
|
-
|
|
723
|
-
box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.15);
|
|
715
|
+
:host([resizable]) [data-background-shading="primary"] .d2l-template-primary-secondary-divider {
|
|
716
|
+
box-shadow: calc(-1px * var(--d2l-length-factor, 1)) 0 0 0 rgba(0, 0, 0, 0.15);
|
|
724
717
|
}
|
|
725
718
|
.d2l-template-primary-secondary-divider-handle-desktop {
|
|
726
719
|
align-items: center;
|
|
@@ -735,10 +728,10 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
|
|
|
735
728
|
position: absolute;
|
|
736
729
|
}
|
|
737
730
|
.d2l-template-primary-secondary-divider-handle-left {
|
|
738
|
-
|
|
731
|
+
inset-inline-start: -1rem;
|
|
739
732
|
}
|
|
740
733
|
.d2l-template-primary-secondary-divider-handle-right {
|
|
741
|
-
|
|
734
|
+
inset-inline-end: -1rem;
|
|
742
735
|
}
|
|
743
736
|
.d2l-template-primary-secondary-divider-handle-line {
|
|
744
737
|
display: flex;
|
|
@@ -758,12 +751,8 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
|
|
|
758
751
|
.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle-left {
|
|
759
752
|
display: block;
|
|
760
753
|
}
|
|
761
|
-
:host(:not([
|
|
762
|
-
:host([
|
|
763
|
-
display: none;
|
|
764
|
-
}
|
|
765
|
-
:host(:not([dir="rtl"])[secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right,
|
|
766
|
-
:host([dir="rtl"]:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {
|
|
754
|
+
:host(:not([secondary-first])) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-left,
|
|
755
|
+
:host([secondary-first]) [data-is-expanded] .d2l-template-primary-secondary-divider-handle-right {
|
|
767
756
|
display: none;
|
|
768
757
|
}
|
|
769
758
|
d2l-icon {
|
|
@@ -781,14 +770,11 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
|
|
|
781
770
|
}
|
|
782
771
|
|
|
783
772
|
:host([resizable]) .d2l-template-primary-secondary-divider:focus,
|
|
784
|
-
:host([resizable]) .d2l-template-primary-secondary-divider:hover
|
|
785
|
-
:host([resizable][dir="rtl"]) .d2l-template-primary-secondary-divider:focus,
|
|
786
|
-
:host([resizable][dir="rtl"]) .d2l-template-primary-secondary-divider:hover {
|
|
773
|
+
:host([resizable]) .d2l-template-primary-secondary-divider:hover {
|
|
787
774
|
background-color: var(--d2l-color-mica);
|
|
788
775
|
box-shadow: none;
|
|
789
776
|
}
|
|
790
|
-
:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())}
|
|
791
|
-
:host([resizable][dir="rtl"]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {
|
|
777
|
+
:host([resizable]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} {
|
|
792
778
|
background-color: var(--d2l-color-celestine);
|
|
793
779
|
}
|
|
794
780
|
.d2l-template-primary-secondary-divider:focus .d2l-template-primary-secondary-divider-handle-line::before,
|
|
@@ -897,15 +883,10 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
|
|
|
897
883
|
border-radius: 0;
|
|
898
884
|
bottom: 0.1rem;
|
|
899
885
|
display: block;
|
|
900
|
-
|
|
886
|
+
inset-inline-end: calc(17px + 0.2rem);
|
|
901
887
|
overflow: hidden;
|
|
902
|
-
right: calc(17px + 0.2rem);
|
|
903
888
|
top: auto;
|
|
904
889
|
}
|
|
905
|
-
:host([dir="rtl"]) .d2l-template-primary-secondary-divider-handle {
|
|
906
|
-
left: calc(17px + 0.2rem);
|
|
907
|
-
right: auto;
|
|
908
|
-
}
|
|
909
890
|
.d2l-template-primary-secondary-divider-handle-mobile {
|
|
910
891
|
align-items: center;
|
|
911
892
|
background-color: var(--d2l-color-celestine);
|
|
@@ -928,13 +909,9 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
|
|
|
928
909
|
.d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {
|
|
929
910
|
box-shadow: none;
|
|
930
911
|
height: 1.2rem;
|
|
931
|
-
|
|
912
|
+
inset-inline-end: 17px;
|
|
932
913
|
width: 2.6rem;
|
|
933
914
|
}
|
|
934
|
-
:host([dir="rtl"]) .d2l-template-primary-secondary-divider:${unsafeCSS(getFocusPseudoClass())} .d2l-template-primary-secondary-divider-handle {
|
|
935
|
-
left: 17px;
|
|
936
|
-
right: auto;
|
|
937
|
-
}
|
|
938
915
|
d2l-icon {
|
|
939
916
|
color: white;
|
|
940
917
|
display: block;
|
|
@@ -1038,13 +1015,8 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
|
|
|
1038
1015
|
}
|
|
1039
1016
|
|
|
1040
1017
|
firstUpdated(changedProperties) {
|
|
1041
|
-
|
|
1042
1018
|
super.firstUpdated(changedProperties);
|
|
1043
1019
|
|
|
1044
|
-
const isRtl = this.getAttribute('dir') === 'rtl';
|
|
1045
|
-
for (const resizer of this._resizers) {
|
|
1046
|
-
resizer.isRtl = isRtl;
|
|
1047
|
-
}
|
|
1048
1020
|
const contentArea = this.shadowRoot.querySelector('.d2l-template-primary-secondary-content');
|
|
1049
1021
|
this._resizeObserver = new ResizeObserver(this._onContentResize);
|
|
1050
1022
|
this._resizeObserver.observe(contentArea);
|
|
@@ -1290,13 +1262,13 @@ class TemplatePrimarySecondary extends RtlMixin(LocalizeCoreElement(LitElement))
|
|
|
1290
1262
|
<div class="d2l-template-primary-secondary-divider-handle" @click=${this._onHandleTap} @mousedown=${this._onHandleTapStart}>
|
|
1291
1263
|
<div class="d2l-template-primary-secondary-divider-handle-desktop">
|
|
1292
1264
|
<d2l-icon-custom size="tier1" class="d2l-template-primary-secondary-divider-handle-left">
|
|
1293
|
-
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
|
|
1265
|
+
<svg width="18" height="18" mirror-in-rtl xmlns="http://www.w3.org/2000/svg">
|
|
1294
1266
|
<path transform="rotate(90 9.004714965820312,9.000227928161623)" d="m13.708,6.29a1.006,1.006 0 0 0 -0.708,-0.29l-7.995,0a1,1 0 0 0 -0.705,1.71l4,4a1.013,1.013 0 0 0 1.42,0l4,-4a1.01,1.01 0 0 0 -0.013,-1.42l0.001,0z" fill="#494c4e"/>
|
|
1295
1267
|
</svg>
|
|
1296
1268
|
</d2l-icon-custom>
|
|
1297
1269
|
<div class="d2l-template-primary-secondary-divider-handle-line"></div>
|
|
1298
1270
|
<d2l-icon-custom size="tier1" class="d2l-template-primary-secondary-divider-handle-right">
|
|
1299
|
-
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
|
|
1271
|
+
<svg width="18" height="18" mirror-in-rtl xmlns="http://www.w3.org/2000/svg">
|
|
1300
1272
|
<path transform="rotate(-90 9.004714965820314,9.000227928161621)" d="m13.708,6.29a1.006,1.006 0 0 0 -0.708,-0.29l-7.995,0a1,1 0 0 0 -0.705,1.71l4,4a1.013,1.013 0 0 0 1.42,0l4,-4a1.01,1.01 0 0 0 -0.013,-1.42l0.001,0z" fill="#494c4e"/>
|
|
1301
1273
|
</svg>
|
|
1302
1274
|
</d2l-icon-custom>
|