@brightspace-ui/core 3.190.0 → 3.191.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/breadcrumbs/breadcrumbs.js +2 -8
- package/components/collapsible-panel/collapsible-panel-summary-item.js +1 -9
- package/components/filter/filter.js +2 -16
- package/components/link/link.js +1 -9
- package/components/list/demo/list-layout.html +67 -7
- package/components/list/list-item-content.js +0 -11
- package/components/list/list-item-generic-layout.js +17 -5
- package/components/list/list-item-mixin.js +56 -3
- package/components/menu/menu-item-return.js +1 -10
- package/components/menu/menu-item-styles.js +1 -12
- package/components/more-less/more-less.js +12 -32
- package/components/tabs/tab-internal.js +1 -8
- package/components/tabs/tab.js +1 -8
- package/components/tabs/tabs.js +2 -8
- package/custom-elements.json +72 -0
- package/package.json +1 -1
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import './breadcrumb.js';
|
|
2
2
|
import { css, html, LitElement } from 'lit';
|
|
3
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
4
3
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
5
4
|
import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
|
|
6
5
|
|
|
7
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
8
|
-
|
|
9
6
|
/**
|
|
10
7
|
* Help users understand where they are within the application, and provide useful clues about how the space is organized. They also provide a convenient navigation mechanism.
|
|
11
8
|
* @slot - Breadcrumb items
|
|
@@ -25,15 +22,12 @@ class Breadcrumbs extends LocalizeCoreElement(LitElement) {
|
|
|
25
22
|
static get styles() {
|
|
26
23
|
return css`
|
|
27
24
|
:host {
|
|
28
|
-
|
|
25
|
+
clip-path: rect(-1em 100% calc(100% + 1em) -1em);
|
|
29
26
|
display: block;
|
|
30
27
|
font-size: 0.7rem;
|
|
31
28
|
line-height: 1.05rem;
|
|
32
29
|
position: relative;
|
|
33
|
-
${
|
|
34
|
-
overflow: hidden;
|
|
35
|
-
white-space: nowrap;
|
|
36
|
-
`}
|
|
30
|
+
${overflowEllipsisDeclarations}
|
|
37
31
|
}
|
|
38
32
|
:host([hidden]) {
|
|
39
33
|
display: none;
|
|
@@ -2,13 +2,10 @@ import '../colors/colors.js';
|
|
|
2
2
|
import { css, html, LitElement } from 'lit';
|
|
3
3
|
import { bodySmallStyles } from '../typography/styles.js';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
6
5
|
import { getOverflowDeclarations } from '../../helpers/overflow.js';
|
|
7
6
|
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
8
7
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
9
8
|
|
|
10
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
11
|
-
|
|
12
9
|
/**
|
|
13
10
|
* A component for a "summary item" child component that describes the content in a collapsible panel.
|
|
14
11
|
*/
|
|
@@ -42,12 +39,7 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
|
|
|
42
39
|
line-height: 1.2rem;
|
|
43
40
|
}
|
|
44
41
|
p.truncate {
|
|
45
|
-
${
|
|
46
|
-
-webkit-box-orient: vertical;
|
|
47
|
-
display: -webkit-box;
|
|
48
|
-
overflow: hidden;
|
|
49
|
-
overflow-wrap: anywhere;
|
|
50
|
-
`}
|
|
42
|
+
${getOverflowDeclarations({ lines: 1 })}
|
|
51
43
|
}
|
|
52
44
|
`];
|
|
53
45
|
}
|
|
@@ -28,7 +28,6 @@ import { announce } from '../../helpers/announce.js';
|
|
|
28
28
|
import { classMap } from 'lit/directives/class-map.js';
|
|
29
29
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
|
30
30
|
import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
|
|
31
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
32
31
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
33
32
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
34
33
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
@@ -39,8 +38,6 @@ const ESCAPE_KEY_CODE = 27;
|
|
|
39
38
|
const FILTER_CONTENT_CLASS = 'd2l-filter-dropdown-content';
|
|
40
39
|
const SET_DIMENSION_ID_PREFIX = 'list-';
|
|
41
40
|
|
|
42
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
43
|
-
|
|
44
41
|
let hasDisplayedKeyboardTooltip = false;
|
|
45
42
|
|
|
46
43
|
export function resetHasDisplayedKeyboardTooltip() {
|
|
@@ -141,11 +138,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
|
|
|
141
138
|
flex-grow: 1;
|
|
142
139
|
padding-inline-end: calc(2rem + 2px);
|
|
143
140
|
text-align: center;
|
|
144
|
-
${
|
|
145
|
-
overflow: hidden;
|
|
146
|
-
text-overflow: ellipsis;
|
|
147
|
-
white-space: nowrap;
|
|
148
|
-
`}
|
|
141
|
+
${overflowEllipsisDeclarations}
|
|
149
142
|
}
|
|
150
143
|
|
|
151
144
|
.d2l-filter-dimension-set-value {
|
|
@@ -154,7 +147,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
|
|
|
154
147
|
display: flex;
|
|
155
148
|
gap: 0.45rem;
|
|
156
149
|
line-height: unset;
|
|
157
|
-
${overflowClipEnabled ? css`` : css`overflow: hidden;`}
|
|
158
150
|
}
|
|
159
151
|
.d2l-filter-dimension-set-value d2l-icon {
|
|
160
152
|
flex-shrink: 0;
|
|
@@ -169,13 +161,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
|
|
|
169
161
|
|
|
170
162
|
.d2l-filter-dimension-set-value-text {
|
|
171
163
|
hyphens: auto;
|
|
172
|
-
${
|
|
173
|
-
-webkit-box-orient: vertical;
|
|
174
|
-
display: -webkit-box;
|
|
175
|
-
-webkit-line-clamp: 2;
|
|
176
|
-
overflow: hidden;
|
|
177
|
-
overflow-wrap: anywhere;
|
|
178
|
-
`}
|
|
164
|
+
${getOverflowDeclarations({ lines: 2 })}
|
|
179
165
|
}
|
|
180
166
|
|
|
181
167
|
d2l-list-item[selection-disabled] .d2l-filter-dimension-set-value,
|
package/components/link/link.js
CHANGED
|
@@ -6,15 +6,12 @@ import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../hel
|
|
|
6
6
|
import { _generateLinkStyles } from './link-styles.js';
|
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
|
8
8
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
|
9
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
10
9
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
11
10
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
12
11
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
13
12
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
14
13
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
15
14
|
|
|
16
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
17
|
-
|
|
18
15
|
export const linkStyles = _generateLinkStyles('.d2l-link', true);
|
|
19
16
|
|
|
20
17
|
/**
|
|
@@ -98,12 +95,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
|
|
|
98
95
|
display: flex;
|
|
99
96
|
}
|
|
100
97
|
a span.truncate {
|
|
101
|
-
${
|
|
102
|
-
-webkit-box-orient: vertical;
|
|
103
|
-
display: -webkit-box;
|
|
104
|
-
overflow: hidden;
|
|
105
|
-
overflow-wrap: anywhere;
|
|
106
|
-
`}
|
|
98
|
+
${getOverflowDeclarations({ lines: 1 })}
|
|
107
99
|
}
|
|
108
100
|
a span.truncate-one {
|
|
109
101
|
${overflowEllipsisDeclarations}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
7
|
<script type="module">
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
|
+
import '../../button/button-icon.js';
|
|
9
10
|
import '../../button/button-subtle.js';
|
|
10
11
|
import '../../button/button-toggle.js';
|
|
11
12
|
import '../../icons/icon.js';
|
|
@@ -127,21 +128,60 @@
|
|
|
127
128
|
</d2l-list-item-content>
|
|
128
129
|
</d2l-list-item>
|
|
129
130
|
<d2l-list-item label="item 5">
|
|
130
|
-
<
|
|
131
|
+
<div slot="illustration" style="background-color: var(--d2l-color-olivine); color: white;">I'm a <div></div>
|
|
131
132
|
<d2l-list-item-content>
|
|
132
133
|
<div>Identify categories of physical activities</div>
|
|
133
134
|
<div slot="secondary">Secondary Information</div>
|
|
134
135
|
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
135
136
|
</d2l-list-item-content>
|
|
136
137
|
</d2l-list-item>
|
|
137
|
-
|
|
138
|
-
|
|
138
|
+
</d2l-list>
|
|
139
|
+
<script data-demo-hide>
|
|
140
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
141
|
+
</script>
|
|
142
|
+
</template>
|
|
143
|
+
</d2l-demo-snippet>
|
|
144
|
+
|
|
145
|
+
<h2>Selectable</h2>
|
|
146
|
+
|
|
147
|
+
<d2l-demo-snippet>
|
|
148
|
+
<template>
|
|
149
|
+
<d2l-button-toggle pressed>
|
|
150
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
151
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
152
|
+
</d2l-button-toggle>
|
|
153
|
+
<d2l-list layout="tiles">
|
|
154
|
+
<d2l-list-item label="item 1" key="1" selectable tile-header>
|
|
155
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
139
156
|
<d2l-list-item-content>
|
|
140
157
|
<div>Identify categories of physical activities</div>
|
|
141
158
|
<div slot="secondary">Secondary Information</div>
|
|
142
159
|
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
143
160
|
</d2l-list-item-content>
|
|
144
161
|
</d2l-list-item>
|
|
162
|
+
<d2l-list-item label="item 2" key="2" selectable>
|
|
163
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
|
|
164
|
+
<d2l-list-item-content>
|
|
165
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
166
|
+
<div slot="secondary">Secondary Information</div>
|
|
167
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
168
|
+
</d2l-list-item-content>
|
|
169
|
+
</d2l-list-item>
|
|
170
|
+
<d2l-list-item label="item 3" key="3" selectable>
|
|
171
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
|
|
172
|
+
<d2l-list-item-content>
|
|
173
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
174
|
+
<div slot="secondary">Secondary Information</div>
|
|
175
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
176
|
+
</d2l-list-item-content>
|
|
177
|
+
</d2l-list-item>
|
|
178
|
+
<d2l-list-item label="item 4" key="4" selectable tile-header>
|
|
179
|
+
<d2l-list-item-content>
|
|
180
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
181
|
+
<div slot="secondary">Secondary Information</div>
|
|
182
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
183
|
+
</d2l-list-item-content>
|
|
184
|
+
</d2l-list-item>
|
|
145
185
|
</d2l-list>
|
|
146
186
|
<script data-demo-hide>
|
|
147
187
|
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
@@ -149,7 +189,7 @@
|
|
|
149
189
|
</template>
|
|
150
190
|
</d2l-demo-snippet>
|
|
151
191
|
|
|
152
|
-
<h2>
|
|
192
|
+
<h2>Actions</h2>
|
|
153
193
|
|
|
154
194
|
<d2l-demo-snippet>
|
|
155
195
|
<template>
|
|
@@ -158,29 +198,49 @@
|
|
|
158
198
|
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
159
199
|
</d2l-button-toggle>
|
|
160
200
|
<d2l-list layout="tiles">
|
|
161
|
-
<d2l-list-item label="item 1" key="1"
|
|
201
|
+
<d2l-list-item label="item 1" key="1" tile-header>
|
|
162
202
|
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
163
203
|
<d2l-list-item-content>
|
|
164
204
|
<div>Identify categories of physical activities</div>
|
|
165
205
|
<div slot="secondary">Secondary Information</div>
|
|
166
206
|
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
167
207
|
</d2l-list-item-content>
|
|
208
|
+
<div slot="actions">
|
|
209
|
+
<d2l-button-icon text="More" icon="tier1:more"></d2l-button-icon>
|
|
210
|
+
</div>
|
|
168
211
|
</d2l-list-item>
|
|
169
|
-
<d2l-list-item label="item 2" key="2"
|
|
212
|
+
<d2l-list-item label="item 2" key="2">
|
|
170
213
|
<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
|
|
171
214
|
<d2l-list-item-content>
|
|
172
215
|
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
173
216
|
<div slot="secondary">Secondary Information</div>
|
|
174
217
|
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
175
218
|
</d2l-list-item-content>
|
|
219
|
+
<div slot="actions">
|
|
220
|
+
<d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
|
|
221
|
+
</div>
|
|
176
222
|
</d2l-list-item>
|
|
177
|
-
<d2l-list-item label="item 3" key="3"
|
|
223
|
+
<d2l-list-item label="item 3" key="3">
|
|
178
224
|
<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
|
|
179
225
|
<d2l-list-item-content>
|
|
180
226
|
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
181
227
|
<div slot="secondary">Secondary Information</div>
|
|
182
228
|
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
183
229
|
</d2l-list-item-content>
|
|
230
|
+
<div slot="actions">
|
|
231
|
+
<d2l-button-icon text="More" icon="tier1:more" translucent visible-on-ancestor></d2l-button-icon>
|
|
232
|
+
</div>
|
|
233
|
+
</d2l-list-item>
|
|
234
|
+
<d2l-list-item label="item 4" key="4" tile-header selectable>
|
|
235
|
+
<d2l-list-item-content>
|
|
236
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
237
|
+
<div slot="secondary">Secondary Information</div>
|
|
238
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
239
|
+
</d2l-list-item-content>
|
|
240
|
+
<div slot="actions">
|
|
241
|
+
<d2l-button-icon text="Pin" icon="tier1:pin-filled"></d2l-button-icon>
|
|
242
|
+
<d2l-button-icon text="More" icon="tier1:more"></d2l-button-icon>
|
|
243
|
+
</div>
|
|
184
244
|
</d2l-list-item>
|
|
185
245
|
</d2l-list>
|
|
186
246
|
<script data-demo-hide>
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { bodyCompactStyles, bodySmallStyles } from '../typography/styles.js';
|
|
3
3
|
import { css, html, LitElement } from 'lit';
|
|
4
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
5
|
-
|
|
6
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
7
4
|
|
|
8
5
|
/**
|
|
9
6
|
* A component for consistent layout of primary and secondary text in a list item.
|
|
@@ -36,18 +33,10 @@ class ListItemContent extends LitElement {
|
|
|
36
33
|
|
|
37
34
|
.d2l-list-item-content-text-secondary {
|
|
38
35
|
color: var(--d2l-list-item-content-text-secondary-color, var(--d2l-color-tungsten));
|
|
39
|
-
${overflowClipEnabled ? css`` : css`
|
|
40
|
-
margin: 0;
|
|
41
|
-
overflow: hidden;
|
|
42
|
-
`}
|
|
43
36
|
}
|
|
44
37
|
|
|
45
38
|
.d2l-list-item-content-text-supporting-info {
|
|
46
39
|
color: var(--d2l-color-ferrite);
|
|
47
|
-
${overflowClipEnabled ? css`` : css`
|
|
48
|
-
margin: 0;
|
|
49
|
-
overflow: hidden;
|
|
50
|
-
`}
|
|
51
40
|
}
|
|
52
41
|
|
|
53
42
|
.d2l-list-item-content-text-secondary ::slotted(*),
|
|
@@ -220,19 +220,25 @@ class ListItemGenericLayout extends LitElement {
|
|
|
220
220
|
:host([layout="tile"]) {
|
|
221
221
|
grid-template-columns:
|
|
222
222
|
[start control-start] minmax(0, min-content)
|
|
223
|
-
[control-end] minmax(0, auto)
|
|
224
|
-
[end];
|
|
223
|
+
[control-end actions-start] minmax(0, auto)
|
|
224
|
+
[actions-end end];
|
|
225
225
|
grid-template-rows:
|
|
226
226
|
[start header-start] minmax(0, min-content)
|
|
227
227
|
[header-end content-start] auto
|
|
228
228
|
[content-end end];
|
|
229
229
|
height: 100%;
|
|
230
230
|
}
|
|
231
|
+
|
|
232
|
+
:host([layout="tile"]) ::slotted([slot="header"]) {
|
|
233
|
+
grid-column: start / end;
|
|
234
|
+
grid-row: header-start / header-end;
|
|
235
|
+
}
|
|
236
|
+
|
|
231
237
|
:host([layout="tile"]) ::slotted([slot="content"]),
|
|
232
238
|
:host([layout="tile"]) ::slotted([slot="content-action"]),
|
|
233
239
|
:host([layout="tile"]) ::slotted([slot="control-action"]) {
|
|
234
240
|
grid-column: start / end;
|
|
235
|
-
grid-row: start / end;
|
|
241
|
+
grid-row: content-start / end;
|
|
236
242
|
}
|
|
237
243
|
:host([layout="tile"]) ::slotted([slot="outside-control-container"]) {
|
|
238
244
|
grid-column: start / end;
|
|
@@ -240,11 +246,17 @@ class ListItemGenericLayout extends LitElement {
|
|
|
240
246
|
}
|
|
241
247
|
:host([layout="tile"]) ::slotted([slot="control"]) {
|
|
242
248
|
grid-column: control-start / control-end;
|
|
243
|
-
grid-row: start;
|
|
249
|
+
grid-row: start / start;
|
|
244
250
|
pointer-events: all;
|
|
245
251
|
width: unset;
|
|
246
252
|
}
|
|
247
253
|
|
|
254
|
+
:host([layout="tile"]) ::slotted([slot="actions"]) {
|
|
255
|
+
grid-column: actions-start / actions-end;
|
|
256
|
+
grid-row: start / start;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
:host(:not([layout="tile"])) slot[name="header"],
|
|
248
260
|
:host([layout="tile"]) slot[name="add-top"],
|
|
249
261
|
:host([layout="tile"]) slot[name="control-container"],
|
|
250
262
|
:host([layout="tile"]) slot[name="before-content"],
|
|
@@ -252,7 +264,6 @@ class ListItemGenericLayout extends LitElement {
|
|
|
252
264
|
:host([layout="tile"]) slot[name="outside-control-action"],
|
|
253
265
|
:host([layout="tile"]) slot[name="color-indicator"],
|
|
254
266
|
:host([layout="tile"]) slot[name="expand-collapse"],
|
|
255
|
-
:host([layout="tile"]) slot[name="actions"],
|
|
256
267
|
:host([layout="tile"]) slot[name="drop-target"],
|
|
257
268
|
:host([layout="tile"]) slot[name="nested"],
|
|
258
269
|
:host([layout="tile"]) slot[name="add"] {
|
|
@@ -293,6 +304,7 @@ class ListItemGenericLayout extends LitElement {
|
|
|
293
304
|
|
|
294
305
|
<slot name="control-container"></slot>
|
|
295
306
|
<slot name="outside-control-container"></slot>
|
|
307
|
+
<slot name="header"></slot>
|
|
296
308
|
<slot name="before-content"></slot>
|
|
297
309
|
|
|
298
310
|
<slot name="content-action" class="d2l-cell" data-cell-num="6"></slot>
|
|
@@ -102,6 +102,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
102
102
|
* @type {'normal'|'none'}
|
|
103
103
|
*/
|
|
104
104
|
paddingType: { type: String, attribute: 'padding-type' },
|
|
105
|
+
/**
|
|
106
|
+
* Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
|
|
107
|
+
* @type {boolean}
|
|
108
|
+
*/
|
|
109
|
+
tileHeader: { type: Boolean, reflect: true, attribute: 'tile-header' },
|
|
105
110
|
_addButtonText: { state: true },
|
|
106
111
|
_displayKeyboardTooltip: { type: Boolean },
|
|
107
112
|
_hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
|
|
@@ -459,6 +464,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
459
464
|
max-height: unset;
|
|
460
465
|
max-width: calc(100% + 1.1rem);
|
|
461
466
|
}
|
|
467
|
+
:host([layout="tile"][tile-header]) [slot="content"] ::slotted([slot="illustration"]),
|
|
468
|
+
:host([layout="tile"][tile-header]) .d2l-list-item-illustration > * {
|
|
469
|
+
border-radius: 0;
|
|
470
|
+
margin-block: -0.6rem 0.6rem;
|
|
471
|
+
}
|
|
462
472
|
|
|
463
473
|
:host([layout="tile"]) [slot="content"] ::slotted(d2l-icon[slot="illustration"]),
|
|
464
474
|
:host([layout="tile"]) .d2l-list-item-illustration > d2l-icon[slot="illustration"] {
|
|
@@ -513,14 +523,16 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
513
523
|
}
|
|
514
524
|
|
|
515
525
|
:host([layout="tile"]) d2l-selection-input {
|
|
526
|
+
margin: 0;
|
|
527
|
+
}
|
|
528
|
+
:host([layout="tile"]:not([tile-header])) d2l-selection-input {
|
|
516
529
|
--d2l-input-checkbox-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
|
|
517
530
|
--d2l-input-radio-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
|
|
518
531
|
border: 2px solid transparent;
|
|
519
532
|
border-radius: 8px;
|
|
520
|
-
margin: 0;
|
|
521
533
|
padding: 3px;
|
|
522
534
|
}
|
|
523
|
-
:host([layout="tile"][_focusing]) d2l-selection-input {
|
|
535
|
+
:host([layout="tile"][_focusing]:not([tile-header])) d2l-selection-input {
|
|
524
536
|
border: 2px solid white;
|
|
525
537
|
}
|
|
526
538
|
:host([layout="tile"]) [slot="control"] {
|
|
@@ -529,14 +541,52 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
529
541
|
box-sizing: border-box;
|
|
530
542
|
margin: 0.5rem;
|
|
531
543
|
outline: 2px solid transparent;
|
|
544
|
+
position: absolute;
|
|
532
545
|
}
|
|
533
|
-
:host([layout="tile"][_focusing]) [slot="control"] {
|
|
546
|
+
:host([layout="tile"][_focusing]:not([tile-header])) [slot="control"] {
|
|
534
547
|
background-color: var(--d2l-color-celestine);
|
|
535
548
|
outline-color: var(--d2l-color-celestine-minus-1);
|
|
536
549
|
}
|
|
537
550
|
:host([layout="tile"][skeleton]) [slot="control"] {
|
|
538
551
|
background-color: transparent;
|
|
539
552
|
}
|
|
553
|
+
:host([layout="tile"][tile-header]) [slot="control"] {
|
|
554
|
+
background-color: transparent;
|
|
555
|
+
display: inline-flex;
|
|
556
|
+
margin: 0.4rem 0.6rem;
|
|
557
|
+
outline: none;
|
|
558
|
+
position: static;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
:host([layout="tile"]) [slot="actions"] {
|
|
562
|
+
--d2l-button-icon-min-height: 1.5rem;
|
|
563
|
+
--d2l-button-icon-min-width: 1.5rem;
|
|
564
|
+
--d2l-button-icon-border-radius: 4px;
|
|
565
|
+
margin-block: 0.6rem;
|
|
566
|
+
margin-inline-end: 0.6rem;
|
|
567
|
+
padding: 0;
|
|
568
|
+
position: absolute;
|
|
569
|
+
}
|
|
570
|
+
:host([layout="tile"][tile-header]) [slot="actions"] {
|
|
571
|
+
--d2l-button-icon-background-color-hover: var(--d2l-color-mica);
|
|
572
|
+
margin: 0.25rem 0.6rem;
|
|
573
|
+
position: static;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
:host([layout="tile"][tile-header]) [slot="header"] {
|
|
577
|
+
background-color: var(--d2l-color-gypsum);
|
|
578
|
+
border-end-end-radius: 0;
|
|
579
|
+
border-end-start-radius: 0;
|
|
580
|
+
border-start-end-radius: 5px;
|
|
581
|
+
border-start-start-radius: 5px;
|
|
582
|
+
margin-block-start: 1px;
|
|
583
|
+
margin-inline: 1px;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
:host([layout="tile"]) .d2l-list-item-content-extend-separators ::slotted([slot="actions"]),
|
|
587
|
+
:host([layout="tile"]) .d2l-list-item-content-extend-separators .d2l-list-item-actions > * {
|
|
588
|
+
margin-inline: 0;
|
|
589
|
+
}
|
|
540
590
|
|
|
541
591
|
`];
|
|
542
592
|
|
|
@@ -547,8 +597,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
547
597
|
constructor() {
|
|
548
598
|
super();
|
|
549
599
|
this.first = false;
|
|
600
|
+
this.isVisibleOnAncestorTarget = true;
|
|
550
601
|
this.noPrimaryAction = false;
|
|
551
602
|
this.paddingType = 'normal';
|
|
603
|
+
this.tileHeader = false;
|
|
552
604
|
this._addButtonTopId = getUniqueId();
|
|
553
605
|
this._contentId = getUniqueId();
|
|
554
606
|
this._displayKeyboardTooltip = false;
|
|
@@ -853,6 +905,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
853
905
|
</d2l-button-add>
|
|
854
906
|
</div>
|
|
855
907
|
` : nothing}
|
|
908
|
+
<div slot="header"></div>
|
|
856
909
|
<div slot="outside-control-container" class="${classMap(outsideClasses)}"></div>
|
|
857
910
|
<div slot="before-content"></div>
|
|
858
911
|
${this._renderDropTarget()}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import '../icons/icon.js';
|
|
2
2
|
import { css, html, LitElement } from 'lit';
|
|
3
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
4
3
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
5
4
|
import { MenuItemMixin } from './menu-item-mixin.js';
|
|
6
5
|
import { menuItemStyles } from './menu-item-styles.js';
|
|
7
6
|
import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
|
|
8
7
|
|
|
9
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
10
|
-
|
|
11
8
|
class MenuItemReturn extends LocalizeCoreElement(MenuItemMixin(LitElement)) {
|
|
12
9
|
|
|
13
10
|
static get styles() {
|
|
@@ -21,13 +18,7 @@ class MenuItemReturn extends LocalizeCoreElement(MenuItemMixin(LitElement)) {
|
|
|
21
18
|
span {
|
|
22
19
|
flex: auto;
|
|
23
20
|
line-height: 1rem;
|
|
24
|
-
${
|
|
25
|
-
overflow-x: hidden;
|
|
26
|
-
overflow-y: hidden;
|
|
27
|
-
text-decoration: none;
|
|
28
|
-
text-overflow: ellipsis;
|
|
29
|
-
white-space: nowrap;
|
|
30
|
-
`}
|
|
21
|
+
${overflowEllipsisDeclarations}
|
|
31
22
|
}
|
|
32
23
|
|
|
33
24
|
d2l-icon {
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, unsafeCSS } from 'lit';
|
|
3
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
4
3
|
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
5
4
|
import { getOverflowDeclarations } from '../../helpers/overflow.js';
|
|
6
5
|
|
|
7
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
8
|
-
|
|
9
6
|
export const menuItemStyles = css`
|
|
10
7
|
:host {
|
|
11
8
|
--d2l-menu-item-lines: 2;
|
|
@@ -57,15 +54,7 @@ export const menuItemStyles = css`
|
|
|
57
54
|
.d2l-menu-item-text {
|
|
58
55
|
flex: auto;
|
|
59
56
|
line-height: 1rem;
|
|
60
|
-
${
|
|
61
|
-
-webkit-box-orient: vertical;
|
|
62
|
-
display: -webkit-box;
|
|
63
|
-
-webkit-line-clamp: var(--d2l-menu-item-lines, 2);
|
|
64
|
-
overflow-wrap: anywhere;
|
|
65
|
-
overflow-x: hidden;
|
|
66
|
-
overflow-y: hidden;
|
|
67
|
-
white-space: normal;
|
|
68
|
-
`}
|
|
57
|
+
${getOverflowDeclarations({ lines: 'var(--d2l-menu-item-lines, 2)' })}
|
|
69
58
|
}
|
|
70
59
|
|
|
71
60
|
.d2l-menu-item-supporting {
|
|
@@ -12,8 +12,6 @@ import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
|
12
12
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
13
13
|
|
|
14
14
|
const transitionDur = matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 400;
|
|
15
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
16
|
-
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
17
15
|
|
|
18
16
|
/**
|
|
19
17
|
* A component used to minimize the display of long content, while providing a way to reveal the full content.
|
|
@@ -54,18 +52,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
54
52
|
static get styles() {
|
|
55
53
|
return css`
|
|
56
54
|
:host {
|
|
57
|
-
|
|
55
|
+
display: flow-root;
|
|
58
56
|
}
|
|
59
57
|
|
|
60
58
|
.d2l-more-less-content {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
${overflowHiddenDeclarations}
|
|
66
|
-
` : css`
|
|
67
|
-
overflow: hidden;
|
|
68
|
-
`}
|
|
59
|
+
display: flow-root;
|
|
60
|
+
margin: -1em -1em 0;
|
|
61
|
+
padding: 1em 1em 0;
|
|
62
|
+
${overflowHiddenDeclarations}
|
|
69
63
|
}
|
|
70
64
|
.d2l-more-less-transition {
|
|
71
65
|
transition: max-height ${transitionDur}ms cubic-bezier(0, 0.7, 0.5, 1);
|
|
@@ -244,28 +238,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
|
|
|
244
238
|
|
|
245
239
|
const target = e.composedPath()[0] || e.target;
|
|
246
240
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
const { y: targetY, height: targetHeight } = target.getBoundingClientRect();
|
|
241
|
+
const em = parseInt(getComputedStyle(this.__content).getPropertyValue('font-size'));
|
|
242
|
+
const { y: contentY, height: contentHeight } = this.__content.getBoundingClientRect();
|
|
243
|
+
const { y: targetY, height: targetHeight } = target.getBoundingClientRect();
|
|
251
244
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
}
|
|
257
|
-
} else {
|
|
258
|
-
if (isSafari) {
|
|
259
|
-
target.scrollIntoViewIfNeeded?.();
|
|
260
|
-
setTimeout(() => this.__content.scrollTo({ top: 0, behavior: 'instant' }), 1);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
if (this.__content.scrollTop) {
|
|
264
|
-
this.__content.scrollTo({ top: 0, behavior: 'instant' });
|
|
265
|
-
this.__expand();
|
|
266
|
-
this.__autoExpanded = true;
|
|
267
|
-
await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
|
|
268
|
-
}
|
|
245
|
+
if (targetY + targetHeight > contentY + contentHeight - em) {
|
|
246
|
+
this.__expand();
|
|
247
|
+
this.__autoExpanded = true;
|
|
248
|
+
await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
|
|
269
249
|
}
|
|
270
250
|
}
|
|
271
251
|
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, html, LitElement } from 'lit';
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
5
4
|
import { getFocusRingStyles } from '../../helpers/focus.js';
|
|
6
5
|
import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
|
|
7
6
|
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
8
7
|
|
|
9
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
10
|
-
|
|
11
8
|
const keyCodes = {
|
|
12
9
|
ENTER: 13,
|
|
13
10
|
SPACE: 32
|
|
@@ -39,11 +36,7 @@ class Tab extends SkeletonMixin(LitElement) {
|
|
|
39
36
|
--d2l-focus-ring-offset: 0;
|
|
40
37
|
margin: 0.5rem;
|
|
41
38
|
padding: 0.1rem;
|
|
42
|
-
${
|
|
43
|
-
overflow: hidden;
|
|
44
|
-
text-overflow: ellipsis;
|
|
45
|
-
white-space: nowrap;
|
|
46
|
-
`}
|
|
39
|
+
${overflowEllipsisDeclarations}
|
|
47
40
|
}
|
|
48
41
|
:host([skeleton]) .d2l-tab-text.d2l-skeletize::before {
|
|
49
42
|
bottom: 0.15rem;
|
package/components/tabs/tab.js
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { css, html, LitElement, unsafeCSS } from 'lit';
|
|
2
2
|
import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
|
|
3
3
|
import { classMap } from 'lit/directives/class-map.js';
|
|
4
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
5
4
|
import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
|
|
6
5
|
import { TabMixin } from './tab-mixin.js';
|
|
7
6
|
|
|
8
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
9
|
-
|
|
10
7
|
const focusRingStyles = getFocusRingStyles(
|
|
11
8
|
pseudoClass => `:host(:${pseudoClass}) .d2l-tab-text-inner-content`,
|
|
12
9
|
{ extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
|
|
@@ -56,11 +53,7 @@ class Tab extends TabMixin(LitElement) {
|
|
|
56
53
|
color: var(--d2l-color-celestine);
|
|
57
54
|
}
|
|
58
55
|
span {
|
|
59
|
-
${
|
|
60
|
-
overflow: hidden;
|
|
61
|
-
text-overflow: ellipsis;
|
|
62
|
-
white-space: nowrap;
|
|
63
|
-
`}
|
|
56
|
+
${overflowEllipsisDeclarations}
|
|
64
57
|
}
|
|
65
58
|
.d2l-tab-text-skeletize-override {
|
|
66
59
|
min-width: 50px;
|
package/components/tabs/tabs.js
CHANGED
|
@@ -8,7 +8,6 @@ import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js'
|
|
|
8
8
|
import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
|
|
9
9
|
import { bodyCompactStyles } from '../typography/styles.js';
|
|
10
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
11
|
-
import { getFlag } from '../../helpers/flags.js';
|
|
12
11
|
import { getOverflowDeclarations } from '../../helpers/overflow.js';
|
|
13
12
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
14
13
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
@@ -18,7 +17,6 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
|
18
17
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
19
18
|
|
|
20
19
|
const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
21
|
-
const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
|
|
22
20
|
|
|
23
21
|
const scrollButtonWidth = 56;
|
|
24
22
|
|
|
@@ -94,11 +92,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
|
94
92
|
position: relative;
|
|
95
93
|
-webkit-transition: max-width 200ms ease-in;
|
|
96
94
|
transition: max-width 200ms ease-in;
|
|
97
|
-
${
|
|
98
|
-
overflow: hidden;
|
|
99
|
-
overflow-x: hidden;
|
|
100
|
-
white-space: nowrap;
|
|
101
|
-
`}
|
|
95
|
+
${getOverflowDeclarations({ textOverflow: 'clip' })}
|
|
102
96
|
}
|
|
103
97
|
.d2l-tabs-container-ext {
|
|
104
98
|
flex: none;
|
|
@@ -115,7 +109,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
|
|
|
115
109
|
.d2l-tabs-scroll-next-container {
|
|
116
110
|
background-color: var(--d2l-tabs-background-color);
|
|
117
111
|
box-shadow: 0 0 12px 18px var(--d2l-tabs-background-color);
|
|
118
|
-
|
|
112
|
+
clip-path: rect(0% 200% 100% -100%);
|
|
119
113
|
display: none;
|
|
120
114
|
height: 100%;
|
|
121
115
|
position: absolute;
|
package/custom-elements.json
CHANGED
|
@@ -8941,6 +8941,12 @@
|
|
|
8941
8941
|
"type": "'normal'|'none'",
|
|
8942
8942
|
"default": "\"normal\""
|
|
8943
8943
|
},
|
|
8944
|
+
{
|
|
8945
|
+
"name": "tile-header",
|
|
8946
|
+
"description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
|
|
8947
|
+
"type": "boolean",
|
|
8948
|
+
"default": "false"
|
|
8949
|
+
},
|
|
8944
8950
|
{
|
|
8945
8951
|
"name": "selection-disabled-tooltip",
|
|
8946
8952
|
"description": "**Selection:** Tooltip text when selection is disabled",
|
|
@@ -9046,6 +9052,11 @@
|
|
|
9046
9052
|
"type": "boolean",
|
|
9047
9053
|
"default": "false"
|
|
9048
9054
|
},
|
|
9055
|
+
{
|
|
9056
|
+
"name": "isVisibleOnAncestorTarget",
|
|
9057
|
+
"type": "boolean",
|
|
9058
|
+
"default": "true"
|
|
9059
|
+
},
|
|
9049
9060
|
{
|
|
9050
9061
|
"name": "noPrimaryAction",
|
|
9051
9062
|
"attribute": "no-primary-action",
|
|
@@ -9060,6 +9071,13 @@
|
|
|
9060
9071
|
"type": "'normal'|'none'",
|
|
9061
9072
|
"default": "\"normal\""
|
|
9062
9073
|
},
|
|
9074
|
+
{
|
|
9075
|
+
"name": "tileHeader",
|
|
9076
|
+
"attribute": "tile-header",
|
|
9077
|
+
"description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
|
|
9078
|
+
"type": "boolean",
|
|
9079
|
+
"default": "false"
|
|
9080
|
+
},
|
|
9063
9081
|
{
|
|
9064
9082
|
"name": "selectionDisabledTooltip",
|
|
9065
9083
|
"attribute": "selection-disabled-tooltip",
|
|
@@ -9313,6 +9331,12 @@
|
|
|
9313
9331
|
"type": "'normal'|'none'",
|
|
9314
9332
|
"default": "\"normal\""
|
|
9315
9333
|
},
|
|
9334
|
+
{
|
|
9335
|
+
"name": "tile-header",
|
|
9336
|
+
"description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
|
|
9337
|
+
"type": "boolean",
|
|
9338
|
+
"default": "false"
|
|
9339
|
+
},
|
|
9316
9340
|
{
|
|
9317
9341
|
"name": "selection-disabled-tooltip",
|
|
9318
9342
|
"description": "**Selection:** Tooltip text when selection is disabled",
|
|
@@ -9425,6 +9449,11 @@
|
|
|
9425
9449
|
"type": "boolean",
|
|
9426
9450
|
"default": "false"
|
|
9427
9451
|
},
|
|
9452
|
+
{
|
|
9453
|
+
"name": "isVisibleOnAncestorTarget",
|
|
9454
|
+
"type": "boolean",
|
|
9455
|
+
"default": "true"
|
|
9456
|
+
},
|
|
9428
9457
|
{
|
|
9429
9458
|
"name": "noPrimaryAction",
|
|
9430
9459
|
"attribute": "no-primary-action",
|
|
@@ -9439,6 +9468,13 @@
|
|
|
9439
9468
|
"type": "'normal'|'none'",
|
|
9440
9469
|
"default": "\"normal\""
|
|
9441
9470
|
},
|
|
9471
|
+
{
|
|
9472
|
+
"name": "tileHeader",
|
|
9473
|
+
"attribute": "tile-header",
|
|
9474
|
+
"description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
|
|
9475
|
+
"type": "boolean",
|
|
9476
|
+
"default": "false"
|
|
9477
|
+
},
|
|
9442
9478
|
{
|
|
9443
9479
|
"name": "selectionDisabledTooltip",
|
|
9444
9480
|
"attribute": "selection-disabled-tooltip",
|
|
@@ -9822,6 +9858,12 @@
|
|
|
9822
9858
|
"type": "'normal'|'none'",
|
|
9823
9859
|
"default": "\"normal\""
|
|
9824
9860
|
},
|
|
9861
|
+
{
|
|
9862
|
+
"name": "tile-header",
|
|
9863
|
+
"description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
|
|
9864
|
+
"type": "boolean",
|
|
9865
|
+
"default": "false"
|
|
9866
|
+
},
|
|
9825
9867
|
{
|
|
9826
9868
|
"name": "selection-disabled-tooltip",
|
|
9827
9869
|
"description": "**Selection:** Tooltip text when selection is disabled",
|
|
@@ -9946,6 +9988,11 @@
|
|
|
9946
9988
|
"type": "boolean",
|
|
9947
9989
|
"default": "false"
|
|
9948
9990
|
},
|
|
9991
|
+
{
|
|
9992
|
+
"name": "isVisibleOnAncestorTarget",
|
|
9993
|
+
"type": "boolean",
|
|
9994
|
+
"default": "true"
|
|
9995
|
+
},
|
|
9949
9996
|
{
|
|
9950
9997
|
"name": "noPrimaryAction",
|
|
9951
9998
|
"attribute": "no-primary-action",
|
|
@@ -9960,6 +10007,13 @@
|
|
|
9960
10007
|
"type": "'normal'|'none'",
|
|
9961
10008
|
"default": "\"normal\""
|
|
9962
10009
|
},
|
|
10010
|
+
{
|
|
10011
|
+
"name": "tileHeader",
|
|
10012
|
+
"attribute": "tile-header",
|
|
10013
|
+
"description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
|
|
10014
|
+
"type": "boolean",
|
|
10015
|
+
"default": "false"
|
|
10016
|
+
},
|
|
9963
10017
|
{
|
|
9964
10018
|
"name": "selectionDisabledTooltip",
|
|
9965
10019
|
"attribute": "selection-disabled-tooltip",
|
|
@@ -10147,6 +10201,12 @@
|
|
|
10147
10201
|
"type": "'normal'|'none'",
|
|
10148
10202
|
"default": "\"normal\""
|
|
10149
10203
|
},
|
|
10204
|
+
{
|
|
10205
|
+
"name": "tile-header",
|
|
10206
|
+
"description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
|
|
10207
|
+
"type": "boolean",
|
|
10208
|
+
"default": "false"
|
|
10209
|
+
},
|
|
10150
10210
|
{
|
|
10151
10211
|
"name": "selection-disabled-tooltip",
|
|
10152
10212
|
"description": "**Selection:** Tooltip text when selection is disabled",
|
|
@@ -10264,6 +10324,11 @@
|
|
|
10264
10324
|
"type": "boolean",
|
|
10265
10325
|
"default": "false"
|
|
10266
10326
|
},
|
|
10327
|
+
{
|
|
10328
|
+
"name": "isVisibleOnAncestorTarget",
|
|
10329
|
+
"type": "boolean",
|
|
10330
|
+
"default": "true"
|
|
10331
|
+
},
|
|
10267
10332
|
{
|
|
10268
10333
|
"name": "noPrimaryAction",
|
|
10269
10334
|
"attribute": "no-primary-action",
|
|
@@ -10278,6 +10343,13 @@
|
|
|
10278
10343
|
"type": "'normal'|'none'",
|
|
10279
10344
|
"default": "\"normal\""
|
|
10280
10345
|
},
|
|
10346
|
+
{
|
|
10347
|
+
"name": "tileHeader",
|
|
10348
|
+
"attribute": "tile-header",
|
|
10349
|
+
"description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
|
|
10350
|
+
"type": "boolean",
|
|
10351
|
+
"default": "false"
|
|
10352
|
+
},
|
|
10281
10353
|
{
|
|
10282
10354
|
"name": "selectionDisabledTooltip",
|
|
10283
10355
|
"attribute": "selection-disabled-tooltip",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.191.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",
|