@brightspace-ui/core 3.227.3 → 3.227.5
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/button/button.js +8 -8
- package/components/colors/colors.js +8 -0
- package/components/count-badge/count-badge-icon.js +1 -1
- package/components/count-badge/count-badge-mixin.js +4 -4
- package/components/demo/test/demo-page-settings.test.js +25 -0
- package/components/demo/test/demo-page.test.js +17 -0
- package/package.json +1 -1
- package/components/alert/demo/alert-toast.html +0 -106
- package/components/alert/demo/alert.html +0 -82
- package/components/backdrop/demo/backdrop-loading.html +0 -166
- package/components/backdrop/demo/backdrop.html +0 -57
- package/components/breadcrumbs/demo/breadcrumbs.html +0 -53
- package/components/button/demo/button-add.html +0 -55
- package/components/button/demo/button-copy.html +0 -122
- package/components/button/demo/button-icon.html +0 -174
- package/components/button/demo/button-move.html +0 -38
- package/components/button/demo/button-split.html +0 -76
- package/components/button/demo/button-subtle.html +0 -132
- package/components/button/demo/button-toggle.html +0 -80
- package/components/button/demo/button.html +0 -67
- package/components/button/demo/floating-buttons-in-frame.html +0 -44
- package/components/button/demo/floating-buttons-in-tabs.html +0 -244
- package/components/button/demo/floating-buttons-page.html +0 -100
- package/components/button/demo/floating-buttons.html +0 -101
- package/components/calendar/demo/calendar.html +0 -76
- package/components/card/demo/card.html +0 -304
- package/components/collapsible-panel/demo/collapsible-panel.html +0 -218
- package/components/colors/demo/color-swatch.js +0 -240
- package/components/colors/demo/colors.html +0 -139
- package/components/count-badge/demo/count-badge-icon.html +0 -48
- package/components/count-badge/demo/count-badge.html +0 -73
- package/components/demo/demo/demo-snippet.html +0 -71
- package/components/description-list/demo/description-list-test.js +0 -142
- package/components/description-list/demo/description-list.html +0 -48
- package/components/dialog/demo/dialog-async-content-until.js +0 -89
- package/components/dialog/demo/dialog-async-content.js +0 -72
- package/components/dialog/demo/dialog-confirm.html +0 -102
- package/components/dialog/demo/dialog-container.js +0 -40
- package/components/dialog/demo/dialog-fullscreen.html +0 -273
- package/components/dialog/demo/dialog-nested.html +0 -94
- package/components/dialog/demo/dialog.html +0 -398
- package/components/dropdown/demo/dropdown-button.html +0 -102
- package/components/dropdown/demo/dropdown-context-menu.html +0 -129
- package/components/dropdown/demo/dropdown-flicker-inner.html +0 -70
- package/components/dropdown/demo/dropdown-flicker.html +0 -142
- package/components/dropdown/demo/dropdown-menu-demo-view.js +0 -37
- package/components/dropdown/demo/dropdown-menu.html +0 -227
- package/components/dropdown/demo/dropdown-more.html +0 -160
- package/components/dropdown/demo/dropdown-positioning.html +0 -127
- package/components/dropdown/demo/dropdown-tabs.html +0 -87
- package/components/dropdown/demo/dropdown.html +0 -217
- package/components/empty-state/demo/empty-state.html +0 -94
- package/components/expand-collapse/demo/expand-collapse-content.html +0 -58
- package/components/filter/demo/filter-load-more-demo.js +0 -182
- package/components/filter/demo/filter-overflow-group.html +0 -246
- package/components/filter/demo/filter-search-demo.js +0 -135
- package/components/filter/demo/filter-tags.html +0 -115
- package/components/filter/demo/filter.html +0 -230
- package/components/focus-trap/demo/focus-trap.html +0 -75
- package/components/form/demo/form-demo.js +0 -105
- package/components/form/demo/form-dialog-demo.js +0 -94
- package/components/form/demo/form-panel-demo.js +0 -89
- package/components/form/demo/form.html +0 -37
- package/components/hierarchical-view/demo/hierarchical-view.html +0 -221
- package/components/html-block/demo/html-block-code.html +0 -55
- package/components/html-block/demo/html-block.html +0 -696
- package/components/icons/demo/icon-color-override.js +0 -23
- package/components/icons/demo/icon-custom.html +0 -112
- package/components/icons/demo/icon-size-override.js +0 -24
- package/components/icons/demo/icon.html +0 -52
- package/components/inputs/demo/input-checkbox.html +0 -118
- package/components/inputs/demo/input-color-palette.js +0 -67
- package/components/inputs/demo/input-color.html +0 -110
- package/components/inputs/demo/input-date-range.html +0 -114
- package/components/inputs/demo/input-date-time-range.html +0 -128
- package/components/inputs/demo/input-date-time.html +0 -100
- package/components/inputs/demo/input-date.html +0 -81
- package/components/inputs/demo/input-group.html +0 -56
- package/components/inputs/demo/input-number.html +0 -136
- package/components/inputs/demo/input-percent.html +0 -99
- package/components/inputs/demo/input-radio-label-test.js +0 -45
- package/components/inputs/demo/input-radio-solo-test.js +0 -47
- package/components/inputs/demo/input-radio.html +0 -119
- package/components/inputs/demo/input-search.html +0 -75
- package/components/inputs/demo/input-select-test.js +0 -60
- package/components/inputs/demo/input-select.html +0 -45
- package/components/inputs/demo/input-text.html +0 -163
- package/components/inputs/demo/input-textarea.html +0 -124
- package/components/inputs/demo/input-time-range.html +0 -121
- package/components/inputs/demo/input-time.html +0 -95
- package/components/link/demo/link.html +0 -111
- package/components/list/demo/demo-list-nav.js +0 -170
- package/components/list/demo/demo-list-nested-iterations-helper.js +0 -168
- package/components/list/demo/demo-list-nested-lazy-load.js +0 -133
- package/components/list/demo/demo-list-nested.js +0 -291
- package/components/list/demo/demo-list.js +0 -241
- package/components/list/demo/list-color.html +0 -423
- package/components/list/demo/list-demo-scenarios.js +0 -380
- package/components/list/demo/list-drag-and-drop-position.js +0 -102
- package/components/list/demo/list-drag-and-drop.html +0 -82
- package/components/list/demo/list-expand-collapse.html +0 -136
- package/components/list/demo/list-item-actions.html +0 -371
- package/components/list/demo/list-item-custom.js +0 -204
- package/components/list/demo/list-item-layouts.html +0 -331
- package/components/list/demo/list-item-scroll.html +0 -122
- package/components/list/demo/list-layout.html +0 -575
- package/components/list/demo/list-nav.html +0 -110
- package/components/list/demo/list-nested.html +0 -270
- package/components/list/demo/list-selection.html +0 -301
- package/components/list/demo/list.html +0 -319
- package/components/loading-spinner/demo/loading-spinner-override.js +0 -34
- package/components/loading-spinner/demo/loading-spinner.html +0 -63
- package/components/menu/demo/checkbox-menu.html +0 -52
- package/components/menu/demo/custom-menu-item.js +0 -37
- package/components/menu/demo/custom-view.js +0 -63
- package/components/menu/demo/menu.html +0 -211
- package/components/menu/demo/radio-menu.html +0 -52
- package/components/meter/demo/meter.html +0 -115
- package/components/more-less/demo/more-less-test.js +0 -67
- package/components/more-less/demo/more-less.html +0 -71
- package/components/object-property-list/demo/object-property-list.html +0 -99
- package/components/offscreen/demo/offscreen-demo.js +0 -16
- package/components/offscreen/demo/offscreen.html +0 -44
- package/components/overflow-group/demo/demo-overflow-group.js +0 -29
- package/components/overflow-group/demo/overflow-group.html +0 -110
- package/components/paging/demo/pager-load-more.html +0 -120
- package/components/popover/demo/popover.html +0 -309
- package/components/progress/demo/progress.html +0 -104
- package/components/scroll-wrapper/demo/scroll-wrapper-test.js +0 -108
- package/components/scroll-wrapper/demo/scroll-wrapper.html +0 -52
- package/components/selection/demo/demo-selection.js +0 -35
- package/components/selection/demo/selection.html +0 -198
- package/components/skeleton/demo/skeleton-group-nested-test.js +0 -71
- package/components/skeleton/demo/skeleton-group-test-wrapper.js +0 -18
- package/components/skeleton/demo/skeleton-group-test.js +0 -91
- package/components/skeleton/demo/skeleton-mixin.html +0 -78
- package/components/skeleton/demo/skeleton-test-box.js +0 -34
- package/components/skeleton/demo/skeleton-test-container.js +0 -45
- package/components/skeleton/demo/skeleton-test-heading.js +0 -44
- package/components/skeleton/demo/skeleton-test-link.js +0 -47
- package/components/skeleton/demo/skeleton-test-paragraph.js +0 -54
- package/components/skeleton/demo/skeleton-test-stack.js +0 -38
- package/components/skeleton/demo/skeleton-test-width.js +0 -20
- package/components/sorting/demo/sort.html +0 -37
- package/components/status-indicator/demo/status-indicator.html +0 -99
- package/components/switch/demo/switch.html +0 -95
- package/components/table/demo/table-test.js +0 -271
- package/components/table/demo/table.html +0 -107
- package/components/tabs/demo/tab-custom.js +0 -39
- package/components/tabs/demo/tabs-array.js +0 -43
- package/components/tabs/demo/tabs.html +0 -558
- package/components/tag-list/demo/tag-list.html +0 -117
- package/components/tooltip/demo/tooltip.html +0 -275
- package/components/typography/demo/typography.html +0 -93
- package/components/view-switcher/demo/demo-table-view.js +0 -41
- package/components/view-switcher/demo/view-switcher.html +0 -71
- package/directives/animate/demo/animate-test.js +0 -98
- package/directives/animate/demo/index.html +0 -23
- package/helpers/demo/announce-test.js +0 -37
- package/helpers/demo/announce.html +0 -19
- package/helpers/demo/dismissible-test.js +0 -66
- package/helpers/demo/dismissible.html +0 -38
- package/helpers/demo/gestures.html +0 -58
- package/helpers/demo/prism.html +0 -694
- package/helpers/demo/template-tags.html +0 -118
- package/mixins/arrow-keys/demo/arrow-keys-mixin.html +0 -29
- package/mixins/arrow-keys/demo/arrow-keys-test.js +0 -38
- package/mixins/async-container/demo/async-container.html +0 -109
- package/mixins/async-container/demo/async-container.js +0 -27
- package/mixins/async-container/demo/async-item.js +0 -80
- package/mixins/labelled/demo/labelled-mixin.html +0 -90
- package/mixins/localize/demo/localize-mixin-greeting.js +0 -39
- package/mixins/localize/demo/localize-mixin-mission.js +0 -25
- package/mixins/localize/demo/localize-mixin.html +0 -28
- package/templates/primary-secondary/demo/form.html +0 -55
- package/templates/primary-secondary/demo/index.html +0 -27
- package/templates/primary-secondary/demo/integration.html +0 -457
- package/templates/primary-secondary/demo/overflow-hidden.html +0 -22
- package/templates/primary-secondary/demo/width-type-normal.html +0 -26
|
@@ -1,198 +0,0 @@
|
|
|
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
|
-
import '../../dropdown/dropdown-menu.js';
|
|
10
|
-
import '../../menu/menu.js';
|
|
11
|
-
import '../../paging/pager-load-more.js';
|
|
12
|
-
import '../selection-action.js';
|
|
13
|
-
import '../selection-action-dropdown.js';
|
|
14
|
-
import '../selection-action-menu-item.js';
|
|
15
|
-
import '../selection-controls.js';
|
|
16
|
-
import '../selection-input.js';
|
|
17
|
-
import '../selection-select-all.js';
|
|
18
|
-
import '../selection-summary.js';
|
|
19
|
-
import './demo-selection.js';
|
|
20
|
-
</script>
|
|
21
|
-
<style>
|
|
22
|
-
ul {
|
|
23
|
-
padding: 0;
|
|
24
|
-
}
|
|
25
|
-
li {
|
|
26
|
-
list-style-type: none;
|
|
27
|
-
}
|
|
28
|
-
d2l-selection-input {
|
|
29
|
-
margin-right: 10px;
|
|
30
|
-
}
|
|
31
|
-
[dir="rtl"] d2l-selection-input {
|
|
32
|
-
margin-left: 10px;
|
|
33
|
-
margin-right: 0;
|
|
34
|
-
}
|
|
35
|
-
.d2l-selection-collections {
|
|
36
|
-
display: flex;
|
|
37
|
-
flex-direction: row;
|
|
38
|
-
justify-content: space-between;
|
|
39
|
-
}
|
|
40
|
-
.d2l-selection-collection {
|
|
41
|
-
display: flex;
|
|
42
|
-
flex-basis: 45%;
|
|
43
|
-
flex-direction: column;
|
|
44
|
-
}
|
|
45
|
-
</style>
|
|
46
|
-
</head>
|
|
47
|
-
<body unresolved>
|
|
48
|
-
|
|
49
|
-
<d2l-demo-page page-title="Selection Components">
|
|
50
|
-
|
|
51
|
-
<h2>Multiple Selection</h2>
|
|
52
|
-
|
|
53
|
-
<d2l-demo-snippet>
|
|
54
|
-
<template>
|
|
55
|
-
<d2l-demo-selection>
|
|
56
|
-
<d2l-selection-controls>
|
|
57
|
-
<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" max-selection-count="2" requires-selection></d2l-selection-action>
|
|
58
|
-
<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
|
|
59
|
-
<d2l-selection-action-dropdown text="Actions 1" requires-selection>
|
|
60
|
-
<d2l-dropdown-menu>
|
|
61
|
-
<d2l-menu label="Actions">
|
|
62
|
-
<d2l-selection-action-menu-item text="Action 1"></d2l-selection-action-menu-item>
|
|
63
|
-
<d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
|
|
64
|
-
</d2l-menu>
|
|
65
|
-
</d2l-dropdown-menu>
|
|
66
|
-
</d2l-selection-action-dropdown>
|
|
67
|
-
</d2l-selection-controls>
|
|
68
|
-
|
|
69
|
-
<ul>
|
|
70
|
-
<li><d2l-selection-input key="geo" label="Geography" selected></d2l-selection-input>Geography</li>
|
|
71
|
-
<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
|
|
72
|
-
<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
|
|
73
|
-
</ul>
|
|
74
|
-
</d2l-demo-selection>
|
|
75
|
-
</template>
|
|
76
|
-
</d2l-demo-snippet>
|
|
77
|
-
|
|
78
|
-
<h2>Single Selection</h2>
|
|
79
|
-
|
|
80
|
-
<d2l-demo-snippet>
|
|
81
|
-
<template>
|
|
82
|
-
<d2l-demo-selection selection-single>
|
|
83
|
-
<d2l-selection-controls>
|
|
84
|
-
<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
|
|
85
|
-
<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
|
|
86
|
-
</d2l-selection-controls>
|
|
87
|
-
|
|
88
|
-
<ul>
|
|
89
|
-
<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
|
|
90
|
-
<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
|
|
91
|
-
<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
|
|
92
|
-
</ul>
|
|
93
|
-
</d2l-demo-selection>
|
|
94
|
-
</template>
|
|
95
|
-
</d2l-demo-snippet>
|
|
96
|
-
|
|
97
|
-
<h2>Selection controls with pageable + selection</h2>
|
|
98
|
-
|
|
99
|
-
<d2l-demo-snippet>
|
|
100
|
-
<template>
|
|
101
|
-
<d2l-demo-selection-pageable item-count="5">
|
|
102
|
-
<d2l-selection-controls select-all-pages-allowed>
|
|
103
|
-
<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" max-selection-count="4" requires-selection></d2l-selection-action>
|
|
104
|
-
<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
|
|
105
|
-
</d2l-selection-controls>
|
|
106
|
-
|
|
107
|
-
<ul>
|
|
108
|
-
<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
|
|
109
|
-
<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
|
|
110
|
-
<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
|
|
111
|
-
</ul>
|
|
112
|
-
<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
|
|
113
|
-
</d2l-demo-selection-pageable>
|
|
114
|
-
</template>
|
|
115
|
-
</d2l-demo-snippet>
|
|
116
|
-
|
|
117
|
-
<h2>Selection controls with pageable (no selection)</h2>
|
|
118
|
-
|
|
119
|
-
<d2l-demo-snippet>
|
|
120
|
-
<template>
|
|
121
|
-
<d2l-demo-pageable item-count="5">
|
|
122
|
-
<d2l-selection-controls>
|
|
123
|
-
<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
|
|
124
|
-
<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
|
|
125
|
-
</d2l-selection-controls>
|
|
126
|
-
|
|
127
|
-
<ul>
|
|
128
|
-
<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
|
|
129
|
-
<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
|
|
130
|
-
<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
|
|
131
|
-
</ul>
|
|
132
|
-
<d2l-pager-load-more has-more page-size="1"></d2l-pager-load-more>
|
|
133
|
-
</d2l-demo-pageable>
|
|
134
|
-
</template>
|
|
135
|
-
</d2l-demo-snippet>
|
|
136
|
-
|
|
137
|
-
<h2>No-sticky selection controls</h2>
|
|
138
|
-
|
|
139
|
-
<d2l-demo-snippet>
|
|
140
|
-
<template>
|
|
141
|
-
<d2l-demo-selection>
|
|
142
|
-
<d2l-selection-controls no-sticky>
|
|
143
|
-
<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
|
|
144
|
-
<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
|
|
145
|
-
</d2l-selection-controls>
|
|
146
|
-
|
|
147
|
-
<ul>
|
|
148
|
-
<li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
|
|
149
|
-
<li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
|
|
150
|
-
<li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
|
|
151
|
-
</ul>
|
|
152
|
-
</d2l-demo-selection>
|
|
153
|
-
</template>
|
|
154
|
-
</d2l-demo-snippet>
|
|
155
|
-
|
|
156
|
-
<h2>Selection Components Outside of Collection</h2>
|
|
157
|
-
|
|
158
|
-
<d2l-demo-snippet>
|
|
159
|
-
<template>
|
|
160
|
-
<div class="d2l-selection-collections">
|
|
161
|
-
<div class="d2l-selection-collection">
|
|
162
|
-
Pick Your Toppings
|
|
163
|
-
<d2l-selection-controls selection-for="collection-1" pageable-for="collection-1" select-all-pages-allowed>
|
|
164
|
-
<d2l-selection-action selection-for="collection-1" text="Add Note" icon="tier1:add-message"></d2l-selection-action>
|
|
165
|
-
</d2l-selection-controls>
|
|
166
|
-
|
|
167
|
-
<d2l-demo-selection-pageable id="collection-1" item-count="5">
|
|
168
|
-
<ul>
|
|
169
|
-
<li><d2l-selection-input key="let" label="Lettuce" selected></d2l-selection-input>Lettuce</li>
|
|
170
|
-
<li><d2l-selection-input key="tom" label="Tomato"></d2l-selection-input>Tomato</li>
|
|
171
|
-
<li><d2l-selection-input key="onion" label="Onion"></d2l-selection-input>Onion</li>
|
|
172
|
-
</ul>
|
|
173
|
-
</d2l-demo-selection-pageable>
|
|
174
|
-
<d2l-pager-load-more has-more page-size="1" pageable-for="collection-1"></d2l-pager-load-more>
|
|
175
|
-
<d2l-selection-action selection-for="collection-1" text="Save" requires-selection></d2l-selection-action>
|
|
176
|
-
</div>
|
|
177
|
-
|
|
178
|
-
<div class="d2l-selection-collection">
|
|
179
|
-
Pick Your Bread
|
|
180
|
-
<d2l-selection-controls selection-for="collection-2">
|
|
181
|
-
<d2l-selection-action selection-for="collection-2" text="Add Note" icon="tier1:add-message"></d2l-selection-action>
|
|
182
|
-
</d2l-selection-controls>
|
|
183
|
-
<d2l-demo-selection id="collection-2" selection-single>
|
|
184
|
-
<ul>
|
|
185
|
-
<li><d2l-selection-input key="it" label="Italian"></d2l-selection-input>Italian</li>
|
|
186
|
-
<li><d2l-selection-input key="ww" label="Whole Wheat"></d2l-selection-input>Whole Wheat</li>
|
|
187
|
-
<li><d2l-selection-input key="herb" label="Herb and Garlic"></d2l-selection-input>Herb and Garlic</li>
|
|
188
|
-
</ul>
|
|
189
|
-
</d2l-demo-selection>
|
|
190
|
-
<d2l-selection-action selection-for="collection-2" text="Save" requires-selection></d2l-selection-action>
|
|
191
|
-
</div>
|
|
192
|
-
</div>
|
|
193
|
-
</template>
|
|
194
|
-
</d2l-demo-snippet>
|
|
195
|
-
|
|
196
|
-
</d2l-demo-page>
|
|
197
|
-
</body>
|
|
198
|
-
</html>
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import '../../switch/switch.js';
|
|
2
|
-
import './skeleton-group-test-wrapper.js';
|
|
3
|
-
import './skeleton-test-box.js';
|
|
4
|
-
import './skeleton-test-container.js';
|
|
5
|
-
import './skeleton-test-heading.js';
|
|
6
|
-
|
|
7
|
-
import { css, html, LitElement } from 'lit';
|
|
8
|
-
import { SkeletonGroupMixin } from '../skeleton-group-mixin.js';
|
|
9
|
-
|
|
10
|
-
class SkeletonTestNestedGroup extends SkeletonGroupMixin(LitElement) {
|
|
11
|
-
static get properties() {
|
|
12
|
-
return {
|
|
13
|
-
_skeletonParent: { state: true },
|
|
14
|
-
_skeletonContainer: { state: true },
|
|
15
|
-
_skeletonHeading: { state: true },
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
static get styles() {
|
|
19
|
-
return css`
|
|
20
|
-
.controls {
|
|
21
|
-
align-items: center;
|
|
22
|
-
display: flex;
|
|
23
|
-
gap: 0.6rem;
|
|
24
|
-
margin-bottom: 0.6rem;
|
|
25
|
-
}
|
|
26
|
-
`;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
constructor() {
|
|
30
|
-
super();
|
|
31
|
-
this._skeletonParent = false;
|
|
32
|
-
this._skeletonContainer = false;
|
|
33
|
-
this._skeletonHeading = false;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
render() {
|
|
37
|
-
return html`
|
|
38
|
-
<div class="controls">
|
|
39
|
-
<d2l-switch @click="${this._loadGroup}" ?on="${this._skeletonSetExplicitly}" text="parent skeleton"></d2l-switch>
|
|
40
|
-
<d2l-switch @click="${this._loadList}" ?on="${this._skeletonContainer}" text="container skeleton"></d2l-switch>
|
|
41
|
-
<d2l-switch @click="${this._loadInput}" ?on="${this._skeletonHeading}" text="heading skeleton"></d2l-switch>
|
|
42
|
-
</div>
|
|
43
|
-
<d2l-skeleton-group-test-wrapper>
|
|
44
|
-
<d2l-test-skeleton-heading level="1">Heading 1</d2l-test-skeleton-heading>
|
|
45
|
-
<d2l-skeleton-group-test-wrapper ?skeleton="${this._skeletonContainer}">
|
|
46
|
-
<d2l-test-skeleton-heading level="3" ?skeleton="${this._skeletonHeading}">Inner heading</d2l-test-skeleton-heading>
|
|
47
|
-
<d2l-test-skeleton-box></d2l-test-skeleton-box>
|
|
48
|
-
</d2l-skeleton-group-test-wrapper>
|
|
49
|
-
<d2l-skeleton-group-test-wrapper>
|
|
50
|
-
<d2l-test-skeleton-heading level="3">Heading 3</d2l-test-skeleton-heading>
|
|
51
|
-
<d2l-test-skeleton-container></d2l-test-skeleton-container>
|
|
52
|
-
</d2l-skeleton-group-test-wrapper>
|
|
53
|
-
</d2l-skeleton-group-test-wrapper>
|
|
54
|
-
`;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
_loadGroup() {
|
|
58
|
-
this._skeletonParent = !this._skeletonParent;
|
|
59
|
-
this.skeleton = this._skeletonParent;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
_loadInput() {
|
|
63
|
-
this._skeletonHeading = !this._skeletonHeading;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
_loadList() {
|
|
67
|
-
this._skeletonContainer = !this._skeletonContainer;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
customElements.define('d2l-test-nested-skeleton-group', SkeletonTestNestedGroup);
|
|
71
|
-
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { css, html, LitElement } from 'lit';
|
|
2
|
-
import { SkeletonGroupMixin } from '../skeleton-group-mixin.js';
|
|
3
|
-
|
|
4
|
-
class SkeletonGroupTestWrapper extends SkeletonGroupMixin(LitElement) {
|
|
5
|
-
static get styles() {
|
|
6
|
-
return css`
|
|
7
|
-
:host {
|
|
8
|
-
display: flex;
|
|
9
|
-
flex-direction: column;
|
|
10
|
-
gap: 0.3rem;
|
|
11
|
-
}
|
|
12
|
-
`;
|
|
13
|
-
}
|
|
14
|
-
render() {
|
|
15
|
-
return html`<slot></slot>`;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
customElements.define('d2l-skeleton-group-test-wrapper', SkeletonGroupTestWrapper);
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import '../../switch/switch.js';
|
|
2
|
-
import '../../button/button-subtle.js';
|
|
3
|
-
import './skeleton-test-container.js';
|
|
4
|
-
import { css, html, LitElement } from 'lit';
|
|
5
|
-
import { SkeletonGroupMixin } from '../skeleton-group-mixin.js';
|
|
6
|
-
|
|
7
|
-
class SkeletonTestGroup extends LitElement {
|
|
8
|
-
static get properties() {
|
|
9
|
-
return {
|
|
10
|
-
_items: { state: true },
|
|
11
|
-
_loadAsGroup: { state: true },
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
static get styles() {
|
|
15
|
-
return css`
|
|
16
|
-
.controls {
|
|
17
|
-
align-items: center;
|
|
18
|
-
display: flex;
|
|
19
|
-
gap: 0.6rem;
|
|
20
|
-
justify-content: space-between;
|
|
21
|
-
margin-bottom: 0.6rem;
|
|
22
|
-
}
|
|
23
|
-
d2l-test-skeleton-container {
|
|
24
|
-
margin-bottom: 0.6rem;
|
|
25
|
-
}
|
|
26
|
-
`;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
constructor() {
|
|
30
|
-
super();
|
|
31
|
-
this._items = [1, 2, 3];
|
|
32
|
-
this._loadAsGroup = true;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
render() {
|
|
36
|
-
return html`
|
|
37
|
-
<div class="controls">
|
|
38
|
-
<div>
|
|
39
|
-
<d2l-button-subtle @click="${this._loadItems}" text="Load items" icon="tier1:download"></d2l-button-subtle>
|
|
40
|
-
<d2l-button-subtle @click="${this._addItem}" text="Add item" icon="tier1:add"></d2l-button-subtle>
|
|
41
|
-
<d2l-button-subtle @click="${this._removeItem}" text="Remove item" icon="tier1:delete"></d2l-button-subtle>
|
|
42
|
-
</div>
|
|
43
|
-
<d2l-switch @click="${this._toggleLoadType}" text="Wait for all elements to load" ?on="${this._loadAsGroup}"></d2l-switch>
|
|
44
|
-
</div>
|
|
45
|
-
|
|
46
|
-
${this._loadAsGroup ? this._renderGroup() : this._renderIndividual() }
|
|
47
|
-
`;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
_addItem() {
|
|
51
|
-
this._items.push((this._items.length + 1));
|
|
52
|
-
this.requestUpdate();
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
_loadItems() {
|
|
56
|
-
this._items.forEach(id => {
|
|
57
|
-
const item = this.shadowRoot.getElementById(id);
|
|
58
|
-
item.skeleton = true;
|
|
59
|
-
setTimeout(() => item.skeleton = false, Math.random() * 2000);
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
_removeItem() {
|
|
64
|
-
this._items.pop();
|
|
65
|
-
this.requestUpdate();
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
_renderContents() {
|
|
69
|
-
return html`
|
|
70
|
-
${this._items.map(item => html`<d2l-test-skeleton-container skeleton id="${item}"></d2l-test-skeleton-container>`)}
|
|
71
|
-
`;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
_renderGroup() {
|
|
75
|
-
return html`<d2l-test-skeleton-group-on>${this._renderContents()}</d2l-test-skeleton-group-on>`;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
_renderIndividual() {
|
|
79
|
-
return html`<div class="panels">${this._renderContents()}</div>`;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
_toggleLoadType() {
|
|
83
|
-
this._loadAsGroup = !this._loadAsGroup;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
customElements.define('d2l-test-skeleton-group', SkeletonTestGroup);
|
|
87
|
-
|
|
88
|
-
class SkeletonTestGroupOn extends SkeletonGroupMixin(LitElement) {
|
|
89
|
-
render() { return html`<slot></slot>`; }
|
|
90
|
-
}
|
|
91
|
-
customElements.define('d2l-test-skeleton-group-on', SkeletonTestGroupOn);
|
|
@@ -1,78 +0,0 @@
|
|
|
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
|
-
import './skeleton-test-box.js';
|
|
10
|
-
import './skeleton-test-container.js';
|
|
11
|
-
import './skeleton-test-heading.js';
|
|
12
|
-
import './skeleton-test-link.js';
|
|
13
|
-
import './skeleton-test-paragraph.js';
|
|
14
|
-
import './skeleton-group-nested-test.js';
|
|
15
|
-
import './skeleton-group-test.js';
|
|
16
|
-
</script>
|
|
17
|
-
</head>
|
|
18
|
-
<body unresolved>
|
|
19
|
-
<d2l-demo-page page-title="skeleton-mixin">
|
|
20
|
-
|
|
21
|
-
<h2>Typography</h2>
|
|
22
|
-
<d2l-demo-snippet code-view-hidden>
|
|
23
|
-
<d2l-test-skeleton-paragraph type="standard"></d2l-test-skeleton-paragraph>
|
|
24
|
-
<d2l-test-skeleton-paragraph type="compact"></d2l-test-skeleton-paragraph>
|
|
25
|
-
<d2l-test-skeleton-paragraph type="small"></d2l-test-skeleton-paragraph>
|
|
26
|
-
<d2l-test-skeleton-paragraph type="label"></d2l-test-skeleton-paragraph>
|
|
27
|
-
</d2l-demo-snippet>
|
|
28
|
-
|
|
29
|
-
<h2>Links</h2>
|
|
30
|
-
<d2l-demo-snippet code-view-hidden>
|
|
31
|
-
<d2l-test-skeleton-link></d2l-test-skeleton-link>
|
|
32
|
-
<d2l-test-skeleton-link type="main"></d2l-test-skeleton-link>
|
|
33
|
-
<d2l-test-skeleton-link type="small"></d2l-test-skeleton-link>
|
|
34
|
-
</d2l-demo-snippet>
|
|
35
|
-
|
|
36
|
-
<h2>Headings</h2>
|
|
37
|
-
<d2l-demo-snippet code-view-hidden>
|
|
38
|
-
<d2l-test-skeleton-heading level="1" width="25">Heading 1</d2l-test-skeleton-heading>
|
|
39
|
-
<d2l-test-skeleton-heading level="2" width="20">Heading 2</d2l-test-skeleton-heading>
|
|
40
|
-
<d2l-test-skeleton-heading level="3" width="15">Heading 3</d2l-test-skeleton-heading>
|
|
41
|
-
<d2l-test-skeleton-heading level="4" width="10">Heading 4</d2l-test-skeleton-heading>
|
|
42
|
-
</d2l-demo-snippet>
|
|
43
|
-
|
|
44
|
-
<h2>Paragraphs</h2>
|
|
45
|
-
<d2l-demo-snippet code-view-hidden>
|
|
46
|
-
<d2l-test-skeleton-paragraph type="standard" lines="2"></d2l-test-skeleton-paragraph>
|
|
47
|
-
<d2l-test-skeleton-paragraph type="standard" lines="3"></d2l-test-skeleton-paragraph>
|
|
48
|
-
<d2l-test-skeleton-paragraph type="standard" lines="5"></d2l-test-skeleton-paragraph>
|
|
49
|
-
<d2l-test-skeleton-paragraph type="compact" lines="2"></d2l-test-skeleton-paragraph>
|
|
50
|
-
<d2l-test-skeleton-paragraph type="compact" lines="3"></d2l-test-skeleton-paragraph>
|
|
51
|
-
<d2l-test-skeleton-paragraph type="compact" lines="5"></d2l-test-skeleton-paragraph>
|
|
52
|
-
<d2l-test-skeleton-paragraph type="small" lines="2"></d2l-test-skeleton-paragraph>
|
|
53
|
-
<d2l-test-skeleton-paragraph type="small" lines="3"></d2l-test-skeleton-paragraph>
|
|
54
|
-
<d2l-test-skeleton-paragraph type="small" lines="5"></d2l-test-skeleton-paragraph>
|
|
55
|
-
</d2l-demo-snippet>
|
|
56
|
-
|
|
57
|
-
<h2>Boxes</h2>
|
|
58
|
-
<d2l-demo-snippet code-view-hidden>
|
|
59
|
-
<d2l-test-skeleton-box></d2l-test-skeleton-box>
|
|
60
|
-
</d2l-demo-snippet>
|
|
61
|
-
|
|
62
|
-
<h2>Containers</h2>
|
|
63
|
-
<d2l-demo-snippet code-view-hidden>
|
|
64
|
-
<d2l-test-skeleton-container></d2l-test-skeleton-container>
|
|
65
|
-
</d2l-demo-snippet>
|
|
66
|
-
|
|
67
|
-
<h2>Skeleton group</h2>
|
|
68
|
-
<d2l-demo-snippet>
|
|
69
|
-
<d2l-test-skeleton-group></d2l-test-skeleton-group>
|
|
70
|
-
</d2l-demo-snippet>
|
|
71
|
-
|
|
72
|
-
<h2>Nested skeleton groups</h2>
|
|
73
|
-
<d2l-demo-snippet>
|
|
74
|
-
<d2l-test-nested-skeleton-group></d2l-test-nested-skeleton-group>
|
|
75
|
-
</d2l-demo-snippet>
|
|
76
|
-
</d2l-demo-page>
|
|
77
|
-
</body>
|
|
78
|
-
</html>
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import '../../colors/colors.js';
|
|
2
|
-
import { css, html, LitElement } from 'lit';
|
|
3
|
-
import { SkeletonMixin } from '../skeleton-mixin.js';
|
|
4
|
-
|
|
5
|
-
export class SkeletonTestBox extends SkeletonMixin(LitElement) {
|
|
6
|
-
|
|
7
|
-
static get styles() {
|
|
8
|
-
return [
|
|
9
|
-
super.styles,
|
|
10
|
-
css`
|
|
11
|
-
:host {
|
|
12
|
-
display: block;
|
|
13
|
-
}
|
|
14
|
-
.d2l-demo-box {
|
|
15
|
-
background-color: var(--d2l-color-fluorite-plus-2);
|
|
16
|
-
border: 1px solid var(--d2l-color-fluorite);
|
|
17
|
-
border-radius: 4px;
|
|
18
|
-
color: var(--d2l-color-fluorite);
|
|
19
|
-
height: 100px;
|
|
20
|
-
padding: 10px;
|
|
21
|
-
width: 300px;
|
|
22
|
-
}
|
|
23
|
-
`
|
|
24
|
-
];
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
render() {
|
|
28
|
-
return html`
|
|
29
|
-
<div class="d2l-demo-box d2l-skeletize">Bordered Box</div>
|
|
30
|
-
`;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
customElements.define('d2l-test-skeleton-box', SkeletonTestBox);
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import '../../colors/colors.js';
|
|
2
|
-
import '../../inputs/input-checkbox.js';
|
|
3
|
-
import { css, html, LitElement } from 'lit';
|
|
4
|
-
import { bodyCompactStyles } from '../../typography/styles.js';
|
|
5
|
-
import { SkeletonGroupMixin } from '../skeleton-group-mixin.js';
|
|
6
|
-
|
|
7
|
-
export class SkeletonTestContainer extends SkeletonGroupMixin(LitElement) {
|
|
8
|
-
|
|
9
|
-
static get styles() {
|
|
10
|
-
return [
|
|
11
|
-
super.styles,
|
|
12
|
-
bodyCompactStyles,
|
|
13
|
-
css`
|
|
14
|
-
:host {
|
|
15
|
-
display: block;
|
|
16
|
-
}
|
|
17
|
-
.d2l-demo-box {
|
|
18
|
-
background-color: var(--d2l-color-fluorite-plus-2);
|
|
19
|
-
border: 3px solid var(--d2l-color-fluorite);
|
|
20
|
-
border-radius: 4px;
|
|
21
|
-
color: var(--d2l-color-fluorite);
|
|
22
|
-
height: 100px;
|
|
23
|
-
padding: 10px;
|
|
24
|
-
width: 300px;
|
|
25
|
-
}
|
|
26
|
-
span {
|
|
27
|
-
display: block;
|
|
28
|
-
margin: 10px 0;
|
|
29
|
-
}
|
|
30
|
-
`
|
|
31
|
-
];
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
render() {
|
|
35
|
-
return html`
|
|
36
|
-
<div class="d2l-demo-box d2l-skeletize-container">
|
|
37
|
-
<div class="d2l-skeletize">Container with Skeletons Inside</div>
|
|
38
|
-
<span class="d2l-body-compact">No skeleton</span>
|
|
39
|
-
<d2l-input-checkbox checked label="Skeleton"></d2l-input-checkbox>
|
|
40
|
-
</div>
|
|
41
|
-
`;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
customElements.define('d2l-test-skeleton-container', SkeletonTestContainer);
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { css, html, LitElement } from 'lit';
|
|
2
|
-
import { heading1Styles, heading2Styles, heading3Styles, heading4Styles } from '../../typography/styles.js';
|
|
3
|
-
import { SkeletonMixin } from '../skeleton-mixin.js';
|
|
4
|
-
|
|
5
|
-
export class SkeletonTestHeading extends SkeletonMixin(LitElement) {
|
|
6
|
-
|
|
7
|
-
static get properties() {
|
|
8
|
-
return {
|
|
9
|
-
level: { type: Number },
|
|
10
|
-
width: { type: Number }
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
static get styles() {
|
|
15
|
-
return [
|
|
16
|
-
super.styles,
|
|
17
|
-
heading1Styles,
|
|
18
|
-
heading2Styles,
|
|
19
|
-
heading3Styles,
|
|
20
|
-
heading4Styles,
|
|
21
|
-
css`
|
|
22
|
-
:host {
|
|
23
|
-
display: block;
|
|
24
|
-
}
|
|
25
|
-
`
|
|
26
|
-
];
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
render() {
|
|
30
|
-
const width = this.width !== undefined ? ` d2l-skeletize-${this.width}` : '';
|
|
31
|
-
if (this.level === 1) {
|
|
32
|
-
return html`<h1 class="d2l-heading-1 d2l-skeletize${width}"><slot></slot></h1>`;
|
|
33
|
-
} else if (this.level === 2) {
|
|
34
|
-
return html`<h2 class="d2l-heading-2 d2l-skeletize${width}"><slot></slot></h2>`;
|
|
35
|
-
} else if (this.level === 3) {
|
|
36
|
-
return html`<h3 class="d2l-heading-3 d2l-skeletize${width}"><slot></slot></h3>`;
|
|
37
|
-
} else if (this.level === 4) {
|
|
38
|
-
return html`<h4 class="d2l-heading-4 d2l-skeletize${width}"><slot></slot></h4>`;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
customElements.define('d2l-test-skeleton-heading', SkeletonTestHeading);
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { css, html, LitElement } from 'lit';
|
|
2
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
3
|
-
import { linkStyles } from '../../link/link.js';
|
|
4
|
-
import { SkeletonMixin } from '../skeleton-mixin.js';
|
|
5
|
-
|
|
6
|
-
export class SkeletonTestLink extends SkeletonMixin(LitElement) {
|
|
7
|
-
|
|
8
|
-
static get properties() {
|
|
9
|
-
return {
|
|
10
|
-
type: { type: String },
|
|
11
|
-
width: { type: Number }
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
static get styles() {
|
|
16
|
-
return [
|
|
17
|
-
super.styles,
|
|
18
|
-
linkStyles,
|
|
19
|
-
css`
|
|
20
|
-
:host {
|
|
21
|
-
display: block;
|
|
22
|
-
}
|
|
23
|
-
`
|
|
24
|
-
];
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
constructor() {
|
|
28
|
-
super();
|
|
29
|
-
this.type = 'normal';
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
render() {
|
|
33
|
-
const classes = {
|
|
34
|
-
'd2l-link': true,
|
|
35
|
-
'd2l-link-main': this.type === 'main',
|
|
36
|
-
'd2l-link-small': this.type === 'small',
|
|
37
|
-
'd2l-skeletize': true
|
|
38
|
-
};
|
|
39
|
-
const widthSkeletonSize = `d2l-skeletize-${this.width}`;
|
|
40
|
-
if (this.width !== undefined) {
|
|
41
|
-
classes[widthSkeletonSize] = true;
|
|
42
|
-
}
|
|
43
|
-
return html`<a href="https://d2l.com" class="${classMap(classes)}">Link (${this.type})</a>`;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
customElements.define('d2l-test-skeleton-link', SkeletonTestLink);
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles, labelStyles } from '../../typography/styles.js';
|
|
2
|
-
import { css, html, LitElement } from 'lit';
|
|
3
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
4
|
-
import { SkeletonMixin } from '../skeleton-mixin.js';
|
|
5
|
-
|
|
6
|
-
export class SkeletonTestParagraph extends SkeletonMixin(LitElement) {
|
|
7
|
-
|
|
8
|
-
static get properties() {
|
|
9
|
-
return {
|
|
10
|
-
lines: { type: Number },
|
|
11
|
-
type: { type: String }
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
static get styles() {
|
|
16
|
-
return [
|
|
17
|
-
super.styles,
|
|
18
|
-
bodyStandardStyles,
|
|
19
|
-
bodyCompactStyles,
|
|
20
|
-
bodySmallStyles,
|
|
21
|
-
labelStyles,
|
|
22
|
-
css`
|
|
23
|
-
:host {
|
|
24
|
-
display: block;
|
|
25
|
-
}
|
|
26
|
-
`
|
|
27
|
-
];
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
constructor() {
|
|
31
|
-
super();
|
|
32
|
-
this.type = 'standard';
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
render() {
|
|
36
|
-
const classes = {
|
|
37
|
-
'd2l-body-standard': this.type === 'standard',
|
|
38
|
-
'd2l-body-compact': this.type === 'compact',
|
|
39
|
-
'd2l-body-small': this.type === 'small',
|
|
40
|
-
'd2l-label-text': this.type === 'label',
|
|
41
|
-
'd2l-skeletize': this.lines !== 2 && this.lines !== 3 && this.lines !== 5,
|
|
42
|
-
'd2l-skeletize-paragraph-2': this.lines === 2,
|
|
43
|
-
'd2l-skeletize-paragraph-3': this.lines === 3,
|
|
44
|
-
'd2l-skeletize-paragraph-5': this.lines === 5
|
|
45
|
-
};
|
|
46
|
-
if (this.lines) {
|
|
47
|
-
return html`<p class="${classMap(classes)}">${this.type} ${this.lines}-line</p>`;
|
|
48
|
-
} else {
|
|
49
|
-
return html`<span class="${classMap(classes)}">${this.type}</span>`;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
customElements.define('d2l-test-skeleton-paragraph', SkeletonTestParagraph);
|